@bitrise/bitkit 10.11.1 → 10.11.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.11.1",
+  "version": "10.11.2",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Accordion/Accordion.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Accordion from './Accordion';
+import AccordionItem from './AccordionItem';
+
+describe('Accordion', () => {
+  it('calls the onChange handler with the proper id if Accordion has a conditionally not rendered item', async () => {
+    const thirdId = 'third-item';
+    const thirdTitle = 'Third item';
+
+    const handleChange = jest.fn();
+
+    render(
+      <Accordion onChange={handleChange}>
+        <AccordionItem id="first" buttonContent="First item">
+          First content
+        </AccordionItem>
+        {false && (
+          <AccordionItem id="second" buttonContent="Second item">
+            Second content
+          </AccordionItem>
+        )}
+        <AccordionItem id={thirdId} buttonContent={thirdTitle}>
+          Third content
+        </AccordionItem>
+      </Accordion>,
+    );
+
+    const thirdTab = await screen.findByText(thirdTitle);
+    await userEvent.click(thirdTab);
+
+    expect(handleChange).toHaveBeenCalledWith(['third-item'], [1]);
+  });
+});

package/src/Components/Tabs/Tabs.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Tabs from './Tabs';
+import TabList from './TabList';
+import Tab from './Tab';
+import TabPanels from './TabPanels';
+import TabPanel from './TabPanel';
+
+describe('Tabs', () => {
+  it('calls the onChange handler with the proper id if TabList has a conditionally not rendered item', async () => {
+    const thirdTabId = 'third-tab';
+    const thirdTabTitle = 'Third tab';
+
+    const handleChange = jest.fn();
+
+    render(
+      <Tabs onChange={handleChange}>
+        <TabList>
+          <Tab id="first-tab">First tab</Tab>
+          {false && <Tab id="second-tab">Second tab</Tab>}
+          <Tab id={thirdTabId}>{thirdTabTitle}</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>First content</TabPanel>
+          {false && <TabPanel>Second content</TabPanel>}
+          <TabPanel>Third content</TabPanel>
+        </TabPanels>
+      </Tabs>,
+    );
+
+    const thirdTab = await screen.findByText(thirdTabTitle);
+    await userEvent.click(thirdTab);
+
+    expect(handleChange).toHaveBeenCalledWith(1, thirdTabId);
+  });
+});

package/src/Components/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { isValidElement, ReactElement, useEffect, useState } from 'react';
 import { Tabs as ChakraTabs, TabsProps as ChakraTabsProps, forwardRef } from '@chakra-ui/react';
 import { useHistory } from '../../hooks';
 
@@ -8,13 +8,11 @@ export interface TabsProps extends ChakraTabsProps {
   withHistory?: boolean;
 }
 
-const getTabIds = (props: TabsProps) => {
-  const ids: string[] = [];
-  const tabs = React.Children.toArray(props.children)[0] as any;
-  React.Children.forEach(tabs.props.children, (c, index) => {
-    ids[index] = c?.props?.id;
-  });
-  return ids;
+const getTabIds = (props: TabsProps): string[] => {
+  const tabList = React.Children.toArray(props.children)[0] as ReactElement;
+  const tabs = React.Children.toArray(tabList.props.children) as ReactElement[];
+
+  return tabs.filter((item) => isValidElement(item)).map((item) => item.props.id);
 };
 
 /**