From d30ee275b33ce266a10f26ac52319f45b62ed826 Mon Sep 17 00:00:00 2001
From: Jerry_wu <409187100@qq.com>
Date: Thu, 31 Oct 2024 20:11:25 +0800
Subject: [PATCH] fix conflict

---
 .../docs/headless/switch/examples/hero.tsx    | 12 ++++--
 .../src/components/switch/switch-input.tsx    |  5 ++-
 .../src/components/switch/switch-lable.tsx    |  2 +-
 .../src/components/switch/switch-root.tsx     |  1 +
 .../src/components/switch/switch.driver.ts    | 37 +++++++++++++++++
 .../src/components/switch/switch.test.ts      | 41 +++++++++++++++++++
 6 files changed, 92 insertions(+), 6 deletions(-)
 create mode 100644 packages/kit-headless/src/components/switch/switch.driver.ts

diff --git a/apps/website/src/routes/docs/headless/switch/examples/hero.tsx b/apps/website/src/routes/docs/headless/switch/examples/hero.tsx
index 1233e55f3..6b92a5372 100644
--- a/apps/website/src/routes/docs/headless/switch/examples/hero.tsx
+++ b/apps/website/src/routes/docs/headless/switch/examples/hero.tsx
@@ -3,11 +3,17 @@ import { Switch } from '@qwik-ui/headless';
 
 
 export default component$(() => {
-  const checked = useSignal(true)
+  const checked = useSignal(false)
+  const count = useSignal(0);
   useStyles$(styles);
+
   return (
-    <Switch.Root class="switch" bind:checked={checked}>
-      <Switch.Label>test</Switch.Label>
+    <Switch.Root
+      class="switch"
+      bind:checked={checked}
+      onChange$={() => count.value++}
+    >
+      <Switch.Label>test{count.value}</Switch.Label>
       <Switch.Input />
     </Switch.Root>
   );
diff --git a/packages/kit-headless/src/components/switch/switch-input.tsx b/packages/kit-headless/src/components/switch/switch-input.tsx
index c4bff4b0a..77618300c 100644
--- a/packages/kit-headless/src/components/switch/switch-input.tsx
+++ b/packages/kit-headless/src/components/switch/switch-input.tsx
@@ -29,14 +29,15 @@ export const SwitchInput = component$<PropsOf<'input'>>(() => {
     });
     return (
       <input
-        data-checked={context.bindChecked?.value ? '' : undefined}
-        data-disabled={context.disabled ? '' : undefined}
+        data-checked={context.bindChecked?.value ? 'true' : 'false'}
+        data-disabled={context.disabled ? 'true' : 'false'}
         ref={context.switchRef}
         aria-describedby={`${id}-switch`}
         disabled={context.disabled}
         aria-checked={context.bindChecked ? 'true' : 'false'}
         type="checkbox"
         role="switch"
+        data-value
         onClick$={[handleClickSync$, handleClick$]}
         checked={context.bindChecked?.value}
         onChange$={[handleClickSync$,handleClick$]}
diff --git a/packages/kit-headless/src/components/switch/switch-lable.tsx b/packages/kit-headless/src/components/switch/switch-lable.tsx
index 349d38650..3b0469dfe 100644
--- a/packages/kit-headless/src/components/switch/switch-lable.tsx
+++ b/packages/kit-headless/src/components/switch/switch-lable.tsx
@@ -3,7 +3,7 @@ import { component$, PropsOf, Slot, useId } from '@builder.io/qwik';
 export const SwitchLable = component$<PropsOf<'lable'>>(() => {
     const id = useId()
     return (
-      <label aria-label='switch' for={`switch-${id}`}  >
+      <label aria-label='switch' for={`switch-${id}`} data-switch-lable>
         <Slot></Slot>
       </label>
     );
diff --git a/packages/kit-headless/src/components/switch/switch-root.tsx b/packages/kit-headless/src/components/switch/switch-root.tsx
index 7b5d00851..9d8ca6595 100644
--- a/packages/kit-headless/src/components/switch/switch-root.tsx
+++ b/packages/kit-headless/src/components/switch/switch-root.tsx
@@ -27,6 +27,7 @@ export const SwitchRoot = component$(({defaultChecked, disabled, onChange$, ...r
       {...rest}
       data-checked={context.bindChecked?.value ? '' : undefined}
       data-disabled={context.disabled ? '' : undefined}
+      data-qui-switch
     >
       <Slot></Slot>
     </div>
diff --git a/packages/kit-headless/src/components/switch/switch.driver.ts b/packages/kit-headless/src/components/switch/switch.driver.ts
new file mode 100644
index 000000000..155d2e1f5
--- /dev/null
+++ b/packages/kit-headless/src/components/switch/switch.driver.ts
@@ -0,0 +1,37 @@
+import { type Locator, type Page } from '@playwright/test';
+type OpenKeys = 'ArrowUp' | 'Enter' | 'Space' | 'ArrowDown';
+export type DriverLocator = Locator | Page;
+
+export function createTestDriver<T extends DriverLocator>(rootLocator: T) {
+  const getRoot = () => {
+    return rootLocator;
+  };
+
+  const getTrigger = () => {
+    return getRoot().locator('[data-value]')
+  };
+
+  const getTriggerlaBle = () => {
+    return getRoot().locator('[data-switch-lable]')
+  }
+
+  const openListbox = async (key: OpenKeys | 'click') => {
+    await getTrigger().focus();
+
+    if (key !== 'click') {
+      await getTrigger().press(key);
+    } else {
+      await getTrigger().click();
+    }
+
+  };
+
+  return {
+    ...rootLocator,
+    locator: rootLocator,
+    getRoot,
+    getTrigger,
+    openListbox,
+    getTriggerlaBle
+  };
+}
diff --git a/packages/kit-headless/src/components/switch/switch.test.ts b/packages/kit-headless/src/components/switch/switch.test.ts
index e69de29bb..c2e28fd19 100644
--- a/packages/kit-headless/src/components/switch/switch.test.ts
+++ b/packages/kit-headless/src/components/switch/switch.test.ts
@@ -0,0 +1,41 @@
+import { type Page, test, expect } from '@playwright/test';
+import { createTestDriver } from './switch.driver';
+
+declare global {
+  interface Window {
+    onChangeTriggered: boolean;
+    onChangeHandler: () => void;
+  }
+}
+async function setup(page: Page, exampleName: string) {
+  await page.goto(`/headless/switch/${exampleName}`);
+
+  const driver = createTestDriver(page.locator('[data-qui-switch]'));
+
+  return {
+    driver,
+  };
+}
+
+test.describe('Mouse Behavior', () => {
+  test(`GIVEN a hero switch
+        WHEN toggled
+        THEN the checked property should correctly reflect the toggle state`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'hero');
+    await expect(d.getTrigger()).not.toBeChecked();
+    await expect(d.getTrigger()).toHaveAttribute('data-checked', 'flase');
+    await d.getTrigger().click();
+    await expect(d.getTrigger()).toHaveAttribute('data-checked', 'true');
+    await expect(d.getTrigger()).toBeChecked()
+  })
+
+  test(`GIVEN a hero switch
+    WHEN clicked
+    THEN the onChange callback should be triggered`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'hero');
+    await expect(d.getTriggerlaBle()).toHaveText('0')
+    await d.getTrigger().click();
+    await expect(d.getTriggerlaBle()).toHaveText('1')
+  })
+
+})