Feat(Dashboard): The seller and admin dashboard

Author: ErnestTchami

package-lock.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev ",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -29,15 +29,16 @@
     "npx": "^10.2.2",
     "react": "^18",
     "react-dom": "^18",
+    "react-google-charts": "^4.0.1",
     "react-hook-form": "^7.51.5",
     "react-icons": "^5.2.1",
     "react-query": "^3.39.3",
     "react-rating": "^2.0.5",
     "react-rating-stars-component": "^2.2.0",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.23.1",
-    "react-toastify": "^10.0.5",
     "react-slick": "^0.30.2",
+    "react-toastify": "^10.0.5",
     "redux-mock-store": "^1.5.4",
     "redux-thunk": "^3.1.0",
     "slick-carousel": "^1.8.1",
@@ -97,8 +98,8 @@
     "jest-dom": "^4.0.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.4",
-    "msw": "^2.3.1",
     "match-media-mock": "^0.1.1",
+    "msw": "^2.3.1",
     "postcss": "^8",
     "prettier": "^3.2.5",
     "react-test-renderer": "^18.3.1",
@@ -109,4 +110,4 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5"
   }
-}
+}

package.json

@@ -1,7 +1,7 @@
 import React, { act } from 'react';
 import { render, screen } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
-import { Provider } from 'react-redux';
+
 //import configureStore from 'redux-mock-store'; // Assuming you are using Redux
 import OtpVerify from '../components/2faVerification';
 import userEvent from '@testing-library/user-event';
@@ -13,6 +13,7 @@ import {
 import { configureStore } from '@reduxjs/toolkit';
 import twoFactorAuthSlice from '../redux/slices/2faAuthenticationSlice';
 import axios from 'axios';
+import { Provider } from 'react-redux';
 jest.mock('axios');
 const URL = process.env.URL;
 console.log("iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii",URL)

public/dash1.png

@@ -0,0 +1,97 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import Page from '@/app/dashboard/productcreate/page';
+import request from '@/utils/axios';
+import { useRouter } from 'next/navigation';
+
+jest.mock('@/utils/axios', () => ({
+  get: jest.fn(),
+}));
+
+jest.mock('next/navigation', () => ({
+  useRouter: jest.fn(),
+}));
+
+// Mock components
+jest.mock('@/components/DashNavbar', () => () => (
+  <div data-testid="mock-dashnavbar">Mock DashNavbar</div>
+));
+jest.mock('@/components/headerDash', () => () => (
+  <div data-testid="mock-headerdash">Mock HeaderDash</div>
+));
+jest.mock('@/components/Product/AddProducts', () => () => (
+  <div data-testid="mock-addproducts">Mock AddProducts</div>
+));
+
+const queryClient = new QueryClient();
+
+describe('Page Component', () => {
+  beforeEach(() => {
+    (request.get as jest.Mock).mockImplementation((url) => {
+      if (url.includes('/categories')) {
+        return Promise.resolve({
+          data: [
+            { id: 1, name: 'Category 1' },
+            { id: 2, name: 'Category 2' },
+          ],
+        });
+      }
+      return Promise.resolve({ data: [] });
+    });
+
+    Storage.prototype.getItem = jest.fn(() =>
+      JSON.stringify({
+        User: {
+          Role: {
+            name: 'admin',
+          },
+          name: 'Test User',
+        },
+      }),
+    );
+
+    (useRouter as jest.Mock).mockReturnValue({
+      push: jest.fn(),
+    });
+  });
+
+  test('renders data after loading', async () => {
+    render(
+      <QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('mock-dashnavbar')).toBeInTheDocument();
+    });
+
+    expect(screen.getByTestId('mock-headerdash')).toBeInTheDocument();
+    expect(screen.getByTestId('mock-addproducts')).toBeInTheDocument();
+  });
+
+  test('redirects to /dashboard/home if user is not a seller', async () => {
+    Storage.prototype.getItem = jest.fn(() =>
+      JSON.stringify({
+        User: {
+          Role: {
+            name: 'admin',
+          },
+          name: 'Test User',
+        },
+      }),
+    );
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>,
+    );
+
+    await waitFor(() => {
+      expect(useRouter().push).toHaveBeenCalledWith('/dashboard/home');
+    });
+  });
+});

public/dash2.png

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import Page from '@/app/dashboard/profile/page';
+import request from '@/utils/axios';
+import { useRouter } from 'next/navigation';
+
+jest.mock('@/utils/axios', () => ({
+  get: jest.fn(),
+}));
+
+const queryClient = new QueryClient();
+jest.mock('@/components/DashNavbar', () => () => (
+  <div data-testid="mock-dashnavbar">Mock DashNavbar</div>
+));
+describe('Page Component', () => {
+  beforeEach(() => {
+    Storage.prototype.getItem = jest.fn(() =>
+      JSON.stringify({
+        User: {
+          Role: {
+            name: 'admin',
+          },
+          name: 'Test User',
+        },
+      }),
+    );
+  });
+
+  test('renders loading state initially', () => {
+    render(
+      <QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>,
+    );
+  });
+});