test: Alert component [update-screenshots]

Author: yamamporiya

.github/workflows/main.yml

@@ -2,7 +2,7 @@ name: CI/CD Pipeline
 
 on:
   push:
-    branches: [main, 'feature/*']
+    branches: [main, 'feature/*', 'tests/*']
   pull_request:
     branches: [main]
 
@@ -233,17 +233,21 @@ jobs:
 
       - name: Serve Storybook & Run E2E tests
         run: |
+          # Set up directory structure for serving with /design-system/ base path
+          mkdir -p storybook-serve/design-system
+          cp -r packages/design-system/storybook-static/* storybook-serve/design-system/
+
           # Start HTTP server for Storybook
-          npx http-server packages/design-system/storybook-static -p 6006 &
+          npx http-server storybook-serve -p 6006 &
 
           # Wait for server to be ready
-          timeout 30 bash -c 'until curl -f http://localhost:6006/iframe.html; do sleep 1; done'
+          timeout 30 bash -c 'until curl -f http://localhost:6006/design-system/iframe.html; do sleep 1; done'
 
           # Run E2E tests
           pnpm --filter=@wallarm/design-system exec playwright test --shard=${{ matrix.shard }}/3 --project=chromium
         env:
           CI: true
-          STORYBOOK_URL: http://localhost:6006
+          STORYBOOK_URL: http://localhost:6006/design-system
 
       - name: Upload test results
         uses: actions/upload-artifact@v4
@@ -308,11 +312,15 @@ jobs:
 
       - name: Update screenshots
         run: |
+          # Set up directory structure for serving with /design-system/ base path
+          mkdir -p storybook-serve/design-system
+          cp -r packages/design-system/storybook-static/* storybook-serve/design-system/
+
           # Start HTTP server for Storybook
-          npx http-server packages/design-system/storybook-static -p 6006 &
+          npx http-server storybook-serve -p 6006 &
 
           # Wait for server to be ready
-          timeout 30 bash -c 'until curl -f http://localhost:6006/iframe.html; do sleep 1; done'
+          timeout 30 bash -c 'until curl -f http://localhost:6006/design-system/iframe.html; do sleep 1; done'
 
           # Update screenshots
           pnpm --filter=@wallarm/design-system exec playwright test \
@@ -321,7 +329,7 @@ jobs:
             --update-snapshots
         env:
           CI: false
-          STORYBOOK_URL: http://localhost:6006
+          STORYBOOK_URL: http://localhost:6006/design-system
 
       - name: Upload updated screenshots
         uses: actions/upload-artifact@v4

apps/playground/src/routeTree.gen.ts

@@ -8,52 +8,52 @@
 // You should NOT make any changes in this file as it will be overwritten.
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
-import { Route as rootRouteImport } from './routes/__root';
-import { Route as IndexRouteImport } from './routes/index';
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
 
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => rootRouteImport,
-} as any);
+} as any)
 
 export interface FileRoutesByFullPath {
-  '/': typeof IndexRoute;
+  '/': typeof IndexRoute
 }
 export interface FileRoutesByTo {
-  '/': typeof IndexRoute;
+  '/': typeof IndexRoute
 }
 export interface FileRoutesById {
-  __root__: typeof rootRouteImport;
-  '/': typeof IndexRoute;
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
 }
 export interface FileRouteTypes {
-  fileRoutesByFullPath: FileRoutesByFullPath;
-  fullPaths: '/';
-  fileRoutesByTo: FileRoutesByTo;
-  to: '/';
-  id: '__root__' | '/';
-  fileRoutesById: FileRoutesById;
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/'
+  id: '__root__' | '/'
+  fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
-  IndexRoute: typeof IndexRoute;
+  IndexRoute: typeof IndexRoute
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
     '/': {
-      id: '/';
-      path: '/';
-      fullPath: '/';
-      preLoaderRoute: typeof IndexRouteImport;
-      parentRoute: typeof rootRouteImport;
-    };
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
   }
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
-};
+}
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
-  ._addFileTypes<FileRouteTypes>();
+  ._addFileTypes<FileRouteTypes>()

packages/configs/playwright-config/package.json

@@ -9,7 +9,8 @@
   },
   "exports": {
     "./base": "./dist/base.js",
-    "./docker": "./dist/docker.js"
+    "./docker": "./dist/docker.js",
+    "./storybook": "./dist/storybook.js"
   },
   "dependencies": {
     "@playwright/test": "catalog:"

packages/configs/playwright-config/src/base.ts

@@ -5,6 +5,7 @@ export const baseConfig = defineConfig({
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   workers: process.env.CI ? 1 : undefined,
+  timeout: 30000,
   reporter: 'html',
   use: {
     trace: 'on-first-retry',
@@ -32,6 +33,8 @@ export const baseConfig = defineConfig({
       },
     },
   ],
+  snapshotPathTemplate:
+    '{testDir}/{testFileDir}/{testFileName}-snapshots/{testName}-{projectName}{ext}',
   expect: {
     toHaveScreenshot: { maxDiffPixelRatio: 0.2 },
   },

packages/configs/playwright-config/src/storybook.ts

@@ -0,0 +1,60 @@
+import type { Page } from '@playwright/test';
+
+function storyNameToId(name: string): string {
+  return name.replace(/\s+/g, '-').toLowerCase();
+}
+
+/**
+ * @example
+ * ```ts
+ * const alertStory = createStoryHelper('messaging-alert', [
+ *   'All Colors',
+ *   'Title Only',
+ *   'With Close Button',
+ * ] as const);
+ *
+ * await alertStory.goto(page, 'All Colors'); // → iframe.html?id=messaging-alert--all-colors
+ * ```
+ */
+export function createStoryHelper<const T extends readonly string[]>(
+  componentId: string,
+  storyNames: T,
+) {
+  type StoryName = T[number];
+
+  if (storyNames.length === 0) {
+    throw new Error(`createStoryHelper: storyNames cannot be empty`);
+  }
+
+  return {
+    url(storyName: StoryName): string {
+      const storyId = storyNameToId(storyName);
+      return `iframe.html?viewMode=story&id=${componentId}--${storyId}`;
+    },
+
+    async goto(page: Page, storyName: StoryName): Promise<void> {
+      const url = this.url(storyName);
+
+      await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 });
+
+      await page.waitForFunction(
+        () => {
+          const root = document.getElementById('storybook-root');
+          return root && root.children.length > 0;
+        },
+        { timeout: 30000 },
+      );
+
+      await page.evaluate(() => document.fonts.ready);
+      await page.waitForTimeout(300);
+    },
+
+    get componentId(): string {
+      return componentId;
+    },
+
+    get stories(): readonly StoryName[] {
+      return storyNames;
+    },
+  };
+}

