test: add storybook builder tests

Author: bashmish

.github/workflows/verify-storybook-builder.yml

@@ -0,0 +1,40 @@
+name: Verify Storybook Builder
+
+on: pull_request
+
+jobs:
+  verify-storybook-builder:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node 20
+        uses: actions/setup-node@v4
+        env:
+          FORCE_COLOR: 0
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Build packages
+        run: npm run build
+
+      - name: Symlink built packages binaries (e.g. "wds")
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run tests
+        run: npm run test:storybook-builder
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: packages/storybook-framework-web-components/playwright-report/
+          retention-days: 30

package-lock.json

@@ -31,9 +31,10 @@
     "search": "rocket search",
     "start": "rocket start",
     "start:build": "node packages/dev-server/dist/bin.js --root-dir _site --open",
-    "test": "npm run test:node && npm run test:browser",
+    "test": "npm run test:node && npm run test:browser && npm run test:storybook-builder",
     "test:browser": "npm run test:browser --workspaces --if-present",
     "test:node": "npm run test:node --workspaces --if-present",
+    "test:storybook-builder": "npm test --prefix ./packages/storybook-framework-web-components",
     "types": "wireit",
     "update": "npm run update:mjs-dts-entrypoints && npm run update:tsconfigs",
     "update-dependency": "node scripts/update-dependency.js",

package.json

@@ -0,0 +1,4 @@
+node_modules/
+test-results/
+playwright-report/
+storybook-build/

packages/storybook-framework-web-components/.gitignore

@@ -31,7 +31,13 @@
     "node": ">=16.0.0"
   },
   "scripts": {
-    "build": "tsc"
+    "build": "tsc",
+    "test": "npm run test:build && npm run test:ui:build && npm run test:ui:runtime",
+    "test:build": "storybook build -c ./tests/fixtures/all-in-one/.storybook -o ./tests/fixtures/all-in-one/storybook-build",
+    "test:start:build": "wds -r ./tests/fixtures/all-in-one/storybook-build -p 3000",
+    "test:start:runtime": "storybook dev -c ./tests/fixtures/all-in-one/.storybook -p 3000 --no-open",
+    "test:ui:build": "npx playwright test -c playwright.build.config.ts",
+    "test:ui:runtime": "npx playwright test -c playwright.runtime.config.ts"
   },
   "files": [
     "*.d.ts",
@@ -58,6 +64,12 @@
     "@web/storybook-builder": "^0.1.0"
   },
   "devDependencies": {
-    "@storybook/types": "^7.0.0"
+    "@playwright/test": "^1.22.2",
+    "@storybook/addon-essentials": "^7.0.0",
+    "@storybook/addon-interactions": "^7.0.0",
+    "@storybook/addon-links": "^7.0.0",
+    "@storybook/types": "^7.0.0",
+    "@web/dev-server": "^0.4.0",
+    "storybook": "^7.0.0"
   }
 }

packages/storybook-framework-web-components/package.json

@@ -0,0 +1,41 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* 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 ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: '',
+    url: 'http://127.0.0.1:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});

packages/storybook-framework-web-components/playwright.base.config.ts

@@ -0,0 +1,6 @@
+import baseConfig from './playwright.base.config.ts';
+
+// @ts-ignore
+baseConfig.webServer.command = 'npm run test:start:build';
+
+export default baseConfig;

packages/storybook-framework-web-components/playwright.build.config.ts

@@ -0,0 +1,6 @@
+import baseConfig from './playwright.base.config.ts';
+
+// @ts-ignore
+baseConfig.webServer.command = 'npm run test:start:runtime';
+
+export default baseConfig;

packages/storybook-framework-web-components/playwright.runtime.config.ts

