diff --git a/__tests__/Unit/Components/Searchbar/searchbar.test.tsx b/__tests__/Unit/Components/Searchbar/searchbar.test.tsx
new file mode 100644
index 000000000..97aa599c2
--- /dev/null
+++ b/__tests__/Unit/Components/Searchbar/searchbar.test.tsx
@@ -0,0 +1,78 @@
+import Searchbar from '@/components/Dashboard/Searchbar';
+import * as util from '@/utils/splitNSearch';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+describe('test searchbar component', function () {
+ beforeEach(() => {
+ jest.spyOn(util, 'splitNSearch');
+ });
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+ it('renders searchbar input and a search button', function () {
+ render();
+
+ 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:');
+ expect(searchBtn).toBeInTheDocument();
+ expect(searchBtn).toHaveTextContent('Search');
+ });
+
+ it('checks if we can type into the searchbar', function () {
+ render();
+
+ const input = screen.getByPlaceholderText(
+ 'test-label:'
+ ) 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.getByPlaceholderText(
+ 'test-label:'
+ ) as HTMLInputElement;
+
+ const searchBtn = screen.getByRole('button', {
+ name: 'Search',
+ }) as HTMLButtonElement;
+
+ fireEvent.change(input, { target: { value: '123' } });
+ fireEvent.click(searchBtn);
+
+ expect(util.splitNSearch).toBeCalledTimes(1);
+ });
+
+ it('tests if enter key calls search', function () {
+ render();
+
+ const input = screen.getByPlaceholderText(
+ 'test-label:'
+ ) as HTMLInputElement;
+
+ fireEvent.change(input, { target: { value: '123' } });
+ fireEvent.keyDown(input, { key: 'Enter', code: 'Enter', charCode: 13 });
+
+ expect(util.splitNSearch).toBeCalledTimes(1);
+ });
+
+ it('tests other key down events do not call search', function () {
+ render();
+
+ const input = screen.getByPlaceholderText(
+ 'test-label:'
+ ) as HTMLInputElement;
+
+ fireEvent.keyDown(input, { key: 'A', code: 'KeyA' });
+
+ expect(util.splitNSearch).toBeCalledTimes(0);
+ });
+});
diff --git a/__tests__/Unit/pages/Dashboard/dashboardTest.test.tsx b/__tests__/Unit/pages/Dashboard/dashboardTest.test.tsx
new file mode 100644
index 000000000..8392a0434
--- /dev/null
+++ b/__tests__/Unit/pages/Dashboard/dashboardTest.test.tsx
@@ -0,0 +1,58 @@
+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.getByRole('textbox');
+ expect(searchBar).toBeInTheDocument();
+
+ const searchBtn = screen.getByRole('button', {
+ name: 'Search',
+ }) as HTMLButtonElement;
+ expect(searchBtn).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');
+ });
+
+ it('console logs the value', function () {
+ console.log = jest.fn();
+
+ renderWithRouter(
+
+
+ ,
+ { query: { dev: 'true' } }
+ );
+
+ const input = screen.getByRole('textbox') as HTMLInputElement;
+ fireEvent.change(input, { target: { value: 'jhon, doe' } });
+
+ 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/Dashboard.module.scss b/src/components/Dashboard/Dashboard.module.scss
index 504b314dc..9727ab0be 100644
--- a/src/components/Dashboard/Dashboard.module.scss
+++ b/src/components/Dashboard/Dashboard.module.scss
@@ -1,42 +1,52 @@
-$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%;
-}
-
-.searchLabel {
- font-size: $base-font-size * 5;
- padding-right: $base-unit * 8;
- color: $color-blue;
+ margin: 40px auto;
+ width: 95%;
+ display: flex;
+ justify-content: center;
+ line-height: 2rem;
+ align-items: center;
}
.searchBar {
- background-color: $color-disabled;
- border-radius: $base-unit * 2;
- border: none;
- width: 80%;
- height: $base-unit * 15;
- font-size: $base-font-size * 5;
+ width: 600px;
+ font-family: sans-serif;
+ margin-right: 8px;
+ border-radius: 4px;
+ font-size: 1.2rem;
+ padding: 0.5rem;
}
-.searchBtn {
- margin-left: $base-unit * 8;
+.btn {
+ background-color: $color-blue;
+ border-radius: 4px;
+ color: white;
background-color: $color-blue;
- color: $color-white;
- height: $base-unit * 15;
- border-radius: $base-unit * 2;
border: none;
- width: $base-unit * 40;
+ padding: 12px 60px;
+ cursor: pointer;
+}
+
+.btn:disabled {
+ color: white;
+ background-color: $color-disabled;
+ cursor: not-allowed;
+}
+
+@media only screen and (max-width: 520px) {
+ .container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ .searchBar {
+ width: 95%;
+ margin: 4px;
+ }
}
diff --git a/src/components/Dashboard/Searchbar.tsx b/src/components/Dashboard/Searchbar.tsx
index 94114a758..e4e1abbd8 100644
--- a/src/components/Dashboard/Searchbar.tsx
+++ b/src/components/Dashboard/Searchbar.tsx
@@ -6,16 +6,13 @@ function Searchbar({ label }: searchProps) {
const [query, setQuery] = useState('');
const handleKeyPress = (event: KeyboardEvent) => {
- if (event.key === 'Enter') {
+ if (event.key === 'Enter' && query !== '') {
splitNSearch(query);
}
};
return (