forked from styleguidist/react-styleguidist
/
Tooltip.spec.tsx
74 lines (66 loc) · 2.61 KB
/
Tooltip.spec.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import React from 'react';
import { render, fireEvent, waitFor } from '@testing-library/react';
import Tooltip, { TooltipPlacement } from './TooltipRenderer';
function renderComponent(content = 'tooltip', placement?: TooltipPlacement) {
return render(
<Tooltip content={content} placement={placement}>
<div data-testid="child" />
</Tooltip>
);
}
describe('Tooltip', () => {
test('should render child component as is', () => {
const { container, getByTestId } = renderComponent();
expect(container).toContainElement(getByTestId('child'));
});
test('should the child component be wrapped by "role=button" element', () => {
const { getByTestId } = renderComponent();
expect(getByTestId('child').closest('span')).toHaveAttribute('role', 'button');
});
test('should render content in the tooltop body', () => {
const { container, getByRole } = renderComponent();
fireEvent.focus(getByRole('button'));
expect(container.querySelector('[data-tippy-root]')).toHaveTextContent('tooltip');
});
test('should show the tooltip by focus in', async () => {
const { container, getByRole } = renderComponent();
fireEvent.focus(getByRole('button'));
await waitFor(() =>
expect(container.querySelector('[data-state="visible"]')).toBeInTheDocument()
);
expect(container.querySelector('[data-state]')).toHaveAttribute('data-state', 'visible');
});
test('should show the tooltip by click', async () => {
const { container, getByRole } = renderComponent();
fireEvent.click(getByRole('button'));
await waitFor(() =>
expect(container.querySelector('[data-state="visible"]')).toBeInTheDocument()
);
expect(container.querySelector('[data-state]')).toHaveAttribute('data-state', 'visible');
});
test('should show the tooltip by mouse enter', async () => {
const { container, getByRole } = renderComponent();
fireEvent.mouseEnter(getByRole('button'));
await waitFor(() =>
expect(container.querySelector('[data-state="visible"]')).toBeInTheDocument()
);
expect(container.querySelector('[data-state]')).toHaveAttribute('data-state', 'visible');
});
describe.each([['top'], ['right'], ['left'], ['bottom']])(
'Test placement attribute',
placement => {
test(`should have ${placement} in data-placement attribute`, async () => {
// @ts-ignore
const { container, getByRole } = renderComponent(undefined, placement);
fireEvent.focus(getByRole('button'));
await waitFor(() =>
expect(container.querySelector('[data-state="visible"]')).toBeInTheDocument()
);
expect(container.querySelector('[data-placement]')).toHaveAttribute(
'data-placement',
placement
);
});
}
);
});