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

0
Angela Inniss 16 grudzień 2019, 22:24

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.

1
JP Silvashy 16 grudzień 2019, 22:29
Witam, to znaczy dodać document.hasFocus(); gdzie? w moim kodzie przed wywołaniem klawisza ESC lub w moim teście?
 – 
Angela Inniss
16 grudzień 2019, 23:27
Zrobiłbyś to przed emisją kluczowych zdarzeń, więc prawdopodobnie powinno to być w kodzie środowiska uruchomieniowego opakowane w dowolną funkcję, która wyzwoli to zdarzenie. Wtedy nie musiałbyś umieszczać tego w swoim teście.
 – 
JP Silvashy
18 grudzień 2019, 17:44

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

0
Badrush 16 grudzień 2019, 22:29