test(tabs): add test template since not working

Author: maiieul

apps/website/src/routes/test/index.tsx

@@ -0,0 +1,58 @@
+import { Slot, component$ } from '@builder.io/qwik';
+import {
+  Tab,
+  TabList,
+  TabListProps,
+  TabPanel,
+  TabPanelProps,
+  TabProps,
+  Tabs,
+  TabsProps,
+} from '@qwik-ui/headless';
+
+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>
+  );
+});
+
+export default component$(() => {
+  return <CustomThreeTabsComponent />;
+});

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

@@ -1,8 +1,8 @@
 import { $, component$, useSignal, useStore } from '@builder.io/qwik';
-import { Tab } from './tab';
-import { TabPanel } from './tab-panel';
 import { Tabs } from './tabs';
 import { TabList } from './tabs-list';
+import { Tab } from './tab';
+import { TabPanel } from './tab-panel';
 
 describe('Tabs', () => {
   it('INIT', () => {
@@ -768,4 +768,75 @@ describe('Tabs', () => {
       cy.findByRole('tablist').should('exist');
     });
   });
+
+  // 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');
+  //   });
+  // });
 });