added first popover test

Author: shairez

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

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

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