Skip to content

Commit ed49700

Browse files
necolasnecolas
authored
[react-events] Separate the Focus/FocusWithin unit tests (#16298)
1 parent 23405c9 commit ed49700

File tree

2 files changed

+288
-248
lines changed

2 files changed

+288
-248
lines changed

‎packages/react-events/src/dom/__tests__/Focus-test.internal.js

Lines changed: 0 additions & 248 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,7 @@ let React;
1313
let ReactFeatureFlags;
1414
let ReactDOM;
1515
let FocusResponder;
16-
let FocusWithinResponder;
1716
let useFocusResponder;
18-
let useFocusWithinResponder;
1917

2018
const createEvent = (type, data) => {
2119
const event = document.createEvent('CustomEvent');
@@ -42,10 +40,7 @@ const modulesInit = () => {
4240
React = require('react');
4341
ReactDOM = require('react-dom');
4442
FocusResponder = require('react-events/focus').FocusResponder;
45-
FocusWithinResponder = require('react-events/focus').FocusWithinResponder;
4643
useFocusResponder = require('react-events/focus').useFocusResponder;
47-
useFocusWithinResponder = require('react-events/focus')
48-
.useFocusWithinResponder;
4944
};
5045

5146
describe('Focus event responder', () => {
@@ -406,246 +401,3 @@ describe('Focus event responder', () => {
406401
expect(FocusResponder.displayName).toBe('Focus');
407402
});
408403
});
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-
});

0 commit comments

Comments
 (0)