test(select): initial select tests

Author: thejackshelton

apps/website/e2e/example.spec.ts

@@ -0,0 +1,63 @@
+import { test, expect, Locator, Page } from '@playwright/test';
+
+export function selectTestDriver<T extends DriverLocator>(locator: T) {
+  const getRoot = () => {
+    return locator.getByRole('combobox');
+  };
+
+  return {
+    ...locator,
+    locator,
+    getRoot,
+    getListbox() {
+      return getRoot().getByRole('listbox');
+    },
+    getTrigger() {
+      return getRoot().getByRole('button');
+    },
+    // get all options
+    getOptions() {
+      return getRoot().locator('[role="option"]');
+    },
+  };
+}
+
+export type DriverLocator = Locator | Page;
+
+// Just to make sure we're on the right docs page.
+test(`GIVEN a new page
+      WHEN navigating to the select page in the docs
+      THEN the h1 text should be "Select"`, async ({ page }) => {
+  await page.goto('/docs/headless/select');
+
+  expect(await page.locator('h1').innerText()).toContain('Select');
+});
+
+test(`GIVEN a basic select
+  WHEN clicking on the trigger
+  THEN open up the listbox`, async ({ page }) => {
+  await page.goto('/docs/headless/select');
+
+  const testDriver = selectTestDriver(page.getByTestId('select-hero-test'));
+
+  const { getListbox, getTrigger } = testDriver;
+
+  await getTrigger().click();
+
+  await expect(getListbox()).toBeVisible();
+});
+
+test(`GIVEN a basic select
+  WHEN focusing the trigger and hitting enter
+  THEN open up the listbox`, async ({ page }) => {
+  await page.goto('/docs/headless/select');
+
+  const testDriver = selectTestDriver(page.getByTestId('select-hero-test'));
+
+  const { getListbox, getTrigger } = testDriver;
+
+  await getTrigger().focus();
+  await page.keyboard.press('Enter');
+
+  await expect(getListbox()).toBeVisible();
+});

apps/website/e2e/select.spec.ts

@@ -37,15 +37,15 @@ export default defineConfig({
       use: { ...devices['Desktop Chrome'] },
     },
 
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
 
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
 
     // Uncomment for mobile browsers support
     /* {

apps/website/playwright.config.ts

@@ -1,33 +1,21 @@
-import { $, component$, useSignal, useTask$ } from '@builder.io/qwik';
+import { component$, useSignal } from '@builder.io/qwik';
 import { Select, SelectListbox, SelectOption, SelectTrigger } from '@qwik-ui/headless';
 
 export default component$(() => {
-  const mockUsers = ['Tim', 'Ryan', 'Jim'];
-  const moreUsers = ['Carla', 'Rachel', 'Monica', 'Jessie', 'Abby'];
-
-  const usersSig = useSignal<string[]>([]);
-
-  useTask$(async () => {
-    usersSig.value = mockUsers;
-  });
-
-  const handleClick$ = $(() => {
-    usersSig.value = [...usersSig.value, ...moreUsers];
-  });
+  const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
 
   return (
-    <div>
-      <Select>
-        <SelectTrigger>Trigger</SelectTrigger>
-        <SelectListbox style={{ padding: '0px', margin: '0px', listStyle: 'none' }}>
-          <SelectOption disabled>My option</SelectOption>
-          {usersSig.value.map((user) => (
-            <SelectOption key={user}>{user}</SelectOption>
-          ))}
-        </SelectListbox>
-      </Select>
-      {/* somehow this adds more js on page load? / wakes up the framework? */}
-      <button onClick$={handleClick$}>Add more!</button>
-    </div>
+    <Select>
+      <SelectTrigger>Trigger</SelectTrigger>
+      <SelectListbox
+        class="hidden"
+        style={{ padding: '0px', margin: '0px', listStyle: 'none' }}
+      >
+        <SelectOption disabled>My option</SelectOption>
+        {usersSig.value.map((user) => (
+          <SelectOption key={user}>{user}</SelectOption>
+        ))}
+      </SelectListbox>
+    </Select>
   );
 });

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

