feat(headless): tabs selectedIndex impl & tests

Author: shairez

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

@@ -1,16 +1,9 @@
-import { component$, useStore } from '@builder.io/qwik';
+import { component$, useSignal, useStore, useTask$ } from '@builder.io/qwik';
 import { Tab } from './tab';
 import { Tabs } from './tabs';
 import { TabList } from './tabs-list';
 import { TabPanel } from './tabs-panel';
 
-interface DynamicTabsProps {
-  tabIndexToDelete?: number;
-  tabIndexToAdd?: number;
-  tabsLength: number;
-  selectedIndex?: number;
-}
-
 const ThreeTabsComponent = component$(() => {
   return (
     <Tabs data-testid="tabs">
@@ -27,22 +20,32 @@ const ThreeTabsComponent = component$(() => {
   );
 });
 
+interface DynamicTabsProps {
+  tabIndexToDelete?: number;
+  tabIndexToAdd?: number;
+  tabsLength: number;
+  selectedIndex?: number;
+  changeIndexTo?: number;
+}
+
 const DynamicTabsComponent = component$(
   ({
     tabIndexToDelete = 0,
     tabIndexToAdd = 0,
     tabsLength,
-    selectedIndex = 0,
+    changeIndexTo = 0,
   }: DynamicTabsProps) => {
     const tabNames = Array(tabsLength)
       .fill(1)
       .map((_, index) => `Dynamic Tab ${index + 1}`);
 
     const tabsState = useStore(tabNames);
 
+    const selectedIndex = useSignal(0);
+
     return (
       <>
-        <Tabs selectedIndex={selectedIndex}>
+        <Tabs selectedIndex={selectedIndex.value}>
           <TabList>
             {tabsState.map((tab) => (
               <Tab key={tab}>{tab}</Tab>
@@ -60,56 +63,137 @@ const DynamicTabsComponent = component$(
         >
           Add Tab
         </button>
+        <button
+          onClick$={() => {
+            selectedIndex.value = changeIndexTo;
+          }}
+        >
+          Change index to {changeIndexTo}
+        </button>
       </>
     );
   }
 );
 
+const TabsInsideOfTabs = component$(() => {
+  return (
+    <Tabs>
+      <TabList>
+        <Tab>Tab 1</Tab>
+        <Tab>Tab 2</Tab>
+        <Tab>Tab 3</Tab>
+      </TabList>
+
+      <TabPanel>
+        <Tabs>
+          <TabList>
+            <Tab>Tab 1</Tab>
+            <Tab>Tab 2</Tab>
+            <Tab>Tab 3</Tab>
+          </TabList>
+
+          <TabPanel>Panel 1</TabPanel>
+          <TabPanel>Child Panel 2</TabPanel>
+          <TabPanel>Panel 3</TabPanel>
+        </Tabs>
+      </TabPanel>
+      <TabPanel>Root Panel 2</TabPanel>
+      <TabPanel>Panel 3</TabPanel>
+    </Tabs>
+  );
+});
+
 describe('Tabs', () => {
   it('INIT', () => {
     cy.mount(<ThreeTabsComponent />);
-
-    // cy.findByTestId('tabs').should('be.visible').matchImage();
+    // cy.findByTestId('tabs').matchImage();
 
     cy.checkA11yForComponent();
   });
-  it('should render the component', () => {
+  it(`GIVEN 3 tabs 
+      WHEN clicking the middle one
+      THEN render the middle panel`, () => {
     cy.mount(<ThreeTabsComponent />);
 
     cy.findByRole('tab', { name: /Tab 2/i }).click();
 
     cy.findByRole('tabpanel').should('contain', 'Panel 2');
   });
 
-  it('Given 3 tabs, when removing the last one dynamically, only 2 should remain', () => {
+  it(`GIVEN 3 tabs 
+      WHEN changing the selected index programmatically to the middle
+      THEN render the middle panel`, () => {
+    cy.mount(<DynamicTabsComponent tabsLength={3} changeIndexTo={1} />);
+
+    cy.findByRole('tabpanel').should('contain', 'Dynamic Tab 1 Panel');
+
+    cy.findByRole('button', { name: /Change index/i }).click();
+
+    cy.findByRole('tabpanel').should('contain', 'Dynamic Tab 2 Panel');
+  });
+
+  it(`GIVEN 3 tabs, 
+      WHEN removing the last one dynamically
+      THEN only 2 should remain`, () => {
     cy.mount(<DynamicTabsComponent tabsLength={3} tabIndexToDelete={2} />);
 
     cy.findByRole('button', { name: /remove tab/i }).click();
 
     cy.findAllByRole('tab').should('have.length', 2);
   });
 
-  it('Given 3 tabs, when clicking on the last one and then removing it, tab 2 should be shown', () => {
+  it(`GIVEN 3 tabs 
+      WHEN clicking on the last one and then removing it
+      THEN tab 2 should be shown`, () => {
     cy.mount(<DynamicTabsComponent tabsLength={3} tabIndexToDelete={2} />);
+
     cy.findByRole('tab', { name: /Dynamic Tab 3/i }).click();
+    cy.findByRole('tabpanel').should('contain', 'Dynamic Tab 3 Panel');
+
     cy.findByRole('button', { name: /remove tab/i }).click();
 
     cy.findByRole('tabpanel').should('contain', 'Dynamic Tab 2 Panel');
   });
 
-  it('Given 4 tabs, when clicking on the last one and then removing the 3rd, tab 4 should be shown', () => {
+  it(`GIVEN 4 tabs 
+      WHEN clicking on the last one and then removing the 3rd
+      THEN tab 4 should be shown`, () => {
     cy.mount(<DynamicTabsComponent tabsLength={4} tabIndexToDelete={2} />);
     cy.findByRole('tab', { name: /Dynamic Tab 4/i }).click();
     cy.findByRole('button', { name: /remove tab/i }).click();
 
     cy.findByRole('tabpanel').should('contain', 'Dynamic Tab 4 Panel');
   });
 
-  it('Given 4 tabs, when selecting the 3rd one and adding a tab at the start, the correct tab should be displayed', () => {
+  it(`GIVEN 4 tabs 
+      WHEN selecting the 3rd one and adding a tab at the start
+      THEN the correct tab should be displayed`, () => {
     cy.mount(<DynamicTabsComponent tabsLength={4} tabIndexToAdd={1} />);
     cy.findByRole('tab', { name: /Dynamic Tab 3/i }).click();
     cy.findByRole('button', { name: /add tab/i }).click();
 
     cy.findByRole('tabpanel').should('contain', 'Dynamic Tab 3 Panel');
   });
+
+  it(`GIVEN tabs inside of tabs
+      WHEN clicking on the root second tab
+      THEN it should show only the selected root panel`, () => {
+    cy.mount(<TabsInsideOfTabs />);
+
+    cy.findAllByRole('tab', { name: /Tab 2/i }).first().click();
+
+    cy.findByRole('tabpanel')
+      .should('be.visible')
+      .should('contain', 'Root Panel 2');
+  });
+
+  it(`GIVEN tabs inside of tabs
+      WHEN clicking on the child second tab
+      THEN it should show only the selected child panel`, () => {
+    cy.mount(<TabsInsideOfTabs />);
+
+    cy.findAllByRole('tab', { name: /Tab 2/i }).eq(1).click();
+
+    cy.findAllByRole('tabpanel').eq(1).should('contain', 'Child Panel 2');
+  });
 });

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

@@ -6,6 +6,7 @@ import {
   useSignal,
   useVisibleTask$,
   useStore,
+  useTask$,
 } from '@builder.io/qwik';
 import { tabsContextId } from './tabs-context-id';
 import { TabsContext } from './tabs-context.type';
@@ -14,9 +15,6 @@ import { Behavior } from './behavior.type';
 /**
  * TABS TODOs
  * 
- * - CHANGE THE querySelector to "scoped" queries
- * - selectedIndex / default
-* - expose selectedIndex in the root 
 * - Orientation
  * - aria-label https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby
  * - NOTE: Radix manually handle the value/id for each tab while we calculate it behind the scenes
@@ -61,7 +59,14 @@ export interface TabInfo {
 
 export const Tabs = component$((props: TabsProps) => {
   const behavior = props.behavior ?? 'manual';
-  const selectedIndex = useSignal(props.selectedIndex || 0);
+
+  const selectedIndex = useSignal(0);
+
+  useTask$(({ track }) => {
+    track(() => props.selectedIndex);
+    selectedIndex.value = props.selectedIndex || 0;
+  });
+
   const selectedTabId = useSignal<string>('');
   const reIndexTabs = useSignal(false);
   const showTabsSignal = useSignal(false);
@@ -117,20 +122,24 @@ export const Tabs = component$((props: TabsProps) => {
     reIndexTabs.value = false;
 
     if (ref.value) {
-      // TODO: Write a failing test for nested tabs to prove this querySelector should be scoped
-      const tabElements = ref.value.querySelectorAll(
-        '[role="tablist"] > [role="tab"]'
-      );
-
-      /*
-      const parentElement = document.querySelector('#parent');
-
-      const firstLevelElements = Array.from(parentElement.childNodes)
-        .filter(node => node.nodeType === Node.ELEMENT_NODE && node.parentNode === parentElement);
-
-      */
+      const tabsRootElement = ref.value;
+
+      const tabListElement = tabsRootElement.querySelector('[role="tablist"]');
+      let tabElements: Element[] = [];
+      if (tabListElement) {
+        tabElements = Array.from(tabListElement?.children).filter((child) => {
+          return child.getAttribute('role') === 'tab';
+        });
+      }
 
-      const tabPanelElements = ref.value.querySelectorAll('[role="tabpanel"]');
+      let tabPanelElements: Element[] = [];
+      if (tabsRootElement.children) {
+        tabPanelElements = Array.from(tabsRootElement.children).filter(
+          (child) => {
+            return child.getAttribute('role') === 'tabpanel';
+          }
+        );
+      }
 
       // See if the deleted index was the last one
       let previousSelectedTabWasLastOne = false;