test(ButtonTabs): test for ButtonTabs added (#166)

* test(ButtonTabs): test for ButtonTabs added

Author: niktverd

src/components/ButtonTabs/ButtonTabs.tsx

@@ -22,6 +22,7 @@ export interface ButtonTabsProps {
     activeTab?: string | null;
     onSelectTab?: (tabId: string | null) => void;
     tabSize?: ButtonSize;
+    qa?: string;
 }
 
 const ButtonTabs: React.FC<ButtonTabsProps> = ({
@@ -30,6 +31,7 @@ const ButtonTabs: React.FC<ButtonTabsProps> = ({
     activeTab,
     onSelectTab,
     tabSize = 'l',
+    qa,
 }) => {
     const activeTabId: string | null = useMemo(() => {
         if (activeTab) {
@@ -49,7 +51,7 @@ const ButtonTabs: React.FC<ButtonTabsProps> = ({
     );
 
     return (
-        <div className={b(null, className)}>
+        <div className={b(null, className)} data-qa={qa}>
             {items.map(({id, title}) => (
                 <Button
                     text={title}

src/components/ButtonTabs/__tests__/ButtonTabs.test.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import ButtonTabs, {ButtonTabsItemProps} from '../ButtonTabs';
+
+const qaId = 'button-tabs-component';
+
+const items: ButtonTabsItemProps[] = [
+    {
+        id: '0',
+        title: 'tab-1',
+    },
+    {
+        id: '1',
+        title: 'tab-2',
+    },
+    {
+        id: '2',
+        title: 'tab-3',
+    },
+];
+
+describe('ButtonTabs', () => {
+    test('render ButtonTabs by default', async () => {
+        render(<ButtonTabs items={items} qa={qaId} />);
+        const buttonTabs = screen.getByTestId(qaId);
+
+        expect(buttonTabs).toBeInTheDocument();
+        expect(buttonTabs).toBeVisible();
+        expect(buttonTabs).not.toBeDisabled();
+    });
+
+    test('has active tab', async () => {
+        const activeTabId = 1;
+        render(<ButtonTabs items={items} qa={qaId} activeTab={String(activeTabId)} />);
+        const buttons = screen.getAllByRole('button');
+
+        buttons.forEach((button, index) => {
+            if (index === activeTabId) {
+                expect(button).toHaveClass('pc-button-tabs__item_active');
+            }
+
+            expect(button).toHaveClass('pc-button-block_theme_normal');
+        });
+    });
+
+    test('add className', () => {
+        const className = 'my-class';
+
+        render(<ButtonTabs items={items} qa={qaId} className={className} />);
+        const buttonTabs = screen.getByTestId(qaId);
+
+        expect(buttonTabs).toHaveClass(className);
+    });
+
+    test('call onSelectTab', async () => {
+        const user = userEvent.setup();
+        const handleOnClick = jest.fn();
+        render(<ButtonTabs items={items} qa={qaId} onSelectTab={handleOnClick} />);
+
+        const buttons = screen.getAllByRole('button');
+
+        buttons.forEach(async (button, i) => {
+            await user.click(button);
+            expect(handleOnClick).toHaveBeenCalledTimes(i + 1);
+        });
+    });
+});