test(headless/select): fix test

Author: shairez

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

@@ -21,12 +21,12 @@ test('@Visual diff', async ({ page }) => {
 });
 
 test.describe('Mouse Behavior', () => {
-  test(`GIVEN a popover
+  test(`GIVEN a closed 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/select/select.driver.ts

@@ -2,9 +2,9 @@ import { expect, type Locator, type Page } from '@playwright/test';
 type OpenKeys = 'ArrowUp' | 'Enter' | 'Space' | 'ArrowDown';
 export type DriverLocator = Locator | Page;
 
-export function createTestDriver<T extends DriverLocator>(locator: T) {
+export function createTestDriver<T extends DriverLocator>(rootLocator: T) {
   const getRoot = () => {
-    return locator;
+    return rootLocator;
   };
 
   const getTrigger = () => {
@@ -15,12 +15,12 @@ export function createTestDriver<T extends DriverLocator>(locator: T) {
     return getRoot().getByRole('listbox');
   };
 
-  const getOptions = (evenIfHidden?: boolean) => {
-    return getRoot().getByRole('option', { includeHidden: evenIfHidden });
+  const getOptions = (options?: { evenIfHidden?: boolean }) => {
+    return getRoot().getByRole('option', { includeHidden: options?.evenIfHidden });
   };
 
-  const getOptionsLength = () => {
-    return getOptions().count();
+  const getOptionsLength = async (options?: { evenIfHidden?: boolean }) => {
+    return getOptions({ evenIfHidden: options?.evenIfHidden }).count();
   };
 
   const getOptionAt = (index: number | 'last') => {
@@ -29,8 +29,8 @@ export function createTestDriver<T extends DriverLocator>(locator: T) {
   };
 
   const getHiddenOptionAt = (index: number | 'last') => {
-    if (index === 'last') return getOptions(true).last();
-    return getOptions(true).nth(index);
+    if (index === 'last') return getOptions({ evenIfHidden: true }).last();
+    return getOptions({ evenIfHidden: true }).nth(index);
   };
 
   const getValueElement = () => {
@@ -51,11 +51,12 @@ export function createTestDriver<T extends DriverLocator>(locator: T) {
   };
 
   return {
-    ...locator,
-    locator,
+    ...rootLocator,
+    locator: rootLocator,
     getRoot,
     getTrigger,
     getListbox,
+    getOptions,
     getOptionsLength,
     getOptionAt,
     getHiddenOptionAt,

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

@@ -33,12 +33,12 @@ test.describe('Mouse Behavior', () => {
   test(`GIVEN a hero select
         WHEN clicking on the trigger
         THEN open up the listbox AND aria-expanded should be true`, async ({ page }) => {
-    const { getTrigger, getListbox } = await setup(page, 'hero');
+    const { driver: d } = await setup(page, 'hero');
 
-    await getTrigger().click();
+    await d.getTrigger().click();
 
-    await expect(getListbox()).toBeVisible();
-    await expect(getTrigger()).toHaveAttribute('aria-expanded', 'true');
+    await expect(d.getListbox()).toBeVisible();
+    await expect(d.getTrigger()).toHaveAttribute('aria-expanded', 'true');
   });
 
   test(`GIVEN a hero select with an open listbox
@@ -101,16 +101,18 @@ test.describe('Mouse Behavior', () => {
   test(`GIVEN a select
         WHEN adding new users and selecting a new user
         THEN the new user should be the selected value`, async ({ page }) => {
-    const { getValueElement, getOptionAt, openListbox } = await setup(page, 'add-users');
+    const { driver: d } = await setup(page, 'add-users');
 
     await page.getByRole('button', { name: 'Add Users' }).click();
 
-    await openListbox('click');
+    await expect(d.getOptions({ evenIfHidden: true })).toHaveCount(8);
+
+    await d.openListbox('click');
     const expectedValue = 'Bob';
 
-    await expect(getOptionAt(7)).toHaveText(expectedValue);
-    await getOptionAt(7).click();
-    await expect(getValueElement()).toHaveText(expectedValue);
+    await expect(d.getOptionAt(7)).toHaveText(expectedValue);
+    await d.getOptionAt(7).click();
+    await expect(d.getValueElement()).toHaveText(expectedValue);
   });
 
   // if we want to add focusing the trigger on blur