From cb24a5d3fa81cbc868f9229c10d1bea5b9cca4e9 Mon Sep 17 00:00:00 2001 From: ritikjaiswal75 Date: Fri, 16 Jun 2023 16:38:03 +0530 Subject: [PATCH 1/9] format code for better responsive design --- .../Components/Searchbar/searchbar.test.tsx | 63 +++++++++++++++++++ .../pages/Dashboard/dashboardTest.test.tsx | 56 +++++++++++++++++ .../Dashboard/Dashboard.module.scss | 62 ++++++++++-------- src/components/Dashboard/Searchbar.tsx | 13 ++-- src/pages/dashboard/index.tsx | 5 -- 5 files changed, 165 insertions(+), 34 deletions(-) create mode 100644 __tests__/Unit/Components/Searchbar/searchbar.test.tsx create mode 100644 __tests__/Unit/pages/Dashboard/dashboardTest.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..35d06859a --- /dev/null +++ b/__tests__/Unit/Components/Searchbar/searchbar.test.tsx @@ -0,0 +1,63 @@ +import Searchbar from '@/components/Dashboard/Searchbar'; +import { splitNSearch } from '@/utils/splitNSearch'; +import { fireEvent, render, screen } from '@testing-library/react'; + +jest.mock('../../../../src/utils/splitNSearch', () => ({ + splitNSearch: jest.fn(), +})); + +describe('test searchbar component', function () { + it('renders searchbar input and a search button', function () { + render(); + + const input = screen.getByTestId('searchbar_input') as HTMLInputElement; + const searchBtn = screen.getByTestId('search_btn') as HTMLButtonElement; + + expect(input).toBeInTheDocument(); + expect(input).toHaveAttribute('placeholder', 'test-label:'); + expect(searchBtn).toBeInTheDocument(); + expect(searchBtn).toHaveTextContent('Search'); + }); + + it('checks if we can type into the searchbar', function () { + render(); + + const input = screen.getByTestId('searchbar_input') as HTMLInputElement; + + 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.getByTestId('searchbar_input') as HTMLInputElement; + + const searchBtn = screen.getByTestId('search_btn') as HTMLButtonElement; + + fireEvent.change(input, { tatget: { value: '123' } }); + fireEvent.click(searchBtn); + + expect(splitNSearch).toBeCalledTimes(1); + }); + + it('tests if enter key calls search', function () { + render(); + + const input = screen.getByTestId('searchbar_input') as HTMLInputElement; + + fireEvent.keyDown(input, { key: 'Enter', code: 'Enter', charCode: 13 }); + + expect(splitNSearch).toBeCalledTimes(2); + }); + + it('tests other key down events do not call search', function () { + render(); + + const input = screen.getByTestId('searchbar_input') as HTMLInputElement; + + fireEvent.keyDown(input, { key: 'A', code: 'KeyA' }); + + expect(splitNSearch).toBeCalledTimes(2); + }); +}); diff --git a/__tests__/Unit/pages/Dashboard/dashboardTest.test.tsx b/__tests__/Unit/pages/Dashboard/dashboardTest.test.tsx new file mode 100644 index 000000000..2a45eb6c8 --- /dev/null +++ b/__tests__/Unit/pages/Dashboard/dashboardTest.test.tsx @@ -0,0 +1,56 @@ +import DashboardPage from '@/pages/dashboard'; +import { renderWithRouter } from '@/test_utils/createMockRouter'; +import { Provider } from 'react-redux'; +import { store } from '@/app/store'; +import { fireEvent, screen } from '@testing-library/react'; + +describe('dashboard page test', function () { + it('checks if the page is rendered with exact components', function () { + renderWithRouter( + + + , + { query: { dev: 'true' } } + ); + + const searchBar = screen.getByTestId('searchbar_input'); + expect(searchBar).toBeInTheDocument(); + + const searchButton = screen.getByTestId('search_btn'); + expect(searchButton.innerHTML).toBe('Search'); + }); + + 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'); + }); + + it('console logs the value', function () { + console.log = jest.fn(); + + renderWithRouter( + + + , + { query: { dev: 'true' } } + ); + + const input = screen.getByTestId('searchbar_input') as HTMLInputElement; + fireEvent.change(input, { target: { value: 'jhon, doe' } }); + + const searchButton = screen.getByTestId( + 'search_btn' + ) as HTMLButtonElement; + fireEvent.click(searchButton); + + const value = input.value.split(','); + expect(console.log).toBeCalledWith('Searching', value); + }); +}); diff --git a/src/components/Dashboard/Dashboard.module.scss b/src/components/Dashboard/Dashboard.module.scss index 504b314dc..85ebf55d6 100644 --- a/src/components/Dashboard/Dashboard.module.scss +++ b/src/components/Dashboard/Dashboard.module.scss @@ -1,42 +1,54 @@ -$base-unit: 4px; -$base-font-size: 0.3rem; $color-blue: #041187; $color-red: #e30062; $color-green: #85da6b; -$color-disabled: #e5e7eb; +$color-disabled: #7c7e82; $color-white: #fff; $color-black: #000; -$diff-margin: $base-unit * 15; -$similar-margin: $base-unit * 8; -$section-padding-top-bottom: $base-unit * 30; -$section-padding-left-right: $base-unit * 25; .container { - margin: $diff-margin auto; - width: 85%; + margin-top: 40px; + display: flex; + justify-content: center; + line-height: 2rem; + align-items: center; } -.searchLabel { - font-size: $base-font-size * 5; - padding-right: $base-unit * 8; - color: $color-blue; +.searchBar { + width: 600px; + font-family: sans-serif; + margin-right: 8px; + border-radius: 4px; + font-size: 1.2rem; + padding: 0.5rem; } -.searchBar { - background-color: $color-disabled; - border-radius: $base-unit * 2; +.btnActive { + background-color: $color-blue; + border-radius: 4px; + color: white; + background-color: $color-blue; border: none; - width: 80%; - height: $base-unit * 15; - font-size: $base-font-size * 5; + padding: 12px 60px; } -.searchBtn { - margin-left: $base-unit * 8; +.btnDisabled { background-color: $color-blue; - color: $color-white; - height: $base-unit * 15; - border-radius: $base-unit * 2; + border-radius: 4px; + color: white; + background-color: $color-disabled; border: none; - width: $base-unit * 40; + padding: 12px 60px; +} + +@media only screen and (max-width: 520px) { + .container { + display: flex; + flex-direction: column; + width: 100%; + align-items: center; + } + .searchBar { + width: 100%; + margin: 4px; + } } diff --git a/src/components/Dashboard/Searchbar.tsx b/src/components/Dashboard/Searchbar.tsx index 94114a758..3cfae2901 100644 --- a/src/components/Dashboard/Searchbar.tsx +++ b/src/components/Dashboard/Searchbar.tsx @@ -4,6 +4,7 @@ import { splitNSearch } from '@/utils/splitNSearch'; function Searchbar({ label }: searchProps) { const [query, setQuery] = useState(''); + let btnStyle = styles.btnActive; const handleKeyPress = (event: KeyboardEvent) => { if (event.key === 'Enter') { @@ -11,25 +12,29 @@ function Searchbar({ label }: searchProps) { } }; + if (query === '') { + btnStyle = styles.btnDisabled; + } + return (
- setQuery(e.target.value)} onKeyDown={(e) => handleKeyPress(e)} className={styles.searchBar} + placeholder={label + ':'} /> diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index b7df43bed..a9249f803 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -4,11 +4,6 @@ import PageNotFound from '../404'; import NavBar from '@/components/navBar'; import Searchbar from '@/components/Dashboard/Searchbar'; -const search = (query: string) => { - const searchValues = query.split(','); - console.log('Searching', searchValues); -}; - const DashboardPage = () => { const router = useRouter(); From e6b44104c54b6815b3b8861555bd8a96ba3f6769 Mon Sep 17 00:00:00 2001 From: ritikjaiswal75 Date: Fri, 16 Jun 2023 16:51:27 +0530 Subject: [PATCH 2/9] add disabled property to search button --- src/components/Dashboard/Searchbar.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/Dashboard/Searchbar.tsx b/src/components/Dashboard/Searchbar.tsx index 3cfae2901..0a989005e 100644 --- a/src/components/Dashboard/Searchbar.tsx +++ b/src/components/Dashboard/Searchbar.tsx @@ -5,6 +5,7 @@ import { splitNSearch } from '@/utils/splitNSearch'; function Searchbar({ label }: searchProps) { const [query, setQuery] = useState(''); let btnStyle = styles.btnActive; + let btnDisabled = false; const handleKeyPress = (event: KeyboardEvent) => { if (event.key === 'Enter') { @@ -14,6 +15,7 @@ function Searchbar({ label }: searchProps) { if (query === '') { btnStyle = styles.btnDisabled; + btnDisabled = true; } return ( @@ -35,6 +37,7 @@ function Searchbar({ label }: searchProps) { splitNSearch(query); }} className={btnStyle} + disabled={btnDisabled} > Search From 883ae79aac0fa4abf0ef91fee1c88fbe8fe03359 Mon Sep 17 00:00:00 2001 From: ritikjaiswal75 Date: Fri, 16 Jun 2023 16:54:00 +0530 Subject: [PATCH 3/9] fix failing tests for searchbar component --- __tests__/Unit/Components/Searchbar/searchbar.test.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/__tests__/Unit/Components/Searchbar/searchbar.test.tsx b/__tests__/Unit/Components/Searchbar/searchbar.test.tsx index 35d06859a..0f2ed7f82 100644 --- a/__tests__/Unit/Components/Searchbar/searchbar.test.tsx +++ b/__tests__/Unit/Components/Searchbar/searchbar.test.tsx @@ -35,7 +35,7 @@ describe('test searchbar component', function () { const searchBtn = screen.getByTestId('search_btn') as HTMLButtonElement; - fireEvent.change(input, { tatget: { value: '123' } }); + fireEvent.change(input, { target: { value: '123' } }); fireEvent.click(searchBtn); expect(splitNSearch).toBeCalledTimes(1); @@ -46,6 +46,7 @@ describe('test searchbar component', function () { const input = screen.getByTestId('searchbar_input') as HTMLInputElement; + fireEvent.change(input, { target: { value: '123' } }); fireEvent.keyDown(input, { key: 'Enter', code: 'Enter', charCode: 13 }); expect(splitNSearch).toBeCalledTimes(2); From e903072484fbeb02ef4925646e5c4cc58c8ce14a Mon Sep 17 00:00:00 2001 From: ritikjaiswal75 Date: Sat, 17 Jun 2023 00:50:33 +0530 Subject: [PATCH 4/9] add cursor pointer for buttons --- src/components/Dashboard/Dashboard.module.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Dashboard/Dashboard.module.scss b/src/components/Dashboard/Dashboard.module.scss index 85ebf55d6..e00986f25 100644 --- a/src/components/Dashboard/Dashboard.module.scss +++ b/src/components/Dashboard/Dashboard.module.scss @@ -29,6 +29,7 @@ $color-black: #000; background-color: $color-blue; border: none; padding: 12px 60px; + cursor: pointer; } .btnDisabled { @@ -38,6 +39,7 @@ $color-black: #000; background-color: $color-disabled; border: none; padding: 12px 60px; + cursor: pointer; } @media only screen and (max-width: 520px) { From fcef85bf11dc9c7e411079fdbcdb90a85fe0ec0a Mon Sep 17 00:00:00 2001 From: ritikjaiswal75 Date: Sat, 17 Jun 2023 13:39:38 +0530 Subject: [PATCH 5/9] add spacing in non-large desktop view --- src/components/Dashboard/Dashboard.module.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Dashboard/Dashboard.module.scss b/src/components/Dashboard/Dashboard.module.scss index e00986f25..cc2969f84 100644 --- a/src/components/Dashboard/Dashboard.module.scss +++ b/src/components/Dashboard/Dashboard.module.scss @@ -6,7 +6,8 @@ $color-white: #fff; $color-black: #000; .container { - margin-top: 40px; + margin: 40px auto; + width: 95%; display: flex; justify-content: center; line-height: 2rem; @@ -46,11 +47,10 @@ $color-black: #000; .container { display: flex; flex-direction: column; - width: 100%; align-items: center; } .searchBar { - width: 100%; + width: 95%; margin: 4px; } } From ecb40b8745bd8476224697bf16f26b397b92cdcf Mon Sep 17 00:00:00 2001 From: ritikjaiswal75 Date: Sat, 17 Jun 2023 14:29:18 +0530 Subject: [PATCH 6/9] use the disabled sudo selector --- src/components/Dashboard/Dashboard.module.scss | 10 +++------- src/components/Dashboard/Searchbar.tsx | 11 ++--------- 2 files changed, 5 insertions(+), 16 deletions(-) diff --git a/src/components/Dashboard/Dashboard.module.scss b/src/components/Dashboard/Dashboard.module.scss index cc2969f84..9727ab0be 100644 --- a/src/components/Dashboard/Dashboard.module.scss +++ b/src/components/Dashboard/Dashboard.module.scss @@ -23,7 +23,7 @@ $color-black: #000; padding: 0.5rem; } -.btnActive { +.btn { background-color: $color-blue; border-radius: 4px; color: white; @@ -33,14 +33,10 @@ $color-black: #000; cursor: pointer; } -.btnDisabled { - background-color: $color-blue; - border-radius: 4px; +.btn:disabled { color: white; background-color: $color-disabled; - border: none; - padding: 12px 60px; - cursor: pointer; + cursor: not-allowed; } @media only screen and (max-width: 520px) { diff --git a/src/components/Dashboard/Searchbar.tsx b/src/components/Dashboard/Searchbar.tsx index 0a989005e..624170f98 100644 --- a/src/components/Dashboard/Searchbar.tsx +++ b/src/components/Dashboard/Searchbar.tsx @@ -4,8 +4,6 @@ import { splitNSearch } from '@/utils/splitNSearch'; function Searchbar({ label }: searchProps) { const [query, setQuery] = useState(''); - let btnStyle = styles.btnActive; - let btnDisabled = false; const handleKeyPress = (event: KeyboardEvent) => { if (event.key === 'Enter') { @@ -13,11 +11,6 @@ function Searchbar({ label }: searchProps) { } }; - if (query === '') { - btnStyle = styles.btnDisabled; - btnDisabled = true; - } - return (
{ splitNSearch(query); }} - className={btnStyle} - disabled={btnDisabled} + className={styles.btn} + disabled={query === ''} > Search From 3a44c94aee7e8b1e6c8792fb3151ebba1cd4e656 Mon Sep 17 00:00:00 2001 From: ritikjaiswal75 Date: Sat, 17 Jun 2023 14:44:13 +0530 Subject: [PATCH 7/9] fix the search function being called on blank input and enter key press --- src/components/Dashboard/Searchbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Dashboard/Searchbar.tsx b/src/components/Dashboard/Searchbar.tsx index 624170f98..cdc2ad8f3 100644 --- a/src/components/Dashboard/Searchbar.tsx +++ b/src/components/Dashboard/Searchbar.tsx @@ -6,7 +6,7 @@ function Searchbar({ label }: searchProps) { const [query, setQuery] = useState(''); const handleKeyPress = (event: KeyboardEvent) => { - if (event.key === 'Enter') { + if (event.key === 'Enter' && query !== '') { splitNSearch(query); } }; From bc762c5953638284fcf6666a4e2b0bacacf3ee72 Mon Sep 17 00:00:00 2001 From: ritikjaiswal75 Date: Mon, 19 Jun 2023 10:32:18 +0530 Subject: [PATCH 8/9] use getByRole instead of test id in testing the components --- .../Components/Searchbar/searchbar.test.tsx | 26 ++++++++++++++----- .../pages/Dashboard/dashboardTest.test.tsx | 18 +++++++------ src/components/Dashboard/Searchbar.tsx | 2 -- 3 files changed, 29 insertions(+), 17 deletions(-) diff --git a/__tests__/Unit/Components/Searchbar/searchbar.test.tsx b/__tests__/Unit/Components/Searchbar/searchbar.test.tsx index 0f2ed7f82..ebaca12fb 100644 --- a/__tests__/Unit/Components/Searchbar/searchbar.test.tsx +++ b/__tests__/Unit/Components/Searchbar/searchbar.test.tsx @@ -10,8 +10,10 @@ describe('test searchbar component', function () { it('renders searchbar input and a search button', function () { render(); - const input = screen.getByTestId('searchbar_input') as HTMLInputElement; - const searchBtn = screen.getByTestId('search_btn') as HTMLButtonElement; + const input = screen.getByRole('textbox') as HTMLInputElement; + const searchBtn = screen.getByRole('button', { + name: 'Search', + }) as HTMLButtonElement; expect(input).toBeInTheDocument(); expect(input).toHaveAttribute('placeholder', 'test-label:'); @@ -22,7 +24,9 @@ describe('test searchbar component', function () { it('checks if we can type into the searchbar', function () { render(); - const input = screen.getByTestId('searchbar_input') as HTMLInputElement; + const input = screen.getByPlaceholderText( + 'test-label:' + ) as HTMLInputElement; fireEvent.change(input, { target: { value: '123,456' } }); expect(input.value).toBe('123,456'); @@ -31,9 +35,13 @@ describe('test searchbar component', function () { it('tests if the click handler is called', function () { render(); - const input = screen.getByTestId('searchbar_input') as HTMLInputElement; + const input = screen.getByPlaceholderText( + 'test-label:' + ) as HTMLInputElement; - const searchBtn = screen.getByTestId('search_btn') as HTMLButtonElement; + const searchBtn = screen.getByRole('button', { + name: 'Search', + }) as HTMLButtonElement; fireEvent.change(input, { target: { value: '123' } }); fireEvent.click(searchBtn); @@ -44,7 +52,9 @@ describe('test searchbar component', function () { it('tests if enter key calls search', function () { render(); - const input = screen.getByTestId('searchbar_input') as HTMLInputElement; + const input = screen.getByPlaceholderText( + 'test-label:' + ) as HTMLInputElement; fireEvent.change(input, { target: { value: '123' } }); fireEvent.keyDown(input, { key: 'Enter', code: 'Enter', charCode: 13 }); @@ -55,7 +65,9 @@ describe('test searchbar component', function () { it('tests other key down events do not call search', function () { render(); - const input = screen.getByTestId('searchbar_input') as HTMLInputElement; + const input = screen.getByPlaceholderText( + 'test-label:' + ) as HTMLInputElement; fireEvent.keyDown(input, { key: 'A', code: 'KeyA' }); diff --git a/__tests__/Unit/pages/Dashboard/dashboardTest.test.tsx b/__tests__/Unit/pages/Dashboard/dashboardTest.test.tsx index 2a45eb6c8..8392a0434 100644 --- a/__tests__/Unit/pages/Dashboard/dashboardTest.test.tsx +++ b/__tests__/Unit/pages/Dashboard/dashboardTest.test.tsx @@ -13,11 +13,13 @@ describe('dashboard page test', function () { { query: { dev: 'true' } } ); - const searchBar = screen.getByTestId('searchbar_input'); + const searchBar = screen.getByRole('textbox'); expect(searchBar).toBeInTheDocument(); - const searchButton = screen.getByTestId('search_btn'); - expect(searchButton.innerHTML).toBe('Search'); + const searchBtn = screen.getByRole('button', { + name: 'Search', + }) as HTMLButtonElement; + expect(searchBtn).toBeInTheDocument(); }); it('renders 404 without passing the feature flag', function () { @@ -42,13 +44,13 @@ describe('dashboard page test', function () { { query: { dev: 'true' } } ); - const input = screen.getByTestId('searchbar_input') as HTMLInputElement; + const input = screen.getByRole('textbox') as HTMLInputElement; fireEvent.change(input, { target: { value: 'jhon, doe' } }); - const searchButton = screen.getByTestId( - 'search_btn' - ) as HTMLButtonElement; - fireEvent.click(searchButton); + const searchBtn = screen.getByRole('button', { + name: 'Search', + }) as HTMLButtonElement; + fireEvent.click(searchBtn); const value = input.value.split(','); expect(console.log).toBeCalledWith('Searching', value); diff --git a/src/components/Dashboard/Searchbar.tsx b/src/components/Dashboard/Searchbar.tsx index cdc2ad8f3..e4e1abbd8 100644 --- a/src/components/Dashboard/Searchbar.tsx +++ b/src/components/Dashboard/Searchbar.tsx @@ -14,7 +14,6 @@ function Searchbar({ label }: searchProps) { return (