test(tabs): make reusable test work

Author: maiieul

.vscode/settings.json

@@ -5,6 +5,6 @@
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
   ],
   "editor.codeActionsOnSave": {
-    "source.removeUnusedImports": true
+    "source.removeUnusedImports": "explicit"
   }
 }

packages/kit-headless/src/components/tabs/tabs.spec.tsx

@@ -1,8 +1,8 @@
-import { $, component$, useSignal, useStore } from '@builder.io/qwik';
+import { $, Slot, component$, useSignal, useStore } from '@builder.io/qwik';
 import { Tabs } from './tabs';
-import { TabList } from './tabs-list';
-import { Tab } from './tab';
-import { TabPanel } from './tab-panel';
+import { TabList, TabListProps } from './tabs-list';
+import { Tab, TabProps } from './tab';
+import { TabPanel, TabPanelProps } from './tab-panel';
 
 describe('Tabs', () => {
   it('INIT', () => {
@@ -769,74 +769,61 @@ describe('Tabs', () => {
     });
   });
 
-  // TODO: add test for Custom tabs
-
-  // Couldn't write the test because of the following error:
-  /**
-   * The following error originated from your test code, not from Cypress.
-  > Captured variable in the closure can not be serialized because it's a function named "CustomTabs". You might need to convert it to a QRL using $(fn):
-   */
-
-  // const CustomTabs = (props: TabsProps) => (
-  //   <Tabs {...props} TabList={CustomTabList} Tab={CustomTab} TabPanel={CustomTabPanel} />
-  // );
-
-  // const CustomTabList = component$<TabListProps>(() => {
-  //   return (
-  //     <TabList>
-  //       <Slot />
-  //     </TabList>
-  //   );
-  // });
-
-  // const CustomTab = component$<TabProps>(({ ...props }) => {
-  //   return (
-  //     <Tab {...props}>
-  //       <Slot />
-  //     </Tab>
-  //   );
-  // });
-
-  // const CustomTabPanel = component$<TabPanelProps>(({ ...props }) => {
-  //   return (
-  //     <TabPanel {...props}>
-  //       <Slot />
-  //     </TabPanel>
-  //   );
-  // });
-
-  // const CustomThreeTabsComponent = component$(() => {
-  //   return (
-  //     <>
-  //       <CustomTabs>
-  //         <CustomTabList>
-  //           <CustomTab>Tab 1</CustomTab>
-  //           <CustomTab>Tab 2</CustomTab>
-  //           <CustomTab>Tab 3</CustomTab>
-  //         </CustomTabList>
-  //         <CustomTabPanel>Panel 1</CustomTabPanel>
-  //         <CustomTabPanel>Panel 2</CustomTabPanel>
-  //         <CustomTabPanel>Panel 3</CustomTabPanel>
-  //       </CustomTabs>
-  //     </>
-  //   );
-  // });
-
-  // describe('User-defined TabList', () => {
-  //   it(`GIVEN a user-defined TabList to Tabs
-  //       WHEN clicking the middle Tab
-  //       THEN render the middle panel`, () => {
-  //     cy.mount(<CustomThreeTabsComponent />);
-
-  //     cy.get('[role="tab"]').should('have.length', 3);
-
-  //     cy.findByRole('tabpanel').should('contain', 'Panel 3');
-
-  //     cy.findByRole('tab', { name: /Tab 2/i }).click();
-
-  //     cy.findByRole('tabpanel').should('contain', 'Panel 2');
-
-  //     cy.findByRole('tablist').should('exist');
-  //   });
-  // });
+  describe('User-defined reusable TabList/Tab/TabPanel components', () => {
+    const CustomTabList = component$<TabListProps>(() => {
+      return (
+        <TabList>
+          <Slot />
+        </TabList>
+      );
+    });
+
+    const CustomTab = component$<TabProps>(({ ...props }) => {
+      return (
+        <Tab {...props}>
+          <Slot />
+        </Tab>
+      );
+    });
+
+    const CustomTabPanel = component$<TabPanelProps>(({ ...props }) => {
+      return (
+        <TabPanel {...props}>
+          <Slot />
+        </TabPanel>
+      );
+    });
+
+    const CustomThreeTabsComponent = component$(() => {
+      return (
+        <>
+          <Tabs TabList={CustomTabList} Tab={CustomTab} TabPanel={CustomTabPanel}>
+            <CustomTabList>
+              <CustomTab>Tab 1</CustomTab>
+              <CustomTab>Tab 2</CustomTab>
+              <CustomTab>Tab 3</CustomTab>
+            </CustomTabList>
+            <CustomTabPanel>Panel 1</CustomTabPanel>
+            <CustomTabPanel>Panel 2</CustomTabPanel>
+            <CustomTabPanel>Panel 3</CustomTabPanel>
+          </Tabs>
+        </>
+      );
+    });
+    it(`GIVEN a user-defined TabList to Tabs
+        WHEN clicking the middle Tab
+        THEN render the middle panel`, () => {
+      cy.mount(<CustomThreeTabsComponent />);
+
+      cy.get('[role="tab"]').should('have.length', 3);
+
+      cy.findByRole('tabpanel').should('contain', 'Panel 1');
+
+      cy.findByRole('tab', { name: /Tab 2/i }).click();
+
+      cy.findByRole('tabpanel').should('contain', 'Panel 2');
+
+      cy.findByRole('tablist').should('exist');
+    });
+  });
 });