@khanacademy/wonder-blocks-tooltip 2.1.30 → 2.1.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/package.json +4 -4
  3. package/src/components/__tests__/tooltip-anchor.test.tsx +160 -95
  4. package/src/components/__tests__/tooltip.integration.test.tsx +21 -12
  5. package/src/components/__tests__/tooltip.test.tsx +36 -21
  6. package/tsconfig-build.tsbuildinfo +1 -1
package/src/components/__tests__/tooltip.integration.test.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from "react";
2
2
 
3
3
  import {render, screen, fireEvent} from "@testing-library/react";
4
- import userEvent from "@testing-library/user-event";
4
+ import {userEvent} from "@testing-library/user-event";
5
5
 
6
6
  import Tooltip from "../tooltip";
7
7
 
@@ -10,13 +10,16 @@ describe("tooltip integration tests", () => {
10
10
  jest.useFakeTimers();
11
11
  });
12
12
 
13
- it("should set timeoutId be null when TooltipBubble is active", () => {
13
+ it("should set timeoutId be null when TooltipBubble is active", async () => {
14
14
  // Arrange
15
+ const ue = userEvent.setup({
16
+ advanceTimers: jest.advanceTimersByTime,
17
+ });
15
18
  render(<Tooltip content="hello, world">an anchor</Tooltip>);
16
- const anchor = screen.getByText("an anchor");
19
+ const anchor = await screen.findByText("an anchor");
17
20
 
18
21
  // Act
19
- userEvent.hover(anchor);
22
+ await ue.hover(anchor);
20
23
  // There's a 100ms delay before TooltipAnchor calls _setActiveState with
21
24
  // instant set to true. This second call is what actually triggers the
22
25
  // call to this.props.onActiveChanged() which updates Tooltip's active
@@ -24,18 +27,21 @@ describe("tooltip integration tests", () => {
24
27
  jest.runAllTimers();
25
28
 
26
29
  // Assert
27
- expect(screen.getByRole("tooltip")).toBeInTheDocument();
30
+ expect(await screen.findByRole("tooltip")).toBeInTheDocument();
28
31
  });
29
32
 
30
- it("should hide the bubble on mouseleave on TooltipAnchor", () => {
33
+ it("should hide the bubble on mouseleave on TooltipAnchor", async () => {
31
34
  // Arrange
35
+ const ue = userEvent.setup({
36
+ advanceTimers: jest.advanceTimersByTime,
37
+ });
32
38
  render(<Tooltip content="hello, world">an anchor</Tooltip>);
33
39
 
34
- const anchor = screen.getByText("an anchor");
35
- userEvent.hover(anchor);
40
+ const anchor = await screen.findByText("an anchor");
41
+ await ue.hover(anchor);
36
42
 
37
43
  // Act
38
- userEvent.unhover(anchor);
44
+ await ue.unhover(anchor);
39
45
  // There's a 100ms delay before TooltipAnchor calls _setActiveState with
40
46
  // instant set to true. This second call is what actually triggers the
41
47
  // call to this.props.onActiveChanged() which updates Tooltip's active
@@ -48,15 +54,18 @@ describe("tooltip integration tests", () => {
48
54
 
49
55
  it("should close TooltipBubble on mouseleave on TooltipBubble", async () => {
50
56
  // Arrange
57
+ const ue = userEvent.setup({
58
+ advanceTimers: jest.advanceTimersByTime,
59
+ });
51
60
  render(<Tooltip content="hello, world">an anchor</Tooltip>);
52
61
 
53
- const anchor = screen.getByText("an anchor");
54
- userEvent.hover(anchor);
62
+ const anchor = await screen.findByText("an anchor");
63
+ await ue.hover(anchor);
55
64
  // hover on bubble to keep it active
56
65
  // Need to run the timers or we won't get the bubble wrapper to show.
57
66
  jest.runAllTimers();
58
67
  const bubbleWrapper = await screen.findByRole("tooltip");
59
- userEvent.unhover(anchor);
68
+ await ue.unhover(anchor);
60
69
 
61
70
  // Used because RTL complains about the bubble containing a child
62
71
  // element with pointerEvents: none
package/src/components/__tests__/tooltip.test.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from "react";
2
2
  import * as ReactDOM from "react-dom";
3
3
  import {render, screen} from "@testing-library/react";
4
- import userEvent from "@testing-library/user-event";
4
+ import {userEvent} from "@testing-library/user-event";
5
5
 
6
6
  import {View} from "@khanacademy/wonder-blocks-core";
7
7
 
@@ -32,7 +32,7 @@ describe("Tooltip", () => {
32
32
  });
33
33
 
34
34
  describe("basic operations", () => {
35
- it("should not show the tooltip to being with", () => {
35
+ it("should not show the tooltip to being with", async () => {
36
36
  // Arrange
37
37
  render(
38
38
  <View>
@@ -51,6 +51,9 @@ describe("Tooltip", () => {
51
51
 
52
52
  it("should show the tooltip on hover", async () => {
53
53
  // Arrange
54
+ const ue = userEvent.setup({
55
+ advanceTimers: jest.advanceTimersByTime,
56
+ });
54
57
  render(
55
58
  <View>
56
59
  <Tooltip title="Title" content="Content">
@@ -59,12 +62,12 @@ describe("Tooltip", () => {
59
62
  </View>,
60
63
  );
61
64
 
62
- const node = screen.getByText("Anchor");
63
- userEvent.hover(node);
65
+ const node = await screen.findByText("Anchor");
66
+ await ue.hover(node);
64
67
  jest.runOnlyPendingTimers();
65
68
 
66
69
  // Act
67
- const tooltip = screen.getByRole("tooltip");
70
+ const tooltip = await screen.findByRole("tooltip");
68
71
 
69
72
  // Assert
70
73
  expect(tooltip).toBeInTheDocument();
@@ -72,6 +75,9 @@ describe("Tooltip", () => {
72
75
 
73
76
  it("should hide the tooltip on unhover", async () => {
74
77
  // Arrange
78
+ const ue = userEvent.setup({
79
+ advanceTimers: jest.advanceTimersByTime,
80
+ });
75
81
  render(
76
82
  <View>
77
83
  <Tooltip title="Title" content="Content">
@@ -80,10 +86,10 @@ describe("Tooltip", () => {
80
86
  </View>,
81
87
  );
82
88
 
83
- const node = screen.getByText("Anchor");
84
- userEvent.hover(node);
89
+ const node = await screen.findByText("Anchor");
90
+ await ue.hover(node);
85
91
  jest.runOnlyPendingTimers();
86
- userEvent.unhover(node);
92
+ await ue.unhover(node);
87
93
  jest.runOnlyPendingTimers();
88
94
 
89
95
  // Act
@@ -95,6 +101,9 @@ describe("Tooltip", () => {
95
101
 
96
102
  it("should work when the anchor is text", async () => {
97
103
  // Arrange
104
+ const ue = userEvent.setup({
105
+ advanceTimers: jest.advanceTimersByTime,
106
+ });
98
107
  render(
99
108
  <View>
100
109
  <Tooltip title="Title" content="Content">
@@ -103,18 +112,18 @@ describe("Tooltip", () => {
103
112
  </View>,
104
113
  );
105
114
 
106
- const node = screen.getByText("Anchor");
107
- userEvent.hover(node);
115
+ const node = await screen.findByText("Anchor");
116
+ await ue.hover(node);
108
117
  jest.runOnlyPendingTimers();
109
118
 
110
119
  // Act
111
- const tooltip = screen.getByRole("tooltip");
120
+ const tooltip = await screen.findByRole("tooltip");
112
121
 
113
122
  // Assert
114
123
  expect(tooltip).toBeInTheDocument();
115
124
  });
116
125
 
117
- it("should have a background color if one is set", () => {
126
+ it("should have a background color if one is set", async () => {
118
127
  // Arrange
119
128
  render(
120
129
  <View>
@@ -130,7 +139,7 @@ describe("Tooltip", () => {
130
139
  );
131
140
 
132
141
  // Act
133
- const tooltipContent = screen.getByRole("tooltip");
142
+ const tooltipContent = await screen.findByRole("tooltip");
134
143
  // eslint-disable-next-line testing-library/no-node-access
135
144
  const innerTooltipContentView = tooltipContent.firstChild;
136
145
  expect(innerTooltipContentView).toBeInTheDocument();
@@ -145,6 +154,9 @@ describe("Tooltip", () => {
145
154
  describe("accessibility", () => {
146
155
  test("no id, sets identifier of TooltipBubble with UniqueIDProvider", async () => {
147
156
  // Arrange
157
+ const ue = userEvent.setup({
158
+ advanceTimers: jest.advanceTimersByTime,
159
+ });
148
160
  render(
149
161
  <View>
150
162
  <Tooltip title="Title" content="Content">
@@ -152,8 +164,8 @@ describe("Tooltip", () => {
152
164
  </Tooltip>
153
165
  </View>,
154
166
  );
155
- const node = screen.getByText("Anchor");
156
- userEvent.hover(node);
167
+ const node = await screen.findByText("Anchor");
168
+ await ue.hover(node);
157
169
  jest.runOnlyPendingTimers();
158
170
 
159
171
  // Act
@@ -166,6 +178,9 @@ describe("Tooltip", () => {
166
178
 
167
179
  test("custom id, sets identifier of TooltipBubble", async () => {
168
180
  // Arrange
181
+ const ue = userEvent.setup({
182
+ advanceTimers: jest.advanceTimersByTime,
183
+ });
169
184
  render(
170
185
  <View>
171
186
  <Tooltip id="tooltip-1" title="Title" content="Content">
@@ -173,8 +188,8 @@ describe("Tooltip", () => {
173
188
  </Tooltip>
174
189
  </View>,
175
190
  );
176
- const node = screen.getByText("Anchor");
177
- userEvent.hover(node);
191
+ const node = await screen.findByText("Anchor");
192
+ await ue.hover(node);
178
193
  jest.runOnlyPendingTimers();
179
194
 
180
195
  // Act
@@ -195,7 +210,7 @@ describe("Tooltip", () => {
195
210
  );
196
211
 
197
212
  // Act
198
- const result = screen.getByText("Anchor");
213
+ const result = await screen.findByText("Anchor");
199
214
 
200
215
  // Assert
201
216
  expect(result).toBeInstanceOf(HTMLSpanElement);
@@ -211,7 +226,7 @@ describe("Tooltip", () => {
211
226
  </Tooltip>
212
227
  </View>,
213
228
  );
214
- const node = screen.getByText("Anchor");
229
+ const node = await screen.findByText("Anchor");
215
230
 
216
231
  // Act
217
232
  const result = node.getAttribute("aria-describedby");
@@ -227,7 +242,7 @@ describe("Tooltip", () => {
227
242
  <Tooltip content="Content">Anchor</Tooltip>
228
243
  </View>,
229
244
  );
230
- const node = screen.getByText("Anchor");
245
+ const node = await screen.findByText("Anchor");
231
246
 
232
247
  // Act
233
248
 
@@ -341,7 +356,7 @@ describe("Tooltip", () => {
341
356
  jest.runOnlyPendingTimers();
342
357
 
343
358
  // Assert
344
- expect(screen.getByText("Content")).toBeInTheDocument();
359
+ expect(await screen.findByText("Content")).toBeInTheDocument();
345
360
  });
346
361
 
347
362
  test("can be closed programmatically", async () => {