[react-events] Separate the Focus/FocusWithin unit tests (#16298)
Nicolas Gallagher committed
Aug 6, 2019 at 09:16 UTC
ed497007967b4324798b70be1708e478d95c5802
2 files changed
+288
-248
packages/react-events/src/dom/__tests__/Focus-test.internal.js
-248
@@ -13,9 +13,7 @@ let React;
13
let ReactFeatureFlags;
14
let ReactDOM;
15
let FocusResponder;
16
-let FocusWithinResponder;
16
let useFocusResponder;
18
-let useFocusWithinResponder;
17
18
const createEvent = (type, data) => {
19
const event = document.createEvent('CustomEvent');
@@ -42,10 +40,7 @@ const modulesInit = () => {
40
React = require('react');
41
ReactDOM = require('react-dom');
42
FocusResponder = require('react-events/focus').FocusResponder;
45
- FocusWithinResponder = require('react-events/focus').FocusWithinResponder;
43
useFocusResponder = require('react-events/focus').useFocusResponder;
47
- useFocusWithinResponder = require('react-events/focus')
48
- .useFocusWithinResponder;
44
};
45
46
describe('Focus event responder', () => {
@@ -406,246 +401,3 @@ describe('Focus event responder', () => {
401
expect(FocusResponder.displayName).toBe('Focus');
402
});
403
});
409
-
410
-describe('FocusWithin event responder', () => {
411
- let container;
412
-
413
- beforeEach(() => {
414
- jest.resetModules();
415
- modulesInit();
416
-
417
- container = document.createElement('div');
418
- document.body.appendChild(container);
419
- });
420
-
421
- afterEach(() => {
422
- ReactDOM.render(null, container);
423
- document.body.removeChild(container);
424
- container = null;
425
- });
426
-
427
- describe('disabled', () => {
428
- let onFocusWithinChange, onFocusWithinVisibleChange, ref;
429
-
430
- beforeEach(() => {
431
- onFocusWithinChange = jest.fn();
432
- onFocusWithinVisibleChange = jest.fn();
433
- ref = React.createRef();
434
- const Component = () => {
435
- const listener = useFocusWithinResponder({
436
- disabled: true,
437
- onFocusWithinChange,
438
- onFocusWithinVisibleChange,
439
- });
440
- return <div ref={ref} listeners={listener} />;
441
- };
442
- ReactDOM.render(<Component />, container);
443
- });
444
-
445
- it('prevents custom events being dispatched', () => {
446
- ref.current.dispatchEvent(createEvent('focus'));
447
- ref.current.dispatchEvent(createEvent('blur'));
448
- expect(onFocusWithinChange).not.toBeCalled();
449
- expect(onFocusWithinVisibleChange).not.toBeCalled();
450
- });
451
- });
452
-
453
- describe('onFocusWithinChange', () => {
454
- let onFocusWithinChange, ref, innerRef, innerRef2;
455
-
456
- beforeEach(() => {
457
- onFocusWithinChange = jest.fn();
458
- ref = React.createRef();
459
- innerRef = React.createRef();
460
- innerRef2 = React.createRef();
461
- const Component = () => {
462
- const listener = useFocusWithinResponder({
463
- onFocusWithinChange,
464
- });
465
- return (
466
- <div ref={ref} listeners={listener}>
467
- <div ref={innerRef} />
468
- <div ref={innerRef2} />
469
- </div>
470
- );
471
- };
472
- ReactDOM.render(<Component />, container);
473
- });
474
-
475
- it('is called after "blur" and "focus" events on focus target', () => {
476
- ref.current.dispatchEvent(createEvent('focus'));
477
- expect(onFocusWithinChange).toHaveBeenCalledTimes(1);
478
- expect(onFocusWithinChange).toHaveBeenCalledWith(true);
479
- ref.current.dispatchEvent(
480
- createEvent('blur', {relatedTarget: container}),
481
- );
482
- expect(onFocusWithinChange).toHaveBeenCalledTimes(2);
483
- expect(onFocusWithinChange).toHaveBeenCalledWith(false);
484
- });
485
-
486
- it('is called after "blur" and "focus" events on descendants', () => {
487
- innerRef.current.dispatchEvent(createEvent('focus'));
488
- expect(onFocusWithinChange).toHaveBeenCalledTimes(1);
489
- expect(onFocusWithinChange).toHaveBeenCalledWith(true);
490
- innerRef.current.dispatchEvent(
491
- createEvent('blur', {relatedTarget: container}),
492
- );
493
- expect(onFocusWithinChange).toHaveBeenCalledTimes(2);
494
- expect(onFocusWithinChange).toHaveBeenCalledWith(false);
495
- });
496
-
497
- it('is only called once when focus moves within and outside the subtree', () => {
498
- // focus shifts into subtree
499
- innerRef.current.dispatchEvent(createEvent('focus'));
500
- expect(onFocusWithinChange).toHaveBeenCalledTimes(1);
501
- expect(onFocusWithinChange).toHaveBeenCalledWith(true);
502
- // focus moves around subtree
503
- innerRef.current.dispatchEvent(
504
- createEvent('blur', {relatedTarget: innerRef2.current}),
505
- );
506
- innerRef2.current.dispatchEvent(createEvent('focus'));
507
- innerRef2.current.dispatchEvent(
508
- createEvent('blur', {relatedTarget: ref.current}),
509
- );
510
- ref.current.dispatchEvent(createEvent('focus'));
511
- ref.current.dispatchEvent(
512
- createEvent('blur', {relatedTarget: innerRef.current}),
513
- );
514
- expect(onFocusWithinChange).toHaveBeenCalledTimes(1);
515
- // focus shifts outside subtree
516
- innerRef.current.dispatchEvent(
517
- createEvent('blur', {relatedTarget: container}),
518
- );
519
- expect(onFocusWithinChange).toHaveBeenCalledTimes(2);
520
- expect(onFocusWithinChange).toHaveBeenCalledWith(false);
521
- });
522
- });
523
-
524
- describe('onFocusWithinVisibleChange', () => {
525
- let onFocusWithinVisibleChange, ref, innerRef, innerRef2;
526
-
527
- beforeEach(() => {
528
- onFocusWithinVisibleChange = jest.fn();
529
- ref = React.createRef();
530
- innerRef = React.createRef();
531
- innerRef2 = React.createRef();
532
- const Component = () => {
533
- const listener = useFocusWithinResponder({
534
- onFocusWithinVisibleChange,
535
- });
536
- return (
537
- <div ref={ref} listeners={listener}>
538
- <div ref={innerRef} />
539
- <div ref={innerRef2} />
540
- </div>
541
- );
542
- };
543
- ReactDOM.render(<Component />, container);
544
- });
545
-
546
- it('is called after "focus" and "blur" on focus target if keyboard was used', () => {
547
- // use keyboard first
548
- container.dispatchEvent(createKeyboardEvent('keydown', {key: 'Tab'}));
549
- ref.current.dispatchEvent(createEvent('focus'));
550
- expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(1);
551
- expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(true);
552
- ref.current.dispatchEvent(
553
- createEvent('blur', {relatedTarget: container}),
554
- );
555
- expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(2);
556
- expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(false);
557
- });
558
-
559
- it('is called after "focus" and "blur" on descendants if keyboard was used', () => {
560
- // use keyboard first
561
- container.dispatchEvent(createKeyboardEvent('keydown', {key: 'Tab'}));
562
- innerRef.current.dispatchEvent(createEvent('focus'));
563
- expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(1);
564
- expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(true);
565
- innerRef.current.dispatchEvent(
566
- createEvent('blur', {relatedTarget: container}),
567
- );
568
- expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(2);
569
- expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(false);
570
- });
571
-
572
- it('is called if non-keyboard event is dispatched on target previously focused with keyboard', () => {
573
- // use keyboard first
574
- ref.current.dispatchEvent(createEvent('focus'));
575
- ref.current.dispatchEvent(createKeyboardEvent('keydown', {key: 'Tab'}));
576
- ref.current.dispatchEvent(
577
- createEvent('blur', {relatedTarget: innerRef.current}),
578
- );
579
- innerRef.current.dispatchEvent(createEvent('focus'));
580
- expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(1);
581
- expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(true);
582
- // then use pointer on the next target, focus should no longer be visible
583
- innerRef2.current.dispatchEvent(createEvent('pointerdown'));
584
- innerRef.current.dispatchEvent(
585
- createEvent('blur', {relatedTarget: innerRef2.current}),
586
- );
587
- innerRef2.current.dispatchEvent(createEvent('focus'));
588
- expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(2);
589
- expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(false);
590
- // then use keyboard again
591
- innerRef2.current.dispatchEvent(
592
- createKeyboardEvent('keydown', {key: 'Tab', shiftKey: true}),
593
- );
594
- innerRef2.current.dispatchEvent(
595
- createEvent('blur', {relatedTarget: innerRef.current}),
596
- );
597
- innerRef.current.dispatchEvent(createEvent('focus'));
598
- expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(3);
599
- expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(true);
600
- // then use pointer on the target, focus should no longer be visible
601
- innerRef.current.dispatchEvent(createEvent('pointerdown'));
602
- expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(4);
603
- expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(false);
604
- // onFocusVisibleChange should not be called again
605
- innerRef.current.dispatchEvent(
606
- createEvent('blur', {relatedTarget: container}),
607
- );
608
- expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(4);
609
- });
610
-
611
- it('is not called after "focus" and "blur" events without keyboard', () => {
612
- innerRef.current.dispatchEvent(createEvent('pointerdown'));
613
- innerRef.current.dispatchEvent(createEvent('focus'));
614
- container.dispatchEvent(createEvent('pointerdown'));
615
- innerRef.current.dispatchEvent(
616
- createEvent('blur', {relatedTarget: container}),
617
- );
618
- expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(0);
619
- });
620
-
621
- it('is only called once when focus moves within and outside the subtree', () => {
622
- // focus shifts into subtree
623
- innerRef.current.dispatchEvent(createEvent('focus'));
624
- expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(1);
625
- expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(true);
626
- // focus moves around subtree
627
- innerRef.current.dispatchEvent(
628
- createEvent('blur', {relatedTarget: innerRef2.current}),
629
- );
630
- innerRef2.current.dispatchEvent(createEvent('focus'));
631
- innerRef2.current.dispatchEvent(
632
- createEvent('blur', {relatedTarget: ref.current}),
633
- );
634
- ref.current.dispatchEvent(createEvent('focus'));
635
- ref.current.dispatchEvent(
636
- createEvent('blur', {relatedTarget: innerRef.current}),
637
- );
638
- expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(1);
639
- // focus shifts outside subtree
640
- innerRef.current.dispatchEvent(
641
- createEvent('blur', {relatedTarget: container}),
642
- );
643
- expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(2);
644
- expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(false);
645
- });
646
- });
647
-
648
- it('expect displayName to show up for event component', () => {
649
- expect(FocusWithinResponder.displayName).toBe('FocusWithin');
650
- });
651
-});
packages/react-events/src/dom/__tests__/FocusWithin-test.internal.js
new
+288
@@ -0,0 +1,288 @@
1
+/**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @emails react-core
8
+ */
9
+
10
+'use strict';
11
+
12
+let React;
13
+let ReactFeatureFlags;
14
+let ReactDOM;
15
+let FocusWithinResponder;
16
+let useFocusWithinResponder;
17
+
18
+const createEvent = (type, data) => {
19
+ const event = document.createEvent('CustomEvent');
20
+ event.initCustomEvent(type, true, true);
21
+ if (data != null) {
22
+ Object.entries(data).forEach(([key, value]) => {
23
+ event[key] = value;
24
+ });
25
+ }
26
+ return event;
27
+};
28
+
29
+const createKeyboardEvent = (type, data) => {
30
+ return new KeyboardEvent(type, {
31
+ bubbles: true,
32
+ cancelable: true,
33
+ ...data,
34
+ });
35
+};
36
+
37
+const modulesInit = () => {
38
+ ReactFeatureFlags = require('shared/ReactFeatureFlags');
39
+ ReactFeatureFlags.enableFlareAPI = true;
40
+ React = require('react');
41
+ ReactDOM = require('react-dom');
42
+ FocusWithinResponder = require('react-events/focus').FocusWithinResponder;
43
+ useFocusWithinResponder = require('react-events/focus')
44
+ .useFocusWithinResponder;
45
+};
46
+
47
+describe('FocusWithin event responder', () => {
48
+ let container;
49
+
50
+ beforeEach(() => {
51
+ jest.resetModules();
52
+ modulesInit();
53
+
54
+ container = document.createElement('div');
55
+ document.body.appendChild(container);
56
+ });
57
+
58
+ afterEach(() => {
59
+ ReactDOM.render(null, container);
60
+ document.body.removeChild(container);
61
+ container = null;
62
+ });
63
+
64
+ describe('disabled', () => {
65
+ let onFocusWithinChange, onFocusWithinVisibleChange, ref;
66
+
67
+ beforeEach(() => {
68
+ onFocusWithinChange = jest.fn();
69
+ onFocusWithinVisibleChange = jest.fn();
70
+ ref = React.createRef();
71
+ const Component = () => {
72
+ const listener = useFocusWithinResponder({
73
+ disabled: true,
74
+ onFocusWithinChange,
75
+ onFocusWithinVisibleChange,
76
+ });
77
+ return <div ref={ref} listeners={listener} />;
78
+ };
79
+ ReactDOM.render(<Component />, container);
80
+ });
81
+
82
+ it('prevents custom events being dispatched', () => {
83
+ ref.current.dispatchEvent(createEvent('focus'));
84
+ ref.current.dispatchEvent(createEvent('blur'));
85
+ expect(onFocusWithinChange).not.toBeCalled();
86
+ expect(onFocusWithinVisibleChange).not.toBeCalled();
87
+ });
88
+ });
89
+
90
+ describe('onFocusWithinChange', () => {
91
+ let onFocusWithinChange, ref, innerRef, innerRef2;
92
+
93
+ beforeEach(() => {
94
+ onFocusWithinChange = jest.fn();
95
+ ref = React.createRef();
96
+ innerRef = React.createRef();
97
+ innerRef2 = React.createRef();
98
+ const Component = () => {
99
+ const listener = useFocusWithinResponder({
100
+ onFocusWithinChange,
101
+ });
102
+ return (
103
+ <div ref={ref} listeners={listener}>
104
+ <div ref={innerRef} />
105
+ <div ref={innerRef2} />
106
+ </div>
107
+ );
108
+ };
109
+ ReactDOM.render(<Component />, container);
110
+ });
111
+
112
+ it('is called after "blur" and "focus" events on focus target', () => {
113
+ ref.current.dispatchEvent(createEvent('focus'));
114
+ expect(onFocusWithinChange).toHaveBeenCalledTimes(1);
115
+ expect(onFocusWithinChange).toHaveBeenCalledWith(true);
116
+ ref.current.dispatchEvent(
117
+ createEvent('blur', {relatedTarget: container}),
118
+ );
119
+ expect(onFocusWithinChange).toHaveBeenCalledTimes(2);
120
+ expect(onFocusWithinChange).toHaveBeenCalledWith(false);
121
+ });
122
+
123
+ it('is called after "blur" and "focus" events on descendants', () => {
124
+ innerRef.current.dispatchEvent(createEvent('focus'));
125
+ expect(onFocusWithinChange).toHaveBeenCalledTimes(1);
126
+ expect(onFocusWithinChange).toHaveBeenCalledWith(true);
127
+ innerRef.current.dispatchEvent(
128
+ createEvent('blur', {relatedTarget: container}),
129
+ );
130
+ expect(onFocusWithinChange).toHaveBeenCalledTimes(2);
131
+ expect(onFocusWithinChange).toHaveBeenCalledWith(false);
132
+ });
133
+
134
+ it('is only called once when focus moves within and outside the subtree', () => {
135
+ // focus shifts into subtree
136
+ innerRef.current.dispatchEvent(createEvent('focus'));
137
+ expect(onFocusWithinChange).toHaveBeenCalledTimes(1);
138
+ expect(onFocusWithinChange).toHaveBeenCalledWith(true);
139
+ // focus moves around subtree
140
+ innerRef.current.dispatchEvent(
141
+ createEvent('blur', {relatedTarget: innerRef2.current}),
142
+ );
143
+ innerRef2.current.dispatchEvent(createEvent('focus'));
144
+ innerRef2.current.dispatchEvent(
145
+ createEvent('blur', {relatedTarget: ref.current}),
146
+ );
147
+ ref.current.dispatchEvent(createEvent('focus'));
148
+ ref.current.dispatchEvent(
149
+ createEvent('blur', {relatedTarget: innerRef.current}),
150
+ );
151
+ expect(onFocusWithinChange).toHaveBeenCalledTimes(1);
152
+ // focus shifts outside subtree
153
+ innerRef.current.dispatchEvent(
154
+ createEvent('blur', {relatedTarget: container}),
155
+ );
156
+ expect(onFocusWithinChange).toHaveBeenCalledTimes(2);
157
+ expect(onFocusWithinChange).toHaveBeenCalledWith(false);
158
+ });
159
+ });
160
+
161
+ describe('onFocusWithinVisibleChange', () => {
162
+ let onFocusWithinVisibleChange, ref, innerRef, innerRef2;
163
+
164
+ beforeEach(() => {
165
+ onFocusWithinVisibleChange = jest.fn();
166
+ ref = React.createRef();
167
+ innerRef = React.createRef();
168
+ innerRef2 = React.createRef();
169
+ const Component = () => {
170
+ const listener = useFocusWithinResponder({
171
+ onFocusWithinVisibleChange,
172
+ });
173
+ return (
174
+ <div ref={ref} listeners={listener}>
175
+ <div ref={innerRef} />
176
+ <div ref={innerRef2} />
177
+ </div>
178
+ );
179
+ };
180
+ ReactDOM.render(<Component />, container);
181
+ });
182
+
183
+ it('is called after "focus" and "blur" on focus target if keyboard was used', () => {
184
+ // use keyboard first
185
+ container.dispatchEvent(createKeyboardEvent('keydown', {key: 'Tab'}));
186
+ ref.current.dispatchEvent(createEvent('focus'));
187
+ expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(1);
188
+ expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(true);
189
+ ref.current.dispatchEvent(
190
+ createEvent('blur', {relatedTarget: container}),
191
+ );
192
+ expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(2);
193
+ expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(false);
194
+ });
195
+
196
+ it('is called after "focus" and "blur" on descendants if keyboard was used', () => {
197
+ // use keyboard first
198
+ container.dispatchEvent(createKeyboardEvent('keydown', {key: 'Tab'}));
199
+ innerRef.current.dispatchEvent(createEvent('focus'));
200
+ expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(1);
201
+ expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(true);
202
+ innerRef.current.dispatchEvent(
203
+ createEvent('blur', {relatedTarget: container}),
204
+ );
205
+ expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(2);
206
+ expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(false);
207
+ });
208
+
209
+ it('is called if non-keyboard event is dispatched on target previously focused with keyboard', () => {
210
+ // use keyboard first
211
+ ref.current.dispatchEvent(createEvent('focus'));
212
+ ref.current.dispatchEvent(createKeyboardEvent('keydown', {key: 'Tab'}));
213
+ ref.current.dispatchEvent(
214
+ createEvent('blur', {relatedTarget: innerRef.current}),
215
+ );
216
+ innerRef.current.dispatchEvent(createEvent('focus'));
217
+ expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(1);
218
+ expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(true);
219
+ // then use pointer on the next target, focus should no longer be visible
220
+ innerRef2.current.dispatchEvent(createEvent('pointerdown'));
221
+ innerRef.current.dispatchEvent(
222
+ createEvent('blur', {relatedTarget: innerRef2.current}),
223
+ );
224
+ innerRef2.current.dispatchEvent(createEvent('focus'));
225
+ expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(2);
226
+ expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(false);
227
+ // then use keyboard again
228
+ innerRef2.current.dispatchEvent(
229
+ createKeyboardEvent('keydown', {key: 'Tab', shiftKey: true}),
230
+ );
231
+ innerRef2.current.dispatchEvent(
232
+ createEvent('blur', {relatedTarget: innerRef.current}),
233
+ );
234
+ innerRef.current.dispatchEvent(createEvent('focus'));
235
+ expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(3);
236
+ expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(true);
237
+ // then use pointer on the target, focus should no longer be visible
238
+ innerRef.current.dispatchEvent(createEvent('pointerdown'));
239
+ expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(4);
240
+ expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(false);
241
+ // onFocusVisibleChange should not be called again
242
+ innerRef.current.dispatchEvent(
243
+ createEvent('blur', {relatedTarget: container}),
244
+ );
245
+ expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(4);
246
+ });
247
+
248
+ it('is not called after "focus" and "blur" events without keyboard', () => {
249
+ innerRef.current.dispatchEvent(createEvent('pointerdown'));
250
+ innerRef.current.dispatchEvent(createEvent('focus'));
251
+ container.dispatchEvent(createEvent('pointerdown'));
252
+ innerRef.current.dispatchEvent(
253
+ createEvent('blur', {relatedTarget: container}),
254
+ );
255
+ expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(0);
256
+ });
257
+
258
+ it('is only called once when focus moves within and outside the subtree', () => {
259
+ // focus shifts into subtree
260
+ innerRef.current.dispatchEvent(createEvent('focus'));
261
+ expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(1);
262
+ expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(true);
263
+ // focus moves around subtree
264
+ innerRef.current.dispatchEvent(
265
+ createEvent('blur', {relatedTarget: innerRef2.current}),
266
+ );
267
+ innerRef2.current.dispatchEvent(createEvent('focus'));
268
+ innerRef2.current.dispatchEvent(
269
+ createEvent('blur', {relatedTarget: ref.current}),
270
+ );
271
+ ref.current.dispatchEvent(createEvent('focus'));
272
+ ref.current.dispatchEvent(
273
+ createEvent('blur', {relatedTarget: innerRef.current}),
274
+ );
275
+ expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(1);
276
+ // focus shifts outside subtree
277
+ innerRef.current.dispatchEvent(
278
+ createEvent('blur', {relatedTarget: container}),
279
+ );
280
+ expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(2);
281
+ expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(false);
282
+ });
283
+ });
284
+
285
+ it('expect displayName to show up for event component', () => {
286
+ expect(FocusWithinResponder.displayName).toBe('FocusWithin');
287
+ });
288
+});