Skip to content

Commit 673cabb

Browse files
mohsinulhaqmohsinulhaq
committed
add tests for all trigger types
1 parent c07b5a4 commit 673cabb

File tree

4 files changed

+428
-298
lines changed

4 files changed

+428
-298
lines changed

‎package.json‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,7 @@
2828
"docs:build": "docz build",
2929
"docs:deploy": "yarn docs:build && cp .docz/dist/index.html .docz/dist/404.html && gh-pages -d .docz/dist",
3030
"lint": "eslint .",
31-
"test": "jest",
32-
"test:watch": "jest --watch"
31+
"test": "jest"
3332
},
3433
"pre-commit": [
3534
"lint",
@@ -51,7 +50,7 @@
5150
},
5251
"dependencies": {
5352
"@babel/runtime": "^7.2.0",
54-
"react-popper": "^1.3.0"
53+
"react-popper": "^1.3.2"
5554
},
5655
"devDependencies": {
5756
"@babel/cli": "^7.2.0",
@@ -61,13 +60,13 @@
6160
"@babel/preset-env": "^7.2.0",
6261
"@babel/preset-react": "^7.0.0",
6362
"@types/jest": "^23.3.10",
64-
"@types/react": "^16.7.13",
63+
"@types/react": "^16.7.17",
6564
"@types/react-dom": "^16.0.11",
6665
"babel-core": "^7.0.0-bridge",
6766
"babel-eslint": "^10.0.1",
6867
"babel-jest": "^23.6.0",
6968
"babel-plugin-transform-react-remove-prop-types": "^0.4.21",
70-
"docz": "^0.12.15",
69+
"docz": "^0.12.16",
7170
"docz-plugin-css": "^0.11.0",
7271
"eslint": "^5.10.0",
7372
"eslint-config-prettier": "^3.3.0",
@@ -82,10 +81,10 @@
8281
"prop-types": "^15.6.2",
8382
"react": "^16.6.3",
8483
"react-dom": "^16.6.3",
85-
"react-testing-library": "^5.3.1",
84+
"react-testing-library": "^5.3.2",
8685
"rimraf": "^2.6.2",
8786
"rollup": "^0.67.4",
88-
"rollup-plugin-babel": "^4.0.3",
87+
"rollup-plugin-babel": "^4.1.0",
8988
"rollup-plugin-commonjs": "^9.2.0",
9089
"rollup-plugin-node-resolve": "^4.0.0",
9190
"rollup-plugin-size-snapshot": "^0.7.0",

‎tests/TooltipTrigger.spec.js‎

Lines changed: 133 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,148 @@
11
import React from 'react';
2-
import {render} from 'react-testing-library';
2+
import {render, fireEvent, cleanup} from 'react-testing-library';
33
import TooltipTrigger from '../src';
44

5-
const Tooltip = ({
6-
getTooltipProps,
7-
getArrowProps,
8-
tooltipRef,
9-
arrowRef,
10-
placement
11-
}) => (
12-
<div
13-
{...getTooltipProps({
14-
ref: tooltipRef,
15-
className: 'tooltip-container'
16-
})}
17-
>
18-
<div
19-
{...getArrowProps({
20-
ref: arrowRef,
21-
'data-placement': placement,
22-
className: 'tooltip-arrow'
23-
})}
24-
/>
25-
World
5+
const Tooltip = ({getTooltipProps, getArrowProps, tooltipRef, arrowRef}) => (
6+
<div {...getTooltipProps({ref: tooltipRef})}>
7+
<div {...getArrowProps({ref: arrowRef})} />
8+
<div>Tooltip</div>
269
</div>
2710
);
2811

2912
const Trigger = ({getTriggerProps, triggerRef}) => (
30-
<span
31-
{...getTriggerProps({
32-
ref: triggerRef,
33-
className: 'trigger'
34-
})}
35-
>
36-
Hello
37-
</span>
13+
<span {...getTriggerProps({ref: triggerRef})}>Trigger</span>
3814
);
3915

16+
window.MutationObserver = class {
17+
disconnect() {}
18+
observe() {}
19+
};
20+
21+
jest.useFakeTimers();
22+
afterEach(cleanup);
23+
4024
it('matches snapshot', () => {
4125
const {container} = render(
4226
<TooltipTrigger tooltip={Tooltip}>{Trigger}</TooltipTrigger>
4327
);
4428
expect(container.firstChild).toMatchSnapshot();
4529
});
30+
31+
describe('hover trigger', () => {
32+
let container, queryByText;
33+
34+
beforeEach(() => {
35+
({container, queryByText} = render(
36+
<TooltipTrigger tooltip={Tooltip}>{Trigger}</TooltipTrigger>
37+
));
38+
fireEvent.mouseEnter(container.firstChild);
39+
jest.runAllTimers();
40+
});
41+
42+
it('opens tooltip on mouseEnter', () => {
43+
expect(queryByText('Tooltip')).toBeTruthy();
44+
});
45+
46+
it('closes tooltip on mouseLeave', () => {
47+
fireEvent.mouseLeave(container.firstChild);
48+
jest.runAllTimers();
49+
expect(queryByText('Tooltip')).toBeFalsy();
50+
});
51+
});
52+
53+
describe('click trigger', () => {
54+
let container, queryByText;
55+
56+
beforeEach(() => {
57+
({container, queryByText} = render(
58+
<TooltipTrigger trigger="click" tooltip={Tooltip}>
59+
{Trigger}
60+
</TooltipTrigger>
61+
));
62+
fireEvent.click(container.firstChild);
63+
jest.runAllTimers();
64+
});
65+
66+
it('opens tooltip on click', () => {
67+
expect(queryByText('Tooltip')).toBeTruthy();
68+
});
69+
70+
it('closes tooltip on click', () => {
71+
fireEvent.click(container.firstChild);
72+
jest.runAllTimers();
73+
expect(queryByText('Tooltip')).toBeFalsy();
74+
});
75+
});
76+
77+
describe('right-click trigger', () => {
78+
let container, queryByText;
79+
80+
beforeEach(() => {
81+
({container, queryByText} = render(
82+
<TooltipTrigger trigger="right-click" tooltip={Tooltip}>
83+
{Trigger}
84+
</TooltipTrigger>
85+
));
86+
fireEvent.contextMenu(container.firstChild);
87+
jest.runAllTimers();
88+
});
89+
90+
it('opens tooltip on rightClick', () => {
91+
expect(queryByText('Tooltip')).toBeTruthy();
92+
});
93+
94+
it('closes tooltip on rightClick', () => {
95+
fireEvent.contextMenu(container.firstChild);
96+
jest.runAllTimers();
97+
expect(queryByText('Tooltip')).toBeFalsy();
98+
});
99+
100+
it('closes tooltip on click', () => {
101+
fireEvent.click(container.firstChild);
102+
jest.runAllTimers();
103+
expect(queryByText('Tooltip')).toBeFalsy();
104+
});
105+
});
106+
107+
describe('follow cursor', () => {
108+
let container, queryByText;
109+
110+
beforeEach(() => {
111+
({container, queryByText} = render(
112+
<TooltipTrigger followCursor tooltip={Tooltip}>
113+
{Trigger}
114+
</TooltipTrigger>
115+
));
116+
fireEvent.mouseMove(container.firstChild);
117+
jest.runAllTimers();
118+
});
119+
120+
it('opens tooltip on mouseMove', () => {
121+
expect(queryByText('Tooltip')).toBeTruthy();
122+
});
123+
124+
it('closes tooltip on mouseLeave', () => {
125+
fireEvent.mouseLeave(container.firstChild);
126+
jest.runAllTimers();
127+
expect(queryByText('Tooltip')).toBeFalsy();
128+
});
129+
});
130+
131+
it('closes on outside click', () => {
132+
const {container, queryByText} = render(
133+
<>
134+
<TooltipTrigger trigger="click" tooltip={Tooltip}>
135+
{Trigger}
136+
</TooltipTrigger>
137+
<div>Outside</div>
138+
</>
139+
);
140+
141+
fireEvent.click(container.firstChild);
142+
jest.runAllTimers();
143+
144+
fireEvent.click(queryByText('Outside'));
145+
jest.runAllTimers();
146+
147+
expect(queryByText('Tooltip')).toBeFalsy();
148+
});

‎tests/__snapshots__/TooltipTrigger.spec.js.snap‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`matches snapshot 1`] = `
4-
<span
5-
class="trigger"
6-
>
7-
Hello
4+
<span>
5+
Trigger
86
</span>
97
`;

0 commit comments

Comments
 (0)