test(select): show docs select tests

Author: thejackshelton

apps/website/e2e/select.spec.ts

@@ -16,7 +16,7 @@ const baseURL = process.env['BASE_URL'] || 'http://localhost:5173';
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  ...nxE2EPreset(__filename, { testDir: './e2e' }),
+  ...nxE2EPreset(__filename, { testDir: './src' }),
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     baseURL,

apps/website/playwright.config.ts

@@ -110,7 +110,7 @@ Currently, the component testing integration for Qwik & Playwright is in develop
 
 #### Getting started w/ testing
 
-Here's an example way of getting a testid of the `Hero` select docs example, without affecting any visible markup.
+Here's an example way of getting a testid of the `Hero` select docs example in `index.mdx`, without affecting any visible markup.
 
 ```tsx
 <div data-testid="select-hero-test">
@@ -121,6 +121,10 @@ Here's an example way of getting a testid of the `Hero` select docs example, wit
 Then, we get our testDriver, you can think of it as reusable code we use throughout the test. For example, in the Select component we constantly grab the listbox, trigger, etc.
 
 ```tsx
+import { Locator, Page } from '@playwright/test';
+
+export type DriverLocator = Locator | Page;
+
 export function selectTestDriver<T extends DriverLocator>(locator: T) {
   const getRoot = () => {
     return locator.getByRole('combobox');
@@ -136,49 +140,64 @@ export function selectTestDriver<T extends DriverLocator>(locator: T) {
     getTrigger() {
       return getRoot().getByRole('button');
     },
+    // get all options
+    getOptions() {
+      return getRoot().getByRole('option').all();
+    },
   };
 }
 ```
 
 Now we can write some tests:
 
 ```tsx
-test(`GIVEN a basic select
-  WHEN clicking on the trigger
-  THEN open up the listbox`, async ({ page }) => {
+import { test, expect } from '@playwright/test';
+import { selectTestDriver } from './select.driver';
+
+test.beforeEach(async ({ page }) => {
   await page.goto('/docs/headless/select');
+});
 
-  const testDriver = selectTestDriver(page.getByTestId('select-hero-test'));
+test.describe('critical functionality', () => {
+  test(`GIVEN a basic select
+        WHEN clicking on the trigger
+        THEN open up the listbox
+        AND aria-expanded should be true`, async ({ page }) => {
+    const testDriver = selectTestDriver(page.getByTestId('select-hero-test'));
 
-  const { getListbox, getTrigger } = testDriver;
+    const { getListbox, getTrigger } = testDriver;
 
-  await getTrigger().click();
+    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');
+    await expect(getListbox()).toBeVisible();
+    await expect(getTrigger()).toHaveAttribute('aria-expanded', 'true');
+  });
 
-  const testDriver = selectTestDriver(page.getByTestId('select-hero-test'));
+  test(`GIVEN a basic select
+        WHEN focusing the trigger and hitting enter
+        THEN open up the listbox
+        AND aria-expanded should be true`, async ({ page }) => {
+    const testDriver = selectTestDriver(page.getByTestId('select-hero-test'));
 
-  const { getListbox, getTrigger } = testDriver;
+    const { getListbox, getTrigger } = testDriver;
 
-  await getTrigger().focus();
-  await page.keyboard.press('Enter');
+    await getTrigger().focus();
+    await page.keyboard.press('Enter');
 
-  await expect(getListbox()).toBeVisible();
+    await expect(getListbox()).toBeVisible();
+    await expect(getTrigger()).toHaveAttribute('aria-expanded', 'true');
+  });
 });
 ```
 
-To run the tests, use the `nx e2e website` command. You can also do `--ui` to open the UI mode (which is pretty awesome!)
+To run the tests, use the `pnpm playwright` (only in my branch) command, or the `nx e2e website` longform. You can also do `--ui` to open the UI mode (which is pretty awesome!)
 
-> This example is in `spec.select.tsx` in the e2e folder of the website.
+> This example is in `spec.select.tsx` in the `src/components/select` folder of the website.
 
 Once we've added a failing test with what we expect, we can now go ahead and implement the feature for that!
 
+Heads up, I (Jack) am also relatively new to playwright myself 😅. I'm guessing there is a way to not need the testDriver to be consumed on each test. Feel free to experiment!
+
 ## Docs
 
 We use [MDX](https://mdxjs.com/docs/what-is-mdx/) for interactive markdown.

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

@@ -0,0 +1,25 @@
+import { Locator, Page } from '@playwright/test';
+
+export type DriverLocator = Locator | Page;
+
+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().getByRole('option').all();
+    },
+  };
+}

apps/website/src/routes/docs/headless/select/select.driver.ts

@@ -0,0 +1,37 @@
+import { test, expect } from '@playwright/test';
+import { selectTestDriver } from './select.driver';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/docs/headless/select');
+});
+
+test.describe('critical functionality', () => {
+  test(`GIVEN a basic select
+        WHEN clicking on the trigger
+        THEN open up the listbox
+        AND aria-expanded should be true`, async ({ page }) => {
+    const testDriver = selectTestDriver(page.getByTestId('select-hero-test'));
+
+    const { getListbox, getTrigger } = testDriver;
+
+    await getTrigger().click();
+
+    await expect(getListbox()).toBeVisible();
+    await expect(getTrigger()).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  test(`GIVEN a basic select
+        WHEN focusing the trigger and hitting enter
+        THEN open up the listbox
+        AND aria-expanded should be true`, async ({ page }) => {
+    const testDriver = selectTestDriver(page.getByTestId('select-hero-test'));
+
+    const { getListbox, getTrigger } = testDriver;
+
+    await getTrigger().focus();
+    await page.keyboard.press('Enter');
+
+    await expect(getListbox()).toBeVisible();
+    await expect(getTrigger()).toHaveAttribute('aria-expanded', 'true');
+  });
+});

apps/website/src/routes/docs/headless/select/select.spec.ts

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

apps/website/tsconfig.json

@@ -15,6 +15,7 @@
     "changeset": "changeset",
     "changeset.version": "changeset version && pnpm install --no-frozen-lockfile && git add --all",
     "dev": "nx serve website",
+    "playwright": "nx e2e website",
     "format.fix": "pretty-quick --staged",
     "link.dist": "cd dist/packages/kit-headless && pnpm link --global",
     "lint": "nx affected:lint",

package.json

@@ -40,15 +40,11 @@ What do they all have in common? How do people use them? What are the most impor
 
     ### State
 
-    name: bind:selected
+    name: bind:value
     type: Signal
     description: controlled selected value, manages the selected option.
 
-    name: defaultSelected
-    type: boolean
-    description: uncontrolled selected value, sets the initial selected option.
-
-    name: onSelectedChange$
+    name: onChange$
     type: PropFunction
     description: function called when the selected value changes.