chore(components-angular, nextjs-integration): add general component e2e test suite

.github/workflows/e2e-tests.yaml

@@ -5,6 +5,7 @@ on:
       - 'packages/documentation/**'
       - 'packages/styles/**'
       - 'packages/components/**'
+      - 'packages/components-angular/**'
       - 'packages/internet-header/**'
       - 'packages/icons/**'
       - 'packages/tokens/tokensstudio-generated/tokens.json'

packages/components-angular/package.json

@@ -19,6 +19,7 @@
     "postbuild": "pnpm copy:styles:dist",
     "clean": "rimraf dist .angular",
     "e2e": "ng e2e --watch=false",
+    "e2e:ci": "xvfb-run -a ng e2e --watch=false",
     "e2e:watch": "ng e2e",
     "lint": "ng lint",
     "lint:fix": "ng lint --fix",

packages/components-angular/projects/consumer-app/cypress/e2e/components.cy.ts

@@ -1,24 +1,30 @@
-import * as Components from '@swisspost/design-system-components/dist';
+import { setupComponentErrorCapture, assertNoComponentErrors } from '../support/component-error-filter';
+import { componentNames } from '@swisspost/design-system-components/dist/component-names.json';
 
-const COMPONENT_TAG_NAMES = Object.keys(Components)
-  .filter(c => /^Post([A-Z][a-z]+)+$/.test(c))
-  .map(c => c.replace(/([a-z0–9])([A-Z])/g, '$1-$2').toLowerCase());
-
-describe('Components', () => {
+describe('components-angular (consumer-app)', () => {
   beforeEach(() => {
     cy.visit('/');
-    cy.window().then(win => {
-      cy.wrap(cy.spy(win.console, 'error')).as('consoleError');
+  });
+
+  it('components-angular: should contain all components', () => {
+    componentNames.forEach(componentName => {
+      cy.get(componentName).first().should('exist');
     });
   });
 
-  it('should not log any error', () => {
-    cy.get('@consoleError').should('not.have.been.called');
+  it('components-angular: all components should be hydrated', () => {
+    componentNames.forEach(componentName => {
+      cy.get(componentName).first().should('have.class', 'hydrated');
+    });
   });
 
-  COMPONENT_TAG_NAMES.forEach(tagName => {
-    it(`should contain <${tagName}>`, () => {
-      cy.get(tagName).should('exist');
+  it('components-angular: should not have console errors', () => {
+    const errorCapture = setupComponentErrorCapture(componentNames as string[]);
+
+    cy.visit('/', {
+      onBeforeLoad: errorCapture.onBeforeLoad
     });
+
+    assertNoComponentErrors(errorCapture.errors, componentNames as string[]);
   });
-});
+});

packages/components-angular/projects/consumer-app/cypress/support/component-error-filter.ts

@@ -0,0 +1,129 @@
+type CapturedError = {
+  message: string;
+  source: 'console' | 'error';
+  stack?: string;
+  timestamp: number;
+};
+
+/**
+ * Sets up error monitoring for specific components.
+ * Captures console.error and uncaught errors.
+ * 
+ * @param componentNames - Array of component names to monitor for errors
+ * @returns Object containing:
+ *   - errors: Live array of error messages (used by tests)
+ *   - onBeforeLoad: Function to set up error capture on window before app loads
+ */
+export function setupComponentErrorCapture(componentNames: string[]) {
+  const errors: string[] = []; // live array used by tests
+  const captured: CapturedError[] = [];
+
+  // Pre-compute lowercase names to avoid repeated lowercasing in the hot path
+  const lowerCaseComponentNames = componentNames.map(n => n.toLowerCase());
+
+  return {
+    errors,
+    captured,
+    onBeforeLoad
+  };
+
+  /**
+   * Sets up error listeners on the application window before it loads.
+   * Intercepts console.error calls and window error events.
+   * 
+   * @param win - Cypress AUT window object
+   */
+  function onBeforeLoad(win: Cypress.AUTWindow): void {
+    // Store original console.error to call it after capturing
+    const originalError = win.console.error.bind(win.console);
+
+    // Intercept console.error() calls from the application
+    cy.stub(win.console, 'error').callsFake((...args: any[]) => {
+      originalError(...args);
+      // Convert all arguments to strings and join them
+      const message = args.map(extractMessage).join(' ');
+      pushError(message, 'console');
+    });
+
+    // Capture uncaught exceptions and runtime errors from the page
+    win.addEventListener('error', (e: ErrorEvent) => {
+      const message = e.message || extractMessage(e.error);
+      const stack = e.error?.stack;
+      pushError(message, 'error', stack);
+    });
+  }
+
+  /**
+   * Adds an error to the captured errors array if it passes all filters.
+   * Applies relevance checking.
+   * 
+   * @param message - The error message to capture
+   * @param source - The source of the error ('console' or 'error')
+   * @param stack - Optional stack trace for the error
+   */
+  function pushError(message: string, source: CapturedError['source'], stack?: string): void {
+    // Skip errors unrelated to our components
+    if (!isRelevant(message)) return;
+
+    const entry: CapturedError = { message, source, stack, timestamp: Date.now() };
+    captured.push(entry);
+    errors.push(message);
+  }
+
+  /**
+   * Extracts a readable message from various error formats.
+   * Handles strings, Error objects, and other values gracefully.
+   * 
+   * @param arg - Error object, string, or any value to extract message from
+   * @returns Extracted error message as a string
+   */
+  function extractMessage(arg: unknown): string {
+    if (typeof arg === 'string') return arg;
+
+    // Handle Error-like objects
+    if (arg && typeof arg === 'object') {
+      if ('message' in arg && arg.message) {
+        return String(arg.message);
+      }
+      if ('stack' in arg && arg.stack) {
+        return String(arg.stack);
+      }
+    }
+
+    // Fallback: try to serialize or convert to string
+    try {
+      return JSON.stringify(arg);
+    } catch {
+      return String(arg);
+    }
+  }
+
+  /**
+   * Determines if an error message is relevant to the monitored components.
+   * An error is considered relevant if it mentions any of the component names.
+   * 
+   * @param message - Error message to check for component relevance
+   * @returns True if the error mentions a monitored component, false otherwise
+   */
+  function isRelevant(message: string): boolean {
+    const lower = message.toLowerCase();
+    return lowerCaseComponentNames.some(n => lower.includes(n));
+  }
+}
+
+/**
+ * Asserts that no component errors were captured during testing.
+ * Throws an error with detailed information if any errors were found.
+ * 
+ * @param errors - Array of error messages captured during test execution
+ * @param componentNames - Array of component names that were monitored
+ * @throws Error if any errors were captured, with formatted error details
+ */
+export function assertNoComponentErrors(errors: string[], componentNames: string[]): void {
+  cy.then(() => {
+    if (errors.length === 0) return;
+
+    const list = errors.map((m, i) => `${i + 1}. ${m}`).join('\n');
+    throw new Error(`Found ${errors.length} error(s) for [${componentNames.join(', ')}]:\n${list}`);
+  });
+}

packages/components-angular/projects/consumer-app/src/app/app.component.html

@@ -124,10 +124,10 @@ <h3>{{ section.title }}</h3>
 
 <div class="container">
   <post-breadcrumbs
-    home-url="/"
-    home-text="Home"
+    homeUrl="/"
+    homeText="Home"
     label="Breadcrumbs"
-    menu-label="More breadcrumb items"
+    menuLabel="More breadcrumb items"
   >
     <post-breadcrumb-item url="/section1">Section 1</post-breadcrumb-item>
     <post-breadcrumb-item url="/section2">Section 2</post-breadcrumb-item>

packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html

@@ -68,7 +68,7 @@ <h2>Post Menu</h2>
   <post-menu-trigger for="menu-one">
     <button class="btn btn-primary">Menu button</button>
   </post-menu-trigger>
-  <post-menu id="menu-one">
+  <post-menu id="menu-one" label="Menu">
     <post-menu-item>
       <button>Example 1</button>
     </post-menu-item>
@@ -90,7 +90,7 @@ <h2>Post Popover</h2>
     class="palette palette-accent"
     id="popover-one"
     placement="top"
-    close-button-caption="Close"
+    closeButtonCaption="Close"
     ><div id="popoverContent">
       <h2 class="h6">Optional title</h2>
       <p class="mb-0">
@@ -107,7 +107,7 @@ <h2>Post Popovercontainer</h2>
 
 <div class="my-24">
   <h2>Post Rating</h2>
-  <post-rating></post-rating>
+  <post-rating label="Rating"></post-rating>
 </div>
 
 <div class="my-24">

packages/nextjs-integration/playwright.config.ts

@@ -17,14 +17,12 @@ export default defineConfig({
   testDir: './playwright/tests',
   outputDir: './playwright/results',
   snapshotDir: './playwright/snapshots',
-  /* Run tests in files in parallel */
-  fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
   retries: process.env.CI ? 1 : 0,
   /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
+  workers: process.env.CI ? 2 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: process.env.CI ? 'github' : 'list',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */

packages/nextjs-integration/playwright/support/component-error-filter.ts

@@ -0,0 +1,125 @@
+import { Page, ConsoleMessage } from '@playwright/test';
+
+const IGNORE_ERROR_PATTERNS = [
+  /^hydration failed because/i,
+  /^server rendered html didn't match/i,
+  /^there was an error while hydrating/i,
+  /^hydration error/i,
+  /^a tree hydrated but/i,
+];
+
+type CapturedError = {
+  message: string;
+  source: 'console';
+  stack?: string;
+  timestamp: number;
+};
+
+/**
+ * Sets up error monitoring for specific components.
+ * Captures console.error messages.
+ * Excludes known hydration errors (SSR-specific).
+ * 
+ * @param page - Playwright page object to monitor
+ * @param componentNames - Array of component names to monitor for errors
+ * @returns Object containing:
+ *   - errors: Live array of error messages (used by tests)
+ *   - captured: Array of detailed error objects with metadata
+ *   - dispose: Function to clean up event listeners
+ */
+export function setupComponentErrorCapture(page: Page, componentNames: string[]) {
+  const errors: string[] = []; // live array used by tests
+  const captured: CapturedError[] = [];
+
+  // Pre-compute lowercase names to avoid repeated lowercasing in the hot path
+  const lowerCaseComponentNames = componentNames.map(n => n.toLowerCase());
+
+  page.on('console', onConsole);
+
+  return { errors, dispose, captured } as const;
+
+  /**
+   * Event handler for console messages from the page.
+   * Captures console.error messages and passes them to pushError.
+   * 
+   * @param msg - Playwright ConsoleMessage object
+   */
+  function onConsole(msg: ConsoleMessage): void {
+    try {
+      if (msg.type() === 'error') {
+        pushError(msg.text(), 'console');
+      }
+    } catch {
+      // ignore handler errors to prevent test interference
+    }
+  }
+
+  /**
+   * Adds an error to the captured errors array if it passes all filters.
+   * Applies relevance checking and ignore pattern filtering.
+   * 
+   * @param message - The error message to capture
+   * @param source - The source of the error ('console')
+   * @param stack - Optional stack trace for the error
+   */
+  function pushError(message: string, source: CapturedError['source'], stack?: string): void {
+    // Skip hydration errors and errors unrelated to our components
+    if (isIgnoredError(message) || !isRelevant(message)) return;
+
+    const entry: CapturedError = { message, source, stack, timestamp: Date.now() };
+    captured.push(entry);
+    errors.push(message);
+  }
+
+  /**
+   * Checks if an error message matches known patterns that should be ignored.
+   * Currently filters out hydration-related errors and other non-critical messages.
+   * 
+   * @param text - Error message to check against ignore patterns
+   * @returns True if the error should be ignored, false otherwise
+   */
+  function isIgnoredError(text: string): boolean {
+    // Check if error message matches any known hydration/non-critical patterns
+    return IGNORE_ERROR_PATTERNS.some(pattern => pattern.test(text));
+  }
+
+  /**
+   * Determines if an error message is relevant to the monitored components.
+   * An error is considered relevant if it mentions any of the component names.
+   * 
+   * @param message - Error message to check for component relevance
+   * @returns True if the error mentions a monitored component, false otherwise
+   */
+  function isRelevant(message: string): boolean {
+    const lower = message.toLowerCase();
+    return lowerCaseComponentNames.some(n => lower.includes(n));
+  }
+
+  /**
+   * Removes event listeners and cleans up resources.
+   * Should be called after tests complete to prevent memory leaks.
+   * Safe to call multiple times.
+   */
+  function dispose(): void {
+    try {
+      page.off('console', onConsole);
+    } catch {
+      // best-effort teardown - don't throw during cleanup
+    }
+  }
+}
+
+/**
+ * Asserts that no component errors were captured during testing.
+ * Throws an error with detailed information if any errors were found.
+ * 
+ * @param errors - Array of error messages captured during test execution
+ * @param componentNames - Array of component names that were monitored
+ * @throws Error if any errors were captured, with formatted error details
+ */
+export function assertNoComponentErrors(errors: string[], componentNames: string[]): void {
+  if (errors.length === 0) return;
+
+  const list = errors.map((m, i) => `${i + 1}. ${m}`).join('\n');
+  throw new Error(`Found ${errors.length} error(s) for [${componentNames.join(', ')}]:\n${list}`);
+}

packages/nextjs-integration/playwright/tests/csr.spec.ts

@@ -6,10 +6,10 @@ test.describe('CSR compatibility', () => {
     await page.goto('/csr');
   });
 
-  test('should contain every component tag at least once', async ({ page }) => {
+  test('all components should be hydrated', async ({ page }) => {
     for (const componentName of componentNames) {
-      const component = page.locator(componentName).first();
-      await expect(component).toHaveCount(1);
+      const component = page.locator(`${componentName}[data-hydrated]`).first();
+      await expect(component).toBeAttached();
     }
   });