Tests/dashboard page

__tests__/Unit/Components/Searchbar/Searchbar.test.tsx

@@ -0,0 +1,59 @@
+import Searchbar from '@/components/Dashboard/Searchbar';
+import { splitNSearch } from '@/utils/splitNSearch';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+let testFunc;
+
+jest.mock('../../../../src/utils/splitNSearch', () => ({
+    splitNSearch: jest.fn(),
+}));
+describe('test searchbar component', function () {
+    it('renders the searchbar with appropriate label', function () {
+        render(<Searchbar label="test-label" />);
+
+        const label = screen.getByLabelText('test-label');
+        expect(label).toBeInTheDocument();
+    });
+
+    it('checks if we can type into the searchbar', function () {
+        render(<Searchbar label="test-label" />);
+
+        const input = screen.getByLabelText('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.getByLabelText('test-label') as HTMLInputElement;
+
+        const searchButton = screen.getByRole('button');
+
+        fireEvent.change(input, { tatget: { value: '123' } });
+        fireEvent.click(searchButton);
+
+        expect(splitNSearch).toBeCalledTimes(1);
+    });
+
+    it('tests if enter key calls search', function () {
+        render(<Searchbar label="test-label" />);
+
+        const input = screen.getByLabelText('test-label') 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(<Searchbar label="test-label" />);
+
+        const input = screen.getByLabelText('test-label') as HTMLInputElement;
+
+        fireEvent.keyDown(input, { key: 'A', code: 'KeyA' });
+
+        expect(splitNSearch).toBeCalledTimes(2);
+    });
+});

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