test

packages/storybook8/package.json

@@ -17,7 +17,8 @@
     "prettier:check": "prettier --no-error-on-unmatched-pattern --check --config ../../.prettierrc --ignore-path=../../.prettierignore \"**/*.js\" \"**/*.jsx\" \"**/*.ts\" \"**/*.tsx\"",
     "lint": "node ./scripts/lint.mjs",
     "lint:fix": "rushx lint --fix --",
-    "lint:quiet": "rushx lint -- --quiet"
+    "lint:quiet": "rushx lint -- --quiet",
+    "test:stories": "npx playwright test -c test/playwright.config.ts"
   },
   "license": "MIT",
   "dependencies": {
@@ -116,6 +117,10 @@
     "ts-loader": "^8.0.12",
     "ts-node": "^10.9.2",
     "typescript": "5.4.5",
-    "webpack": "5.95.0"
+    "webpack": "5.95.0",
+    "@playwright/test": "~1.50.1",
+    "dotenv": "^10.0.0",
+    "express": "^5.0.1",
+    "path": "0.12.7"
   }
 }

packages/storybook8/test/playwright.config.ts

@@ -0,0 +1,47 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  // Look for test files in the "tests" directory, relative to this configuration file.
+  testDir: './tests',
+
+  // Run all tests 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 ? 2 : 0,
+
+  // Opt out of parallel tests on CI.
+  workers: process.env.CI ? 1 : undefined,
+
+  // Reporter to use
+  reporter: 'html',
+
+  timeout: 300000, // Increase global timeout to 5 minutes (300,000ms)
+
+  use: {
+    // Base URL to use in actions like `await page.goto('/')`.
+    baseURL: 'http://127.0.0.1:6006',
+
+    // Collect trace when retrying the failed test.
+    trace: 'on-first-retry',
+  },
+  // Configure projects for major browsers.
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  // Run your local dev server before starting the tests.
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:6006',
+  //   reuseExistingServer: !process.env.CI
+  // }
+});

packages/storybook8/test/tests/storybook.spec.ts

@@ -0,0 +1,37 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { expect, Locator, test } from '@playwright/test';
+import { loadStory, getStoryIds } from '../utils.js';
+
+test('Take screenshots of all stories', async ({ page }) => {
+  const storyIds = await getStoryIds(page);
+
+  for (const storyId of storyIds) {
+    await loadStory(page, `docs/${storyId}`);
+    await page.waitForSelector('#root');
+    await page.getByRole('button', { name: 'Go full screen [⌥ F]' }).click();
+    await expect(page).toHaveScreenshot(`${storyId}.png`);
+    // const hrefs = await page.locator("//div[contains(@class, 'sbdocs')").getAttribute('href');
+    // get all the elements that have a href attribute and id not in storyids
+    // const elements = await page.locator("//a[starts-with(@class, 'sbdocs')]");
+    const elements = await page.locator('a');
+    console.log(elements);
+    const linkCount = await elements.count();
+    console.log(linkCount);
+    if (linkCount === 0) {
+      console.log('No links found');
+    } else {
+      for (let i = 0; i < linkCount; i++) {
+        // //get the text of the quote
+        // const link = await elements.nth(i).getAttribute('href');
+        // //log it to the console
+        // console.log(`Quote: ${link}`);
+        // await page.goto(link, { waitUntil: 'networkidle' });
+        await elements.nth(i).click();
+        await page.waitForSelector('#root');
+        await expect(page).toHaveScreenshot(`${storyId}-${elements.innerText}.png`);
+      }
+    }
+  }
+});

packages/storybook8/test/utils.ts

@@ -0,0 +1,37 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { Page } from '@playwright/test';
+
+/**
+ * Load a specific Storybook story for Playwright testing.
+ * @param page - The Playwright page object.
+ * @param storyId - The ID of the story to load.
+ */
+export async function loadStory(page: Page, storyId: string) {
+  const url = `https://azure.github.io/communication-ui-library/?path=/${storyId}`;
+  console.log(url);
+  await page.goto(url, { waitUntil: 'networkidle' });
+  await page.waitForSelector('#root');
+}
+
+/**
+ * Get all Storybook story IDs.
+ * @param page - The Playwright page object.
+ * @returns An array of story IDs.
+ */
+export async function getStoryIds(page: Page): Promise<string[]> {
+  await page.goto('https://azure.github.io/communication-ui-library/?path=/docs/overview--docs');
+  await page.waitForSelector('#root');
+  const storyIds = await page.evaluate(() => {
+    const elements = document.querySelectorAll('a');
+    const ids: string[] = [];
+    for (const element of elements) {
+      if (element.getAttribute('id') !== null) {
+        ids.push(element.getAttribute('id') ?? '');
+      }
+    }
+    return ids;
+  });
+  return storyIds;
+}

packages/storybook8/tsconfig.json

@@ -2,6 +2,15 @@
   "baseUrl": ".",
   "extends": "../../common/config/tsc/tsconfig.json",
   "compilerOptions": {
+    "module": "ESNext",
+    "target": "ESNext",
+    "moduleResolution": "Node",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "rootDir": "./",
     "outDir": "./dist",
     "paths": {
       "@azure/communication-react": ["../communication-react/src"],
@@ -16,6 +25,6 @@
     }
   },
   "typeRoots": ["./node_modules/@types"],
-  "include": ["stories/**/*"],
+  "include": ["stories/**/*","src", "test"],
   "exclude": ["dist", "node_modules"]
 }