fix: failing test

Author: thejackshelton

apps/component-tests/src/routes/test-route/index.tsx

@@ -0,0 +1,5 @@
+import { component$ } from '@builder.io/qwik';
+
+export default component$(() => {
+  return <div>Test Route</div>;
+});

apps/website/src/routes/docs/headless/modal/auto-api/api.ts

@@ -0,0 +1,37 @@
+export const api = {
+  modal: [
+    {
+      'modal-close': [],
+    },
+    {
+      'modal-content': [],
+    },
+    {
+      'modal-context': [],
+    },
+    {
+      'modal-description': [],
+    },
+    {
+      'modal-footer': [],
+    },
+    {
+      'modal-header': [],
+    },
+    {
+      'modal-panel': [],
+    },
+    {
+      'modal-root': [],
+    },
+    {
+      'modal-title': [],
+    },
+    {
+      'modal-trigger': [],
+    },
+    {
+      'use-modal': [],
+    },
+  ],
+};

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

@@ -24,7 +24,7 @@ export default component$(() => {
           <Modal.Close class="modal-close">Cancel</Modal.Close>
           <Modal.Close class="modal-close">Save Changes</Modal.Close>
         </footer>
-        <Link href="../hero">ACCORDON</Link>
+        <Link href="../../../test-route">SPA NAVIGATION</Link>
       </Modal.Panel>
     </Modal.Root>
   );

packages/kit-headless/src/components/modal/modal-panel.tsx

@@ -16,6 +16,8 @@ import { modalContextId } from './modal-context';
 
 import styles from './modal.css?inline';
 import { useModal } from './use-modal';
+import { isServer } from '@builder.io/qwik/build';
+import { enableBodyScroll } from 'body-scroll-lock-upgrade';
 
 export type ModalProps = Omit<PropsOf<'dialog'>, 'open'> & {
   onShow$?: QRL<() => void>;
@@ -59,7 +61,10 @@ export const HModalPanel = component$((props: PropsOf<'dialog'>) => {
     }
 
     cleanup(async () => {
+      if (isServer) return;
       await deactivateFocusTrap(focusTrap);
+      if (!panelRef.value) return;
+      enableBodyScroll(panelRef.value);
     });
   });
 

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

@@ -137,6 +137,22 @@ test.describe('Scroll locking', () => {
       }),
     ).toBe(true);
   });
+
+  test(`GIVEN a modal
+    WHEN navigating to another page in SPA
+    THEN the body should not have overflow hidden`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'test-spa-scroll');
+
+    await expect(page.locator('body')).not.toHaveCSS('overflow', 'hidden');
+
+    await d.openModal();
+
+    await expect(page.locator('body')).toHaveCSS('overflow', 'hidden');
+
+    await page.click('[q\\:link]');
+
+    await expect(page.locator('body')).not.toHaveCSS('overflow', 'hidden');
+  });
 });
 
 test.describe('Focus Trap', () => {
@@ -167,25 +183,6 @@ test.describe('Focus Trap', () => {
     await insideButton.press('Tab');
     await expect(insideInput).toBeFocused();
   });
-
-  test(`GIVEN a modal
-    WHEN navigating to another page in SPA
-    THEN the body should not have overflow hidden`, async ({ page }) => {
-    const { driver: d } = await setup(page, 'test-spa-scroll');
-
-    await expect(page.locator('body')).not.toHaveCSS('overflow', 'hidden');
-
-    await d.openModal();
-
-    await expect(page.locator('body')).toHaveCSS('overflow', 'hidden');
-
-    await Promise.all([
-      page.waitForURL('**/headless/modal/hero/', { waitUntil: 'networkidle' }),
-      page.click('[q\\:link]'),
-    ]);
-
-    await expect(page.locator('body')).not.toHaveCSS('overflow', 'hidden');
-  });
 });
 
 test.describe('Nested Modals', () => {