Merge pull request #655 from qwikifiers/pr-popover-tests

shairez · web-flow · commit b49df2d91333 · 2024-03-20T03:01:10.000+02:00
Added Popover test and select a11y test
diff --git a/apps/component-tests/src/components/showcase-test/component-imports.ts b/apps/component-tests/src/components/showcase-test/component-imports.ts
@@ -15,20 +15,20 @@ function createMetaGlobComponents() {
     },
   );
 
-  const newThing: Record<string, unknown> = {};
+  const componentsMap: Record<string, unknown> = {};
 
   for (const key in metaGlobComponents) {
     const component = metaGlobComponents[key];
 
     if (component) {
       const componentName = key.split('routes/docs/')[1];
       if (componentName) {
-        newThing[componentName] = component;
+        componentsMap[componentName] = component;
       }
     }
   }
 
-  return newThing;
+  return componentsMap;
 }
 
 export const metaGlobComponents = createMetaGlobComponents();
diff --git a/apps/component-tests/src/routes/[kit]/[component]/[example]/index.tsx b/apps/component-tests/src/routes/[kit]/[component]/[example]/index.tsx
diff --git a/apps/component-tests/tailwind.config.cjs b/apps/component-tests/tailwind.config.cjs
@@ -6,7 +6,7 @@ const plugin = require('tailwindcss/plugin');
 module.exports = {
   content: [
     join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}'),
-    join(__dirname, '../../packages/kit-tailwind/src/**/*.{js,ts,jsx,tsx,mdx}'),
+    join(__dirname, '../website/src/**/*.{js,ts,jsx,tsx,mdx}'),
     join(__dirname, '../../packages/kit-styled/src/**/*.{js,ts,jsx,tsx,mdx}'),
   ],
   plugins: [
diff --git a/apps/website/src/routes/docs/headless/select/examples/hero.tsx b/apps/website/src/routes/docs/headless/select/examples/hero.tsx
@@ -1,9 +1,9 @@
 import { component$, useStyles$ } from '@builder.io/qwik';
 import {
   Select,
-  SelectPopover,
   SelectListbox,
   SelectOption,
+  SelectPopover,
   SelectTrigger,
   SelectValue,
 } from '@qwik-ui/headless';
@@ -14,7 +14,7 @@ export default component$(() => {
   const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
 
   return (
-    <Select class="select">
+    <Select class="select" aria-label="hero">
       <SelectTrigger class="select-trigger">
         <SelectValue placeholder="Select an option" />
       </SelectTrigger>
diff --git a/package.json b/package.json
@@ -32,12 +32,15 @@
     "story.headless": "nx storybook headless",
     "test.cli": "nx test cli",
     "test.headless": "nx component-test headless",
+    "test.visual.headless": "nx visual-test headless",
     "test.pw.headless": "nx e2e headless",
+    "test.pw.headless.ci": "nx e2e headless",
     "test.headless.ci": "nx component-test-ci headless",
     "test.utils": "nx test utils"
   },
   "packageManager": "pnpm@8.7.0",
   "devDependencies": {
+    "@axe-core/playwright": "4.8.5",
     "@builder.io/qwik": "^1.4.0",
     "@builder.io/qwik-city": "^1.4.0",
     "@builder.io/qwik-react": "0.5.3",
@@ -217,6 +220,5 @@
   ],
   "nx": {
     "includedScripts": []
-  },
-  "dependencies": {}
+  }
 }
diff --git a/packages/kit-headless/playwright.config.ts b/packages/kit-headless/playwright.config.ts
@@ -36,8 +36,15 @@ export default defineConfig({
   },
   projects: [
     {
-      name: 'chromium',
+      name: 'logic',
       use: { ...devices['Desktop Chrome'] },
+      grepInvert: /@Visual.*/,
+    },
+
+    {
+      name: 'visual',
+      use: { ...devices['Desktop Chrome'] },
+      grep: /@Visual.*/,
     },
 
     // {
diff --git a/packages/kit-headless/project.json b/packages/kit-headless/project.json
@@ -84,7 +84,16 @@
       "executor": "@nx/playwright:playwright",
       "outputs": ["{workspaceRoot}/dist/.playwright/packages/kit-headless"],
       "options": {
-        "config": "packages/kit-headless/playwright.config.ts"
+        "config": "packages/kit-headless/playwright.config.ts",
+        "project": ["logic"]
+      }
+    },
+    "visual-test": {
+      "executor": "@nx/playwright:playwright",
+      "outputs": ["{workspaceRoot}/dist/.playwright/packages/kit-headless"],
+      "options": {
+        "config": "packages/kit-headless/playwright.config.ts",
+        "project": ["visual"]
       }
     }
   },
diff --git a/packages/kit-headless/src/components/popover/popover.driver.ts b/packages/kit-headless/src/components/popover/popover.driver.ts
@@ -0,0 +1,20 @@
+import { type Locator, type Page } from '@playwright/test';
+
+export type DriverLocator = Locator | Page;
+
+export function createTestDriver<T extends DriverLocator>(rootLocator: T) {
+  const getPopover = () => {
+    return rootLocator.locator('[popover]');
+  };
+
+  const getTrigger = () => {
+    return rootLocator.locator('[popovertarget]');
+  };
+
+  return {
+    ...rootLocator,
+    locator: rootLocator,
+    getPopover,
+    getTrigger,
+  };
+}
diff --git a/packages/kit-headless/src/components/popover/popover.test.ts b/packages/kit-headless/src/components/popover/popover.test.ts
@@ -0,0 +1,34 @@
+import { expect, test, type Page } from '@playwright/test';
+import { createTestDriver } from './popover.driver';
+
+async function setup(page: Page, exampleName: string) {
+  await page.goto(`/headless/popover/${exampleName}`);
+
+  const driver = createTestDriver(page);
+
+  return {
+    driver,
+  };
+}
+
+test('@Visual diff', async ({ page }) => {
+  const { driver: d } = await setup(page, 'hero');
+  await expect(page).toHaveScreenshot('closed popover.png');
+
+  await d.getTrigger().click();
+
+  await expect(page).toHaveScreenshot('opened popover.png');
+});
+
+test.describe('Mouse Behavior', () => {
+  test(`GIVEN a popover
+        WHEN clicking on the trigger
+        THEN the popover should be opened `, async ({ page }) => {
+    const { driver: d } = await setup(page, 'hero');
+
+    await expect(d.getPopover()).toBeHidden();
+    await d.getTrigger().click();
+
+    await expect(d.getPopover()).toBeVisible();
+  });
+});
diff --git a/packages/kit-headless/src/components/select/select-trigger.tsx b/packages/kit-headless/src/components/select/select-trigger.tsx
@@ -1,7 +1,7 @@
-import { component$, type PropsOf, useContext, sync$, $, Slot } from '@builder.io/qwik';
+import { $, Slot, component$, sync$, useContext, type PropsOf } from '@builder.io/qwik';
 import SelectContextId from './select-context';
-import { getNextEnabledOptionIndex, getPrevEnabledOptionIndex } from './utils';
 import { useTypeahead } from './use-select';
+import { getNextEnabledOptionIndex, getPrevEnabledOptionIndex } from './utils';
 
 type SelectTriggerProps = PropsOf<'button'>;
 export const SelectTrigger = component$<SelectTriggerProps>((props) => {
diff --git a/packages/kit-headless/src/components/select/select.test.ts b/packages/kit-headless/src/components/select/select.test.ts
@@ -1,5 +1,7 @@
+import AxeBuilder from '@axe-core/playwright';
 import { expect, test, type Page } from '@playwright/test';
 import { createTestDriver } from './select.driver';
+
 async function setup(page: Page, exampleName: string) {
   await page.goto(`/headless/select/${exampleName}`);
 
@@ -123,7 +125,7 @@ test.describe('Mouse Behavior', () => {
   // });
 
   test(`GIVEN an open hero select
-        WHEN clikcking on the group label
+        WHEN clicking on the group label
         THEN the listbox should remain open`, async ({ page }) => {
     const { getRoot, openListbox, getListbox } = await setup(page, 'group');
 
@@ -229,7 +231,7 @@ test.describe('Keyboard Behavior', () => {
   test.describe('data-highlighted navigation', () => {
     test(`GIVEN a hero select
         WHEN pressing the down arrow key
-        THEN open up the listbox
+        THEN the listbox should be opened
         AND the first option should have data-highlighted`, async ({ page }) => {
       const { getTrigger, getListbox, getOptionAt } = await setup(page, 'hero');
 
@@ -366,10 +368,9 @@ test.describe('Keyboard Behavior', () => {
   });
 
   test.describe('selecting options', () => {
-    test(`GIVEN an open hero select
-          WHEN an option has data-highlighted
-          AND the Enter key is pressed
-          THEN the listbox should be closed and aria-expanded false`, async ({
+    test(`GIVEN an opened hero select with the first option highlighted
+          WHEN the Enter key is pressed
+          THEN the listbox should be closed and aria-expanded should be false`, async ({
       page,
     }) => {
       const { getTrigger, getListbox, getOptionAt, openListbox } = await setup(
@@ -491,13 +492,14 @@ test.describe('Keyboard Behavior', () => {
       );
 
       // get initial selected value
-      const firstItemValue = await getHiddenOptionAt(0).textContent();
+      // const firstItemValue = await getHiddenOptionAt(0).textContent();
       await getTrigger().focus();
       await getTrigger().press('ArrowRight');
+      await expect(getValueElement()).toHaveText('Tim');
       await getTrigger().press('ArrowRight');
 
       await getTrigger().press('ArrowLeft');
-      expect(await getValueElement()).toHaveText(firstItemValue!);
+      await expect(getValueElement()).toHaveText('Tim');
       await expect(getHiddenOptionAt(0)).toHaveAttribute('aria-selected', 'true');
       await expect(getHiddenOptionAt(0)).toHaveAttribute('data-highlighted');
     });
@@ -1002,7 +1004,26 @@ test.describe('Props', () => {
   });
 });
 
+/** TODO: add docs telling people how to add an aria-label to the root component. (accessible name) */
 test.describe('A11y', () => {
+  test('Axe Validation Test', async ({ page }) => {
+    const { openListbox } = await setup(page, 'hero');
+
+    const initialResults = await new AxeBuilder({ page })
+      .include('[role="combobox"]')
+      .analyze();
+
+    expect(initialResults.violations).toEqual([]);
+
+    await openListbox('click');
+
+    const afterClickResults = await new AxeBuilder({ page })
+      .include('[role="combobox"]')
+      .analyze();
+
+    expect(afterClickResults.violations).toEqual([]);
+  });
+
   test(`GIVEN a select with a group
         WHEN the user adds a new group
         THEN the group should have an aria-labelledby attribute
diff --git a/packages/kit-headless/src/components/select/select.tsx b/packages/kit-headless/src/components/select/select.tsx
@@ -1,19 +1,18 @@
 import {
-  component$,
+  PropsOf,
+  Signal,
   Slot,
-  useSignal,
+  component$,
+  useComputed$,
   useContextProvider,
+  useId,
+  useSignal,
   useTask$,
-  useComputed$,
   type QRL,
-  useId,
-  PropsOf,
-  Signal,
 } from '@builder.io/qwik';
-import { type SelectContext } from './select-context';
-import SelectContextId from './select-context';
-import { Opt } from './select-inline';
 import { isBrowser } from '@builder.io/qwik/build';
+import SelectContextId, { type SelectContext } from './select-context';
+import { Opt } from './select-inline';
 import { getActiveDescendant } from './utils';
 
 export type InternalSelectProps = {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -15,20 +15,20 @@ function createMetaGlobComponents() {`
`15`	`15`	`},`
`16`	`16`	`);`
`17`	`17`
`18`		`- const newThing: Record<string, unknown> = {};`
	`18`	`+ const componentsMap: Record<string, unknown> = {};`
`19`	`19`
`20`	`20`	`for (const key in metaGlobComponents) {`
`21`	`21`	`const component = metaGlobComponents[key];`
`22`	`22`
`23`	`23`	`if (component) {`
`24`	`24`	`const componentName = key.split('routes/docs/')[1];`
`25`	`25`	`if (componentName) {`
`26`		`- newThing[componentName] = component;`
	`26`	`+ componentsMap[componentName] = component;`
`27`	`27`	`}`
`28`	`28`	`}`
`29`	`29`	`}`
`30`	`30`
`31`		`- return newThing;`
	`31`	`+ return componentsMap;`
`32`	`32`	`}`
`33`	`33`
`34`	`34`	`export const metaGlobComponents = createMetaGlobComponents();`