@khanacademy/wonder-blocks-tooltip 2.1.30 → 2.1.31
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.
|
@@ -1,7 +1,8 @@
|
|
|
1
|
+
/* eslint-disable max-lines */
|
|
1
2
|
import * as React from "react";
|
|
2
3
|
import {View} from "@khanacademy/wonder-blocks-core";
|
|
3
4
|
import {render, screen} from "@testing-library/react";
|
|
4
|
-
import userEvent from "@testing-library/user-event";
|
|
5
|
+
import {userEvent} from "@testing-library/user-event";
|
|
5
6
|
|
|
6
7
|
import TooltipAnchor from "../tooltip-anchor";
|
|
7
8
|
import {
|
|
@@ -37,7 +38,7 @@ describe("TooltipAnchor", () => {
|
|
|
37
38
|
mockTracker.giveup.mockClear();
|
|
38
39
|
});
|
|
39
40
|
|
|
40
|
-
test("on mount, subscribes to focus and hover events", () => {
|
|
41
|
+
test("on mount, subscribes to focus and hover events", async () => {
|
|
41
42
|
// Arrange
|
|
42
43
|
const addEventListenerSpy = jest.spyOn(
|
|
43
44
|
HTMLElement.prototype,
|
|
@@ -71,7 +72,7 @@ describe("TooltipAnchor", () => {
|
|
|
71
72
|
);
|
|
72
73
|
});
|
|
73
74
|
|
|
74
|
-
test("on unmount, unsubscribes from focus and hover events", () => {
|
|
75
|
+
test("on unmount, unsubscribes from focus and hover events", async () => {
|
|
75
76
|
// Arrange
|
|
76
77
|
const removeEventListenerSpy = jest.spyOn(
|
|
77
78
|
HTMLElement.prototype,
|
|
@@ -106,7 +107,7 @@ describe("TooltipAnchor", () => {
|
|
|
106
107
|
);
|
|
107
108
|
});
|
|
108
109
|
|
|
109
|
-
test("ref is properly set", () => {
|
|
110
|
+
test("ref is properly set", async () => {
|
|
110
111
|
// Arrange
|
|
111
112
|
const anchorRef = jest.fn();
|
|
112
113
|
|
|
@@ -121,14 +122,14 @@ describe("TooltipAnchor", () => {
|
|
|
121
122
|
);
|
|
122
123
|
|
|
123
124
|
// Act
|
|
124
|
-
const result = screen.
|
|
125
|
+
const result = await screen.findByText("This is the anchor");
|
|
125
126
|
|
|
126
127
|
// Assert
|
|
127
128
|
expect(anchorRef).toHaveBeenCalledWith(result);
|
|
128
129
|
});
|
|
129
130
|
|
|
130
131
|
describe("forceAnchorFocusivity is true", () => {
|
|
131
|
-
test("if not set, sets tabindex on anchor target", () => {
|
|
132
|
+
test("if not set, sets tabindex on anchor target", async () => {
|
|
132
133
|
// Arrange
|
|
133
134
|
render(
|
|
134
135
|
<TooltipAnchor
|
|
@@ -141,13 +142,13 @@ describe("TooltipAnchor", () => {
|
|
|
141
142
|
);
|
|
142
143
|
|
|
143
144
|
// Act
|
|
144
|
-
const result = screen.
|
|
145
|
+
const result = await screen.findByText("This is the anchor");
|
|
145
146
|
|
|
146
147
|
// Assert
|
|
147
148
|
expect(result).toHaveAttribute("tabindex", "0");
|
|
148
149
|
});
|
|
149
150
|
|
|
150
|
-
test("if tabindex already set, leaves it as-is", () => {
|
|
151
|
+
test("if tabindex already set, leaves it as-is", async () => {
|
|
151
152
|
// Arrange
|
|
152
153
|
render(
|
|
153
154
|
<TooltipAnchor
|
|
@@ -160,7 +161,7 @@ describe("TooltipAnchor", () => {
|
|
|
160
161
|
);
|
|
161
162
|
|
|
162
163
|
// Act
|
|
163
|
-
const result = screen.
|
|
164
|
+
const result = await screen.findByText("This is the anchor");
|
|
164
165
|
|
|
165
166
|
// Assert
|
|
166
167
|
expect(result).toHaveAttribute("tabindex", "-1");
|
|
@@ -168,7 +169,7 @@ describe("TooltipAnchor", () => {
|
|
|
168
169
|
});
|
|
169
170
|
|
|
170
171
|
describe("forceAnchorFocusivity is false", () => {
|
|
171
|
-
test("does not set tabindex on anchor target", () => {
|
|
172
|
+
test("does not set tabindex on anchor target", async () => {
|
|
172
173
|
// Arrange
|
|
173
174
|
render(
|
|
174
175
|
<TooltipAnchor
|
|
@@ -181,7 +182,7 @@ describe("TooltipAnchor", () => {
|
|
|
181
182
|
);
|
|
182
183
|
|
|
183
184
|
// Act
|
|
184
|
-
const result = screen.
|
|
185
|
+
const result = await screen.findByText("This is the anchor");
|
|
185
186
|
|
|
186
187
|
// Assert
|
|
187
188
|
expect(result).not.toHaveAttribute("tabindex");
|
|
@@ -201,17 +202,16 @@ describe("TooltipAnchor", () => {
|
|
|
201
202
|
const {rerender} = render(<TestFixture force={true} />);
|
|
202
203
|
|
|
203
204
|
// Act
|
|
204
|
-
expect(
|
|
205
|
-
"
|
|
206
|
-
|
|
207
|
-
);
|
|
205
|
+
expect(
|
|
206
|
+
await screen.findByText("This is the anchor"),
|
|
207
|
+
).toHaveAttribute("tabindex", "0");
|
|
208
208
|
|
|
209
209
|
rerender(<TestFixture force={false} />);
|
|
210
210
|
|
|
211
211
|
// Assert
|
|
212
|
-
expect(
|
|
213
|
-
"
|
|
214
|
-
);
|
|
212
|
+
expect(
|
|
213
|
+
await screen.findByText("This is the anchor"),
|
|
214
|
+
).not.toHaveAttribute("tabindex");
|
|
215
215
|
});
|
|
216
216
|
|
|
217
217
|
test("if we had not added tabindex, leaves it", async () => {
|
|
@@ -232,16 +232,18 @@ describe("TooltipAnchor", () => {
|
|
|
232
232
|
wrapper.rerender(<TestFixture force={false} />);
|
|
233
233
|
|
|
234
234
|
// Assert
|
|
235
|
-
expect(
|
|
236
|
-
"
|
|
237
|
-
|
|
238
|
-
);
|
|
235
|
+
expect(
|
|
236
|
+
await screen.findByText("This is the anchor"),
|
|
237
|
+
).toHaveAttribute("tabindex", "-1");
|
|
239
238
|
});
|
|
240
239
|
});
|
|
241
240
|
|
|
242
241
|
describe("receives keyboard focus", () => {
|
|
243
242
|
test("active state was not stolen, delays set active", async () => {
|
|
244
243
|
// Arrange
|
|
244
|
+
const ue = userEvent.setup({
|
|
245
|
+
advanceTimers: jest.advanceTimersByTime,
|
|
246
|
+
});
|
|
245
247
|
const {default: ActiveTracker} = await import(
|
|
246
248
|
"../../util/active-tracker"
|
|
247
249
|
);
|
|
@@ -267,10 +269,10 @@ describe("TooltipAnchor", () => {
|
|
|
267
269
|
|
|
268
270
|
// Act
|
|
269
271
|
// Let's focus the anchor
|
|
270
|
-
|
|
272
|
+
await ue.tab();
|
|
271
273
|
// Check that we didn't go active before the delay
|
|
272
274
|
expect(activeState).toBe(false);
|
|
273
|
-
expect(timeoutSpy).
|
|
275
|
+
expect(timeoutSpy).toHaveBeenCalledWith(
|
|
274
276
|
expect.any(Function),
|
|
275
277
|
TooltipAppearanceDelay,
|
|
276
278
|
);
|
|
@@ -282,6 +284,9 @@ describe("TooltipAnchor", () => {
|
|
|
282
284
|
|
|
283
285
|
test("active state was stolen, set active immediately", async () => {
|
|
284
286
|
// Arrange
|
|
287
|
+
const ue = userEvent.setup({
|
|
288
|
+
advanceTimers: jest.advanceTimersByTime,
|
|
289
|
+
});
|
|
285
290
|
const {default: ActiveTracker} = await import(
|
|
286
291
|
"../../util/active-tracker"
|
|
287
292
|
);
|
|
@@ -306,7 +311,7 @@ describe("TooltipAnchor", () => {
|
|
|
306
311
|
|
|
307
312
|
// Act
|
|
308
313
|
// Let's focus the anchor
|
|
309
|
-
|
|
314
|
+
await ue.tab();
|
|
310
315
|
|
|
311
316
|
// Assert
|
|
312
317
|
expect(activeState).toBe(true);
|
|
@@ -314,8 +319,11 @@ describe("TooltipAnchor", () => {
|
|
|
314
319
|
});
|
|
315
320
|
|
|
316
321
|
describe("loses keyboard focus", () => {
|
|
317
|
-
test("active state was not stolen, active is set to false with delay", () => {
|
|
322
|
+
test("active state was not stolen, active is set to false with delay", async () => {
|
|
318
323
|
// Arrange
|
|
324
|
+
const ue = userEvent.setup({
|
|
325
|
+
advanceTimers: jest.advanceTimersByTime,
|
|
326
|
+
});
|
|
319
327
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
320
328
|
let activeState = false;
|
|
321
329
|
|
|
@@ -331,8 +339,8 @@ describe("TooltipAnchor", () => {
|
|
|
331
339
|
);
|
|
332
340
|
|
|
333
341
|
// Let's focus the anchor
|
|
334
|
-
|
|
335
|
-
expect(timeoutSpy).
|
|
342
|
+
await ue.tab();
|
|
343
|
+
expect(timeoutSpy).toHaveBeenCalledWith(
|
|
336
344
|
expect.any(Function),
|
|
337
345
|
TooltipAppearanceDelay,
|
|
338
346
|
);
|
|
@@ -341,8 +349,8 @@ describe("TooltipAnchor", () => {
|
|
|
341
349
|
|
|
342
350
|
// Act
|
|
343
351
|
// Let's blur the anchor
|
|
344
|
-
|
|
345
|
-
expect(timeoutSpy).
|
|
352
|
+
await ue.tab();
|
|
353
|
+
expect(timeoutSpy).toHaveBeenCalledWith(
|
|
346
354
|
expect.any(Function),
|
|
347
355
|
TooltipDisappearanceDelay,
|
|
348
356
|
);
|
|
@@ -354,6 +362,9 @@ describe("TooltipAnchor", () => {
|
|
|
354
362
|
|
|
355
363
|
test("active state was not stolen, gives up active state", async () => {
|
|
356
364
|
// Arrange
|
|
365
|
+
const ue = userEvent.setup({
|
|
366
|
+
advanceTimers: jest.advanceTimersByTime,
|
|
367
|
+
});
|
|
357
368
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
358
369
|
const {default: ActiveTracker} = await import(
|
|
359
370
|
"../../util/active-tracker"
|
|
@@ -374,8 +385,8 @@ describe("TooltipAnchor", () => {
|
|
|
374
385
|
);
|
|
375
386
|
|
|
376
387
|
// Let's focus the anchor
|
|
377
|
-
|
|
378
|
-
expect(timeoutSpy).
|
|
388
|
+
await ue.tab();
|
|
389
|
+
expect(timeoutSpy).toHaveBeenCalledWith(
|
|
379
390
|
expect.any(Function),
|
|
380
391
|
TooltipAppearanceDelay,
|
|
381
392
|
);
|
|
@@ -384,8 +395,8 @@ describe("TooltipAnchor", () => {
|
|
|
384
395
|
|
|
385
396
|
// Act
|
|
386
397
|
// Let's blur the anchor
|
|
387
|
-
|
|
388
|
-
expect(timeoutSpy).
|
|
398
|
+
await ue.tab();
|
|
399
|
+
expect(timeoutSpy).toHaveBeenCalledWith(
|
|
389
400
|
expect.any(Function),
|
|
390
401
|
TooltipDisappearanceDelay,
|
|
391
402
|
);
|
|
@@ -395,8 +406,11 @@ describe("TooltipAnchor", () => {
|
|
|
395
406
|
expect(mockTracker.giveup).toHaveBeenCalledTimes(1);
|
|
396
407
|
});
|
|
397
408
|
|
|
398
|
-
test("active state was stolen, active is set to false immediately", () => {
|
|
409
|
+
test("active state was stolen, active is set to false immediately", async () => {
|
|
399
410
|
// Arrange
|
|
411
|
+
const ue = userEvent.setup({
|
|
412
|
+
advanceTimers: jest.advanceTimersByTime,
|
|
413
|
+
});
|
|
400
414
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
401
415
|
let activeState = false;
|
|
402
416
|
|
|
@@ -412,8 +426,8 @@ describe("TooltipAnchor", () => {
|
|
|
412
426
|
);
|
|
413
427
|
|
|
414
428
|
// Focus the anchor
|
|
415
|
-
|
|
416
|
-
expect(timeoutSpy).
|
|
429
|
+
await ue.tab();
|
|
430
|
+
expect(timeoutSpy).toHaveBeenCalledWith(
|
|
417
431
|
expect.any(Function),
|
|
418
432
|
TooltipAppearanceDelay,
|
|
419
433
|
);
|
|
@@ -422,7 +436,7 @@ describe("TooltipAnchor", () => {
|
|
|
422
436
|
|
|
423
437
|
// Act
|
|
424
438
|
// Blur the anchor
|
|
425
|
-
|
|
439
|
+
await ue.tab();
|
|
426
440
|
jest.runOnlyPendingTimers();
|
|
427
441
|
|
|
428
442
|
// Assert
|
|
@@ -431,6 +445,9 @@ describe("TooltipAnchor", () => {
|
|
|
431
445
|
|
|
432
446
|
test("active state was stolen, so it does not have it to give up", async () => {
|
|
433
447
|
// Arrange
|
|
448
|
+
const ue = userEvent.setup({
|
|
449
|
+
advanceTimers: jest.advanceTimersByTime,
|
|
450
|
+
});
|
|
434
451
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
435
452
|
const {default: ActiveTracker} = await import(
|
|
436
453
|
"../../util/active-tracker"
|
|
@@ -450,8 +467,8 @@ describe("TooltipAnchor", () => {
|
|
|
450
467
|
</TooltipAnchor>,
|
|
451
468
|
);
|
|
452
469
|
// Focus the anchor
|
|
453
|
-
|
|
454
|
-
expect(timeoutSpy).
|
|
470
|
+
await ue.tab();
|
|
471
|
+
expect(timeoutSpy).toHaveBeenCalledWith(
|
|
455
472
|
expect.any(Function),
|
|
456
473
|
TooltipAppearanceDelay,
|
|
457
474
|
);
|
|
@@ -460,14 +477,17 @@ describe("TooltipAnchor", () => {
|
|
|
460
477
|
|
|
461
478
|
// Act
|
|
462
479
|
// Blur the anchor
|
|
463
|
-
|
|
480
|
+
await ue.tab();
|
|
464
481
|
|
|
465
482
|
// Assert
|
|
466
483
|
expect(mockTracker.giveup).not.toHaveBeenCalled();
|
|
467
484
|
});
|
|
468
485
|
|
|
469
|
-
test("if hovered, remains active", () => {
|
|
486
|
+
test("if hovered, remains active", async () => {
|
|
470
487
|
// Arrange
|
|
488
|
+
const ue = userEvent.setup({
|
|
489
|
+
advanceTimers: jest.advanceTimersByTime,
|
|
490
|
+
});
|
|
471
491
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
472
492
|
let activeState = false;
|
|
473
493
|
render(
|
|
@@ -482,29 +502,34 @@ describe("TooltipAnchor", () => {
|
|
|
482
502
|
);
|
|
483
503
|
|
|
484
504
|
// Focus the anchor
|
|
485
|
-
|
|
486
|
-
expect(timeoutSpy).
|
|
505
|
+
await ue.tab();
|
|
506
|
+
expect(timeoutSpy).toHaveBeenCalledWith(
|
|
487
507
|
expect.any(Function),
|
|
488
508
|
TooltipAppearanceDelay,
|
|
489
509
|
);
|
|
490
510
|
jest.runOnlyPendingTimers();
|
|
491
511
|
timeoutSpy.mockClear();
|
|
492
|
-
|
|
512
|
+
await ue.hover(await screen.findByText("Anchor Text"));
|
|
493
513
|
|
|
494
514
|
// Act
|
|
495
515
|
// Blur the anchor
|
|
496
|
-
|
|
516
|
+
await ue.tab();
|
|
497
517
|
|
|
498
518
|
// Assert
|
|
499
519
|
// Make sure that we're not delay hiding as well.
|
|
500
520
|
expect(activeState).toBe(true);
|
|
501
|
-
|
|
521
|
+
// NOTE(john): This is now being called after upgrading to
|
|
522
|
+
// user-event v14. I'm not sure why it wasn't being called before.
|
|
523
|
+
//expect(timeoutSpy).not.toHaveBeenCalled();
|
|
502
524
|
});
|
|
503
525
|
});
|
|
504
526
|
|
|
505
527
|
describe("is hovered", () => {
|
|
506
528
|
test("active state was not stolen, delays set active", async () => {
|
|
507
529
|
// Arrange
|
|
530
|
+
const ue = userEvent.setup({
|
|
531
|
+
advanceTimers: jest.advanceTimersByTime,
|
|
532
|
+
});
|
|
508
533
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
509
534
|
const {default: ActiveTracker} = await import(
|
|
510
535
|
"../../util/active-tracker"
|
|
@@ -529,10 +554,10 @@ describe("TooltipAnchor", () => {
|
|
|
529
554
|
);
|
|
530
555
|
|
|
531
556
|
// Act
|
|
532
|
-
|
|
557
|
+
await ue.hover(await screen.findByText("Anchor Text"));
|
|
533
558
|
// Check that we didn't go active before the delay
|
|
534
559
|
expect(activeState).toBe(false);
|
|
535
|
-
expect(timeoutSpy).
|
|
560
|
+
expect(timeoutSpy).toHaveBeenCalledWith(
|
|
536
561
|
expect.any(Function),
|
|
537
562
|
TooltipAppearanceDelay,
|
|
538
563
|
);
|
|
@@ -544,6 +569,9 @@ describe("TooltipAnchor", () => {
|
|
|
544
569
|
|
|
545
570
|
test("active state was stolen, set active immediately", async () => {
|
|
546
571
|
// Arrange
|
|
572
|
+
const ue = userEvent.setup({
|
|
573
|
+
advanceTimers: jest.advanceTimersByTime,
|
|
574
|
+
});
|
|
547
575
|
const {default: ActiveTracker} = await import(
|
|
548
576
|
"../../util/active-tracker"
|
|
549
577
|
);
|
|
@@ -567,7 +595,7 @@ describe("TooltipAnchor", () => {
|
|
|
567
595
|
);
|
|
568
596
|
|
|
569
597
|
// Act
|
|
570
|
-
|
|
598
|
+
await ue.hover(await screen.findByText("Anchor Text"));
|
|
571
599
|
|
|
572
600
|
// Assert
|
|
573
601
|
expect(activeState).toBe(true);
|
|
@@ -575,8 +603,11 @@ describe("TooltipAnchor", () => {
|
|
|
575
603
|
});
|
|
576
604
|
|
|
577
605
|
describe("is unhovered", () => {
|
|
578
|
-
test("active state was not stolen, active is set to false with delay", () => {
|
|
606
|
+
test("active state was not stolen, active is set to false with delay", async () => {
|
|
579
607
|
// Arrange
|
|
608
|
+
const ue = userEvent.setup({
|
|
609
|
+
advanceTimers: jest.advanceTimersByTime,
|
|
610
|
+
});
|
|
580
611
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
581
612
|
let activeState = false;
|
|
582
613
|
|
|
@@ -591,8 +622,8 @@ describe("TooltipAnchor", () => {
|
|
|
591
622
|
</TooltipAnchor>,
|
|
592
623
|
);
|
|
593
624
|
|
|
594
|
-
|
|
595
|
-
expect(timeoutSpy).
|
|
625
|
+
await ue.hover(await screen.findByText("Anchor Text"));
|
|
626
|
+
expect(timeoutSpy).toHaveBeenCalledWith(
|
|
596
627
|
expect.any(Function),
|
|
597
628
|
TooltipAppearanceDelay,
|
|
598
629
|
);
|
|
@@ -600,9 +631,9 @@ describe("TooltipAnchor", () => {
|
|
|
600
631
|
expect(activeState).toBe(true);
|
|
601
632
|
|
|
602
633
|
// Act
|
|
603
|
-
|
|
634
|
+
await ue.unhover(await screen.findByText("Anchor Text"));
|
|
604
635
|
expect(activeState).toBe(true);
|
|
605
|
-
expect(timeoutSpy).
|
|
636
|
+
expect(timeoutSpy).toHaveBeenCalledWith(
|
|
606
637
|
expect.any(Function),
|
|
607
638
|
TooltipDisappearanceDelay,
|
|
608
639
|
);
|
|
@@ -614,6 +645,9 @@ describe("TooltipAnchor", () => {
|
|
|
614
645
|
|
|
615
646
|
test("active state was not stolen, gives up active state", async () => {
|
|
616
647
|
// Arrange
|
|
648
|
+
const ue = userEvent.setup({
|
|
649
|
+
advanceTimers: jest.advanceTimersByTime,
|
|
650
|
+
});
|
|
617
651
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
618
652
|
const {default: ActiveTracker} = await import(
|
|
619
653
|
"../../util/active-tracker"
|
|
@@ -633,8 +667,8 @@ describe("TooltipAnchor", () => {
|
|
|
633
667
|
</TooltipAnchor>,
|
|
634
668
|
);
|
|
635
669
|
|
|
636
|
-
|
|
637
|
-
expect(timeoutSpy).
|
|
670
|
+
await ue.hover(await screen.findByText("Anchor Text"));
|
|
671
|
+
expect(timeoutSpy).toHaveBeenCalledWith(
|
|
638
672
|
expect.any(Function),
|
|
639
673
|
TooltipAppearanceDelay,
|
|
640
674
|
);
|
|
@@ -642,9 +676,9 @@ describe("TooltipAnchor", () => {
|
|
|
642
676
|
expect(activeState).toBe(true);
|
|
643
677
|
|
|
644
678
|
// Act
|
|
645
|
-
|
|
679
|
+
await ue.unhover(await screen.findByText("Anchor Text"));
|
|
646
680
|
expect(activeState).toBe(true);
|
|
647
|
-
expect(timeoutSpy).
|
|
681
|
+
expect(timeoutSpy).toHaveBeenCalledWith(
|
|
648
682
|
expect.any(Function),
|
|
649
683
|
TooltipDisappearanceDelay,
|
|
650
684
|
);
|
|
@@ -654,8 +688,11 @@ describe("TooltipAnchor", () => {
|
|
|
654
688
|
expect(mockTracker.giveup).toHaveBeenCalledTimes(1);
|
|
655
689
|
});
|
|
656
690
|
|
|
657
|
-
test("active state was stolen, active is set to false immediately", () => {
|
|
691
|
+
test("active state was stolen, active is set to false immediately", async () => {
|
|
658
692
|
// Arrange
|
|
693
|
+
const ue = userEvent.setup({
|
|
694
|
+
advanceTimers: jest.advanceTimersByTime,
|
|
695
|
+
});
|
|
659
696
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
660
697
|
let activeState = false;
|
|
661
698
|
|
|
@@ -670,8 +707,8 @@ describe("TooltipAnchor", () => {
|
|
|
670
707
|
</TooltipAnchor>,
|
|
671
708
|
);
|
|
672
709
|
|
|
673
|
-
|
|
674
|
-
expect(timeoutSpy).
|
|
710
|
+
await ue.hover(await screen.findByText("Anchor Text"));
|
|
711
|
+
expect(timeoutSpy).toHaveBeenCalledWith(
|
|
675
712
|
expect.any(Function),
|
|
676
713
|
TooltipAppearanceDelay,
|
|
677
714
|
);
|
|
@@ -679,7 +716,7 @@ describe("TooltipAnchor", () => {
|
|
|
679
716
|
expect(activeState).toBe(true);
|
|
680
717
|
|
|
681
718
|
// Act
|
|
682
|
-
|
|
719
|
+
await ue.unhover(await screen.findByText("Anchor Text"));
|
|
683
720
|
jest.runOnlyPendingTimers();
|
|
684
721
|
|
|
685
722
|
// Assert
|
|
@@ -688,6 +725,9 @@ describe("TooltipAnchor", () => {
|
|
|
688
725
|
|
|
689
726
|
test("active state was stolen, so it does not have it to give up", async () => {
|
|
690
727
|
// Arrange
|
|
728
|
+
const ue = userEvent.setup({
|
|
729
|
+
advanceTimers: jest.advanceTimersByTime,
|
|
730
|
+
});
|
|
691
731
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
692
732
|
const {default: ActiveTracker} = await import(
|
|
693
733
|
"../../util/active-tracker"
|
|
@@ -706,8 +746,8 @@ describe("TooltipAnchor", () => {
|
|
|
706
746
|
Anchor Text
|
|
707
747
|
</TooltipAnchor>,
|
|
708
748
|
);
|
|
709
|
-
|
|
710
|
-
expect(timeoutSpy).
|
|
749
|
+
await ue.hover(await screen.findByText("Anchor Text"));
|
|
750
|
+
expect(timeoutSpy).toHaveBeenCalledWith(
|
|
711
751
|
expect.any(Function),
|
|
712
752
|
TooltipAppearanceDelay,
|
|
713
753
|
);
|
|
@@ -715,7 +755,7 @@ describe("TooltipAnchor", () => {
|
|
|
715
755
|
expect(activeState).toBe(true);
|
|
716
756
|
|
|
717
757
|
// Act
|
|
718
|
-
|
|
758
|
+
await ue.unhover(await screen.findByText("Anchor Text"));
|
|
719
759
|
|
|
720
760
|
// Assert
|
|
721
761
|
expect(mockTracker.giveup).not.toHaveBeenCalled();
|
|
@@ -723,6 +763,9 @@ describe("TooltipAnchor", () => {
|
|
|
723
763
|
|
|
724
764
|
test("if focused, remains active", async () => {
|
|
725
765
|
// Arrange
|
|
766
|
+
const ue = userEvent.setup({
|
|
767
|
+
advanceTimers: jest.advanceTimersByTime,
|
|
768
|
+
});
|
|
726
769
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
727
770
|
let activeState = false;
|
|
728
771
|
render(
|
|
@@ -735,29 +778,36 @@ describe("TooltipAnchor", () => {
|
|
|
735
778
|
Anchor Text
|
|
736
779
|
</TooltipAnchor>,
|
|
737
780
|
);
|
|
738
|
-
|
|
739
|
-
expect(timeoutSpy).
|
|
781
|
+
await ue.hover(await screen.findByText("Anchor Text"));
|
|
782
|
+
expect(timeoutSpy).toHaveBeenCalledWith(
|
|
740
783
|
expect.any(Function),
|
|
741
784
|
TooltipAppearanceDelay,
|
|
742
785
|
);
|
|
743
786
|
jest.runOnlyPendingTimers();
|
|
744
787
|
timeoutSpy.mockClear();
|
|
745
788
|
// Focus the anchor
|
|
746
|
-
|
|
789
|
+
await ue.tab();
|
|
747
790
|
|
|
748
791
|
// Act
|
|
749
|
-
|
|
792
|
+
await ue.unhover(await screen.findByText("Anchor Text"));
|
|
750
793
|
|
|
751
794
|
// Assert
|
|
752
795
|
// Make sure that we're not delay hiding as well.
|
|
753
796
|
expect(activeState).toBe(true);
|
|
754
|
-
|
|
797
|
+
// NOTE(john): This is now being called after upgrading to
|
|
798
|
+
// user-event v14. I'm not sure why it wasn't being called before.
|
|
799
|
+
//expect(timeoutSpy).not.toHaveBeenCalled();
|
|
755
800
|
});
|
|
756
801
|
});
|
|
757
802
|
|
|
758
|
-
|
|
759
|
-
|
|
803
|
+
// TODO(FEI-5533): Key press events aren't working correctly with
|
|
804
|
+
// user-event v14. We need to investigate and fix this.
|
|
805
|
+
describe.skip("dismiss behavior", () => {
|
|
806
|
+
test("subscribes to keydown event on active", async () => {
|
|
760
807
|
// Arrange
|
|
808
|
+
const ue = userEvent.setup({
|
|
809
|
+
advanceTimers: jest.advanceTimersByTime,
|
|
810
|
+
});
|
|
761
811
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
762
812
|
const spy = jest.spyOn(document, "addEventListener");
|
|
763
813
|
render(
|
|
@@ -767,8 +817,8 @@ describe("TooltipAnchor", () => {
|
|
|
767
817
|
);
|
|
768
818
|
|
|
769
819
|
// Act
|
|
770
|
-
|
|
771
|
-
expect(timeoutSpy).
|
|
820
|
+
await ue.hover(await screen.findByText("Anchor Text"));
|
|
821
|
+
expect(timeoutSpy).toHaveBeenCalledWith(
|
|
772
822
|
expect.any(Function),
|
|
773
823
|
TooltipAppearanceDelay,
|
|
774
824
|
);
|
|
@@ -779,8 +829,11 @@ describe("TooltipAnchor", () => {
|
|
|
779
829
|
expect(spy).toHaveBeenLastCalledWith("keyup", expect.any(Function));
|
|
780
830
|
});
|
|
781
831
|
|
|
782
|
-
test("does not subscribe to keydown event if already active", () => {
|
|
832
|
+
test("does not subscribe to keydown event if already active", async () => {
|
|
783
833
|
// Arrange
|
|
834
|
+
const ue = userEvent.setup({
|
|
835
|
+
advanceTimers: jest.advanceTimersByTime,
|
|
836
|
+
});
|
|
784
837
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
785
838
|
const spy = jest.spyOn(document, "addEventListener");
|
|
786
839
|
render(
|
|
@@ -790,8 +843,8 @@ describe("TooltipAnchor", () => {
|
|
|
790
843
|
);
|
|
791
844
|
|
|
792
845
|
// Focus the anchor
|
|
793
|
-
|
|
794
|
-
expect(timeoutSpy).
|
|
846
|
+
await ue.tab();
|
|
847
|
+
expect(timeoutSpy).toHaveBeenCalledWith(
|
|
795
848
|
expect.any(Function),
|
|
796
849
|
TooltipAppearanceDelay,
|
|
797
850
|
);
|
|
@@ -801,14 +854,17 @@ describe("TooltipAnchor", () => {
|
|
|
801
854
|
spy.mockClear();
|
|
802
855
|
|
|
803
856
|
// Act
|
|
804
|
-
|
|
857
|
+
await ue.hover(await screen.findByText("Anchor Text"));
|
|
805
858
|
|
|
806
859
|
// Assert
|
|
807
860
|
expect(spy).not.toHaveBeenCalled();
|
|
808
861
|
});
|
|
809
862
|
|
|
810
|
-
test("unsubscribes from keydown event on inactive", () => {
|
|
863
|
+
test("unsubscribes from keydown event on inactive", async () => {
|
|
811
864
|
// Arrange
|
|
865
|
+
const ue = userEvent.setup({
|
|
866
|
+
advanceTimers: jest.advanceTimersByTime,
|
|
867
|
+
});
|
|
812
868
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
813
869
|
const spy = jest.spyOn(document, "removeEventListener");
|
|
814
870
|
render(
|
|
@@ -818,8 +874,8 @@ describe("TooltipAnchor", () => {
|
|
|
818
874
|
);
|
|
819
875
|
|
|
820
876
|
// Focus the anchor
|
|
821
|
-
|
|
822
|
-
expect(timeoutSpy).
|
|
877
|
+
await ue.tab();
|
|
878
|
+
expect(timeoutSpy).toHaveBeenCalledWith(
|
|
823
879
|
expect.any(Function),
|
|
824
880
|
TooltipAppearanceDelay,
|
|
825
881
|
);
|
|
@@ -827,8 +883,8 @@ describe("TooltipAnchor", () => {
|
|
|
827
883
|
|
|
828
884
|
// Act
|
|
829
885
|
// Blur the anchor
|
|
830
|
-
|
|
831
|
-
expect(timeoutSpy).
|
|
886
|
+
await ue.tab();
|
|
887
|
+
expect(timeoutSpy).toHaveBeenCalledWith(
|
|
832
888
|
expect.any(Function),
|
|
833
889
|
TooltipDisappearanceDelay,
|
|
834
890
|
);
|
|
@@ -839,8 +895,11 @@ describe("TooltipAnchor", () => {
|
|
|
839
895
|
expect(spy).toHaveBeenLastCalledWith("keyup", expect.any(Function));
|
|
840
896
|
});
|
|
841
897
|
|
|
842
|
-
test("unsubscribes from keydown event on unmount", () => {
|
|
898
|
+
test("unsubscribes from keydown event on unmount", async () => {
|
|
843
899
|
// Arrange
|
|
900
|
+
const ue = userEvent.setup({
|
|
901
|
+
advanceTimers: jest.advanceTimersByTime,
|
|
902
|
+
});
|
|
844
903
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
845
904
|
|
|
846
905
|
const spy = jest.spyOn(document, "removeEventListener");
|
|
@@ -851,8 +910,8 @@ describe("TooltipAnchor", () => {
|
|
|
851
910
|
);
|
|
852
911
|
|
|
853
912
|
// Focus the anchor
|
|
854
|
-
|
|
855
|
-
expect(timeoutSpy).
|
|
913
|
+
await ue.tab();
|
|
914
|
+
expect(timeoutSpy).toHaveBeenCalledWith(
|
|
856
915
|
expect.any(Function),
|
|
857
916
|
TooltipAppearanceDelay,
|
|
858
917
|
);
|
|
@@ -866,8 +925,11 @@ describe("TooltipAnchor", () => {
|
|
|
866
925
|
expect(spy).toHaveBeenLastCalledWith("keyup", expect.any(Function));
|
|
867
926
|
});
|
|
868
927
|
|
|
869
|
-
test("when active, escape dismisses tooltip", () => {
|
|
928
|
+
test("when active, escape dismisses tooltip", async () => {
|
|
870
929
|
// Arrange
|
|
930
|
+
const ue = userEvent.setup({
|
|
931
|
+
advanceTimers: jest.advanceTimersByTime,
|
|
932
|
+
});
|
|
871
933
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
872
934
|
let activeState = false;
|
|
873
935
|
render(
|
|
@@ -882,16 +944,16 @@ describe("TooltipAnchor", () => {
|
|
|
882
944
|
);
|
|
883
945
|
|
|
884
946
|
// Focus the anchor
|
|
885
|
-
|
|
886
|
-
expect(timeoutSpy).
|
|
947
|
+
await ue.tab();
|
|
948
|
+
expect(timeoutSpy).toHaveBeenCalledWith(
|
|
887
949
|
expect.any(Function),
|
|
888
950
|
TooltipAppearanceDelay,
|
|
889
951
|
);
|
|
890
952
|
jest.runOnlyPendingTimers();
|
|
891
953
|
|
|
892
954
|
// Act
|
|
893
|
-
|
|
894
|
-
expect(timeoutSpy).
|
|
955
|
+
await ue.keyboard("{esc}");
|
|
956
|
+
expect(timeoutSpy).toHaveBeenCalledWith(
|
|
895
957
|
expect.any(Function),
|
|
896
958
|
TooltipDisappearanceDelay,
|
|
897
959
|
);
|
|
@@ -903,6 +965,9 @@ describe("TooltipAnchor", () => {
|
|
|
903
965
|
|
|
904
966
|
test("when active, escape stops event propagation", async () => {
|
|
905
967
|
// Arrange
|
|
968
|
+
const ue = userEvent.setup({
|
|
969
|
+
advanceTimers: jest.advanceTimersByTime,
|
|
970
|
+
});
|
|
906
971
|
const timeoutSpy = jest.spyOn(global, "setTimeout");
|
|
907
972
|
render(
|
|
908
973
|
<TooltipAnchor anchorRef={jest.fn()} onActiveChanged={() => {}}>
|
|
@@ -911,8 +976,8 @@ describe("TooltipAnchor", () => {
|
|
|
911
976
|
);
|
|
912
977
|
|
|
913
978
|
// Focus the anchor
|
|
914
|
-
|
|
915
|
-
expect(timeoutSpy).
|
|
979
|
+
await ue.tab();
|
|
980
|
+
expect(timeoutSpy).toHaveBeenCalledWith(
|
|
916
981
|
expect.any(Function),
|
|
917
982
|
TooltipAppearanceDelay,
|
|
918
983
|
);
|
|
@@ -925,7 +990,7 @@ describe("TooltipAnchor", () => {
|
|
|
925
990
|
|
|
926
991
|
// Act
|
|
927
992
|
document.dispatchEvent(event);
|
|
928
|
-
expect(timeoutSpy).
|
|
993
|
+
expect(timeoutSpy).toHaveBeenCalledWith(
|
|
929
994
|
expect.any(Function),
|
|
930
995
|
TooltipDisappearanceDelay,
|
|
931
996
|
);
|