Step 6.9: Test ChatRoomScreen child components

src/components/ChatRoomScreen/ChatNavbar.test.tsx

@@ -0,0 +1,80 @@
+import { createMemoryHistory } from 'history';
+import React from 'react';
+import { cleanup, render, waitFor, fireEvent } from '@testing-library/react';
+import ChatNavbar from './ChatNavbar';
+
+describe('ChatNavbar', () => {
+  afterEach(cleanup);
+
+  it('renders chat data', () => {
+    const time = new Date('1 Jan 2019 GMT');
+    const chat = {
+      id: '1',
+      name: 'Foo Bar',
+      picture: 'https://localhost:4000/picture.jpg',
+      messages: [
+        {
+          id: '1',
+          content: 'foo',
+          createdAt: time,
+        },
+        {
+          id: '2',
+          content: 'bar',
+          createdAt: time,
+        },
+      ],
+    };
+
+    const history = createMemoryHistory();
+
+    {
+      const { container, getByTestId } = render(
+        <ChatNavbar chat={chat} history={history} />
+      );
+
+      expect(getByTestId('chat-name')).toHaveTextContent('Foo Bar');
+      expect(getByTestId('chat-picture')).toHaveAttribute(
+        'src',
+        'https://localhost:4000/picture.jpg'
+      );
+    }
+  });
+
+  it('goes back on arrow click', async () => {
+    const time = new Date('1 Jan 2019 GMT');
+    const chat = {
+      id: '1',
+      name: 'Foo Bar',
+      picture: 'https://localhost:4000/picture.jpg',
+      messages: [
+        {
+          id: '1',
+          content: 'foo',
+          createdAt: time,
+        },
+        {
+          id: '2',
+          content: 'bar',
+          createdAt: time,
+        },
+      ],
+    };
+
+    const history = createMemoryHistory();
+
+    history.push('/chats/1');
+
+    await waitFor(() => expect(history.location.pathname).toEqual('/chats/1'));
+
+    {
+      const { container, getByTestId } = render(
+        <ChatNavbar chat={chat} history={history} />
+      );
+
+      fireEvent.click(getByTestId('back-button'));
+
+      await waitFor(() => expect(history.location.pathname).toEqual('/chats'));
+    }
+  });
+});

src/components/ChatRoomScreen/ChatNavbar.tsx

@@ -47,11 +47,11 @@ const ChatNavbar: React.FC<ChatNavbarProps> = ({ chat, history }) => {
 
   return (
     <Container>
-      <BackButton onClick={navBack}>
+      <BackButton data-testid="back-button" onClick={navBack}>
         <ArrowBackIcon />
       </BackButton>
-      <Picture src={chat.picture} />
-      <Name>{chat.name}</Name>
+      <Picture data-testid="chat-picture" src={chat.picture} />
+      <Name data-testid="chat-name">{chat.name}</Name>
     </Container>
   );
 };

src/components/ChatRoomScreen/MessageInput.test.tsx

@@ -0,0 +1,51 @@
+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' } });
+
+      await waitFor(() => messageInput);
+
+      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' } });
+
+      await waitFor(() => messageInput);
+
+      fireEvent.keyPress(messageInput, {
+        key: 'Enter',
+        code: 13,
+        charCode: 13,
+      });
+
+      await waitFor(() => expect(onSendMessage.mock.calls.length).toBe(1));
+    }
+  });
+});

src/components/ChatRoomScreen/MessageInput.tsx

@@ -70,13 +70,18 @@ const MessageInput: React.FC<MessageInputProps> = ({ onSendMessage }) => {
   return (
     <Container>
       <ActualInput
+        data-testid="message-input"
         type="text"
         placeholder="Type a message"
         value={message}
         onKeyPress={onKeyPress}
         onChange={onChange}
       />
-      <SendButton variant="contained" color="primary" onClick={submitMessage}>
+      <SendButton
+        data-testid="send-button"
+        variant="contained"
+        color="primary"
+        onClick={submitMessage}>
         <SendIcon />
       </SendButton>
     </Container>

src/components/ChatRoomScreen/MessagesList.test.tsx

@@ -0,0 +1,41 @@
+import { createMemoryHistory } from 'history';
+import React from 'react';
+import { cleanup, render, getByTestId } from '@testing-library/react';
+import MessagesList from './MessagesList';
+
+describe('MessagesList', () => {
+  afterEach(cleanup);
+
+  const time = new Date('1 Jan 2019 GMT');
+
+  it('renders messages data', () => {
+    const messages = [
+      {
+        id: '1',
+        content: 'foo',
+        createdAt: time,
+      },
+      {
+        id: '2',
+        content: 'bar',
+        createdAt: time,
+      },
+    ];
+
+    let message1, message2;
+    {
+      const { container, getAllByTestId, getByTestId } = render(
+        <MessagesList messages={messages} />
+      );
+      const match = getAllByTestId('message-item');
+      message1 = match[0];
+      message2 = match[1];
+    }
+
+    expect(getByTestId(message1, 'message-content')).toHaveTextContent('foo');
+    expect(getByTestId(message1, 'message-date')).toHaveTextContent('00:00');
+
+    expect(getByTestId(message2, 'message-content')).toHaveTextContent('bar');
+    expect(getByTestId(message2, 'message-date')).toHaveTextContent('00:00');
+  });
+});

src/components/ChatRoomScreen/MessagesList.tsx

@@ -79,9 +79,11 @@ const MessagesList: React.FC<MessagesListProps> = ({ messages }) => {
   return (
     <Container ref={selfRef}>
       {messages.map((message: any) => (
-        <MessageItem key={message.id}>
-          <Contents>{message.content}</Contents>
-          <Timestamp>{moment(message.createdAt).format('HH:mm')}</Timestamp>
+        <MessageItem data-testid="message-item" key={message.id}>
+          <Contents data-testid="message-content">{message.content}</Contents>
+          <Timestamp data-testid="message-date">
+            {moment(message.createdAt).format('HH:mm')}
+          </Timestamp>
         </MessageItem>
       ))}
     </Container>