Run storybook tests with playwright

.github/workflows/_end-to-end.yml

@@ -0,0 +1,12 @@
+name: End-to-end tests
+on:
+  workflow_call:
+jobs:
+  end-to-end:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Build Docker to run tests
+        run: |
+          docker build --platform linux/amd64 --tag 'playwright' . -f ./e2e/Dockerfile --target test

.github/workflows/run-tests.yml

@@ -10,6 +10,5 @@ jobs:
   run-tests:
     uses: ./.github/workflows/_validate.yml
   e2e:
-    needs: [run-tests]
-    uses: ./.github/workflows/_playwright.yml
+    uses: ./.github/workflows/_end-to-end.yml
     secrets: inherit

.husky/pre-commit

@@ -1,3 +1,12 @@
+#!/bin/sh
+
 pnpm lint
 pnpm format
-pnpm test
+pnpm test
+
+#command -v docker >/dev/null 2>&1 || { echo "Docker is not installed, skipping Docker commands." >&2; exit 0; }
+#
+#docker build --tag 'playwright' . -f ./e2e/Dockerfile --target test
+#
+## It's important to exit with 0 status code if the commit should not be aborted
+#exit 0

documents/adr/0010-end-to-end-testing.md

@@ -1,6 +1,6 @@
-# 10. End to end testing
+# 10. End-to-end and interaction testing
 
-Date: 2024-07-01
+Date: 2024-07-08
 
 ## Status
 
@@ -11,8 +11,8 @@ Pending
 Certain tests are not able to be performed with Storybook and JSDOM (e.g. drag-and-drop). The ability to replicate more complex user interactions in the test suite through an actual browser can provide this feature.
 
 ## Decision
-The end-to-end tests should be used sparingly since they are slower to run than the ones through JSDOM. Storybook still should be the primary mechanism for testing, and the Playwright tests will round out what isn't possible there. 
+The end-to-end tests should be used sparingly since they are slower to run than the ones through JSDOM. We will Playwright in CI/CD for the comprehensive tests and JSDOM during development for speed. Storybook still should be the primary mechanism for UI testing, and during CI/CD, the interaction tests will be run in Playwright using a docker container against the build. 
 
 ## Consequences
 
-The deployed application will include Playwright tests in the e2e package.
+There are some tests that will be end-to-end that run against the built application, while the interaction tests will run against the built Storybook. The end-to-end tests will be in the e2e directory, and docker will be used to make the test environment consistent.

e2e/Dockerfile

@@ -6,15 +6,18 @@ ENV NODE_ENV=test
 WORKDIR /srv/apps/atj-platform
 COPY . .
 RUN corepack enable
-RUN pnpm install --filter=@atj/spotlight --frozen-lockfile
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
 
 FROM base as test
 ENV E2E_ENDPOINT=http://localhost:9090
+ENV CI=true
 RUN npm install -g serve
 EXPOSE 9090
-RUN pnpm build --filter=@atj/spotlight
+EXPOSE 9191
+RUN pnpm build --filter=@atj/spotlight --filter=@atj/design
 WORKDIR ./e2e
-RUN serve ../apps/spotlight/dist -p 9090 & sleep 5; pnpm playwright test;
+RUN serve ../apps/spotlight/dist -p 9090 -L & sleep 5; pnpm playwright test;
+RUN serve ../packages/design/storybook-static -p 9191 -L & sleep 5; pnpm --filter=end-to-end-tests test:storybook --url http://localhost:9191 --config-dir ../packages/design/.storybook/ --browsers firefox chromium
 
 FROM base as serve
 ENV E2E_ENDPOINT=http://localhost:4321

e2e/README.md

@@ -31,4 +31,11 @@ To debug and follow the flow of a test in a browser, you can run:
 ```bash
 # run from this directory
 export E2E_ENDPOINT=http://localhost:4321; pnpm playwright test --ui-port=8080 --ui-host=0.0.0.0
+```
+
+## Storybook Test Runner
+This takes all the stories and runs them with Playwright. Start your dev server and then run:
+
+```bash
+pnpm --filter=end-to-end-tests test:storybook --url http://localhost:9009 --config-dir ../packages/design/.storybook/ --browsers firefox chromium
 ```

e2e/package.json

@@ -3,10 +3,15 @@
   "version": "1.0.0",
   "scripts": {
     "dev": "tsc -w",
+    "test:storybook": "test-storybook",
     "test": "export E2E_ENDPOINT=http://localhost:4321; pnpm playwright test --ui-port=8080 --ui-host=0.0.0.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.43.1",
+    "@storybook/test-runner": "^0.16.0",
     "path-to-regexp": "^7.0.0"
+  },
+  "dependencies": {
+    "@atj/common": "workspace:*"
   }
 }

e2e/src/constants.ts

@@ -1 +1,2 @@
 export const BASE_URL = process.env.E2E_ENDPOINT;
+export const STORYBOOK_PATH = 'design/iframe.html?id=';

e2e/src/create.spec.ts

