refactor: modal improve scroll lock tests

Author: thejackshelton

apps/website/src/routes/docs/headless/modal/examples/portalled.tsx

@@ -0,0 +1,33 @@
+import { component$, useSignal, useStyles$, useVisibleTask$ } from '@builder.io/qwik';
+import { Modal } from '@qwik-ui/headless';
+import styles from '../snippets/modal.css?inline';
+import flatpickr from 'flatpickr';
+import datePickerStyles from 'flatpickr/dist/flatpickr.min.css?inline';
+
+export default component$(() => {
+  useStyles$(styles);
+  useStyles$(datePickerStyles);
+  const pickerTriggerRef = useSignal<HTMLButtonElement>();
+  const isOpen = useSignal(false);
+
+  useVisibleTask$(() => {
+    if (pickerTriggerRef.value) {
+      flatpickr(pickerTriggerRef.value);
+    }
+  });
+
+  return (
+    <>
+      <button class="modal-trigger" onClick$={() => (isOpen.value = true)}>
+        Open Modal
+      </button>
+      <Modal
+        style={{ width: '300px', height: '200px', background: 'white' }}
+        class="modal"
+        bind:show={isOpen}
+      >
+        <button ref={pickerTriggerRef}>Open Date Picker</button>
+      </Modal>
+    </>
+  );
+});

apps/website/src/routes/docs/headless/modal/examples/scroll-lock.tsx

@@ -7,7 +7,7 @@ export default component$(() => {
   const isOpen = useSignal(false);
 
   return (
-    <div style={{ height: '200vh' }}>
+    <div>
       <button class="modal-trigger" onClick$={() => (isOpen.value = true)}>
         Open Modal
       </button>

package.json

@@ -182,5 +182,8 @@
   ],
   "nx": {
     "includedScripts": []
+  },
+  "dependencies": {
+    "flatpickr": "4.6.13"
   }
 }

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

@@ -69,21 +69,11 @@ test.describe('Scroll locking', () => {
         THEN the body should have overflow hidden`, async ({ page }) => {
     const { driver: d } = await setup(page, 'scroll-lock');
 
-    expect(
-      await page.evaluate(() => {
-        const { overflow } = getComputedStyle(document.body);
-        return overflow === 'hidden';
-      }),
-    ).toBe(false);
+    await expect(page.locator('body')).toHaveCSS('overflow', 'visible');
 
     await d.openModal();
 
-    expect(
-      await page.evaluate(() => {
-        const { overflow } = getComputedStyle(document.body);
-        return overflow === 'hidden';
-      }),
-    ).toBe(true);
+    await expect(page.locator('body')).toHaveCSS('overflow', 'hidden');
   });
 
   test(`GIVEN an open modal that has overflow hidden on the body
@@ -100,22 +90,12 @@ test.describe('Scroll locking', () => {
 
     await d.openModal();
 
-    expect(
-      await page.evaluate(() => {
-        const { overflow } = getComputedStyle(document.body);
-        return overflow === 'hidden';
-      }),
-    ).toBe(true);
+    await expect(page.locator('body')).toHaveCSS('overflow', 'hidden');
 
     await d.getTrigger().press('Escape');
     await expect(d.getModal()).toBeHidden();
 
-    expect(
-      await page.evaluate(() => {
-        const { overflow } = getComputedStyle(document.body);
-        return overflow === 'hidden';
-      }),
-    ).toBe(false);
+    await expect(page.locator('body')).toHaveCSS('overflow', 'visible');
   });
 
   test(`GIVEN two open modals, one nested inside the other