test: improved storybook

Author: shairez

.gitignore

@@ -56,7 +56,7 @@ lerna-debug.log*
 # misc
 /.sass-cache
 /connect.lock
-/coverage
+coverage
 /libpeerconnection.log
 testem.log
 /typings

package.json

@@ -34,6 +34,7 @@
     "@nx/vite": "16.0.3",
     "@nx/workspace": "16.0.3",
     "@storybook/addon-a11y": "7.0.8",
+    "@storybook/addon-coverage": "0.0.8",
     "@storybook/addon-essentials": "7.0.8",
     "@storybook/addon-interactions": "7.0.8",
     "@storybook/addon-links": "7.0.8",

packages/kit-headless/project.json

@@ -97,8 +97,8 @@
     "test-storybook": {
       "executor": "nx:run-commands",
       "options": {
-        "command": "pnpm test-storybook --url http://localhost:4400",
-        "cwd": "packages/headless"
+        "command": "pnpm test-storybook --url http://localhost:4400 --coverage",
+        "cwd": "packages/kit-headless"
       }
     },
     "component-test": {

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

@@ -36,6 +36,10 @@ export const Tab = component$((props: TabProps) => {
     );
   });
 
+  const matchedTabPanelId = useComputed$(
+    () => contextService.tabsMap[uniqueId]?.tabPanelId
+  );
+
   // TODO: Figure out a way to fix this shitty hack :)
   useTask$(({ track }) => {
     track(() => isSelectedSignal.value);
@@ -66,7 +70,7 @@ export const Tab = component$((props: TabProps) => {
       onMouseEnter$={selectIfAutomatic$}
       aria-selected={isSelectedSignal.value}
       tabIndex={isSelectedSignal.value ? 0 : -1}
-      aria-controls={'tabpanel-' + contextService.tabsMap[uniqueId]?.tabPanelId}
+      aria-controls={'tabpanel-' + matchedTabPanelId.value}
       class={`${
         isSelectedSignal.value ? `selected ${props.selectedClassName}` : ''
       }${props.class ? ` ${props.class}` : ''}`}

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

@@ -1,38 +1,52 @@
 import { Meta, StoryObj } from 'storybook-framework-qwik';
 import { Tab, TabList, TabPanel, Tabs, TabsProps } from './';
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within, screen } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
 const meta: Meta<TabsProps> = {
   component: Tabs,
+  args: {
+    behavior: 'automatic',
+  },
+  argTypes: {
+    behavior: {
+      control: {
+        type: 'select',
+      },
+      options: ['automatic', 'manual'],
+    },
+  },
 };
 
 export default meta;
 
 type Story = StoryObj<TabsProps>;
 
+const createThreeTabs = () => (
+  <Tabs>
+    <TabList>
+      <Tab>Tab 1</Tab>
+      <Tab>Tab 2</Tab>
+      <Tab>Tab 3</Tab>
+    </TabList>
+
+    <TabPanel>Panel 1</TabPanel>
+    <TabPanel>Panel 2</TabPanel>
+    <TabPanel>Panel 3</TabPanel>
+  </Tabs>
+);
+
 export const Primary: Story = {
-  render: () => (
-    <Tabs>
-      <TabList>
-        <Tab>Tab 1</Tab>
-        <Tab>Tab 2</Tab>
-        <Tab>Tab 3</Tab>
-      </TabList>
-
-      <TabPanel>Panel 1</TabPanel>
-      <TabPanel>Panel 2</TabPanel>
-      <TabPanel>Panel 3</TabPanel>
-    </Tabs>
-  ),
+  render: () => createThreeTabs(),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    const tabs = await canvas.findAllByRole('tab');
-    await userEvent.click(tabs[1]);
+    const secondTab = await canvas.findByRole('tab', { name: /Tab 2/i });
+    screen.debug(canvasElement);
+    await userEvent.click(secondTab);
 
-    const tabPanel = await canvas.findByRole('tabpanel');
+    const activeTabPanel = await canvas.findByRole('tabpanel');
 
-    await expect(tabPanel).toHaveTextContent('Panel 2');
+    await expect(activeTabPanel).toHaveTextContent('Panel 2');
   },
 };