From 7a48073681825a9c0d4601bb5a2c099165ef5997 Mon Sep 17 00:00:00 2001 From: Robin Thomas Date: Sat, 12 Mar 2022 18:55:18 +0800 Subject: [PATCH] Add tests for @/modules/file (#36) * add tests for @/modules/file * wrap tests with act() where required --- src/modules/message/components/MessageSent.js | 4 +- .../chatbox/components/ChatBox.test.js | 27 ++++++------ .../file/components/Attachment.test.js | 41 +++++++++++++++++++ .../message/components/Message.test.js | 10 ++--- .../message/components/MessageImage.test.js | 13 +++--- .../profile/components/EditField.test.js | 13 +++--- 6 files changed, 74 insertions(+), 34 deletions(-) create mode 100644 tests/modules/file/components/Attachment.test.js diff --git a/src/modules/message/components/MessageSent.js b/src/modules/message/components/MessageSent.js index e1caf5e..f0de9c8 100644 --- a/src/modules/message/components/MessageSent.js +++ b/src/modules/message/components/MessageSent.js @@ -18,8 +18,8 @@ const MessageSent = ({ chat }) => ( ))} - {chat.attachments.map(image => ( -
+ {chat.attachments.map((image, index) => ( +
))} diff --git a/tests/modules/chatbox/components/ChatBox.test.js b/tests/modules/chatbox/components/ChatBox.test.js index 112ddce..aaad607 100644 --- a/tests/modules/chatbox/components/ChatBox.test.js +++ b/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,30 +56,30 @@ 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 () => { @@ -87,22 +87,21 @@ describe('ChatBox', () => { 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(); }); }); diff --git a/tests/modules/file/components/Attachment.test.js b/tests/modules/file/components/Attachment.test.js new file mode 100644 index 0000000..3652945 --- /dev/null +++ b/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()).toThrowError(); + expect(() => render()).toThrowError(); + expect(() => render()).toThrowError(); + }); + + it('Verify that component is rendered if required props are passed', () => { + render(); + + expect(screen.getByText(file.name)).toBeInTheDocument(); + }); +}); diff --git a/tests/modules/message/components/Message.test.js b/tests/modules/message/components/Message.test.js index fae772b..4ef0215 100644 --- a/tests/modules/message/components/Message.test.js +++ b/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()).toThrowError(); }); - it('Verify that Message component can be rendered', () => { - render(); + it('Verify that Message component can be rendered', async () => { + await act(async () => render()); 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(); + await act(async () => render()); expect(screen.getByText('message')).toBeInTheDocument(); }); diff --git a/tests/modules/message/components/MessageImage.test.js b/tests/modules/message/components/MessageImage.test.js index 991da18..91e4d6d 100644 --- a/tests/modules/message/components/MessageImage.test.js +++ b/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()).toThrowError(); }); - it('Verify that the MessagImage is rendered as skeleton if no image', () => { - const { container } = render(); + it('Verify that the MessagImage is rendered as skeleton if no image', async () => { + await act(async () => { + const { container } = render(); - const skeleton = container.querySelector('span.MuiSkeleton-root'); - - expect(skeleton).toBeInTheDocument(); + const skeleton = container.querySelector('span.MuiSkeleton-root'); + expect(skeleton).toBeInTheDocument(); + }); }); }); diff --git a/tests/modules/profile/components/EditField.test.js b/tests/modules/profile/components/EditField.test.js index 9cabbec..b515dcc 100644 --- a/tests/modules/profile/components/EditField.test.js +++ b/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()).toThrowError(); expect(() => render()).toThrowError(); - expect(() => render()).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(); });