@@ -0,0 +1,63 @@
+import { expect, test } from '@playwright/test';
+import { Manager } from './manager.js';
+import { Preview } from './preview.js';
+
+/** @type import('./manager.js').Manager */
+let manager;
+/** @type import('./preview.js').Preview */
+let preview;
+
+test.describe('all in one', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+    manager = new Manager(page);
+    preview = new Preview(page);
+  });
+
+  test('renders test story', async ({ page }) => {
+    await expect(page).toHaveTitle(/^Test \/ Stories - Test Story/);
+    expect(await preview.storyParent().innerHTML()).toContain('<div>Test Story works</div>');
+  });
+
+  test('renders core manager toolbar', async () => {
+    await expect(manager.toolbarItemByTitle('Remount component')).toBeVisible();
+    await expect(manager.toolbarItemByTitle('Zoom in')).toBeVisible();
+    await expect(manager.toolbarItemByTitle('Zoom out')).toBeVisible();
+    await expect(manager.toolbarItemByTitle('Reset zoom')).toBeVisible();
+  });
+
+  test('renders @storybook/addon-backgrounds toolbar', async () => {
+    await expect(manager.toolbarItemByTitle('Change the background of the preview')).toBeVisible();
+    await expect(manager.toolbarItemByTitle('Apply a grid to the preview')).toBeVisible();
+  });
+
+  test('renders @storybook/addon-viewport toolbar', async () => {
+    await expect(manager.toolbarItemByTitle('Change the size of the preview')).toBeVisible();
+  });
+
+  test('renders @storybook/addon-measure toolbar', async () => {
+    await expect(manager.toolbarItemByTitle('Enable measure')).toBeVisible();
+  });
+
+  test('renders @storybook/addon-outline toolbar', async () => {
+    await expect(manager.toolbarItemByTitle('Apply outlines to the preview')).toBeVisible();
+  });
+
+  test('renders @storybook/addon-controls panel', async () => {
+    const panelButton = manager.panelButtonByText('Controls');
+    await panelButton.click();
+    await expect(panelButton).toHaveClass(/tabbutton-active/);
+  });
+
+  test('renders @storybook/addon-actions panel', async () => {
+    const panelButton = manager.panelButtonByText('Actions');
+    await panelButton.click();
+    await expect(panelButton).toHaveClass(/tabbutton-active/);
+  });
+
+  test('renders @storybook/addon-interactions panel', async () => {
+    const panelButton = manager.panelButtonByText('Interactions');
+    await panelButton.click();
+    await expect(panelButton).toHaveClass(/tabbutton-active/);
+  });
+});

packages/storybook-framework-web-components/tests/all-in-one.spec.js

@@ -0,0 +1,13 @@
+/** @type { import('@web/storybook-framework-web-components').StorybookConfig } */
+const config = {
+  stories: ['../stories/**/*.stories.js'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-links',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@web/storybook-framework-web-components',
+  },
+};
+export default config;

packages/storybook-framework-web-components/tests/fixtures/all-in-one/.storybook/main.js

@@ -0,0 +1,7 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Test/Stories',
+};
+
+export const TestStory = () => html`<div>Test Story works</div>`;

packages/storybook-framework-web-components/tests/fixtures/all-in-one/stories/test.stories.js

@@ -0,0 +1,24 @@
+export class Manager {
+  /**
+   * @param {import('@playwright/test').Page} page
+   */
+  constructor(page) {
+    this.page = page;
+  }
+
+  /**
+   * @param {string} title
+   */
+  toolbarItemByTitle(title) {
+    return this.page.locator(`[title="${title}"]`);
+  }
+
+  /**
+   * @param {string} text
+   */
+  panelButtonByText(text) {
+    return this.page
+      .locator('[role="tablist"] button')
+      .filter({ hasText: new RegExp(`^${text}$`) });
+  }
+}

packages/storybook-framework-web-components/tests/manager.js

@@ -0,0 +1,16 @@
+export class Preview {
+  /**
+   * @param {import('@playwright/test').Page} page
+   */
+  constructor(page) {
+    this.page = page;
+  }
+
+  previewIframe() {
+    return this.page.frameLocator('#storybook-preview-iframe');
+  }
+
+  storyParent() {
+    return this.previewIframe().locator('#storybook-root > #root-inner');
+  }
+}