Add tests for @/modules/file (#36)

* add tests for @/modules/file

* wrap tests with act() where required

src/modules/message/components/MessageSent.js

@@ -18,8 +18,8 @@ const MessageSent = ({ chat }) => (
             </div>
           </Grid>
         ))}
-        {chat.attachments.map(image => (
-          <div key={image.name} className={`${styles.messageImage} ${styles.selfImage}`}>
+        {chat.attachments.map((image, index) => (
+          <div key={index} className={`${styles.messageImage} ${styles.selfImage}`}>
             <MessageImage address={chat.to} attachment={image} />
           </div>
         ))}

tests/modules/chatbox/components/ChatBox.test.js

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { act, render, screen, fireEvent } from '@testing-library/react';
 
 import { ChatBox } from '@/modules/chatbox/components';
 import Chat from '@/modules/chatbox/utils/textile';
@@ -56,53 +56,52 @@ describe('ChatBox', () => {
     expect(chatbox).toBeInTheDocument();
   });
 
-  it('Verify that submit is enabled only when a message is typed', () => {
+  it('Verify that submit is enabled only when a message is typed', async () => {
     const submitBtn = screen.getByLabelText('Send message').firstChild;
     expect(submitBtn).toBeDisabled();
 
     const chatbox = screen.getByRole('textbox');
-    fireEvent.change(chatbox, { target: { value: 'Hello' } });
+    await act(async () => fireEvent.change(chatbox, { target: { value: 'Hello' } }));
 
     expect(submitBtn).not.toBeDisabled();
   });
 
   it('Verify that submit button triggers callback', async () => {
     const chatbox = screen.getByRole('textbox');
-    fireEvent.change(chatbox, { target: { value: 'Hello' } });
+    await act(async () => fireEvent.change(chatbox, { target: { value: 'Hello' } }));
 
     const submitBtn = screen.getByLabelText('Send message').firstChild;
     expect(submitBtn).not.toBeDisabled();
-    submitBtn.click();
+    await act(async () => submitBtn.click());
 
-    await waitFor(() => expect(Chat.post).toHaveBeenCalledWith('1', {
+    expect(Chat.post).toHaveBeenCalledWith('1', {
       from: 'address',
       to: 'contact',
       message: 'Hello',
       attachments: [],
-    }));
+    });
   });
 
   it('Verify that selected emoji is added to chatbox', async () => {
     const chatbox = screen.getByRole('textbox');
     expect(chatbox).toHaveValue('');
 
     const emojiOpenBtn = screen.getByLabelText('Add emojis').firstChild;
-    emojiOpenBtn.click();
+    await act(async () => emojiOpenBtn.click());
 
-    await waitFor(() => expect(screen.getByRole('button', { name: '😀' })).toBeInTheDocument());
+    expect(screen.getByRole('button', { name: '😀' })).toBeInTheDocument();
 
     const emoji = screen.getByRole('button', { name: '😀' });
-    emoji.click();
+    await act(async () => emoji.click());
 
-    await waitFor(() => expect(chatbox).toHaveValue('😀'));
+    expect(chatbox).toHaveValue('😀');
   }, 20000); /* 20s timeout */
 
   it('Verify that a file can be attached to chatbox', async () => {
     const attachFileBtn = screen.getByLabelText('Attach file').firstChild;
-    attachFileBtn.click();
-
-    await waitFor(() => expect(Bucket.upload).toHaveBeenCalled());
+    await act(async () => attachFileBtn.click());
 
+    expect(Bucket.upload).toHaveBeenCalled();
     expect(screen.getByText('image.jpg')).toBeInTheDocument();
   });
 });

tests/modules/file/components/Attachment.test.js

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+
+import Attachment from '@/modules/file/components/Attachment';
+
+const file = { name: 'file.png' };
+const address = '0x0000000000000000000000000000000000000000';
+
+const removeFile = jest.fn();
+const setAttachments = jest.fn(() => Promise.resolve());
+
+jest.mock('@/modules/file/utils/image', () => ({
+  __esModule: true,
+  readImage: jest.fn(() => Promise.resolve(Buffer.from(''))),
+}));
+
+jest.mock('@/modules/file/utils/ceramic', () => ({
+  __esModule: true,
+  encrypt: jest.fn(() => Promise.resolve(Buffer.from(''))),
+}));
+
+jest.mock('@/modules/file/utils/bucket', () => ({
+  __esModule: true,
+  default: {
+    getKey: jest.fn(() => Promise.resolve('key')),
+    upload: jest.fn(() => Promise.resolve()),
+  },
+}));
+
+describe('Attachment', () => {
+  it('Verify that error is thrown if required props are not passed', async () => {
+    expect(() => render(<Attachment />)).toThrowError();
+    expect(() => render(<Attachment file={file} />)).toThrowError();
+    expect(() => render(<Attachment file={file} address={address} />)).toThrowError();
+  });
+
+  it('Verify that component is rendered if required props are passed', () => {
+    render(<Attachment file={file} address={address} removeFile={removeFile} setAttachments={setAttachments} />);
+
+    expect(screen.getByText(file.name)).toBeInTheDocument();
+  });
+});

tests/modules/message/components/Message.test.js

@@ -1,4 +1,4 @@
-import { render, screen }  from '@testing-library/react';
+import { act, render, screen }  from '@testing-library/react';
 
 import Message from '@/modules/message/components/Message';
 
@@ -40,16 +40,16 @@ describe('Message', () => {
     expect(() => render(<Message />)).toThrowError();
   });
 
-  it('Verify that Message component can be rendered', () => {
-    render(<Message chat={chat} />);
+  it('Verify that Message component can be rendered', async () => {
+    await act(async () => render(<Message chat={chat} />));
 
     expect(screen.getByText('message')).toBeInTheDocument();
   });
 
-  it('Verify that the Message component can render attachments', () => {
+  it('Verify that the Message component can render attachments', async () => {
     const _chat = {...chat, attachments: [{location: 'location', mimeType: 'mimeType'}]};
 
-    render(<Message chat={_chat} />);
+    await act(async () => render(<Message chat={_chat} />));
 
     expect(screen.getByText('message')).toBeInTheDocument();
   });

tests/modules/message/components/MessageImage.test.js

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { act, render } from '@testing-library/react';
 
 import MessageImage from '@/modules/message/components/MessageImage';
 
@@ -38,11 +38,12 @@ describe('MessageImage', () => {
     expect(() => render(<MessageImage />)).toThrowError();
   });
 
-  it('Verify that the MessagImage is rendered as skeleton if no image', () => {
-    const { container } = render(<MessageImage attachment={attachment} />);
+  it('Verify that the MessagImage is rendered as skeleton if no image', async () => {
+    await act(async () => {
+      const { container } = render(<MessageImage attachment={attachment} />);
 
-    const skeleton = container.querySelector('span.MuiSkeleton-root');
-
-    expect(skeleton).toBeInTheDocument();
+      const skeleton = container.querySelector('span.MuiSkeleton-root');
+      expect(skeleton).toBeInTheDocument();
+    });
   });
 });

tests/modules/profile/components/EditField.test.js

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { act, render, screen, fireEvent } from '@testing-library/react';
 
 import EditField from '@/modules/profile/components/EditField';
 
@@ -24,7 +24,6 @@ describe('Profile', () => {
   it('Verify that name & label props are required', () => {
     expect(() => render(<EditField />)).toThrowError();
     expect(() => render(<EditField name={name} />)).toThrowError();
-    expect(() => render(<EditField label={label} />)).toThrowError();
   });
 
   it('Verify that EditField component can be rendered', async () => {
@@ -33,10 +32,10 @@ describe('Profile', () => {
     const editField = screen.getByRole('textbox');
     expect(editField).toBeInTheDocument();
 
-    fireEvent.change(editField, { target: { value} });
-    fireEvent.blur(editField);
+    await act(async () => fireEvent.change(editField, { target: { value} }));
+    await act(async () => fireEvent.blur(editField));
 
-    await waitFor(() => expect(mockUpdateProfile).toHaveBeenCalledWith(address, name, value));
+    expect(mockUpdateProfile).toHaveBeenCalledWith(address, name, value);
   });
 
   it('Verify that the validation errors are caught properly', async () => {
@@ -48,8 +47,8 @@ describe('Profile', () => {
     expect(editField).toBeInTheDocument();
     expect(screen.queryByText(error)).not.toBeInTheDocument();
 
-    await waitFor(() => fireEvent.change(editField, { target: { value } }));
-    await waitFor(() => fireEvent.change(editField, { target: { value: '' } }));
+    await act(async () => fireEvent.change(editField, { target: { value } }));
+    await act(async () => fireEvent.change(editField, { target: { value: '' } }) );
 
     expect(screen.getByText(error)).toBeInTheDocument();
   });