Test: Implement Component: Skeleton Loading States for Dashboard

README.md

@@ -9,7 +9,7 @@ This repository (`SwiftChain-Frontend`) contains the frontend application built
 ## 🚀 Project Overview
 
 ### Core Problem
-
+//Temproary fix for pr and commit
 Traditional logistics systems suffer from:
 
 - Lack of trust between senders and independent drivers.

components/__tests__/DashboardOverview.test.tsx

@@ -0,0 +1,67 @@
+// __tests__/components/DashboardOverview.test.tsx
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import DashboardOverview from '@/components/dashboard/DashboardOverview'; // Adjust path as needed
+import { useDashboardData } from '@/hooks/useDashboardData'; // Adjust path to your data hook
+
+// Mock the data fetching hook to control loading states
+jest.mock('@/hooks/useDashboardData');
+
+describe('Component: Skeleton Loading States for Dashboard', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders skeleton UI placeholders when data is loading', () => {
+    // Force the loading state to true
+    (useDashboardData as jest.Mock).mockReturnValue({
+      data: null,
+      isLoading: true,
+      error: null,
+    });
+
+    render(<DashboardOverview />);
+
+    // Assert that skeleton elements are rendered
+    const skeletons = screen.getAllByTestId('skeleton-loader');
+    expect(skeletons.length).toBeGreaterThan(0);
+
+    // Assert that actual data content is not present
+    expect(screen.queryByText(/total deliveries/i)).not.toBeInTheDocument();
+  });
+
+  it('removes skeleton loaders and renders actual data when loading completes', () => {
+    // Simulate a successful data fetch
+    (useDashboardData as jest.Mock).mockReturnValue({
+      data: {
+        totalDeliveries: 1450,
+        activeDrivers: 32,
+      },
+      isLoading: false,
+      error: null,
+    });
+
+    render(<DashboardOverview />);
+
+    // Assert that skeletons are removed
+    expect(screen.queryByTestId('skeleton-loader')).not.toBeInTheDocument();
+
+    // Assert that real data is rendered
+    expect(screen.getByText('1450')).toBeInTheDocument();
+    expect(screen.getByText('32')).toBeInTheDocument();
+  });
+
+  it('renders an error boundary or state if data fetching fails', () => {
+    (useDashboardData as jest.Mock).mockReturnValue({
+      data: null,
+      isLoading: false,
+      error: new Error('Failed to fetch dashboard metrics'),
+    });
+
+    render(<DashboardOverview />);
+
+    expect(screen.queryByTestId('skeleton-loader')).not.toBeInTheDocument();
+    expect(screen.getByText(/failed to fetch dashboard metrics/i)).toBeInTheDocument();
+  });
+});

cypress/e2e/theme-toggle.cy.ts

@@ -0,0 +1,60 @@
+// cypress/e2e/theme-toggle.cy.ts
+
+describe('E2E: Toggle Dark/Light Mode on Dashboard Overview', () => {
+  beforeEach(() => {
+    // Mock authentication to safely access the dashboard
+    cy.intercept('POST', '**/api/auth/login', {
+      statusCode: 200,
+      body: { success: true, token: 'mock-token' }
+    }).as('login');
+
+    // Set token to bypass login screen if your app uses localStorage
+    cy.window().then((win) => {
+      win.localStorage.setItem('token', 'mock-token');
+    });
+
+    cy.visit('/dashboard');
+  });
+
+  it('toggles the dashboard between light and dark modes successfully', () => {
+    // 1. Initial State Check (Assuming light mode default)
+    cy.get('html').should('not.have.class', 'dark');
+
+    // 2. Toggle to Dark Mode
+    cy.get('button[aria-label="Toggle Dark Mode"], button[aria-label="Toggle Theme"]')
+      .first()
+      .click();
+
+    // Verify Tailwind's 'dark' class is applied to the root element
+    cy.get('html').should('have.class', 'dark');
+
+    // Verify a specific CSS variable or background color change
+    cy.get('body').should('have.css', 'background-color')
+      .and((color) => {
+        // Checking that the color transitioned away from pure white
+        expect(color).to.not.equal('rgb(255, 255, 255)');
+      });
+
+    // 3. Toggle back to Light Mode
+    cy.get('button[aria-label="Toggle Dark Mode"], button[aria-label="Toggle Theme"]')
+      .first()
+      .click();
+
+    cy.get('html').should('not.have.class', 'dark');
+  });
+
+  it('persists theme preference across page reloads', () => {
+    // Toggle to Dark Mode
+    cy.get('button[aria-label="Toggle Dark Mode"], button[aria-label="Toggle Theme"]')
+      .first()
+      .click();
+
+    cy.get('html').should('have.class', 'dark');
+
+    // Reload the page
+    cy.reload();
+
+    // The dark class should still be present if preference is cached
+    cy.get('html').should('have.class', 'dark');
+  });
+});