mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 17:40:23 +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 { Placement } from '@popperjs/core';
import { mutableRefToElementRef } from './helpers/components'; import { mutableRefToElementRef } from './helpers/components';
type InfoTooltipProps = PropsWithChildren<{ export type InfoTooltipProps = PropsWithChildren<{
className?: string; className?: string;
placement: Placement; placement: Placement;
}>; }>;

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

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