feat: migrate Counter to Spartan.ng UI primitives (closes #189)

apps/counter-remote/vite.config.ts

@@ -32,7 +32,7 @@ const sharedDeps = {
     requiredVersion: angVer,
   },
   '@angular/router': { singleton: true, requiredVersion: angVer },
-  // Angular CDK/Material sub-paths — import:false so the remote uses the host's
+  // Angular CDK sub-paths — import:false so the remote uses the host's
   // already-evaluated module instance rather than loading a second copy from its
   // own dev server. A top-level `import * as __mfLocalShare` in the generated
   // loadShare virtual module would otherwise cause Angular to register the same
@@ -77,92 +77,6 @@ const sharedDeps = {
     requiredVersion: cdkMatVer,
     import: false,
   },
-  // Angular Material sub-paths — same import:false reason as CDK above
-  '@angular/material/badge': {
-    singleton: true,
-    requiredVersion: cdkMatVer,
-    import: false,
-  },
-  '@angular/material/bottom-sheet': {
-    singleton: true,
-    requiredVersion: cdkMatVer,
-    import: false,
-  },
-  '@angular/material/button': {
-    singleton: true,
-    requiredVersion: cdkMatVer,
-    import: false,
-  },
-  '@angular/material/checkbox': {
-    singleton: true,
-    requiredVersion: cdkMatVer,
-    import: false,
-  },
-  '@angular/material/core': {
-    singleton: true,
-    requiredVersion: cdkMatVer,
-    import: false,
-  },
-  '@angular/material/form-field': {
-    singleton: true,
-    requiredVersion: cdkMatVer,
-    import: false,
-  },
-  '@angular/material/divider': {
-    singleton: true,
-    requiredVersion: cdkMatVer,
-    import: false,
-  },
-  '@angular/material/icon': {
-    singleton: true,
-    requiredVersion: cdkMatVer,
-    import: false,
-  },
-  '@angular/material/input': {
-    singleton: true,
-    requiredVersion: cdkMatVer,
-    import: false,
-  },
-  '@angular/material/list': {
-    singleton: true,
-    requiredVersion: cdkMatVer,
-    import: false,
-  },
-  '@angular/material/paginator': {
-    singleton: true,
-    requiredVersion: cdkMatVer,
-    import: false,
-  },
-  '@angular/material/progress-spinner': {
-    singleton: true,
-    requiredVersion: cdkMatVer,
-    import: false,
-  },
-  '@angular/material/sidenav': {
-    singleton: true,
-    requiredVersion: cdkMatVer,
-    import: false,
-  },
-  '@angular/material/snack-bar': {
-    singleton: true,
-    requiredVersion: cdkMatVer,
-    import: false,
-  },
-  '@angular/material/table': {
-    singleton: true,
-    requiredVersion: cdkMatVer,
-    import: false,
-  },
-  '@angular/material/toolbar': {
-    singleton: true,
-    requiredVersion: cdkMatVer,
-    import: false,
-  },
-  '@angular/material/tooltip': {
-    singleton: true,
-    requiredVersion: cdkMatVer,
-    import: false,
-  },
   // NgRx - base signals shared (host provides, remote uses import:false).
   // @ngrx/signals/events is NOT shared - the federation plugin generates
   // buggy loadShare imports for sub-path modules. It's bundled directly.

apps/web-app-e2e/playwright.config.ts

@@ -23,6 +23,7 @@ export default defineConfig({
     baseURL,
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
   },
   /* Run your local dev server before starting the tests */
   webServer: [

apps/web-app-e2e/playwright.remote.config.ts

@@ -0,0 +1,52 @@
+import { defineConfig, devices } from '@playwright/test';
+import { nxE2EPreset } from '@nx/playwright/preset';
+
+/**
+ * Remote E2E config — runs tests against a deployed environment.
+ *
+ * Use to capture baselines from the Material (main) deployment,
+ * then compare against the Spartan (local) build.
+ *
+ * Workflow for visual regression:
+ *   1. Capture Material baselines from Azure:
+ *      BASE_URL=https://angularclinetcorengrxstarter.azurewebsites.net pnpm e2e:remote --update-snapshots
+ *
+ *   2. Run same tests against local Spartan build to compare:
+ *      pnpm e2e
+ *
+ *   3. Or capture Spartan baselines from a preview deployment:
+ *      BASE_URL=<preview-url> pnpm e2e:remote
+ *
+ *   4. Compare the two screenshot directories manually:
+ *      diff apps/web-app-e2e/screenshots-material/ apps/web-app-e2e/src/__screenshots__/
+ */
+const baseURL =
+  (process.env['BASE_URL'] as string | undefined) ||
+  'https://angularclinetcorengrxstarter.azurewebsites.net';
+
+export default defineConfig({
+  ...nxE2EPreset(__filename, { testDir: './src' }),
+
+  use: {
+    baseURL,
+    trace: 'on-first-retry',
+    // Screenshots from the remote Material deployment go to a separate dir
+    // so they don't clash with local Spartan baselines.
+    screenshot: 'only-on-failure',
+  },
+
+  // Remote testing: no local dev servers to spin up.
+  // Override the webServer to be empty (the preset may set one).
+  webServer: [],
+
+  // Store Material baselines in a separate directory so they survive
+  // branch switches and don't conflict with local Spartan baselines.
+  snapshotDir: './screenshots-material',
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});

apps/web-app-e2e/project.json

@@ -5,5 +5,13 @@
   "sourceRoot": "apps/web-app-e2e/src",
   "implicitDependencies": ["web-app"],
   "// targets": "to see all targets run: nx show project web-app-e2e --web",
-  "targets": {}
+  "targets": {
+    "e2e-remote": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "apps/web-app-e2e",
+        "command": "npx playwright test --config playwright.remote.config.ts"
+      }
+    }
+  }
 }