@@ -5,11 +5,18 @@ import { pathToRegexp } from 'path-to-regexp';
 
 
 const createNewForm = async (page: Page) => {
-  console.log(`${BASE_URL}/${GuidedFormCreation.getUrl()}`);
   await page.goto(`${BASE_URL}/${GuidedFormCreation.getUrl()}`);
   await page.getByRole('button', { name: 'Create New' }).click();
 }
 
+const addQuestions = async (page: Page) => {
+  const menuButton = page.getByRole('button', { name: 'Question' });
+  await menuButton.click();
+  await page.getByRole('button', { name: 'Short Answer' }).click();
+  await menuButton.click();
+  await page.getByRole('button', { name: 'Radio Buttons' }).click();
+}
+
 test('Create form from scratch', async ({ page }) => {
   const regexp = pathToRegexp(Create.path);
   await createNewForm(page);
@@ -30,16 +37,11 @@ test('Create form from scratch', async ({ page }) => {
 
 test('Add questions', async ({ page }) => {
   await createNewForm(page);
-
-  const menuButton = page.getByRole('button', { name: 'Question' });
-  await menuButton.click();
-  await page.getByRole('button', { name: 'Short Answer' }).click();
-  await menuButton.click();
-  await page.getByRole('button', { name: 'Radio Buttons' }).click();
+  await addQuestions(page);
 
   // Create locators for both elements
   const fields = page.locator('.usa-label');
-  const element1 = fields.filter({ hasText: 'Field Label' })
+  const element1 = fields.filter({ hasText: 'Field label' });
   const element2 = fields.filter({ hasText: 'Radio group label' });
   expect(element1.first()).toBeTruthy();
   expect(element2.first()).toBeTruthy();
@@ -50,4 +52,25 @@ test('Add questions', async ({ page }) => {
   const element2Index = htmlContent.indexOf((await element2.textContent() as string));
   expect(element1Index).toBeLessThan(element2Index);
 
+});
+
+test('Drag-and-drop via mouse interaction', async ({ page }) => {
+  await createNewForm(page);
+  await addQuestions(page);
+
+  const handle = page.locator('[aria-describedby="DndDescribedBy-0"]').first();
+  await handle.hover();
+  await page.mouse.down();
+  const nextElement = page.locator('.draggable-list-item-wrapper').nth(1);
+  await nextElement.hover();
+  await page.mouse.up();
+
+  // Initiating a reorder clones the element. We want to await the count to go back to 1 to
+  // signify the invocation of the drag event has completed and the update has rendered.
+  await expect(page.getByText('Field label')).toHaveCount(1, {
+    timeout: 10000
+  });
+
+  await expect(page.locator('.draggable-list-item-wrapper').nth(1)).toContainText('Field label');
+
 });

e2e/src/my-forms.spec.ts

@@ -5,4 +5,4 @@ import { BASE_URL } from './constants';
 test('Go to MyForms', async ({ page }) => {
   const response = await page.goto(`${BASE_URL}/${MyForms.getUrl()}`);
   expect(response?.ok()).toBe(true);
-});
+});

packages/design/src/FormManager/FormEdit/components/RadioGroupPatternEdit.stories.tsx

@@ -39,14 +39,11 @@ export const Basic: StoryObj<typeof FormEdit> = {
       canvas.getByText(message.patterns.radioGroup.displayName)
     );
     const input = canvas.getByLabelText(message.patterns.radioGroup.fieldLabel);
-    const optionId = canvas.getByLabelText('Option 1 id');
     const optionLabel = canvas.getByLabelText('Option 1 label');
 
     // Enter new text for the field
     await userEvent.clear(input);
     await userEvent.type(input, updatedLabel);
-    await userEvent.clear(optionId);
-    await userEvent.type(optionId, 'yes');
     await userEvent.clear(optionLabel);
     await userEvent.type(optionLabel, 'Yes');
 
@@ -59,7 +56,7 @@ export const Basic: StoryObj<typeof FormEdit> = {
     form?.requestSubmit();
 
     await expect(await canvas.findByText(updatedLabel)).toBeInTheDocument();
-    await expect(await canvas.findByText('Yes')).toBeInTheDocument();
+    await expect(await canvas.findByText('Yes')).toBeVisible();
   },
 };
 
@@ -94,7 +91,6 @@ export const Error: StoryObj<typeof CheckboxPatternEdit> = {
     );
 
     const input = canvas.getByLabelText(message.patterns.radioGroup.fieldLabel);
-    const optionId = canvas.getByLabelText('Option 1 id');
     const optionLabel = canvas.getByLabelText('Option 1 label');
 
     // Clear input, remove focus, and wait for error
@@ -113,13 +109,6 @@ export const Error: StoryObj<typeof CheckboxPatternEdit> = {
     */
     await userEvent.type(input, message.patterns.radioGroup.fieldLabel);
 
-    await userEvent.clear(optionId);
-    optionId.blur();
-
-    await expect(
-      await canvas.findByText('Invalid Option ID')
-    ).toBeInTheDocument();
-
     await userEvent.clear(optionLabel);
     optionLabel.blur();