test(Components): write test Tab

.eslintrc.json

@@ -35,6 +35,7 @@
     "@typescript-eslint/no-unused-vars": "off",
     "react/no-array-index-key": "off",
     "jsx-a11y/interactive-supports-focus": "off",
-    "jsx-a11y/click-events-have-key-events": "off"
+    "jsx-a11y/click-events-have-key-events": "off",
+    "react/jsx-props-no-spreading": "off"
   }
 }

src/Helpers/Dom/generateTestId/generateTestId.constants.ts

@@ -0,0 +1 @@
+export const DATA_TESTID = 'data-testid';

src/Helpers/Dom/generateTestId/generateTestId.test.ts

@@ -0,0 +1,9 @@
+import generateTestId from './generateTestId';
+import { DATA_TESTID } from './generateTestId.constants';
+
+test('generateTestId tests', () => {
+  expect(generateTestId()).toMatchObject({});
+  expect(generateTestId('')).toMatchObject({});
+  expect(generateTestId(1)).toMatchObject({ [DATA_TESTID]: '1' });
+  expect(generateTestId('name')).toMatchObject({ [DATA_TESTID]: 'name' });
+});

src/Helpers/Dom/generateTestId/generateTestId.ts

@@ -0,0 +1,14 @@
+import { DATA_TESTID } from './generateTestId.constants';
+
+interface IGenerateTEstIdReturn {
+  'data-testid': string;
+}
+
+export default function generateTestId(
+  id?: string | number,
+): IGenerateTEstIdReturn | {} {
+  if (!id) return {};
+  return {
+    [DATA_TESTID]: `${id}`,
+  };
+}

src/Helpers/Dom/generateTestId/index.ts

@@ -0,0 +1 @@
+export { default } from './generateTestId';

src/Views/Components/Tab/Tab.constants.ts

@@ -0,0 +1,4 @@
+export const TAB_TESTID = 'tab-';
+export const TAB_BADGE_TESTID = 'tab-badge-';
+export const TAB_ARIA_LABEL = 'Tab ';
+export const TAB_BADGE_ARIA_LABEL = 'Tab Badge ';

src/Views/Components/Tab/Tab.test.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Tab from './Tab';
+import {
+  TAB_ARIA_LABEL,
+  TAB_BADGE_ARIA_LABEL,
+  TAB_BADGE_TESTID,
+  TAB_TESTID,
+} from './Tab.constants';
+
+const LABEL = 'Tab 1';
+const VALUE = '1';
+const BADGE = '20';
+// https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-render-in-setup.md
+const setup = () => {
+  render(<Tab label={LABEL} value={VALUE} />);
+};
+
+test('Tab Component should render', async () => {
+  setup();
+  expect(await screen.findByRole('tab')).toBeInTheDocument();
+});
+
+test('Tab Component should render label and value', async () => {
+  setup();
+  expect(await screen.findByText(LABEL)).toBeInTheDocument();
+});
+
+test('Tab Component should render tab attributes', async () => {
+  setup();
+  expect(
+    await screen.findByTestId(`${TAB_TESTID}${VALUE}`),
+  ).toBeInTheDocument();
+  expect(
+    await screen.findByLabelText(`${TAB_ARIA_LABEL}${LABEL}`),
+  ).toBeInTheDocument();
+});
+
+test('Tab Component should handle onClick', async () => {
+  const handleClick = jest.fn();
+  render(<Tab label={LABEL} value={VALUE} onClick={handleClick} />);
+  userEvent.click(await screen.findByRole('tab'));
+  expect(handleClick).toHaveBeenCalledTimes(1);
+});
+
+test('Tab Component should handle disable mode', async () => {
+  const handleClick = jest.fn();
+  render(<Tab label={LABEL} value={VALUE} onClick={handleClick} disable />);
+  userEvent.click(await screen.findByRole('tab'));
+  expect(handleClick).toHaveBeenCalledTimes(0);
+});
+
+test('Tab Component should render badge', async () => {
+  render(<Tab label={LABEL} value={VALUE} badge={BADGE} />);
+  expect(
+    await screen.findByTestId(`${TAB_BADGE_TESTID}${BADGE}`),
+  ).toBeInTheDocument();
+  expect(
+    await screen.findByLabelText(`${TAB_BADGE_ARIA_LABEL}${BADGE}`),
+  ).toBeInTheDocument();
+});

src/Views/Components/Tab/Tab.tsx

@@ -2,6 +2,13 @@ import React from 'react';
 import { ITabProps, TTabHTMLElementType } from './Tab.types';
 import generateClassName from '../../../Helpers/Dom/generateClassName';
 import classes from './Tab.module.sass';
+import generateTestId from '../../../Helpers/Dom/generateTestId';
+import {
+  TAB_ARIA_LABEL,
+  TAB_BADGE_ARIA_LABEL,
+  TAB_BADGE_TESTID,
+  TAB_TESTID,
+} from './Tab.constants';
 
 const Tab: React.FC<ITabProps> = ({
   active,
@@ -20,7 +27,7 @@ const Tab: React.FC<ITabProps> = ({
   };
 
   return (
-    <li
+    <div
       className={generateClassName([
         classes.root,
         active && classes.active,
@@ -30,16 +37,24 @@ const Tab: React.FC<ITabProps> = ({
       ])}
       onClick={handleOnClick}
       role="tab"
+      aria-label={`${TAB_ARIA_LABEL}${label}`}
       onKeyUp={onKeyUp}
       tabIndex={tabIndex}
       data-value={value}
       key={index}
+      {...generateTestId(`${TAB_TESTID}${value}`)}
     >
       <span className={classes.label}>{label}</span>
       {(badge !== undefined || badge !== null) && (
-        <div className={classes.badge}>{badge}</div>
+        <div
+          className={classes.badge}
+          {...generateTestId(`${TAB_BADGE_TESTID}${badge}`)}
+          aria-label={`${TAB_BADGE_ARIA_LABEL}${badge}`}
+        >
+          {badge}
+        </div>
       )}
-    </li>
+    </div>
   );
 };
 

src/Views/Components/Tab/Tab.types.ts

@@ -3,7 +3,7 @@ import React from 'react';
 // you can add your design system tab styles here and define variants.
 export type TTabVariants = 'default';
 
-export type TTabHTMLElementType = HTMLLIElement;
+export type TTabHTMLElementType = HTMLDivElement;
 
 export type TTabValue = string;