[Client Step 6.9] change src/components/ChatRoomScreen/MessageInput.test.tsx

[Łukasz Gandecki]

those waits don't have any effect , the inputs are already selected with get that would throw if the element was not found

import { createMemoryHistory } from 'history';
import React from 'react';
import { cleanup, render, waitFor, fireEvent } from '@testing-library/react';
import MessageInput from './MessageInput';

describe('MessageInput;', () => {
  afterEach(cleanup);

  it('triggers callback on send button click', async () => {
    const onSendMessage = jest.fn(() => {});

    {
      const { container, getByTestId } = render(
        <MessageInput onSendMessage={onSendMessage} />
      );
      const messageInput = getByTestId('message-input');
      const sendButton = getByTestId('send-button');

      fireEvent.change(messageInput, { target: { value: 'foo' } });

      fireEvent.click(sendButton);

      await waitFor(() => expect(onSendMessage.mock.calls.length).toBe(1));
    }
  });

  it('triggers callback on Enter press', async () => {
    const onSendMessage = jest.fn(() => {});

    {
      const { container, getByTestId } = render(
        <MessageInput onSendMessage={onSendMessage} />
      );
      const messageInput = getByTestId('message-input');

      fireEvent.change(messageInput, { target: { value: 'foo' } });

      fireEvent.keyPress(messageInput, {
        key: 'Enter',
        code: 13,
        charCode: 13,
      });

      await waitFor(() => expect(onSendMessage.mock.calls.length).toBe(1));
    }
  });
});

[Łukasz Gandecki]

I've made the change from the tutorial page itself, I thought it would show a diff or create a PR with a code changed proposed.

basically, both of those tests have
await waitFor(() => messageInput);

after fireEvent.change - which does nothing