How to use the @testing-library/react.fireEvent.keyDown function in @testing-library/react

To help you get started, we’ve selected a few @testing-library/react examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Satyam / react-simple-idle-monitor / __tests__ / IdleMonitorRedux.tsx View on Github external
test('it should not dispatch anything after UI event if not idle first', () => {
      const dispatch = jest.fn();
      const { getByText } = render(
        <div>
          
            Hello
          
        </div>
      );

      // Clearing the _run action
      dispatch.mockClear();
      fireEvent.keyDown(getByText('Hello'), { key: 'Enter', code: 13 });

      expect(dispatch).not.toHaveBeenCalled();
    });
github mlaursen / react-md / packages / utils / src / wia-aria / __tests__ / useTabFocusWrap.tsx View on Github external
it("should contain focus by wrapping around", () =&gt; {
    const { getByTestId } = render();

    const input1 = getByTestId("input-1");
    const input2 = getByTestId("input-2");

    // set up intial focus...
    input1.focus();
    expect(document.activeElement).toBe(input1);

    // start tracking focus changes
    const focus1 = jest.spyOn(input1, "focus");
    const focus2 = jest.spyOn(input2, "focus");

    fireEvent.keyDown(input1, { key: "Tab", shiftKey: true });
    expect(document.activeElement).toBe(input2);
    expect(focus2).toBeCalledTimes(1);

    fireEvent.keyDown(input2, { key: "Tab" });
    expect(document.activeElement).toBe(input1);
    expect(focus1).toBeCalledTimes(1);
  });
github downshift-js / downshift / src / __tests__ / downshift.misc-with-utils-mocked.js View on Github external
<div>
            </div>
          )}
        
      )
    }
  }
  const {queryByTestId} = render()
  const input = queryByTestId('input')
  const item = queryByTestId('item-2')
  fireEvent.mouseMove(item)
  jest.runAllTimers()
  expect(scrollIntoView).not.toHaveBeenCalled()
  // now let's make sure that we can still scroll items into view
  // ↓
  fireEvent.keyDown(input, {key: 'ArrowDown'})
  expect(scrollIntoView).toHaveBeenCalledWith(item, undefined)
})
github atlassian / react-beautiful-dnd / test / unit / integration / combine-on-start.spec.js View on Github external
// flush onDragStart  responder
  jest.runOnlyPendingTimers();

  const start: DragStart = {
    draggableId: 'first',
    source: {
      droppableId: 'droppable',
      index: 0,
    },
    type: 'DEFAULT',
    mode: 'SNAP',
  };
  expect(responders.onDragStart).toHaveBeenCalledWith(start);

  // now moving down will cause a combine impact!
  fireEvent.keyDown(handle, { keyCode: keyCodes.arrowDown });
  jest.runOnlyPendingTimers();
  const update: DragUpdate = {
    ...start,
    destination: null,
    combine: {
      draggableId: 'second',
      droppableId: 'droppable',
    },
  };
  expect(responders.onDragUpdate).toHaveBeenCalledWith(update);
});
github netlify / netlify-cms / packages / netlify-cms-widget-select / src / __tests__ / select.spec.js View on Github external
it('should call onChange with empty list when no item is selected', () => {
      const field = fromJS({ options, multiple: true });
      const { input, onChangeSpy } = setup({
        field,
        defaultValue: fromJS([options[1].value]),
      });

      fireEvent.focus(input);
      fireEvent.keyDown(input, { key: 'Delete' });

      expect(onChangeSpy).toHaveBeenCalledTimes(1);
      expect(onChangeSpy).toHaveBeenCalledWith(fromJS([]));
    });
github Satyam / react-simple-idle-monitor / __tests__ / index.jsx View on Github external
};
      const { container } = render(
        
          Hola
        
      );
      expect(container.querySelectorAll('div.active')).toHaveLength(1);
      expect(container.querySelectorAll('div.idle')).toHaveLength(0);
      act(() =&gt; jest.runAllTimers());
      expect(container.querySelectorAll('div.active')).toHaveLength(0);
      expect(container.querySelectorAll('div.idle')).toHaveLength(1);
      fireEvent.keyDown(container, { key: 'Enter', code: 13 });
      expect(container.querySelectorAll('div.active')).toHaveLength(0);
      expect(container.querySelectorAll('div.idle')).toHaveLength(1);
    });
github downshift-js / downshift / src / __tests__ / downshift.get-item-props.js View on Github external
enterOnInput: extraEventProps =>
      fireEvent.keyDown(input, {key: 'Enter', ...extraEventProps}),
    changeInputValue: (value, extraEventProps) => {
github Meemaw / react-micro-modal / test / __helpers__ / events.ts View on Github external
function fireKeyDownEvent(element: Element = document.body, event: object) {
  fireEvent.keyDown(element, event);
}
github zendeskgarden / react-containers / packages / selection / src / SelectionContainer.spec.tsx View on Github external
it('increments and wraps focusedIndex if currently greater than or equal to items length', () =&gt; {
              const { getAllByTestId } = render();
              const [item, , lastItem] = getAllByTestId('item');

              fireEvent.focus(lastItem);
              fireEvent.keyDown(lastItem, { keyCode: KEY_CODES.LEFT });

              expect(item).toHaveAttribute('data-focused', 'true');
            });
          });
github zendeskgarden / react-containers / packages / focusvisible / src / FocusVisibleContainer.spec.tsx View on Github external
it('does not allow focus treatment of provided scope', () =&gt; {
      const { getByTestId } = render();
      const wrapper = getByTestId('wrapper');

      fireEvent.keyDown(wrapper);
      fireEvent.focus(wrapper);

      expect(wrapper).not.toHaveAttribute('data-garden-focus-visible');
    });