Added Category Dashboard

src/__test__/dashBoard/Categories.test.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import { MemoryRouter } from 'react-router-dom';
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import Category from '@/components/dashBoard/Category';
+import categoriesReducer from '@/features/Products/categorySlice';
+
+const renderWithProviders = (ui: React.ReactElement) => {
+  const store = configureStore({ reducer: { categories: categoriesReducer } });
+  return render(
+    <Provider store={store}>
+      <MemoryRouter>{ui}</MemoryRouter>
+    </Provider>
+  );
+};
+
+describe('Category Component', () => {
+  let mock: MockAdapter;
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+  });
+
+  afterEach(() => {
+    mock.restore();
+  });
+
+  it('should render the component with initial state', () => {
+    renderWithProviders(<Category />);
+    expect(screen.getByText(/Categories/i)).toBeInTheDocument();
+  });
+
+  it('renders Categories component with category icons', async () => {
+    mock.onGet('/api/categories').reply(200, [
+      {
+        id: 1,
+        name: 'Category 1',
+        description: 'Description 1',
+        icon: 'https://example.com/icon1.png',
+      },
+      {
+        id: 2,
+        name: 'Category 2',
+        description: 'Description 2',
+        icon: 'https://example.com/icon2.png',
+      },
+    ]);
+
+    renderWithProviders(<Category />);
+
+    const icons = await screen.findAllByRole('img');
+    icons.forEach((icon) => {
+      expect(icon).toHaveAttribute('alt');
+    });
+  });
+
+  it('paginates categories', async () => {
+    mock.onGet('/api/categories').reply(
+      200,
+      Array.from({ length: 20 }, (_, i) => ({
+        id: i + 1,
+        name: `Category ${i + 1}`,
+        description: `Description ${i + 1}`,
+        icon: `https://example.com/icon${i + 1}.png`,
+      }))
+    );
+
+    renderWithProviders(<Category />);
+
+    const nextPageButton = await screen.findByRole('button', { name: /next/i });
+    fireEvent.click(nextPageButton);
+    expect(nextPageButton).toBeInTheDocument();
+  });
+
+  it('should render the component with initial state', async () => {
+    renderWithProviders(<Category />);
+    await waitFor(() =>
+      expect(screen.getByText(/Categories/i)).toBeInTheDocument()
+    );
+  });
+
+  it('paginates categories', async () => {
+    mock.onGet('/api/categories').reply(
+      200,
+      Array.from({ length: 20 }, (_, i) => ({
+        id: i + 1,
+        name: `Category ${i + 1}`,
+        description: `Description ${i + 1}`,
+        icon: `https://example.com/icon${i + 1}.png`,
+      }))
+    );
+
+    renderWithProviders(<Category />);
+
+    const nextPageButton = await screen.findByRole('button', { name: /next/i });
+    fireEvent.click(nextPageButton);
+    expect(nextPageButton).toBeInTheDocument();
+  });
+
+  it('should display validation errors if form is submitted with invalid data', async () => {
+    renderWithProviders(<Category />);
+
+    // Open the form
+    fireEvent.click(screen.getByText(/Add Category/i));
+
+    // Trigger form submission
+    fireEvent.click(screen.getByText(/Save/i));
+
+    // Wait for validation errors to appear
+    await waitFor(() => {
+      expect(screen.getByText(/Name/i)).toBeInTheDocument();
+      expect(screen.getByText(/Icon/i)).toBeInTheDocument();
+      expect(screen.getByText(/Description/i)).toBeInTheDocument();
+    });
+  });
+
+  it('should submit form and handle API response', async () => {
+    mock.onPost(`${import.meta.env.VITE_BASE_URL}/category/`).reply(201);
+
+    renderWithProviders(<Category />);
+
+    // Open the form
+    fireEvent.click(screen.getByText(/Add Category/i));
+
+    // Fill out the form
+    fireEvent.change(screen.getByPlaceholderText(/Name of the category/i), {
+      target: { value: 'New Category' },
+    });
+    fireEvent.change(
+      screen.getByPlaceholderText(/Description of the category/i),
+      {
+        target: { value: 'Category description' },
+      }
+    );
+    fireEvent.change(screen.getByPlaceholderText(/URL of the category icon/i), {
+      target: { value: 'https://example.com/icon.png' },
+    });
+
+    fireEvent.click(screen.getByText(/Save/i));
+
+    await waitFor(() => {
+      expect(mock.history.post.length).toBe(1);
+    });
+  });
+});

src/__test__/dashBoard/Seller.test.tsx

@@ -1,9 +1,9 @@
 import axios from 'axios';
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, beforeEach } from 'vitest';
 import MockAdapter from 'axios-mock-adapter';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { configureStore } from '@reduxjs/toolkit';
 import Seller from '@/pages/Seller';
 import productReducer from '@/app/Dashboard/AllProductSlices';
@@ -82,42 +82,25 @@ describe('Seller Component', () => {
     expect(screen.getByText('Sellers')).toBeInTheDocument();
   });
 
-  it('should display elements of the table', () => {
-    renderWithProviders(<Seller />);
-
-    expect(screen.getByText(/Image/)).toBeInTheDocument();
-    expect(screen.getByText(/First Name/)).toBeInTheDocument();
-    expect(screen.getByText(/Last Name/)).toBeInTheDocument();
-    expect(screen.getByText(/Email/)).toBeInTheDocument();
-    expect(screen.getByText(/Items Count/)).toBeInTheDocument();
-    expect(screen.getByText(/Date/)).toBeInTheDocument();
-    expect(screen.getByText(/Status/)).toBeInTheDocument();
-    expect(screen.getByText(/Action/)).toBeInTheDocument();
-  });
-
-  it('should filter sellers by search term', async () => {
-    // Mock API response
+  it('should display elements of the table', async () => {
     mock
       .onGet(`${import.meta.env.VITE_BASE_URL}/user/getAllUsers`)
       .reply(200, { users: mockBuyers });
 
-    // Render component
     renderWithProviders(<Seller />);
-
-    // Dispatch fetchBuyers to populate the state
     await store.dispatch(fetchBuyers() as any);
 
-    // Perform search action
-    const searchInput = screen.getByPlaceholderText('Search Seller');
-    fireEvent.change(searchInput, { target: { value: 'Vendor1' } });
-
-    // Check filtered results
-    expect(screen.getByText('Vendor1')).toBeInTheDocument();
-    expect(screen.queryByText('Customer1')).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText('Name')).toBeInTheDocument();
+      expect(screen.getByText('Email')).toBeInTheDocument();
+      expect(screen.getByText('Items')).toBeInTheDocument();
+      expect(screen.getByText('Date')).toBeInTheDocument();
+      expect(screen.getByText('Status')).toBeInTheDocument();
+      expect(screen.getByText('Action')).toBeInTheDocument();
+    });
   });
 
   it('should handle loading state', async () => {
-    // Mock API response
     mock
       .onGet(`${import.meta.env.VITE_BASE_URL}/user/getAllUsers`)
       .reply(200, { users: mockBuyers });
@@ -137,7 +120,10 @@ describe('Seller Component', () => {
 
     renderWithProviders(<Seller />);
     await store.dispatch(fetchBuyers() as any);
-    expect(screen.queryByText('Vendor1')).toBeNull();
-    expect(screen.queryByText('Customer1')).toBeNull();
+
+    await waitFor(() => {
+      expect(screen.queryByText('Vendor1')).toBeNull();
+      expect(screen.queryByText('Customer1')).toBeNull();
+    });
   });
 });