Created
April 11, 2024 00:48
-
-
Save rezafikkri/41ff431306cdddbb4abd78684f478a6c to your computer and use it in GitHub Desktop.
File test thread-input component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { | |
| describe, | |
| test, | |
| expect, | |
| afterEach, | |
| beforeAll, | |
| vi, | |
| } from 'vitest'; | |
| import { render, screen, cleanup } from '@testing-library/react'; | |
| import userEvent from '@testing-library/user-event'; | |
| import * as matchers from '@testing-library/jest-dom/matchers'; | |
| import ThreadInput from './thread-input'; | |
| import { renderWithProviders } from './render-with-providers'; | |
| expect.extend(matchers); | |
| /* Skenario testing | |
| * | |
| * - ThreadInput component | |
| * - Should handle title typing correctly | |
| * - Should handle category typing correctly | |
| * - Should handle body typing correctly | |
| * - Should call onCreateThread function when save button clicked | |
| */ | |
| describe('ThreadInput component', () => { | |
| beforeAll(() => { | |
| // create mock for next/navigation | |
| vi.mock('next/navigation', () => { | |
| return { | |
| useRouter: () => ({ | |
| push: () => {}, | |
| replace: () => {}, | |
| prefetch: () => {}, | |
| }), | |
| }; | |
| }); | |
| // create mock for redux-hooks module | |
| vi.mock('@/hooks/redux-hooks', () => ({ useAppDispatch: () => {} })); | |
| }); | |
| afterEach(() => { | |
| cleanup(); | |
| }); | |
| test('Should handle title typing correctly', async () => { | |
| // Arrange | |
| render(<ThreadInput />); | |
| const titleInput = screen.getByPlaceholderText(/title/i); | |
| // Action | |
| await userEvent.type(titleInput, 'This is title'); | |
| // Assert | |
| expect(titleInput).toHaveValue('This is title'); | |
| }); | |
| test('Should handle category typing correctly', async () => { | |
| // Arrange | |
| render(<ThreadInput />); | |
| const categoryInput = screen.getByPlaceholderText(/category/i); | |
| // Action | |
| await userEvent.type(categoryInput, 'This is category'); | |
| // Assert | |
| expect(categoryInput).toHaveValue('This is category'); | |
| }); | |
| test('Should handle body typing correctly', async () => { | |
| // Arrange | |
| render(<ThreadInput />); | |
| const bodyInput = screen.getByPlaceholderText(/body/i); | |
| // Action | |
| await userEvent.type(bodyInput, 'This is body'); | |
| // Assert | |
| expect(bodyInput).toHaveValue('This is body'); | |
| }); | |
| test('Should call asyncCreateThread function when save button clicked', async () => { | |
| // Arrange | |
| vi.unmock('@/hooks/redux-hooks'); | |
| // create mock for asyncCreateThread module | |
| vi.mock('@/lib/threads/action', async (importOriginal) => { | |
| const mod = await importOriginal(); | |
| return { | |
| ...mod, | |
| asyncCreateThread: vi.fn().mockResolvedValue(true), | |
| }; | |
| }); | |
| const { asyncCreateThread } = await vi.importMock('@/lib/threads/action'); | |
| renderWithProviders(<ThreadInput />); | |
| const titleInput = screen.getByPlaceholderText(/title/i); | |
| await userEvent.type(titleInput, 'This is title'); | |
| const categoryInput = screen.getByPlaceholderText(/category/i); | |
| await userEvent.type(categoryInput, 'This is category'); | |
| const bodyInput = screen.getByPlaceholderText(/body/i); | |
| await userEvent.type(bodyInput, 'This is body'); | |
| const saveButton = screen.getByText('Save'); | |
| // Action | |
| await userEvent.click(saveButton); | |
| // Assert | |
| expect(asyncCreateThread()).toHaveBeenCalled(); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment