From a54b480ad88c1df563bf272c07c5dd65f26bc035 Mon Sep 17 00:00:00 2001 From: ritikjaiswal75 Date: Thu, 11 May 2023 17:54:28 +0530 Subject: [PATCH 1/8] add tests for standup dashboard --- .../Components/Searchbar/Searchbar.test.tsx | 60 +++++++++++++++++++ .../pages/Dashboard/dashboardPage.test.tsx | 49 +++++++++++++++ src/components/Dashboard/Searchbar.tsx | 12 ++-- src/pages/dashboard/index.tsx | 7 ++- 4 files changed, 119 insertions(+), 9 deletions(-) create mode 100644 __tests__/Unit/Components/Searchbar/Searchbar.test.tsx create mode 100644 __tests__/Unit/pages/Dashboard/dashboardPage.test.tsx diff --git a/__tests__/Unit/Components/Searchbar/Searchbar.test.tsx b/__tests__/Unit/Components/Searchbar/Searchbar.test.tsx new file mode 100644 index 000000000..906500d33 --- /dev/null +++ b/__tests__/Unit/Components/Searchbar/Searchbar.test.tsx @@ -0,0 +1,60 @@ +import Searchbar from '@/components/Dashboard/Searchbar'; +import { fireEvent, render, screen } from '@testing-library/react'; + +let mockFn: jest.Func; + +beforeEach(() => { + mockFn = jest.fn(); +}); + +describe('test searchbar component', function () { + it('renders the searchbar with appropriate label', function () { + render(); + + const label = screen.getByLabelText('test-label'); + expect(label).toBeInTheDocument(); + }); + + it('checks if we can type into the searchbar', function () { + render(); + + const input = screen.getByLabelText('test-label') as HTMLInputElement; + + fireEvent.click(input); + fireEvent.change(input, { target: { value: '123,456' } }); + expect(input.value).toBe('123,456'); + }); + + it('tests if the click handler is called', function () { + render(); + + const input = screen.getByLabelText('test-label') as HTMLInputElement; + + const searchButton = screen.getByRole('button'); + + fireEvent.change(input, { tatget: { value: '123' } }); + fireEvent.click(searchButton); + + expect(mockFn).toBeCalledTimes(1); + }); + + it('tests if enter key calls search', function () { + render(); + + const input = screen.getByLabelText('test-label') as HTMLInputElement; + + fireEvent.keyDown(input, { key: 'Enter', code: 'Enter', charCode: 13 }); + + expect(mockFn).toBeCalledTimes(1); + }); + + it('tests other key down events do not call search', function () { + render(); + + const input = screen.getByLabelText('test-label') as HTMLInputElement; + + fireEvent.keyDown(input, { key: 'A', code: 'KeyA' }); + + expect(mockFn).toBeCalledTimes(0); + }); +}); diff --git a/__tests__/Unit/pages/Dashboard/dashboardPage.test.tsx b/__tests__/Unit/pages/Dashboard/dashboardPage.test.tsx new file mode 100644 index 000000000..3e284d4f1 --- /dev/null +++ b/__tests__/Unit/pages/Dashboard/dashboardPage.test.tsx @@ -0,0 +1,49 @@ +import DashboardPage from '@/pages/dashboard'; +import { renderWithRouter } from '@/test_utils/createMockRouter'; +import { Provider } from 'react-redux'; +import { store } from '@/app/store'; +import { screen } from '@testing-library/react'; +import { setupServer } from 'msw/node'; +import handlers from '../../../../__mocks__/handlers'; + +const server = setupServer(...handlers); + +beforeAll(() => { + server.listen(); +}); + +afterEach(() => server.resetHandlers()); + +afterAll(() => server.close()); + +describe('dashboard page test', function () { + it('checks if the page is rendered with exact components', function () { + renderWithRouter( + + + , + { query: { dev: 'true' } } + ); + + const searchBar = screen.getByRole('textbox'); + expect(searchBar).toBeInTheDocument(); + + const searchButton = screen.getByRole('button'); + expect(searchButton.innerHTML).toBe('Search'); + + const label = screen.getByLabelText('Users'); + expect(label).toBeInTheDocument(); + }); + + it('renders 404 without passing the feature flag', function () { + renderWithRouter( + + + + ); + + const headings = screen.getAllByRole('heading'); + expect(headings).toHaveLength(1); + expect(headings[0].innerHTML).toBe('404 - Page Not Found'); + }); +}); diff --git a/src/components/Dashboard/Searchbar.tsx b/src/components/Dashboard/Searchbar.tsx index 17ed29a8b..93ac5a581 100644 --- a/src/components/Dashboard/Searchbar.tsx +++ b/src/components/Dashboard/Searchbar.tsx @@ -3,19 +3,15 @@ import styles from '@/components/Dashboard/Dashboard.module.scss'; interface searchProps { label: string; + handleSearch: (query: string) => void; } -const search = (query: string) => { - const searchValues = query.split(','); - console.log('Searching', searchValues); -}; - -function Searchbar({ label }: searchProps) { +function Searchbar({ label, handleSearch }: searchProps) { const [query, setQuery] = useState(''); const handleKeyPress = (event: KeyboardEvent) => { if (event.key == 'Enter') { - search(query); + handleSearch(query); } }; @@ -35,7 +31,7 @@ function Searchbar({ label }: searchProps) {