@khanacademy/wonder-blocks-tooltip 1.4.1 → 1.4.2
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.
- package/CHANGELOG.md +13 -0
- package/dist/es/index.js +0 -18
- package/package.json +6 -6
- package/src/components/__tests__/tooltip-anchor.test.js +366 -423
- package/src/components/__tests__/tooltip-bubble.test.js +32 -49
- package/src/components/__tests__/tooltip-popper.test.js +2 -3
- package/src/components/__tests__/tooltip-tail.test.js +6 -84
- package/src/components/__tests__/tooltip.test.js +129 -246
- package/src/components/tooltip-tail.js +0 -18
- package/src/util/__tests__/ref-tracker.test.js +5 -7
- package/dist/index.js +0 -1495
- package/dist/index.js.flow +0 -2
- package/docs.md +0 -4
- package/src/components/__tests__/__snapshots__/tooltip-tail.test.js.snap +0 -9
- package/src/components/__tests__/__snapshots__/tooltip.test.js.snap +0 -53
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
/* eslint-disable max-lines */
|
|
2
|
-
/* eslint-disable no-unused-vars */
|
|
3
1
|
// @flow
|
|
4
2
|
import * as React from "react";
|
|
5
3
|
import {View} from "@khanacademy/wonder-blocks-core";
|
|
6
|
-
import {
|
|
7
|
-
import "
|
|
4
|
+
import {render, screen} from "@testing-library/react";
|
|
5
|
+
import userEvent from "@testing-library/user-event";
|
|
8
6
|
|
|
9
7
|
import TooltipAnchor from "../tooltip-anchor.js";
|
|
10
8
|
import {
|
|
@@ -43,11 +41,6 @@ describe("TooltipAnchor", () => {
|
|
|
43
41
|
|
|
44
42
|
test("on mount, subscribes to focus and hover events", () => {
|
|
45
43
|
// Arrange
|
|
46
|
-
const nodes = (
|
|
47
|
-
<TooltipAnchor anchorRef={() => {}} onActiveChanged={() => {}}>
|
|
48
|
-
Anchor text
|
|
49
|
-
</TooltipAnchor>
|
|
50
|
-
);
|
|
51
44
|
const addEventListenerSpy = jest.spyOn(
|
|
52
45
|
HTMLElement.prototype,
|
|
53
46
|
"addEventListener",
|
|
@@ -55,7 +48,11 @@ describe("TooltipAnchor", () => {
|
|
|
55
48
|
addEventListenerSpy.mockClear();
|
|
56
49
|
|
|
57
50
|
// Act
|
|
58
|
-
|
|
51
|
+
render(
|
|
52
|
+
<TooltipAnchor anchorRef={() => {}} onActiveChanged={() => {}}>
|
|
53
|
+
Anchor text
|
|
54
|
+
</TooltipAnchor>,
|
|
55
|
+
);
|
|
59
56
|
|
|
60
57
|
// Assert
|
|
61
58
|
expect(addEventListenerSpy).toHaveBeenCalledWith(
|
|
@@ -78,17 +75,16 @@ describe("TooltipAnchor", () => {
|
|
|
78
75
|
|
|
79
76
|
test("on unmount, unsubscribes from focus and hover events", () => {
|
|
80
77
|
// Arrange
|
|
81
|
-
const nodes = (
|
|
82
|
-
<TooltipAnchor anchorRef={() => {}} onActiveChanged={() => {}}>
|
|
83
|
-
Anchor text
|
|
84
|
-
</TooltipAnchor>
|
|
85
|
-
);
|
|
86
78
|
const removeEventListenerSpy = jest.spyOn(
|
|
87
79
|
HTMLElement.prototype,
|
|
88
80
|
"removeEventListener",
|
|
89
81
|
);
|
|
90
82
|
removeEventListenerSpy.mockClear();
|
|
91
|
-
const wrapper =
|
|
83
|
+
const wrapper = render(
|
|
84
|
+
<TooltipAnchor anchorRef={() => {}} onActiveChanged={() => {}}>
|
|
85
|
+
Anchor text
|
|
86
|
+
</TooltipAnchor>,
|
|
87
|
+
);
|
|
92
88
|
|
|
93
89
|
// Act
|
|
94
90
|
wrapper.unmount();
|
|
@@ -112,123 +108,136 @@ describe("TooltipAnchor", () => {
|
|
|
112
108
|
);
|
|
113
109
|
});
|
|
114
110
|
|
|
111
|
+
test("ref is properly set", () => {
|
|
112
|
+
// Arrange
|
|
113
|
+
const anchorRef = jest.fn();
|
|
114
|
+
|
|
115
|
+
render(
|
|
116
|
+
<TooltipAnchor
|
|
117
|
+
forceAnchorFocusivity={true}
|
|
118
|
+
anchorRef={anchorRef}
|
|
119
|
+
onActiveChanged={() => {}}
|
|
120
|
+
>
|
|
121
|
+
<View id="portal">This is the anchor</View>
|
|
122
|
+
</TooltipAnchor>,
|
|
123
|
+
);
|
|
124
|
+
|
|
125
|
+
// Act
|
|
126
|
+
const result = screen.getByText("This is the anchor");
|
|
127
|
+
|
|
128
|
+
// Assert
|
|
129
|
+
expect(anchorRef).toHaveBeenCalledWith(result);
|
|
130
|
+
});
|
|
131
|
+
|
|
115
132
|
describe("forceAnchorFocusivity is true", () => {
|
|
116
|
-
test("if not set, sets tabindex on anchor target",
|
|
133
|
+
test("if not set, sets tabindex on anchor target", () => {
|
|
117
134
|
// Arrange
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
>
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
);
|
|
128
|
-
mount(nodes);
|
|
129
|
-
});
|
|
135
|
+
render(
|
|
136
|
+
<TooltipAnchor
|
|
137
|
+
forceAnchorFocusivity={true}
|
|
138
|
+
anchorRef={jest.fn()}
|
|
139
|
+
onActiveChanged={() => {}}
|
|
140
|
+
>
|
|
141
|
+
<View id="portal">This is the anchor</View>
|
|
142
|
+
</TooltipAnchor>,
|
|
143
|
+
);
|
|
130
144
|
|
|
131
145
|
// Act
|
|
132
|
-
const result =
|
|
146
|
+
const result = screen.getByText("This is the anchor");
|
|
133
147
|
|
|
134
148
|
// Assert
|
|
135
|
-
expect(result).
|
|
149
|
+
expect(result).toHaveAttribute("tabindex", "0");
|
|
136
150
|
});
|
|
137
151
|
|
|
138
|
-
test("if tabindex already set, leaves it as-is",
|
|
152
|
+
test("if tabindex already set, leaves it as-is", () => {
|
|
139
153
|
// Arrange
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
>
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
);
|
|
150
|
-
mount(nodes);
|
|
151
|
-
});
|
|
154
|
+
render(
|
|
155
|
+
<TooltipAnchor
|
|
156
|
+
forceAnchorFocusivity={true}
|
|
157
|
+
anchorRef={jest.fn()}
|
|
158
|
+
onActiveChanged={() => {}}
|
|
159
|
+
>
|
|
160
|
+
<View tabIndex={-1}>This is the anchor</View>
|
|
161
|
+
</TooltipAnchor>,
|
|
162
|
+
);
|
|
152
163
|
|
|
153
164
|
// Act
|
|
154
|
-
const result =
|
|
165
|
+
const result = screen.getByText("This is the anchor");
|
|
155
166
|
|
|
156
167
|
// Assert
|
|
157
|
-
expect(result).
|
|
168
|
+
expect(result).toHaveAttribute("tabindex", "-1");
|
|
158
169
|
});
|
|
159
170
|
});
|
|
160
171
|
|
|
161
172
|
describe("forceAnchorFocusivity is false", () => {
|
|
162
|
-
test("does not set tabindex on anchor target",
|
|
173
|
+
test("does not set tabindex on anchor target", () => {
|
|
163
174
|
// Arrange
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
>
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
);
|
|
174
|
-
mount(nodes);
|
|
175
|
-
});
|
|
175
|
+
render(
|
|
176
|
+
<TooltipAnchor
|
|
177
|
+
forceAnchorFocusivity={false}
|
|
178
|
+
anchorRef={jest.fn()}
|
|
179
|
+
onActiveChanged={() => {}}
|
|
180
|
+
>
|
|
181
|
+
<View>This is the anchor</View>
|
|
182
|
+
</TooltipAnchor>,
|
|
183
|
+
);
|
|
176
184
|
|
|
177
185
|
// Act
|
|
178
|
-
const result =
|
|
186
|
+
const result = screen.getByText("This is the anchor");
|
|
179
187
|
|
|
180
188
|
// Assert
|
|
181
|
-
expect(result).
|
|
189
|
+
expect(result).not.toHaveAttribute("tabindex");
|
|
182
190
|
});
|
|
183
191
|
|
|
184
192
|
test("if we had added tabindex, removes it", async () => {
|
|
185
193
|
// Arrange
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
);
|
|
197
|
-
wrapper = mount(<TestFixture force={true} />);
|
|
198
|
-
});
|
|
194
|
+
const TestFixture = (props: any) => (
|
|
195
|
+
<TooltipAnchor
|
|
196
|
+
forceAnchorFocusivity={props.force}
|
|
197
|
+
anchorRef={jest.fn()}
|
|
198
|
+
onActiveChanged={() => {}}
|
|
199
|
+
>
|
|
200
|
+
<View>This is the anchor</View>
|
|
201
|
+
</TooltipAnchor>
|
|
202
|
+
);
|
|
203
|
+
const {rerender} = render(<TestFixture force={true} />);
|
|
199
204
|
|
|
200
205
|
// Act
|
|
201
|
-
|
|
202
|
-
|
|
206
|
+
expect(screen.getByText("This is the anchor")).toHaveAttribute(
|
|
207
|
+
"tabindex",
|
|
208
|
+
"0",
|
|
209
|
+
);
|
|
203
210
|
|
|
204
|
-
|
|
205
|
-
const result = ref?.getAttribute("tabindex");
|
|
211
|
+
rerender(<TestFixture force={false} />);
|
|
206
212
|
|
|
207
213
|
// Assert
|
|
208
|
-
expect(
|
|
214
|
+
expect(screen.getByText("This is the anchor")).not.toHaveAttribute(
|
|
215
|
+
"tabindex",
|
|
216
|
+
);
|
|
209
217
|
});
|
|
210
218
|
|
|
211
219
|
test("if we had not added tabindex, leaves it", async () => {
|
|
212
220
|
// Arrange
|
|
213
|
-
const
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
>
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
wrapper.setProps({force: false});
|
|
225
|
-
});
|
|
221
|
+
const TestFixture = (props: any) => (
|
|
222
|
+
<TooltipAnchor
|
|
223
|
+
forceAnchorFocusivity={props.force}
|
|
224
|
+
anchorRef={jest.fn()}
|
|
225
|
+
onActiveChanged={() => {}}
|
|
226
|
+
>
|
|
227
|
+
<View tabIndex={-1}>This is the anchor</View>
|
|
228
|
+
</TooltipAnchor>
|
|
229
|
+
);
|
|
230
|
+
|
|
231
|
+
const wrapper = render(<TestFixture force={true} />);
|
|
226
232
|
|
|
227
233
|
// Act
|
|
228
|
-
|
|
234
|
+
wrapper.rerender(<TestFixture force={false} />);
|
|
229
235
|
|
|
230
236
|
// Assert
|
|
231
|
-
expect(
|
|
237
|
+
expect(screen.getByText("This is the anchor")).toHaveAttribute(
|
|
238
|
+
"tabindex",
|
|
239
|
+
"-1",
|
|
240
|
+
);
|
|
232
241
|
});
|
|
233
242
|
});
|
|
234
243
|
|
|
@@ -248,26 +257,20 @@ describe("TooltipAnchor", () => {
|
|
|
248
257
|
|
|
249
258
|
let activeState = false;
|
|
250
259
|
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
);
|
|
262
|
-
mount(nodes);
|
|
263
|
-
});
|
|
260
|
+
render(
|
|
261
|
+
<TooltipAnchor
|
|
262
|
+
anchorRef={jest.fn()}
|
|
263
|
+
onActiveChanged={(active) => {
|
|
264
|
+
activeState = active;
|
|
265
|
+
}}
|
|
266
|
+
>
|
|
267
|
+
Anchor Text
|
|
268
|
+
</TooltipAnchor>,
|
|
269
|
+
);
|
|
264
270
|
|
|
265
271
|
// Act
|
|
266
|
-
// Let's
|
|
267
|
-
|
|
268
|
-
// fake directly because there's no real browser here handling
|
|
269
|
-
// focus and real events.
|
|
270
|
-
ref?.dispatchEvent(new FocusEvent("focusin"));
|
|
272
|
+
// Let's focus the anchor
|
|
273
|
+
userEvent.tab();
|
|
271
274
|
// Check that we didn't go active before the delay
|
|
272
275
|
expect(activeState).toBe(false);
|
|
273
276
|
expect(timeoutSpy).toHaveBeenLastCalledWith(
|
|
@@ -293,26 +296,21 @@ describe("TooltipAnchor", () => {
|
|
|
293
296
|
mockTracker.steal.mockImplementationOnce(() => true);
|
|
294
297
|
|
|
295
298
|
let activeState = false;
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
mount(nodes);
|
|
308
|
-
});
|
|
299
|
+
|
|
300
|
+
render(
|
|
301
|
+
<TooltipAnchor
|
|
302
|
+
anchorRef={jest.fn()}
|
|
303
|
+
onActiveChanged={(active) => {
|
|
304
|
+
activeState = active;
|
|
305
|
+
}}
|
|
306
|
+
>
|
|
307
|
+
Anchor Text
|
|
308
|
+
</TooltipAnchor>,
|
|
309
|
+
);
|
|
309
310
|
|
|
310
311
|
// Act
|
|
311
|
-
// Let's
|
|
312
|
-
|
|
313
|
-
// fake directly because there's no real browser here handling
|
|
314
|
-
// focus and real events.
|
|
315
|
-
ref?.dispatchEvent(new FocusEvent("focusin"));
|
|
312
|
+
// Let's focus the anchor
|
|
313
|
+
userEvent.tab();
|
|
316
314
|
|
|
317
315
|
// Assert
|
|
318
316
|
expect(activeState).toBe(true);
|
|
@@ -320,25 +318,24 @@ describe("TooltipAnchor", () => {
|
|
|
320
318
|
});
|
|
321
319
|
|
|
322
320
|
describe("loses keyboard focus", () => {
|
|
323
|
-
test("active state was not stolen, active is set to false with delay",
|
|
321
|
+
test("active state was not stolen, active is set to false with delay", () => {
|
|
324
322
|
// Arrange
|
|
325
323
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
326
324
|
let activeState = false;
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
ref?.dispatchEvent(new FocusEvent("focusin"));
|
|
325
|
+
|
|
326
|
+
render(
|
|
327
|
+
<TooltipAnchor
|
|
328
|
+
anchorRef={jest.fn()}
|
|
329
|
+
onActiveChanged={(active) => {
|
|
330
|
+
activeState = active;
|
|
331
|
+
}}
|
|
332
|
+
>
|
|
333
|
+
Anchor Text
|
|
334
|
+
</TooltipAnchor>,
|
|
335
|
+
);
|
|
336
|
+
|
|
337
|
+
// Let's focus the anchor
|
|
338
|
+
userEvent.tab();
|
|
342
339
|
expect(timeoutSpy).toHaveBeenLastCalledWith(
|
|
343
340
|
expect.any(Function),
|
|
344
341
|
TooltipAppearanceDelay,
|
|
@@ -347,8 +344,8 @@ describe("TooltipAnchor", () => {
|
|
|
347
344
|
expect(activeState).toBe(true);
|
|
348
345
|
|
|
349
346
|
// Act
|
|
350
|
-
|
|
351
|
-
|
|
347
|
+
// Let's blur the anchor
|
|
348
|
+
userEvent.tab();
|
|
352
349
|
expect(timeoutSpy).toHaveBeenLastCalledWith(
|
|
353
350
|
expect.any(Function),
|
|
354
351
|
TooltipDisappearanceDelay,
|
|
@@ -370,21 +367,19 @@ describe("TooltipAnchor", () => {
|
|
|
370
367
|
const mockTracker = ActiveTracker.mock.instances[0];
|
|
371
368
|
|
|
372
369
|
let activeState = false;
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
ref?.dispatchEvent(new FocusEvent("focusin"));
|
|
370
|
+
render(
|
|
371
|
+
<TooltipAnchor
|
|
372
|
+
anchorRef={jest.fn()}
|
|
373
|
+
onActiveChanged={(active) => {
|
|
374
|
+
activeState = active;
|
|
375
|
+
}}
|
|
376
|
+
>
|
|
377
|
+
Anchor Text
|
|
378
|
+
</TooltipAnchor>,
|
|
379
|
+
);
|
|
380
|
+
|
|
381
|
+
// Let's focus the anchor
|
|
382
|
+
userEvent.tab();
|
|
388
383
|
expect(timeoutSpy).toHaveBeenLastCalledWith(
|
|
389
384
|
expect.any(Function),
|
|
390
385
|
TooltipAppearanceDelay,
|
|
@@ -393,8 +388,8 @@ describe("TooltipAnchor", () => {
|
|
|
393
388
|
expect(activeState).toBe(true);
|
|
394
389
|
|
|
395
390
|
// Act
|
|
396
|
-
|
|
397
|
-
|
|
391
|
+
// Let's blur the anchor
|
|
392
|
+
userEvent.tab();
|
|
398
393
|
expect(timeoutSpy).toHaveBeenLastCalledWith(
|
|
399
394
|
expect.any(Function),
|
|
400
395
|
TooltipDisappearanceDelay,
|
|
@@ -405,26 +400,24 @@ describe("TooltipAnchor", () => {
|
|
|
405
400
|
expect(mockTracker.giveup).toHaveBeenCalledTimes(1);
|
|
406
401
|
});
|
|
407
402
|
|
|
408
|
-
test("active state was stolen, active is set to false immediately",
|
|
403
|
+
test("active state was stolen, active is set to false immediately", () => {
|
|
409
404
|
// Arrange
|
|
410
405
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
411
|
-
let wrapper;
|
|
412
406
|
let activeState = false;
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
ref?.dispatchEvent(new FocusEvent("focusin"));
|
|
407
|
+
|
|
408
|
+
render(
|
|
409
|
+
<TooltipAnchor
|
|
410
|
+
anchorRef={jest.fn()}
|
|
411
|
+
onActiveChanged={(active) => {
|
|
412
|
+
activeState = active;
|
|
413
|
+
}}
|
|
414
|
+
>
|
|
415
|
+
Anchor Text
|
|
416
|
+
</TooltipAnchor>,
|
|
417
|
+
);
|
|
418
|
+
|
|
419
|
+
// Focus the anchor
|
|
420
|
+
userEvent.tab();
|
|
428
421
|
expect(timeoutSpy).toHaveBeenLastCalledWith(
|
|
429
422
|
expect.any(Function),
|
|
430
423
|
TooltipAppearanceDelay,
|
|
@@ -433,8 +426,9 @@ describe("TooltipAnchor", () => {
|
|
|
433
426
|
expect(activeState).toBe(true);
|
|
434
427
|
|
|
435
428
|
// Act
|
|
436
|
-
|
|
437
|
-
|
|
429
|
+
// Blur the anchor
|
|
430
|
+
userEvent.tab();
|
|
431
|
+
jest.runOnlyPendingTimers();
|
|
438
432
|
|
|
439
433
|
// Assert
|
|
440
434
|
expect(activeState).toBe(false);
|
|
@@ -450,22 +444,19 @@ describe("TooltipAnchor", () => {
|
|
|
450
444
|
// $FlowFixMe[prop-missing]
|
|
451
445
|
const mockTracker = ActiveTracker.mock.instances[0];
|
|
452
446
|
// Arrange
|
|
453
|
-
let wrapper;
|
|
454
447
|
let activeState = false;
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
});
|
|
468
|
-
ref?.dispatchEvent(new FocusEvent("focusin"));
|
|
448
|
+
render(
|
|
449
|
+
<TooltipAnchor
|
|
450
|
+
anchorRef={jest.fn()}
|
|
451
|
+
onActiveChanged={(active) => {
|
|
452
|
+
activeState = active;
|
|
453
|
+
}}
|
|
454
|
+
>
|
|
455
|
+
Anchor Text
|
|
456
|
+
</TooltipAnchor>,
|
|
457
|
+
);
|
|
458
|
+
// Focus the anchor
|
|
459
|
+
userEvent.tab();
|
|
469
460
|
expect(timeoutSpy).toHaveBeenLastCalledWith(
|
|
470
461
|
expect.any(Function),
|
|
471
462
|
TooltipAppearanceDelay,
|
|
@@ -474,41 +465,41 @@ describe("TooltipAnchor", () => {
|
|
|
474
465
|
expect(activeState).toBe(true);
|
|
475
466
|
|
|
476
467
|
// Act
|
|
477
|
-
|
|
478
|
-
|
|
468
|
+
// Blur the anchor
|
|
469
|
+
userEvent.tab();
|
|
479
470
|
|
|
480
471
|
// Assert
|
|
481
472
|
expect(mockTracker.giveup).not.toHaveBeenCalled();
|
|
482
473
|
});
|
|
483
474
|
|
|
484
|
-
test("if hovered, remains active",
|
|
475
|
+
test("if hovered, remains active", () => {
|
|
485
476
|
// Arrange
|
|
486
477
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
487
478
|
let activeState = false;
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
ref?.dispatchEvent(new FocusEvent("focusin"));
|
|
479
|
+
render(
|
|
480
|
+
<TooltipAnchor
|
|
481
|
+
anchorRef={jest.fn()}
|
|
482
|
+
onActiveChanged={(active) => {
|
|
483
|
+
activeState = active;
|
|
484
|
+
}}
|
|
485
|
+
>
|
|
486
|
+
Anchor Text
|
|
487
|
+
</TooltipAnchor>,
|
|
488
|
+
);
|
|
489
|
+
|
|
490
|
+
// Focus the anchor
|
|
491
|
+
userEvent.tab();
|
|
502
492
|
expect(timeoutSpy).toHaveBeenLastCalledWith(
|
|
503
493
|
expect.any(Function),
|
|
504
494
|
TooltipAppearanceDelay,
|
|
505
495
|
);
|
|
506
496
|
jest.runOnlyPendingTimers();
|
|
507
497
|
timeoutSpy.mockClear();
|
|
508
|
-
|
|
498
|
+
userEvent.hover(screen.getByText("Anchor Text"));
|
|
509
499
|
|
|
510
500
|
// Act
|
|
511
|
-
|
|
501
|
+
// Blur the anchor
|
|
502
|
+
userEvent.tab();
|
|
512
503
|
|
|
513
504
|
// Assert
|
|
514
505
|
// Make sure that we're not delay hiding as well.
|
|
@@ -532,22 +523,20 @@ describe("TooltipAnchor", () => {
|
|
|
532
523
|
mockTracker.steal.mockImplementationOnce(() => false);
|
|
533
524
|
|
|
534
525
|
let activeState = false;
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
mount(nodes);
|
|
547
|
-
});
|
|
526
|
+
|
|
527
|
+
render(
|
|
528
|
+
<TooltipAnchor
|
|
529
|
+
anchorRef={jest.fn()}
|
|
530
|
+
onActiveChanged={(active) => {
|
|
531
|
+
activeState = active;
|
|
532
|
+
}}
|
|
533
|
+
>
|
|
534
|
+
Anchor Text
|
|
535
|
+
</TooltipAnchor>,
|
|
536
|
+
);
|
|
548
537
|
|
|
549
538
|
// Act
|
|
550
|
-
|
|
539
|
+
userEvent.hover(screen.getByText("Anchor Text"));
|
|
551
540
|
// Check that we didn't go active before the delay
|
|
552
541
|
expect(activeState).toBe(false);
|
|
553
542
|
expect(timeoutSpy).toHaveBeenLastCalledWith(
|
|
@@ -573,22 +562,20 @@ describe("TooltipAnchor", () => {
|
|
|
573
562
|
mockTracker.steal.mockImplementationOnce(() => true);
|
|
574
563
|
|
|
575
564
|
let activeState = false;
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
mount(nodes);
|
|
588
|
-
});
|
|
565
|
+
|
|
566
|
+
render(
|
|
567
|
+
<TooltipAnchor
|
|
568
|
+
anchorRef={jest.fn()}
|
|
569
|
+
onActiveChanged={(active) => {
|
|
570
|
+
activeState = active;
|
|
571
|
+
}}
|
|
572
|
+
>
|
|
573
|
+
Anchor Text
|
|
574
|
+
</TooltipAnchor>,
|
|
575
|
+
);
|
|
589
576
|
|
|
590
577
|
// Act
|
|
591
|
-
|
|
578
|
+
userEvent.hover(screen.getByText("Anchor Text"));
|
|
592
579
|
|
|
593
580
|
// Assert
|
|
594
581
|
expect(activeState).toBe(true);
|
|
@@ -596,24 +583,23 @@ describe("TooltipAnchor", () => {
|
|
|
596
583
|
});
|
|
597
584
|
|
|
598
585
|
describe("is unhovered", () => {
|
|
599
|
-
test("active state was not stolen, active is set to false with delay",
|
|
586
|
+
test("active state was not stolen, active is set to false with delay", () => {
|
|
600
587
|
// Arrange
|
|
601
588
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
602
589
|
let activeState = false;
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
ref?.dispatchEvent(new MouseEvent("mouseenter"));
|
|
590
|
+
|
|
591
|
+
render(
|
|
592
|
+
<TooltipAnchor
|
|
593
|
+
anchorRef={jest.fn()}
|
|
594
|
+
onActiveChanged={(active) => {
|
|
595
|
+
activeState = active;
|
|
596
|
+
}}
|
|
597
|
+
>
|
|
598
|
+
Anchor Text
|
|
599
|
+
</TooltipAnchor>,
|
|
600
|
+
);
|
|
601
|
+
|
|
602
|
+
userEvent.hover(screen.getByText("Anchor Text"));
|
|
617
603
|
expect(timeoutSpy).toHaveBeenLastCalledWith(
|
|
618
604
|
expect.any(Function),
|
|
619
605
|
TooltipAppearanceDelay,
|
|
@@ -622,7 +608,7 @@ describe("TooltipAnchor", () => {
|
|
|
622
608
|
expect(activeState).toBe(true);
|
|
623
609
|
|
|
624
610
|
// Act
|
|
625
|
-
|
|
611
|
+
userEvent.unhover(screen.getByText("Anchor Text"));
|
|
626
612
|
expect(activeState).toBe(true);
|
|
627
613
|
expect(timeoutSpy).toHaveBeenLastCalledWith(
|
|
628
614
|
expect.any(Function),
|
|
@@ -644,20 +630,19 @@ describe("TooltipAnchor", () => {
|
|
|
644
630
|
// $FlowFixMe[prop-missing]
|
|
645
631
|
const mockTracker = ActiveTracker.mock.instances[0];
|
|
646
632
|
let activeState = false;
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
ref?.dispatchEvent(new MouseEvent("mouseenter"));
|
|
633
|
+
|
|
634
|
+
render(
|
|
635
|
+
<TooltipAnchor
|
|
636
|
+
anchorRef={jest.fn()}
|
|
637
|
+
onActiveChanged={(active) => {
|
|
638
|
+
activeState = active;
|
|
639
|
+
}}
|
|
640
|
+
>
|
|
641
|
+
Anchor Text
|
|
642
|
+
</TooltipAnchor>,
|
|
643
|
+
);
|
|
644
|
+
|
|
645
|
+
userEvent.hover(screen.getByText("Anchor Text"));
|
|
661
646
|
expect(timeoutSpy).toHaveBeenLastCalledWith(
|
|
662
647
|
expect.any(Function),
|
|
663
648
|
TooltipAppearanceDelay,
|
|
@@ -666,7 +651,7 @@ describe("TooltipAnchor", () => {
|
|
|
666
651
|
expect(activeState).toBe(true);
|
|
667
652
|
|
|
668
653
|
// Act
|
|
669
|
-
|
|
654
|
+
userEvent.unhover(screen.getByText("Anchor Text"));
|
|
670
655
|
expect(activeState).toBe(true);
|
|
671
656
|
expect(timeoutSpy).toHaveBeenLastCalledWith(
|
|
672
657
|
expect.any(Function),
|
|
@@ -678,25 +663,23 @@ describe("TooltipAnchor", () => {
|
|
|
678
663
|
expect(mockTracker.giveup).toHaveBeenCalledTimes(1);
|
|
679
664
|
});
|
|
680
665
|
|
|
681
|
-
test("active state was stolen, active is set to false immediately",
|
|
666
|
+
test("active state was stolen, active is set to false immediately", () => {
|
|
682
667
|
// Arrange
|
|
683
668
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
684
|
-
let wrapper;
|
|
685
669
|
let activeState = false;
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
ref?.dispatchEvent(new MouseEvent("mouseenter"));
|
|
670
|
+
|
|
671
|
+
render(
|
|
672
|
+
<TooltipAnchor
|
|
673
|
+
anchorRef={jest.fn()}
|
|
674
|
+
onActiveChanged={(active) => {
|
|
675
|
+
activeState = active;
|
|
676
|
+
}}
|
|
677
|
+
>
|
|
678
|
+
Anchor Text
|
|
679
|
+
</TooltipAnchor>,
|
|
680
|
+
);
|
|
681
|
+
|
|
682
|
+
userEvent.hover(screen.getByText("Anchor Text"));
|
|
700
683
|
expect(timeoutSpy).toHaveBeenLastCalledWith(
|
|
701
684
|
expect.any(Function),
|
|
702
685
|
TooltipAppearanceDelay,
|
|
@@ -705,8 +688,8 @@ describe("TooltipAnchor", () => {
|
|
|
705
688
|
expect(activeState).toBe(true);
|
|
706
689
|
|
|
707
690
|
// Act
|
|
708
|
-
|
|
709
|
-
|
|
691
|
+
userEvent.unhover(screen.getByText("Anchor Text"));
|
|
692
|
+
jest.runOnlyPendingTimers();
|
|
710
693
|
|
|
711
694
|
// Assert
|
|
712
695
|
expect(activeState).toBe(false);
|
|
@@ -722,22 +705,18 @@ describe("TooltipAnchor", () => {
|
|
|
722
705
|
// $FlowFixMe[prop-missing]
|
|
723
706
|
const mockTracker = ActiveTracker.mock.instances[0];
|
|
724
707
|
// Arrange
|
|
725
|
-
let wrapper;
|
|
726
708
|
let activeState = false;
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
wrapper = mount(nodes);
|
|
739
|
-
});
|
|
740
|
-
ref?.dispatchEvent(new MouseEvent("mouseenter"));
|
|
709
|
+
render(
|
|
710
|
+
<TooltipAnchor
|
|
711
|
+
anchorRef={jest.fn()}
|
|
712
|
+
onActiveChanged={(active) => {
|
|
713
|
+
activeState = active;
|
|
714
|
+
}}
|
|
715
|
+
>
|
|
716
|
+
Anchor Text
|
|
717
|
+
</TooltipAnchor>,
|
|
718
|
+
);
|
|
719
|
+
userEvent.hover(screen.getByText("Anchor Text"));
|
|
741
720
|
expect(timeoutSpy).toHaveBeenLastCalledWith(
|
|
742
721
|
expect.any(Function),
|
|
743
722
|
TooltipAppearanceDelay,
|
|
@@ -746,8 +725,7 @@ describe("TooltipAnchor", () => {
|
|
|
746
725
|
expect(activeState).toBe(true);
|
|
747
726
|
|
|
748
727
|
// Act
|
|
749
|
-
|
|
750
|
-
wrapper?.instance().activeStateStolen();
|
|
728
|
+
userEvent.unhover(screen.getByText("Anchor Text"));
|
|
751
729
|
|
|
752
730
|
// Assert
|
|
753
731
|
expect(mockTracker.giveup).not.toHaveBeenCalled();
|
|
@@ -757,30 +735,28 @@ describe("TooltipAnchor", () => {
|
|
|
757
735
|
// Arrange
|
|
758
736
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
759
737
|
let activeState = false;
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
mount(nodes);
|
|
772
|
-
});
|
|
773
|
-
ref?.dispatchEvent(new MouseEvent("mouseenter"));
|
|
738
|
+
render(
|
|
739
|
+
<TooltipAnchor
|
|
740
|
+
anchorRef={jest.fn()}
|
|
741
|
+
onActiveChanged={(active) => {
|
|
742
|
+
activeState = active;
|
|
743
|
+
}}
|
|
744
|
+
>
|
|
745
|
+
Anchor Text
|
|
746
|
+
</TooltipAnchor>,
|
|
747
|
+
);
|
|
748
|
+
userEvent.hover(screen.getByText("Anchor Text"));
|
|
774
749
|
expect(timeoutSpy).toHaveBeenLastCalledWith(
|
|
775
750
|
expect.any(Function),
|
|
776
751
|
TooltipAppearanceDelay,
|
|
777
752
|
);
|
|
778
753
|
jest.runOnlyPendingTimers();
|
|
779
754
|
timeoutSpy.mockClear();
|
|
780
|
-
|
|
755
|
+
// Focus the anchor
|
|
756
|
+
userEvent.tab();
|
|
781
757
|
|
|
782
758
|
// Act
|
|
783
|
-
|
|
759
|
+
userEvent.unhover(screen.getByText("Anchor Text"));
|
|
784
760
|
|
|
785
761
|
// Assert
|
|
786
762
|
// Make sure that we're not delay hiding as well.
|
|
@@ -790,24 +766,18 @@ describe("TooltipAnchor", () => {
|
|
|
790
766
|
});
|
|
791
767
|
|
|
792
768
|
describe("dismiss behavior", () => {
|
|
793
|
-
test("subscribes to keydown event on active",
|
|
769
|
+
test("subscribes to keydown event on active", () => {
|
|
794
770
|
// Arrange
|
|
795
771
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
796
772
|
const spy = jest.spyOn(document, "addEventListener");
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
>
|
|
803
|
-
Anchor Text
|
|
804
|
-
</TooltipAnchor>
|
|
805
|
-
);
|
|
806
|
-
mount(nodes);
|
|
807
|
-
});
|
|
773
|
+
render(
|
|
774
|
+
<TooltipAnchor anchorRef={jest.fn()} onActiveChanged={() => {}}>
|
|
775
|
+
Anchor Text
|
|
776
|
+
</TooltipAnchor>,
|
|
777
|
+
);
|
|
808
778
|
|
|
809
779
|
// Act
|
|
810
|
-
|
|
780
|
+
userEvent.hover(screen.getByText("Anchor Text"));
|
|
811
781
|
expect(timeoutSpy).toHaveBeenLastCalledWith(
|
|
812
782
|
expect.any(Function),
|
|
813
783
|
TooltipAppearanceDelay,
|
|
@@ -819,23 +789,18 @@ describe("TooltipAnchor", () => {
|
|
|
819
789
|
expect(spy).toHaveBeenLastCalledWith("keyup", expect.any(Function));
|
|
820
790
|
});
|
|
821
791
|
|
|
822
|
-
test("does not subscribe to keydown event if already active",
|
|
792
|
+
test("does not subscribe to keydown event if already active", () => {
|
|
823
793
|
// Arrange
|
|
824
794
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
825
795
|
const spy = jest.spyOn(document, "addEventListener");
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
);
|
|
835
|
-
mount(nodes);
|
|
836
|
-
});
|
|
837
|
-
|
|
838
|
-
ref?.dispatchEvent(new KeyboardEvent("focusin"));
|
|
796
|
+
render(
|
|
797
|
+
<TooltipAnchor anchorRef={jest.fn()} onActiveChanged={() => {}}>
|
|
798
|
+
Anchor Text
|
|
799
|
+
</TooltipAnchor>,
|
|
800
|
+
);
|
|
801
|
+
|
|
802
|
+
// Focus the anchor
|
|
803
|
+
userEvent.tab();
|
|
839
804
|
expect(timeoutSpy).toHaveBeenLastCalledWith(
|
|
840
805
|
expect.any(Function),
|
|
841
806
|
TooltipAppearanceDelay,
|
|
@@ -846,29 +811,24 @@ describe("TooltipAnchor", () => {
|
|
|
846
811
|
spy.mockClear();
|
|
847
812
|
|
|
848
813
|
// Act
|
|
849
|
-
|
|
814
|
+
userEvent.hover(screen.getByText("Anchor Text"));
|
|
850
815
|
|
|
851
816
|
// Assert
|
|
852
817
|
expect(spy).not.toHaveBeenCalled();
|
|
853
818
|
});
|
|
854
819
|
|
|
855
|
-
test("unsubscribes from keydown event on inactive",
|
|
820
|
+
test("unsubscribes from keydown event on inactive", () => {
|
|
856
821
|
// Arrange
|
|
857
822
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
858
823
|
const spy = jest.spyOn(document, "removeEventListener");
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
);
|
|
868
|
-
mount(nodes);
|
|
869
|
-
});
|
|
870
|
-
|
|
871
|
-
ref?.dispatchEvent(new KeyboardEvent("focusin"));
|
|
824
|
+
render(
|
|
825
|
+
<TooltipAnchor anchorRef={jest.fn()} onActiveChanged={() => {}}>
|
|
826
|
+
Anchor Text
|
|
827
|
+
</TooltipAnchor>,
|
|
828
|
+
);
|
|
829
|
+
|
|
830
|
+
// Focus the anchor
|
|
831
|
+
userEvent.tab();
|
|
872
832
|
expect(timeoutSpy).toHaveBeenLastCalledWith(
|
|
873
833
|
expect.any(Function),
|
|
874
834
|
TooltipAppearanceDelay,
|
|
@@ -876,7 +836,8 @@ describe("TooltipAnchor", () => {
|
|
|
876
836
|
jest.runOnlyPendingTimers();
|
|
877
837
|
|
|
878
838
|
// Act
|
|
879
|
-
|
|
839
|
+
// Blur the anchor
|
|
840
|
+
userEvent.tab();
|
|
880
841
|
expect(timeoutSpy).toHaveBeenLastCalledWith(
|
|
881
842
|
expect.any(Function),
|
|
882
843
|
TooltipDisappearanceDelay,
|
|
@@ -888,24 +849,19 @@ describe("TooltipAnchor", () => {
|
|
|
888
849
|
expect(spy).toHaveBeenLastCalledWith("keyup", expect.any(Function));
|
|
889
850
|
});
|
|
890
851
|
|
|
891
|
-
test("unsubscribes from keydown event on unmount",
|
|
852
|
+
test("unsubscribes from keydown event on unmount", () => {
|
|
892
853
|
// Arrange
|
|
893
854
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
894
|
-
|
|
855
|
+
|
|
895
856
|
const spy = jest.spyOn(document, "removeEventListener");
|
|
896
|
-
const
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
);
|
|
905
|
-
wrapper = mount(nodes);
|
|
906
|
-
});
|
|
907
|
-
|
|
908
|
-
ref?.dispatchEvent(new KeyboardEvent("focusin"));
|
|
857
|
+
const {unmount} = render(
|
|
858
|
+
<TooltipAnchor anchorRef={jest.fn()} onActiveChanged={() => {}}>
|
|
859
|
+
Anchor Text
|
|
860
|
+
</TooltipAnchor>,
|
|
861
|
+
);
|
|
862
|
+
|
|
863
|
+
// Focus the anchor
|
|
864
|
+
userEvent.tab();
|
|
909
865
|
expect(timeoutSpy).toHaveBeenLastCalledWith(
|
|
910
866
|
expect.any(Function),
|
|
911
867
|
TooltipAppearanceDelay,
|
|
@@ -913,46 +869,38 @@ describe("TooltipAnchor", () => {
|
|
|
913
869
|
jest.runOnlyPendingTimers();
|
|
914
870
|
|
|
915
871
|
// Act
|
|
916
|
-
|
|
872
|
+
unmount();
|
|
917
873
|
|
|
918
874
|
// Assert
|
|
919
875
|
expect(spy).toHaveBeenCalledTimes(1);
|
|
920
876
|
expect(spy).toHaveBeenLastCalledWith("keyup", expect.any(Function));
|
|
921
877
|
});
|
|
922
878
|
|
|
923
|
-
test("when active, escape dismisses tooltip",
|
|
879
|
+
test("when active, escape dismisses tooltip", () => {
|
|
924
880
|
// Arrange
|
|
925
881
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
926
882
|
let activeState = false;
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
ref?.dispatchEvent(new KeyboardEvent("focusin"));
|
|
883
|
+
render(
|
|
884
|
+
<TooltipAnchor
|
|
885
|
+
anchorRef={jest.fn()}
|
|
886
|
+
onActiveChanged={(active) => {
|
|
887
|
+
activeState = active;
|
|
888
|
+
}}
|
|
889
|
+
>
|
|
890
|
+
Anchor Text
|
|
891
|
+
</TooltipAnchor>,
|
|
892
|
+
);
|
|
893
|
+
|
|
894
|
+
// Focus the anchor
|
|
895
|
+
userEvent.tab();
|
|
942
896
|
expect(timeoutSpy).toHaveBeenLastCalledWith(
|
|
943
897
|
expect.any(Function),
|
|
944
898
|
TooltipAppearanceDelay,
|
|
945
899
|
);
|
|
946
900
|
jest.runOnlyPendingTimers();
|
|
947
|
-
const event: KeyboardEvent = (document.createEvent("Event"): any);
|
|
948
|
-
// $FlowIgnore[cannot-write]
|
|
949
|
-
event.key = "Escape";
|
|
950
|
-
// $FlowIgnore[cannot-write]
|
|
951
|
-
event.which = 27;
|
|
952
|
-
event.initEvent("keyup", true, true);
|
|
953
901
|
|
|
954
902
|
// Act
|
|
955
|
-
|
|
903
|
+
userEvent.keyboard("{esc}");
|
|
956
904
|
expect(timeoutSpy).toHaveBeenLastCalledWith(
|
|
957
905
|
expect.any(Function),
|
|
958
906
|
TooltipDisappearanceDelay,
|
|
@@ -966,19 +914,14 @@ describe("TooltipAnchor", () => {
|
|
|
966
914
|
test("when active, escape stops event propagation", async () => {
|
|
967
915
|
// Arrange
|
|
968
916
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
);
|
|
978
|
-
mount(nodes);
|
|
979
|
-
});
|
|
980
|
-
|
|
981
|
-
ref?.dispatchEvent(new KeyboardEvent("focusin"));
|
|
917
|
+
render(
|
|
918
|
+
<TooltipAnchor anchorRef={jest.fn()} onActiveChanged={() => {}}>
|
|
919
|
+
Anchor Text
|
|
920
|
+
</TooltipAnchor>,
|
|
921
|
+
);
|
|
922
|
+
|
|
923
|
+
// Focus the anchor
|
|
924
|
+
userEvent.tab();
|
|
982
925
|
expect(timeoutSpy).toHaveBeenLastCalledWith(
|
|
983
926
|
expect.any(Function),
|
|
984
927
|
TooltipAppearanceDelay,
|