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

Added Popover test and select a11y test

Author: shairez

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();

apps/component-tests/src/routes/[kit]/[component]/[example]/[email protected] renamed to apps/component-tests/src/routes/[kit]/[component]/[example]/index.tsx

@@ -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: [

apps/component-tests/tailwind.config.cjs

@@ -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>

apps/website/src/routes/docs/headless/select/examples/hero.tsx

@@ -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": "[email protected]",
   "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": {}
+  }
 }

package.json

@@ -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.*/,
     },
 
     // {

packages/kit-headless/playwright.config.ts

@@ -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"]
       }
     }
   },

packages/kit-headless/project.json

@@ -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,
+  };
+}

packages/kit-headless/src/components/popover/popover.driver.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();
+  });
+});

packages/kit-headless/src/components/popover/popover.test.ts

@@ -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) => {