@testing-library/react#createEvent TypeScript Examples

The following examples show how to use @testing-library/react#createEvent. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Items.test.tsx    From backstage with Apache License 2.0 6 votes vote down vote up 
describe('Items', () => {
  beforeEach(async () => {
    await renderSidebar();
  });

  describe('SidebarItem', () => {
    it('should render a link when `to` prop provided', async () => {
      expect(
        await screen.findByRole('link', { name: /home/i }),
      ).toBeInTheDocument();
    });

    it('should render a button when `to` prop is not provided', async () => {
      expect(
        await screen.findByRole('button', { name: /create/i }),
      ).toBeInTheDocument();
    });

    it('should render a button with custom style', async () => {
      expect(
        await screen.findByRole('button', { name: /create/i }),
      ).toHaveStyle(`background-color: ${hexToRgb('2b2a2a')}`);
    });
  });
  describe('SidebarSearchField', () => {
    it('should be defaultPrevented when enter is pressed', async () => {
      const searchEvent = createEvent.keyDown(
        await screen.findByPlaceholderText('Search'),
        { key: 'Enter', code: 'Enter', charCode: 13 },
      );
      fireEvent(await screen.findByPlaceholderText('Search'), searchEvent);
      expect(searchEvent.defaultPrevented).toBeTruthy();
    });
  });
});
Example #2
Source File: Cell.test.tsx    From minesweeper with MIT License 5 votes vote down vote up 
describe('Cell component check', () => {
  const coords: Coords = [1, 1];
  const props = {
    coords,
    flagCounter: 0,
    bombs: 10,
    onClick: jest.fn(),
    onContextMenu: jest.fn(),
  };

  for (let cell = CellState.empty; cell <= CellState.weakFlag; cell++) {
    it('Cell renders correct', () => {
      const { asFragment } = render(<Cell {...props}>{cell}</Cell>);

      expect(asFragment()).toMatchSnapshot();
    });
    it('Closed Frame renders correct', () => {
      const { asFragment } = render(<ClosedFrame mouseDown={true} />);
      expect(asFragment()).toMatchSnapshot();
    });
    it('Check prevent default contextMenu for every type of cell', () => {
      render(<Cell {...props}>{cell}</Cell>);

      const cellComp = screen.getByTestId(`${coords}`);

      const contextMenuEvent = createEvent.contextMenu(cellComp);
      fireEvent(cellComp, contextMenuEvent);

      expect(contextMenuEvent.defaultPrevented).toBe(true);
    });

    it('onClick and onContextMenu handler should be called for active cells', () => {
      render(<Cell {...props}>{cell}</Cell>);

      const cellComp = screen.getByTestId(`${coords}`);

      fireEvent.click(cellComp);
      fireEvent.contextMenu(cellComp);

      if (isActiveCell(cell)) {
        expect(props.onClick).toBeCalled();
        expect(props.onContextMenu).toBeCalled();
      } else {
        expect(props.onClick).not.toBeCalled();
        expect(props.onContextMenu).not.toBeCalled();
      }
    });
  }
  it('Check areEqual', () => {
    const prevProps = {
      ...props,
      children: 0 as CellType,
    };

    expect(areEqual(prevProps, { ...prevProps })).toBe(true);

    expect(areEqual(prevProps, { ...prevProps, coords: [2, 1] })).toBe(false);
    expect(areEqual(prevProps, { ...prevProps, coords: [1, 2] })).toBe(false);
    expect(areEqual(prevProps, { ...prevProps, coords: [2, 2] })).toBe(false);
    expect(areEqual(prevProps, { ...prevProps, coords: [1, 0] })).toBe(false);

    expect(areEqual(prevProps, { ...prevProps, children: 1 as CellType })).toBe(
      false
    );
    expect(areEqual(prevProps, { ...prevProps, onClick: jest.fn() })).toBe(
      false
    );
    expect(
      areEqual(prevProps, { ...prevProps, onContextMenu: jest.fn() })
    ).toBe(false);
  });
});
Example #3
Source File: index.test.tsx    From react-auth-code-input with MIT License 4 votes vote down vote up 
describe('AuthCode', () => {
  it('should render the default component', () => {
    render(<AuthCode onChange={() => null} />);
    const inputs = screen.getAllByRole('textbox');
    expect(inputs).toHaveLength(6);
    expect(inputs[0]).toHaveFocus();
  });

  it('should render the component but not focus the first input', () => {
    render(<AuthCode autoFocus={false} onChange={() => null} />);
    const inputs = screen.getAllByRole('textbox');
    expect(inputs).toHaveLength(6);
    expect(inputs[0]).not.toHaveFocus();
  });

  it('should render n inputs', () => {
    render(<AuthCode onChange={() => null} length={4} />);
    expect(screen.getAllByRole('textbox')).toHaveLength(4);
  });

  it('should call onChange function when typing any character', async () => {
    const onChangeFn = jest.fn();
    render(<AuthCode onChange={onChangeFn} />);

    const input = screen.getAllByRole('textbox')[0] as HTMLInputElement;

    userEvent.type(input, 'A');
    expect(input).toHaveValue('A');
    expect(onChangeFn).toHaveBeenCalledTimes(1);
  });

  it('should delete the previous value if the current input is empty', async () => {
    const onChangeFn = jest.fn();
    render(<AuthCode onChange={onChangeFn} />);

    const input4 = screen.getAllByRole('textbox')[4] as HTMLInputElement;
    const input5 = screen.getAllByRole('textbox')[5] as HTMLInputElement;

    userEvent.type(input4, 'A');
    expect(input4).toHaveValue('A');

    userEvent.type(input5, 'B');
    expect(input5).toHaveValue('B');

    userEvent.keyboard('[Backspace]');
    expect(input5).toHaveValue('');
    expect(input5).toHaveFocus();

    userEvent.keyboard('[Backspace]');
    expect(input4).toHaveValue('');
    expect(input4).toHaveFocus();
  });

  describe('Alphanumeric', () => {
    it('should not change the input value when typing a not allowed character', async () => {
      const onChangeFn = jest.fn();
      render(<AuthCode onChange={onChangeFn} />);

      const input = screen.getAllByRole('textbox')[0] as HTMLInputElement;

      userEvent.type(input, ',');
      expect(input).toHaveValue('');
    });

    it('should allow only one character for input', async () => {
      const onChangeFn = jest.fn();
      render(<AuthCode onChange={onChangeFn} />);

      const input = screen.getAllByRole('textbox')[0] as HTMLInputElement;

      userEvent.type(input, 'A');
      userEvent.type(input, 'B');
      expect(input).toHaveValue('A');

      userEvent.type(input, '1');
      expect(input).toHaveValue('A');
      expect(onChangeFn).toHaveBeenCalledTimes(1);
    });

    it('should paste all the characters', async () => {
      const onChangeFn = jest.fn();
      render(<AuthCode onChange={onChangeFn} />);

      const firstInput = screen.getAllByRole('textbox')[0] as HTMLInputElement;
      const lastInput = screen.getAllByRole('textbox')[5] as HTMLInputElement;

      const paste = createEvent.paste(firstInput, {
        clipboardData: {
          getData: () => 'a12def'
        }
      });

      fireEvent(firstInput, paste);

      expect(firstInput).toHaveValue('a');
      expect(lastInput).toHaveValue('f');
      expect(onChangeFn).toHaveBeenCalledTimes(1);
    });

    it('should paste only the allowed the characters', async () => {
      const onChangeFn = jest.fn();
      render(<AuthCode onChange={onChangeFn} />);

      const firstInput = screen.getAllByRole('textbox')[0] as HTMLInputElement;
      const lastInput = screen.getAllByRole('textbox')[4] as HTMLInputElement;

      const paste = createEvent.paste(firstInput, {
        clipboardData: {
          getData: () => '1,b456'
        }
      });

      fireEvent(firstInput, paste);

      expect(firstInput).toHaveValue('1');
      expect(lastInput).toHaveValue('6');
      expect(onChangeFn).toHaveBeenCalledTimes(1);
    });

    it('should take in account the number of characters when pasting', async () => {
      const onChangeFn = jest.fn();
      render(<AuthCode onChange={onChangeFn} length={5} />);

      const firstInput = screen.getAllByRole('textbox')[0] as HTMLInputElement;
      const lastInput = screen.getAllByRole('textbox')[4] as HTMLInputElement;

      const paste = createEvent.paste(firstInput, {
        clipboardData: {
          getData: () => 'abcdef'
        }
      });

      fireEvent(firstInput, paste);

      expect(firstInput).toHaveValue('a');
      expect(lastInput).toHaveValue('e');
      expect(onChangeFn).toHaveBeenCalledTimes(1);
    });
  });

  describe('Alpha', () => {
    it('should not change the input value when typing a not allowed character', async () => {
      const onChangeFn = jest.fn();
      render(<AuthCode allowedCharacters='alpha' onChange={onChangeFn} />);

      const input = screen.getAllByRole('textbox')[0] as HTMLInputElement;

      userEvent.type(input, ',');
      expect(input).toHaveValue('');
    });

    it('should allow only one character for input', async () => {
      const onChangeFn = jest.fn();
      render(<AuthCode allowedCharacters='alpha' onChange={onChangeFn} />);

      const input = screen.getAllByRole('textbox')[0] as HTMLInputElement;

      userEvent.type(input, 'A');
      userEvent.type(input, 'B');
      expect(input).toHaveValue('A');

      userEvent.type(input, '1');
      expect(input).toHaveValue('A');
      expect(onChangeFn).toHaveBeenCalledTimes(1);
    });

    it('should paste all the characters', async () => {
      const onChangeFn = jest.fn();
      render(<AuthCode allowedCharacters='alpha' onChange={onChangeFn} />);

      const firstInput = screen.getAllByRole('textbox')[0] as HTMLInputElement;
      const lastInput = screen.getAllByRole('textbox')[5] as HTMLInputElement;

      const paste = createEvent.paste(firstInput, {
        clipboardData: {
          getData: () => 'abcdef'
        }
      });

      fireEvent(firstInput, paste);

      expect(firstInput).toHaveValue('a');
      expect(lastInput).toHaveValue('f');
      expect(onChangeFn).toHaveBeenCalledTimes(1);
    });

    it('should paste only the allowed the characters', async () => {
      const onChangeFn = jest.fn();
      render(<AuthCode allowedCharacters='alpha' onChange={onChangeFn} />);

      const firstInput = screen.getAllByRole('textbox')[0] as HTMLInputElement;
      const lastInput = screen.getAllByRole('textbox')[4] as HTMLInputElement;

      const paste = createEvent.paste(firstInput, {
        clipboardData: {
          getData: () => 'a,bcde'
        }
      });

      fireEvent(firstInput, paste);

      expect(firstInput).toHaveValue('a');
      expect(lastInput).toHaveValue('e');
      expect(onChangeFn).toHaveBeenCalledTimes(1);
    });

    it('should take in account the number of characters when pasting', async () => {
      const onChangeFn = jest.fn();
      render(
        <AuthCode allowedCharacters='alpha' onChange={onChangeFn} length={5} />
      );

      const firstInput = screen.getAllByRole('textbox')[0] as HTMLInputElement;
      const lastInput = screen.getAllByRole('textbox')[4] as HTMLInputElement;

      const paste = createEvent.paste(firstInput, {
        clipboardData: {
          getData: () => 'abcdef'
        }
      });

      fireEvent(firstInput, paste);

      expect(firstInput).toHaveValue('a');
      expect(lastInput).toHaveValue('e');
      expect(onChangeFn).toHaveBeenCalledTimes(1);
    });
  });

  describe('Numeric', () => {
    it('should not change the input value when typing a not allowed character', async () => {
      const onChangeFn = jest.fn();
      render(<AuthCode allowedCharacters='numeric' onChange={onChangeFn} />);

      const input = screen.getAllByRole('spinbutton')[0] as HTMLInputElement;

      userEvent.type(input, 'a');
      expect(input).toHaveValue(null);
    });

    it('should allow only one character for input', async () => {
      const onChangeFn = jest.fn();
      render(<AuthCode allowedCharacters='numeric' onChange={onChangeFn} />);

      const input = screen.getAllByRole('spinbutton')[0] as HTMLInputElement;

      userEvent.type(input, '1');
      userEvent.type(input, '2');
      expect(input).toHaveValue(1);

      userEvent.type(input, 'B');
      expect(input).toHaveValue(1);
      expect(onChangeFn).toHaveBeenCalledTimes(2);
    });

    it('should paste all the characters', async () => {
      const onChangeFn = jest.fn();
      render(<AuthCode allowedCharacters='numeric' onChange={onChangeFn} />);

      const firstInput = screen.getAllByRole(
        'spinbutton'
      )[0] as HTMLInputElement;
      const lastInput = screen.getAllByRole(
        'spinbutton'
      )[5] as HTMLInputElement;

      const paste = createEvent.paste(firstInput, {
        clipboardData: {
          getData: () => '123456'
        }
      });

      fireEvent(firstInput, paste);

      expect(firstInput).toHaveValue(1);
      expect(lastInput).toHaveValue(6);
      expect(onChangeFn).toHaveBeenCalledTimes(1);
    });

    it('should paste only the allowed the characters', async () => {
      const onChangeFn = jest.fn();
      render(<AuthCode allowedCharacters='numeric' onChange={onChangeFn} />);

      const firstInput = screen.getAllByRole(
        'spinbutton'
      )[0] as HTMLInputElement;
      const lastInput = screen.getAllByRole(
        'spinbutton'
      )[5] as HTMLInputElement;

      const paste = createEvent.paste(firstInput, {
        clipboardData: {
          getData: () => '1ab45678'
        }
      });

      fireEvent(firstInput, paste);

      expect(firstInput).toHaveValue(1);
      expect(lastInput).toHaveValue(8);
      expect(onChangeFn).toHaveBeenCalledTimes(1);
    });

    it('should take in account the number of characters when pasting', async () => {
      const onChangeFn = jest.fn();
      render(
        <AuthCode
          allowedCharacters='numeric'
          onChange={onChangeFn}
          length={5}
        />
      );

      const firstInput = screen.getAllByRole(
        'spinbutton'
      )[0] as HTMLInputElement;
      const lastInput = screen.getAllByRole(
        'spinbutton'
      )[4] as HTMLInputElement;

      const paste = createEvent.paste(firstInput, {
        clipboardData: {
          getData: () => '123456'
        }
      });

      fireEvent(firstInput, paste);

      expect(firstInput).toHaveValue(1);
      expect(lastInput).toHaveValue(5);
      expect(onChangeFn).toHaveBeenCalledTimes(1);
    });
  });

  describe('Bad properties', () => {
    it('should throw an exception when the length prop is less than 1', () => {
      const err = console.error;
      console.error = jest.fn();
      const onChangeFn = jest.fn();
      const badRender = () => {
        render(<AuthCode onChange={onChangeFn} length={0} />);
      };

      expect(badRender).toThrowError(
        'Length should be a number and greater than 0'
      );
      console.error = err;
    });

    it('should throw an exception when the length prop is not a number', () => {
      const err = console.error;
      console.error = jest.fn();
      const onChangeFn = jest.fn();
      const badRender = () => {
        // @ts-ignore
        render(<AuthCode onChange={onChangeFn} length='hello' />);
      };

      expect(badRender).toThrowError(
        'Length should be a number and greater than 0'
      );
      console.error = err;
    });

    it('should throw an exception when the allowedCharacters prop s not valid', () => {
      const err = console.error;
      console.error = jest.fn();
      const onChangeFn = jest.fn();
      const badRender = () => {
        // @ts-ignore
        render(<AuthCode onChange={onChangeFn} allowedCharacters='invalid' />);
      };

      expect(badRender).toThrowError('Invalid value for allowedCharacters');
      console.error = err;
    });
  });
});