diff --git a/src/renderer/components/fields/Tooltip.test.tsx b/src/renderer/components/fields/Tooltip.test.tsx index 466f3ee24..81c4da9bc 100644 --- a/src/renderer/components/fields/Tooltip.test.tsx +++ b/src/renderer/components/fields/Tooltip.test.tsx @@ -1,6 +1,10 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; +import { BaseStyles, ThemeProvider } from '@primer/react'; + +import { mockSettings } from '../../__mocks__/state-mocks'; +import { AppContext } from '../../context/App'; import { type ITooltip, Tooltip } from './Tooltip'; describe('renderer/components/fields/Tooltip.tsx', () => { @@ -10,19 +14,44 @@ describe('renderer/components/fields/Tooltip.tsx', () => { }; it('should render', () => { - const tree = render(); - expect(tree).toMatchSnapshot(); + render( + + + + + + + , + ); + + expect(screen.getByTestId('tooltip-test')).toBeInTheDocument(); }); it('should display on mouse enter / leave', async () => { - render(); + render( + + + + + + + , + ); const tooltipElement = screen.getByTestId('tooltip-test'); await userEvent.hover(tooltipElement); - expect(tooltipElement).toMatchSnapshot(); + expect(screen.queryByText(props.tooltip as string)).toBeInTheDocument(); await userEvent.unhover(tooltipElement); - expect(tooltipElement).toMatchSnapshot(); + expect(screen.queryByText(props.tooltip as string)).not.toBeInTheDocument(); }); }); diff --git a/src/renderer/components/fields/Tooltip.tsx b/src/renderer/components/fields/Tooltip.tsx index 0dc7b0089..f791baa5a 100644 --- a/src/renderer/components/fields/Tooltip.tsx +++ b/src/renderer/components/fields/Tooltip.tsx @@ -1,6 +1,7 @@ import { type FC, type ReactNode, useState } from 'react'; import { QuestionIcon } from '@primer/octicons-react'; +import { AnchoredOverlay } from '@primer/react'; export interface ITooltip { name: string; @@ -11,23 +12,31 @@ export const Tooltip: FC = (props: ITooltip) => { const [showTooltip, setShowTooltip] = useState(false); return ( - )} - + side="outside-bottom" + > +
+ {props.tooltip} +
+ ); }; diff --git a/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap b/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap index 21cec8378..bef3fb54a 100644 --- a/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap +++ b/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap @@ -436,10 +436,12 @@ exports[`renderer/components/fields/Checkbox.tsx should render - tooltip 1`] = ` Appearance -`; - -exports[`renderer/components/fields/Tooltip.tsx should display on mouse enter / leave 2`] = ` - -`; - -exports[`renderer/components/fields/Tooltip.tsx should render 1`] = ` -{ - "asFragment": [Function], - "baseElement": -
- -
- , - "container":
- -
, - "debug": [Function], - "findAllByAltText": [Function], - "findAllByDisplayValue": [Function], - "findAllByLabelText": [Function], - "findAllByPlaceholderText": [Function], - "findAllByRole": [Function], - "findAllByTestId": [Function], - "findAllByText": [Function], - "findAllByTitle": [Function], - "findByAltText": [Function], - "findByDisplayValue": [Function], - "findByLabelText": [Function], - "findByPlaceholderText": [Function], - "findByRole": [Function], - "findByTestId": [Function], - "findByText": [Function], - "findByTitle": [Function], - "getAllByAltText": [Function], - "getAllByDisplayValue": [Function], - "getAllByLabelText": [Function], - "getAllByPlaceholderText": [Function], - "getAllByRole": [Function], - "getAllByTestId": [Function], - "getAllByText": [Function], - "getAllByTitle": [Function], - "getByAltText": [Function], - "getByDisplayValue": [Function], - "getByLabelText": [Function], - "getByPlaceholderText": [Function], - "getByRole": [Function], - "getByTestId": [Function], - "getByText": [Function], - "getByTitle": [Function], - "queryAllByAltText": [Function], - "queryAllByDisplayValue": [Function], - "queryAllByLabelText": [Function], - "queryAllByPlaceholderText": [Function], - "queryAllByRole": [Function], - "queryAllByTestId": [Function], - "queryAllByText": [Function], - "queryAllByTitle": [Function], - "queryByAltText": [Function], - "queryByDisplayValue": [Function], - "queryByLabelText": [Function], - "queryByPlaceholderText": [Function], - "queryByRole": [Function], - "queryByTestId": [Function], - "queryByText": [Function], - "queryByTitle": [Function], - "rerender": [Function], - "unmount": [Function], -} -`; diff --git a/src/renderer/components/filters/__snapshots__/FilterSection.test.tsx.snap b/src/renderer/components/filters/__snapshots__/FilterSection.test.tsx.snap index 7b917a7bc..43b42d26a 100644 --- a/src/renderer/components/filters/__snapshots__/FilterSection.test.tsx.snap +++ b/src/renderer/components/filters/__snapshots__/FilterSection.test.tsx.snap @@ -59,10 +59,12 @@ exports[`renderer/components/filters/FilterSection.tsx should be able to toggle Open @@ -1759,7 +1917,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] = data-wrap="nowrap" >