Tests/dashboard page

__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(<Searchbar label="test-label" handleSearch={mockFn} />);
+
+        const label = screen.getByLabelText('test-label');
+        expect(label).toBeInTheDocument();
+    });
+
+    it('checks if we can type into the searchbar', function () {
+        render(<Searchbar label="test-label" handleSearch={mockFn} />);
+
+        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(<Searchbar label="test-label" handleSearch={mockFn} />);
+
+        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(<Searchbar label="test-label" handleSearch={mockFn} />);
+
+        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(<Searchbar label="test-label" handleSearch={mockFn} />);
+
+        const input = screen.getByLabelText('test-label') as HTMLInputElement;
+
+        fireEvent.keyDown(input, { key: 'A', code: 'KeyA' });
+
+        expect(mockFn).toBeCalledTimes(0);
+    });
+});

__tests__/Unit/pages/Dashboard/dashboardPage.test.tsx

@@ -0,0 +1,57 @@
+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 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(
+            <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.getByLabelText('Users') as HTMLInputElement;
+        fireEvent.change(input, { target: { value: 'jhon, doe' } });
+
+        const searchButton = screen.getByRole('button');
+        fireEvent.click(searchButton);
+
+        const value = input.value.split(',');
+        expect(console.log).toBeCalledWith('Searching', value);
+    });
+});

src/components/Dashboard/Searchbar.tsx

@@ -5,7 +5,7 @@ function Searchbar({ label, handleSearch }: searchProps) {
     const [query, setQuery] = useState('');
 
     const handleKeyPress = (event: KeyboardEvent) => {
-        if (event.key == 'Enter') {
+        if (event.key === 'Enter') {
             handleSearch(query);
         }
     };

src/pages/issues.tsx → src/pages/issues/index.tsx

@@ -1,5 +1,5 @@
 import { FC, useState, useEffect, ChangeEvent } from 'react';
-import IssueList from '../components/issues/IssueList';
+import IssueList from '../../components/issues/IssueList';
 import classNames from '@/styles/issues.module.scss';
 import Layout from '@/components/Layout';
 import Head from '@/components/head';