apps/web-app-e2e/src/content.e2e.spec.ts

@@ -158,4 +158,18 @@ test.describe('Content page', () => {
     const mermaidLink = toc.getByRole('link', { name: /mermaid diagrams/i });
     await expect(mermaidLink).toHaveClass(/font-medium/, { timeout: 3_000 });
   });
+
+  test(
+    'visual snapshot',
+    { tag: '@visual', timeout: 60_000 },
+    async ({ page }) => {
+      await page.goto('/content');
+      await expect(page.getByTestId('app-content')).toBeVisible({
+        timeout: 60_000,
+      });
+      // Wait for mermaid SVGs to render
+      await page.locator('.mermaid svg').first().waitFor({ timeout: 10_000 });
+      await expect(page).toHaveScreenshot('content.png', { fullPage: true });
+    },
+  );
 });

apps/web-app-e2e/src/counter.e2e.spec.ts

@@ -22,4 +22,10 @@ test.describe('Counter Feature E2E', () => {
     await decrementButton.click();
     await expect(countLocator).toHaveText(String(initial));
   });
+
+  test('visual snapshot', { tag: '@visual' }, async ({ page }) => {
+    await page.goto('/mfe-counter');
+    await expect(page.locator('[data-testid="lib-counter"]')).toBeVisible();
+    await expect(page).toHaveScreenshot('counter.png', { fullPage: true });
+  });
 });

apps/web-app-e2e/src/debug.e2e.spec.ts

@@ -0,0 +1,91 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Debug page', () => {
+  test('should load the debug page', async ({ page }) => {
+    await page.goto('/debug');
+
+    await expect(
+      page.getByRole('heading', { name: /debug tools/i }),
+    ).toBeVisible();
+  });
+
+  test('should display notification action buttons', async ({ page }) => {
+    await page.goto('/debug');
+
+    await expect(page.getByRole('button', { name: /add info/i })).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: /add error/i }),
+    ).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: /add sw-update/i }),
+    ).toBeVisible();
+  });
+
+  test('should add an info notification when clicking Add info', async ({
+    page,
+  }) => {
+    await page.goto('/debug');
+
+    // Click the "Add info" button
+    await page.getByRole('button', { name: /add info/i }).click();
+
+    // The notification bell badge should update
+    const bell = page.locator('[data-testid="lib-notification-bell"]');
+    await expect(bell.locator('button')).toHaveAttribute(
+      'aria-label',
+      '1 unread notification',
+      { timeout: 3000 },
+    );
+  });
+
+  test('should add multiple notifications', async ({ page }) => {
+    await page.goto('/debug');
+
+    // Add an info and an error notification
+    await page.getByRole('button', { name: /add info/i }).click();
+    await page.getByRole('button', { name: /add error/i }).click();
+
+    // Badge should show 2 unread
+    const bell = page.locator('[data-testid="lib-notification-bell"]');
+    await expect(bell.locator('button')).toHaveAttribute(
+      'aria-label',
+      '2 unread notifications',
+      { timeout: 3000 },
+    );
+
+    // Open the notification panel
+    await bell.locator('button').click();
+
+    const panel = page.locator('[data-testid="lib-notification-list"]');
+    await expect(panel).toBeVisible({ timeout: 5000 });
+    await expect(panel.locator('text=Info notification')).toBeVisible();
+    await expect(panel.locator('text=Something went wrong')).toBeVisible();
+  });
+
+  test('should clear all notifications', async ({ page }) => {
+    await page.goto('/debug');
+
+    // Add a couple of notifications
+    await page.getByRole('button', { name: /add info/i }).click();
+    await page.getByRole('button', { name: /add error/i }).click();
+
+    // Click "Clear all"
+    await page.getByRole('button', { name: /clear all/i }).click();
+
+    // Badge should disappear
+    const bell = page.locator('[data-testid="lib-notification-bell"]');
+    await expect(bell.locator('button')).toHaveAttribute(
+      'aria-label',
+      'Notifications',
+      { timeout: 3000 },
+    );
+  });
+
+  test('visual snapshot', { tag: '@visual' }, async ({ page }) => {
+    await page.goto('/debug');
+    await expect(
+      page.getByRole('heading', { name: /debug tools/i }),
+    ).toBeVisible();
+    await expect(page).toHaveScreenshot('debug.png', { fullPage: true });
+  });
+});

