Improve Dashboard Page of Status Site (#636)

* format code for better responsive design

* add disabled property to search button

* fix failing tests for searchbar component

* add cursor pointer for buttons

* add spacing in non-large desktop view

* use the disabled sudo selector

* fix the search function being called on blank input and enter key press

* use getByRole instead of test id in testing the components

* add jest spy on the splitNSearch function to properly test it

__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(<Searchbar label="test-label" />);
+
+        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(<Searchbar label="test-label" />);
+
+        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(<Searchbar label="test-label" />);
+
+        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(<Searchbar label="test-label" />);
+
+        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(<Searchbar label="test-label" />);
+
+        const input = screen.getByPlaceholderText(
+            'test-label:'
+        ) as HTMLInputElement;
+
+        fireEvent.keyDown(input, { key: 'A', code: 'KeyA' });
+
+        expect(util.splitNSearch).toBeCalledTimes(0);
+    });
+});

__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(
+            <Provider store={store()}>
+                <DashboardPage />
+            </Provider>,
+            { 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(
+            <Provider store={store()}>
+                <DashboardPage />
+            </Provider>
+        );
+
+        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(
+            <Provider store={store()}>
+                <DashboardPage />
+            </Provider>,
+            { 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);
+    });
+});

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;
+    }
 }

src/components/Dashboard/Searchbar.tsx

@@ -6,30 +6,29 @@ function Searchbar({ label }: searchProps) {
     const [query, setQuery] = useState('');
 
     const handleKeyPress = (event: KeyboardEvent) => {
-        if (event.key === 'Enter') {
+        if (event.key === 'Enter' && query !== '') {
             splitNSearch(query);
         }
     };
 
     return (
         <section className={styles.container}>
-            <label htmlFor="search" className={styles.searchLabel}>
-                {label}
-            </label>
             <input
                 type="text"
                 id="search"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
                 onKeyDown={(e) => handleKeyPress(e)}
                 className={styles.searchBar}
+                placeholder={label + ':'}
             />
             <button
                 type="submit"
                 onClick={() => {
                     splitNSearch(query);
                 }}
-                className={styles.searchBtn}
+                className={styles.btn}
+                disabled={query === ''}
             >
                 Search
             </button>

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();