diff --git a/packages/core/src/components/Tabs/Tab/Tab.tsx b/packages/core/src/components/Tabs/Tab/Tab.tsx index 6cadd01883..d7d14c7665 100644 --- a/packages/core/src/components/Tabs/Tab/Tab.tsx +++ b/packages/core/src/components/Tabs/Tab/Tab.tsx @@ -9,6 +9,7 @@ import { IconType } from "../../Icon"; import { ComponentDefaultTestId, getTestId } from "../../../tests/test-ids-utils"; import styles from "./Tab.module.scss"; import { SubIcon } from "../../../types/SubIcon"; +import Tooltip, { TooltipProps } from "../../Tooltip/Tooltip"; export interface TabProps extends VibeComponentProps { /** @@ -26,6 +27,7 @@ export interface TabProps extends VibeComponentProps { iconType?: IconType; iconSide?: string; onClick?: (value: number) => void; + tooltipProps?: Partial; /** * Tab link-name */ @@ -43,6 +45,7 @@ const Tab: FC = forwardRef( active = false, focus = false, onClick = NOOP, + tooltipProps = {} as TooltipProps, icon, iconType, iconSide = "left", @@ -77,25 +80,27 @@ const Tab: FC = forwardRef( return [...childrenArray, iconElement]; } return ( - + + + ); } ); diff --git a/packages/core/src/components/Tabs/Tab/__stories__/Tab.stories.tsx b/packages/core/src/components/Tabs/Tab/__stories__/Tab.stories.tsx index acdf75c623..c05d886dc0 100644 --- a/packages/core/src/components/Tabs/Tab/__stories__/Tab.stories.tsx +++ b/packages/core/src/components/Tabs/Tab/__stories__/Tab.stories.tsx @@ -22,7 +22,9 @@ export const States = { render: () => ( <> Normal - Disabled + + Disabled + Active ), diff --git a/packages/core/src/components/Tabs/Tab/__tests__/Tab.test.tsx b/packages/core/src/components/Tabs/Tab/__tests__/Tab.test.tsx index 082f4bb6a3..86ead84db8 100644 --- a/packages/core/src/components/Tabs/Tab/__tests__/Tab.test.tsx +++ b/packages/core/src/components/Tabs/Tab/__tests__/Tab.test.tsx @@ -1,17 +1,51 @@ import React from "react"; -import { render, fireEvent, screen } from "@testing-library/react"; -import Tab from "../Tab"; +import { render, fireEvent, screen, cleanup } from "@testing-library/react"; +import { act } from "@testing-library/react-hooks"; +import Tab, { TabProps } from "../Tab"; + +jest.useFakeTimers(); + +const onClickMock = jest.fn(); +const text = "tab"; + +const renderComponent = (props: TabProps = {}) => { + return render( + + {text} + + ); +}; describe("Tab tests", () => { - const onClickMock = jest.fn(); - const text = "tab"; + afterEach(() => { + cleanup(); + }); - beforeEach(() => { - render({text}); + describe("click", () => { + it("should call the click callback when clicked", () => { + renderComponent(); + fireEvent.click(screen.getByText(text)); + expect(onClickMock.mock.calls.length).toBe(1); + }); }); - it("should call the click callback when clicked", () => { - fireEvent.click(screen.getByText(text)); - expect(onClickMock.mock.calls.length).toBe(1); + describe("Tooltips", () => { + it("should display tooltip content from tooltipProps", () => { + const tooltipContent = "My Text"; + const tooltipProps = { content: tooltipContent }; + + renderComponent({ tooltipProps }); + const component = screen.getByText(text); + act(() => { + fireEvent.mouseEnter(component); + }); + jest.advanceTimersByTime(1000); + const content = screen.getByText(tooltipContent); + expect(content).toBeTruthy(); + act(() => { + fireEvent.mouseLeave(component); + }); + jest.advanceTimersByTime(1000); + }); }); });