apps/web-app-e2e/src/home.e2e.spec.ts

@@ -22,4 +22,10 @@ test.describe('Home page', () => {
       page.getByRole('heading', { name: /nx · angular · \.net/i }),
     ).toBeVisible();
   });
+
+  test('visual snapshot', { tag: '@visual' }, async ({ page }) => {
+    await page.goto('/');
+    await expect(page.getByTestId('lib-home')).toBeVisible();
+    await expect(page).toHaveScreenshot('home.png', { fullPage: true });
+  });
 });

apps/web-app-e2e/src/login.e2e.spec.ts

@@ -41,4 +41,10 @@ test.describe('Login page', () => {
 
     await expect(page.getByRole('button', { name: /sign in/i })).toBeEnabled();
   });
+
+  test('visual snapshot', { tag: '@visual' }, async ({ page }) => {
+    await page.goto('/login');
+    await expect(page.getByTestId('lib-login')).toBeVisible();
+    await expect(page).toHaveScreenshot('login.png', { fullPage: true });
+  });
 });

apps/web-app-e2e/src/mfe-integration.e2e.spec.ts

@@ -15,4 +15,12 @@ test.describe('MFE Integration', () => {
 
     expect(errors).toHaveLength(0);
   });
+
+  test('visual snapshot', { tag: '@visual' }, async ({ page }) => {
+    await page.goto('/mfe-counter');
+    await expect(page.locator('[data-testid="lib-counter"]')).toBeVisible({
+      timeout: 15000,
+    });
+    await expect(page).toHaveScreenshot('mfe-counter.png', { fullPage: true });
+  });
 });

apps/web-app-e2e/src/navigation.e2e.spec.ts

@@ -34,6 +34,14 @@ test.describe('Navigation', () => {
       await expect(page).toHaveURL(/\/$/);
       await expect(page.getByTestId('lib-home')).toBeVisible();
     });
+
+    test('visual snapshot (desktop)', { tag: '@visual' }, async ({ page }) => {
+      await page.goto('/');
+      await expect(page.getByTestId('lib-home')).toBeVisible();
+      await expect(page).toHaveScreenshot('navigation-desktop.png', {
+        fullPage: true,
+      });
+    });
   });
 
   test.describe('sidenav (mobile)', () => {
@@ -64,5 +72,29 @@ test.describe('Navigation', () => {
 
       await expect(page).toHaveURL(/\/mfe-counter/);
     });
+
+    test('visual snapshot (mobile)', { tag: '@visual' }, async ({ page }) => {
+      await page.goto('/');
+      await expect(page.getByTestId('lib-home')).toBeVisible();
+      await expect(page).toHaveScreenshot('navigation-mobile.png', {
+        fullPage: true,
+      });
+    });
+
+    test(
+      'visual snapshot (mobile sidenav open)',
+      { tag: '@visual' },
+      async ({ page }) => {
+        await page.goto('/');
+        await page.getByRole('button', { name: 'Toggle side menu' }).click();
+        await expect(page.getByTestId('lib-sidenav')).toBeVisible();
+        await expect(page).toHaveScreenshot(
+          'navigation-mobile-sidenav-open.png',
+          {
+            fullPage: true,
+          },
+        );
+      },
+    );
   });
 });