@testing-library/react#createEvent TypeScript Examples

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();
    });
  });
});

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);
  });
});

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;
    });
  });
});