Mam wyskakujące okienko i chciałbym sprawdzić, czy po naciśnięciu ESC na klawiaturze wyskakujące okienko się zamyka. Funkcjonalność działa, ale chcę, aby mój test został zaliczony. Nie wiem, jak zasymulować naciśnięcie keyDown na całym dokumencie, a nie tylko na wyskakującym komponencie modalnym.
Oto mój test w tej chwili:
test("it should call the onKeyDown handler on key ESC press", () => {
const onKeydownSpy = jest.fn();
const component = mount(
<div id="wrapper">
<Modal
isOpen={false}
portalParent="#wrapper"
onClose={() => {}}
id="123"
>
<p>Modal</p>
</Modal>
</div>
);
component.simulate("keydown", { keyCode: 27 });
expect(onKeydownSpy).toHaveBeenCalledTimes(1);
expect(onKeydownSpy).toHaveBeenCalledWith(0);
});
Oto mój kod:
const handleKeyDownEvent = useCallback(event => {
if (event.keyCode === 27) {
onClose();
}
}, []);
useEffect(() => {
if (isOpen) {
document.addEventListener("keydown", handleKeyDownEvent);
} else {
document.removeEventListener("keydown", handleKeyDownEvent);
}
}, [handleKeyDownEvent, isOpen]);
Z góry dziękuję, daj mi znać, jeśli potrzebujesz więcej informacji
2 odpowiedzi
Myślę, że problemem, który masz, jest dokument lub jeden z elementów podrzędnych musi mieć bieżący „fokus”. Jeśli sprawdzisz to przed wysłaniem klucza esc, co otrzymasz:
document.hasFocus();
Generalnie możesz:
document.focus();
Przed wysłaniem kluczy.
Czy to rozwiązuje Twój problem?
simulant.fire (document.body.querySelector ('aside'), 'click')
it('only triggers clickOutside handler when clicking outside component', t => {
const onClickOutside = sinon.spy()
enter code here
ReactDOM.render(<Page onClickOutside={onClickOutside} />, document.body)
simulant.fire(document.body.querySelector('aside'), 'click')
t.equal(onClickOutside.callCount, 1, 'should fire when clicking menu sibling')
document.body.innerHTML = ''
t.end()
})
Źródło: https://github.com/airbnb/enzyme/issues/426
document.hasFocus();gdzie? w moim kodzie przed wywołaniem klawisza ESC lub w moim teście?