add test

qwikifiers · Nov 4, 2024 · 4aeca25 · 4aeca25
1 parent d30ee27
commit 4aeca25
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 1 deletion.
diff --git a/packages/kit-headless/src/components/switch/switch-input.tsx b/packages/kit-headless/src/components/switch/switch-input.tsx
@@ -13,6 +13,15 @@ export const SwitchInput = component$<PropsOf<'input'>>(() => {
     }
 
     const handleClick$ = $((e: MouseEvent | KeyboardEvent) => {
+      const keys = [
+        'Enter',
+        ' ',
+      ];
+      if(!keys.includes((e as KeyboardEvent).key)){
+        return
+      }
+      // keycode
+
       context.switchRef?.value?.focus()
       context.bindChecked.value = !context.bindChecked.value;
       if(context.onChange$){
@@ -27,6 +36,18 @@ export const SwitchInput = component$<PropsOf<'input'>>(() => {
     const handleClickSync$ = sync$((e: MouseEvent) => {
       e.preventDefault();
     });
+
+    const handleKeyPressSync$ = sync$((e: KeyboardEvent) => {
+      const keys = [
+        'Enter',
+        ' ',
+      ];
+      if (keys.includes(e.key)) {
+        e.preventDefault();
+      }
+    });
+
+
     return (
       <input
         data-checked={context.bindChecked?.value ? 'true' : 'false'}
@@ -41,7 +62,7 @@ export const SwitchInput = component$<PropsOf<'input'>>(() => {
         onClick$={[handleClickSync$, handleClick$]}
         checked={context.bindChecked?.value}
         onChange$={[handleClickSync$,handleClick$]}
-        onKeyPress$={handleClick$}
+        onKeyPress$={[handleClick$,handleKeyPressSync$]}
       />
     );
   },

diff --git a/packages/kit-headless/src/components/switch/switch.test.ts b/packages/kit-headless/src/components/switch/switch.test.ts
@@ -39,3 +39,59 @@ test.describe('Mouse Behavior', () => {
   })
 
 })
+
+test.describe('Keyboard Behavior', () => {
+  test(`GIVEN a hero switch
+        WHEN focusing the trigger and pressing the Enter key
+        THEN the checked property should toggle`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'hero');
+    await d.getTrigger().focus();
+    await expect(d.getTrigger()).not.toBeChecked();
+    await d.getTrigger().press('Enter');
+    await expect(d.getTrigger()).toBeChecked();
+    await d.getTrigger().press('Enter');
+    await expect(d.getTrigger()).not.toBeChecked();
+  });
+
+  test(`GIVEN a hero switch
+    WHEN focusing the trigger and pressing the Space key
+    THEN the checked property should toggle`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'hero');
+    await d.getTrigger().focus();
+    await expect(d.getTrigger()).not.toBeChecked();
+    await d.getTrigger().press(' ');
+    await expect(d.getTrigger()).toBeChecked();
+    await d.getTrigger().press(' ');
+    await expect(d.getTrigger()).not.toBeChecked();
+  });
+})
+
+test.describe('Default property ', () => {
+  test(`
+    GIVEN a checked switch
+    WHEN the switch is mounted
+    THEN the switch should be checked
+    `, async ({ page }) => {
+    const { driver: d } = await setup(page, 'checked');
+    await expect(d.getTrigger()).toBeChecked();
+    await expect(d.getTrigger()).toHaveAttribute('data-checked', 'true');
+  })
+
+  test(`
+    GIVEN a defaultChecked switch
+    WHEN the switch is mounted
+    THEN the switch should be checked
+    `, async ({ page }) => {
+    const { driver: d } = await setup(page, 'defaultChecked');
+    await expect(d.getTrigger()).toBeChecked();
+  })
+
+  test(`
+    GIVEN a disabled switch
+    
+    `, async ({ page }) => {
+    const { driver: d } = await setup(page, 'disabled');
+    await expect(d.getTrigger()).toHaveAttribute('data-disabled', 'true');
+
+  })
+})