mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Migrated InfoTooltip test to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-07-08 11:03:58 +02:00
parent 91ee4a32cd
commit 65f739499f
2 changed files with 30 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/utils/InfoTooltip.tsx
View file

@ -5,7 +5,7 @@ import { UncontrolledTooltip } from 'reactstrap';
import { Placement } from '@popperjs/core';
import { mutableRefToElementRef } from './helpers/components';
type InfoTooltipProps = PropsWithChildren<{
export type InfoTooltipProps = PropsWithChildren<{
className?: string;
placement: Placement;
}>;

47
test/utils/InfoTooltip.test.tsx
View file

@ -1,30 +1,40 @@
import { shallow } from 'enzyme';
import { UncontrolledTooltip } from 'reactstrap';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Placement } from '@popperjs/core';
import { InfoTooltip } from '../../src/utils/InfoTooltip';
import { InfoTooltip, InfoTooltipProps } from '../../src/utils/InfoTooltip';
describe('<InfoTooltip />', () => {
const setUp = (props: Partial<InfoTooltipProps> = {}) => ({
user: userEvent.setup(),
...render(<InfoTooltip placement="right" {...props} />),
});
it.each([
[undefined],
['foo'],
['bar'],
])('renders expected className on span', (className) => {
const wrapper = shallow(<InfoTooltip placement="right" className={className} />);
const span = wrapper.find('span');
const { container } = setUp({ className });
expect(span.prop('className')).toEqual(className ?? '');
if (className) {
expect(container.firstChild).toHaveClass(className);
} else {
expect(container.firstChild).toHaveAttribute('class', '');
}
});
it.each([
[<span key={1} />],
['Foo'],
['Hello'],
[['One', 'Two', <span key={3} />]],
])('passes children down to the nested tooltip component', (children) => {
const wrapper = shallow(<InfoTooltip placement="right">{children}</InfoTooltip>);
const tooltip = wrapper.find(UncontrolledTooltip);
[<span key={1}>foo</span>, 'foo'],
['Foo', 'Foo'],
['Hello', 'Hello'],
[['One', 'Two', <span key={3} />], 'OneTwo'],
])('passes children down to the nested tooltip component', async (children, expectedContent) => {
const { container, user } = setUp({ children });
expect(tooltip.prop('children')).toEqual(children);
container.firstElementChild && await user.hover(container.firstElementChild);
await waitFor(() => expect(screen.getByRole('tooltip')).toBeInTheDocument());
screen.debug(screen.getByRole('tooltip'));
expect(screen.getByRole('tooltip')).toHaveTextContent(expectedContent);
});
it.each([
@ -32,10 +42,11 @@ describe('<InfoTooltip />', () => {
['left' as Placement],
['top' as Placement],
['bottom' as Placement],
])('places tooltip where requested', (placement) => {
const wrapper = shallow(<InfoTooltip placement={placement} />);
const tooltip = wrapper.find(UncontrolledTooltip);
])('places tooltip where requested', async (placement) => {
const { container, user } = setUp({ placement });
expect(tooltip.prop('placement')).toEqual(placement);
container.firstElementChild && await user.hover(container.firstElementChild);
await waitFor(() => expect(screen.getByRole('tooltip')).toBeInTheDocument());
expect(screen.getByRole('tooltip').parentNode).toHaveAttribute('data-popper-placement', placement);
});
});