@@ -10,7 +10,9 @@ import { statusByComponent } from '~/_state/component-statuses';
 
 This element is used to create a drop-down list, it's often used in a form, to collect user input.
 
-<Showcase name="hero" />
+<div data-testid="select-hero-test">
+  <Showcase name="hero" />
+</div>
 
 ## Building blocks
 

apps/website/src/routes/docs/headless/select/index.mdx

@@ -26,5 +26,5 @@
       "path": "./tsconfig.spec.json"
     }
   ],
-  "include": ["src"]
+  "include": ["src", "e2e/select.spec.ts"]
 }

apps/website/tsconfig.json

@@ -61,7 +61,7 @@
     "@nx/vite": "17.1.3",
     "@nx/workspace": "17.1.3",
     "@oddbird/popover-polyfill": "0.3.7",
-    "@playwright/test": "^1.36.0",
+    "@playwright/test": "^1.41.2",
     "@storybook/addon-a11y": "7.6.0",
     "@storybook/addon-coverage": "^0.0.9",
     "@storybook/addon-essentials": "7.6.0",
@@ -104,7 +104,7 @@
     "eslint": "^8.48.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-cypress": "^2.14.0",
-    "eslint-plugin-playwright": "^0.15.3",
+    "eslint-plugin-playwright": "^1.3.0",
     "eslint-plugin-qwik": "^1.4.0",
     "eslint-plugin-storybook": "^0.6.13",
     "focus-trap": "7.5.3",

package.json

@@ -1,16 +1,20 @@
-import { component$, Slot, type PropsOf, useContext } from '@builder.io/qwik';
+import { component$, useStyles$, Slot, type PropsOf, useContext } from '@builder.io/qwik';
 import SelectContextId from './select-context';
+import styles from './select.css?inline';
 
 type SelectListboxProps = PropsOf<'ul'>;
 
 export const SelectListbox = component$<SelectListboxProps>((props) => {
+  useStyles$(styles);
+
   const context = useContext(SelectContextId);
   return (
     <ul
       {...props}
-      hidden={!context.isListboxOpenSig.value}
+      role="listbox"
       ref={context.listboxRef}
-      data-state={context.isListboxOpenSig.value ? 'open' : 'closed'}
+      data-open={context.isListboxOpenSig.value ? '' : undefined}
+      data-closed={!context.isListboxOpenSig.value ? '' : undefined}
     >
       <Slot />
     </ul>

packages/kit-headless/src/components/select/select-listbox.tsx

@@ -56,9 +56,9 @@ export const SelectOption = component$<SelectOptionProps>((props) => {
       ref={optionRef}
       tabIndex={-1}
       aria-selected={isSelected}
-      data-selected={isSelected}
-      data-highlighted={isHighlighted}
-      data-disabled={disabled}
+      data-selected={isSelected ? '' : undefined}
+      data-highlighted={isHighlighted ? '' : undefined}
+      data-disabled={disabled ? '' : undefined}
       role="option"
     >
       <Slot />

packages/kit-headless/src/components/select/select-option.tsx

@@ -166,7 +166,8 @@ export const SelectTrigger = component$<SelectTriggerProps>((props) => {
       onClick$={[handleClick$, props.onClick$]}
       aria-expanded={context.isListboxOpenSig.value}
       onKeyDown$={[handleKeyDownSync$, handleKeyDown$, props.onKeyDown$]}
-      data-state={context.isListboxOpenSig.value ? 'open' : 'closed'}
+      data-open={context.isListboxOpenSig.value ? '' : undefined}
+      data-closed={!context.isListboxOpenSig.value ? '' : undefined}
       class="bg-slate-800 p-2 text-white"
     >
       <Slot />