packages/configs/playwright-config/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "@wallarm/typescript-config/nodejs.json",
   "compilerOptions": {
-    "outDir": "dist"
+    "outDir": "dist",
+    "lib": ["ES2023", "DOM"]
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules", "dist"]

packages/design-system/nginx.conf

@@ -39,6 +39,12 @@ server {
         try_files $uri =404;
     }
 
+    # GitHub Pages base path support for E2E tests
+    # Production build uses /design-system/ prefix for GitHub Pages deployment
+    location /design-system/ {
+        alias /usr/share/nginx/html/;
+    }
+
     # Main Storybook routes
     location / {
         try_files $uri $uri/ /index.html;

packages/design-system/playwright.config.docker.ts

@@ -2,6 +2,9 @@ import { defineConfig } from '@playwright/test';
 
 import { dockerConfig } from '@wallarm/playwright-config/docker';
 
+const DEFAULT_DOCKER_URL = 'http://host.docker.internal:6006';
+const baseURL = process.env.STORYBOOK_URL || DEFAULT_DOCKER_URL;
+
 export default defineConfig({
   ...dockerConfig,
   testDir: './src',
@@ -10,6 +13,6 @@ export default defineConfig({
   // UI-specific Docker configuration
   use: {
     ...dockerConfig.use,
-    baseURL: process.env.STORYBOOK_URL || 'http://host.docker.internal:6006',
+    baseURL,
   },
 });

packages/design-system/playwright.config.ts

@@ -2,12 +2,15 @@ import { defineConfig } from '@playwright/test';
 
 import { baseConfig } from '@wallarm/playwright-config/base';
 
+const DEFAULT_URL = 'http://localhost:6006';
+const baseURL = process.env.STORYBOOK_URL || DEFAULT_URL;
+
 export default defineConfig({
   ...baseConfig,
   testDir: './src',
   testMatch: '**/*.e2e.ts',
   use: {
     ...baseConfig.use,
-    baseURL: 'http://localhost:6006',
+    baseURL,
   },
 });