test: test coverage for accordion, tooltip and tabs

Author: shafin-deriv

src/components/CustomAccordion/__tests__/custom-accordion.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { cleanup, render, screen } from '@testing-library/react';
+import CustomAccordion from '..';
+import userEvent from '@testing-library/user-event';
+
+const mock_accordion_items = [
+  { header: 'header_1', content: 'content 1' },
+  { header: 'header_2', content: 'content 2' },
+];
+
+describe('CustomAccordion', () => {
+  beforeEach(() => {
+    render(<CustomAccordion items={mock_accordion_items} />);
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('should render the custom accordion', () => {
+    const header = screen.getByText('header_1');
+    expect(header).toBeInTheDocument();
+  });
+
+  it('should open accordion content on click', async () => {
+    const header = screen.getByText('header_2');
+    await userEvent.click(header);
+    const content = screen.getByText('content 2');
+    expect(content).toBeInTheDocument();
+  });
+});

src/components/CustomTabs/__tests__/custom-tabs.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { cleanup, render, screen } from '@testing-library/react';
+import CustomTabs from '..';
+import userEvent from '@testing-library/user-event';
+
+const mock_tabs = [
+  { label: 'tab_1', content: 'content 1' },
+  { label: 'tab_2', content: 'content 2' },
+];
+
+describe('CustomTabs', () => {
+  beforeEach(() => {
+    render(<CustomTabs tabs={mock_tabs}></CustomTabs>);
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('should render the custom tabs', () => {
+    const tab = screen.getByText('tab_1');
+    expect(tab).toBeInTheDocument();
+  });
+
+  it('should change tab content on different tab click', async () => {
+    const tab = screen.getByText('tab_2');
+    await userEvent.click(tab);
+    const content = screen.getByText('content 2');
+    expect(content).toBeInTheDocument();
+  });
+});

src/components/CustomTabs/index.tsx

@@ -9,10 +9,6 @@ const CustomTabs: React.FC<{
 }> = ({ tabs }) => {
   const [activeTab, setActiveTab] = useState(0);
 
-  const handleTabClick = (index) => {
-    setActiveTab(index);
-  };
-
   return (
     <div className='tabs'>
       <div className='tabs_header'>
@@ -21,7 +17,7 @@ const CustomTabs: React.FC<{
             <div
               key={index}
               className={`tabs_header__item ${activeTab === index ? 'active' : ''}`}
-              onClick={() => handleTabClick(index)}
+              onClick={() => setActiveTab(index)}
             >
               {tab.label}
             </div>

src/components/CustomTooltip/__tests__/custom-tooltip.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { cleanup, render, screen } from '@testing-library/react';
+import CustomTooltip from '..';
+import userEvent from '@testing-library/user-event';
+
+describe('CustomTooltip', () => {
+  beforeEach(() => {
+    render(
+      <CustomTooltip text='tooltip text'>
+        <div>outer text</div>
+      </CustomTooltip>,
+    );
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('should render the custom tooltip with children', () => {
+    const text = screen.getByText('outer text');
+    expect(text).toBeInTheDocument();
+  });
+
+  it('should render the tooltip text on hover', async () => {
+    const text = screen.getByText('outer text');
+    await userEvent.hover(text);
+    const tooltip_text = screen.getAllByText('tooltip text');
+    expect(tooltip_text[0]).toBeInTheDocument();
+  });
+});