Frontend Unit Test with Jest Dashboard module

[aa1588]

Related to user story #2

[Raviteja-11-2002]

Categories.test.tsx

import React from 'react';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import Categories from '../Categories';
import axios from 'axios';
import '@testing-library/jest-dom';

jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;

describe('Categories Component', () => {
    const mockCategories = ['Technology', 'Science', 'Health'];

    beforeEach(() => {
        mockedAxios.get.mockResolvedValue({ data: mockCategories });
    });

    afterEach(() => {
        jest.clearAllMocks();
    });

    test('renders the category selection header', () => {
        render(<Categories />);
        expect(screen.getByText('Select Categories')).toBeInTheDocument();
    });

    test('fetches and displays categories from API', async () => {
        render(<Categories />);

        await waitFor(() => {
            mockCategories.forEach((category) => {
                expect(screen.getByLabelText(category)).toBeInTheDocument();
            });
        });
    });

    test('allows selecting and deselecting categories', async () => {
        render(<Categories />);

        await waitFor(() => {
            const techCheckbox = screen.getByLabelText('Technology') as HTMLInputElement;
            const scienceCheckbox = screen.getByLabelText('Science') as HTMLInputElement;

            // Initial state
            expect(techCheckbox.checked).toBe(false);
            expect(scienceCheckbox.checked).toBe(false);

            // Select "Technology"
            fireEvent.click(techCheckbox);
            expect(techCheckbox.checked).toBe(true);

            // Deselect "Technology"
            fireEvent.click(techCheckbox);
            expect(techCheckbox.checked).toBe(false);

            // Select "Science"
            fireEvent.click(scienceCheckbox);
            expect(scienceCheckbox.checked).toBe(true);
        });
    });

    test('displays an error message if API request fails', async () => {
        mockedAxios.get.mockRejectedValueOnce(new Error('Network Error'));

        render(<Categories />);

        await waitFor(() => {
            expect(screen.queryByLabelText('Technology')).not.toBeInTheDocument();
            expect(console.error).toHaveBeenCalledWith(expect.stringContaining('Error fetching categories'));
        });
    });
});

[Raviteja-11-2002]

Dashboard.test.tsx

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Dashboard from '../Dashboard';
import '@testing-library/jest-dom';

describe('Dashboard Component', () => {
    test('renders Dashboard header', () => {
        render(<Dashboard />);
        expect(screen.getByText('Dashboard')).toBeInTheDocument();
    });

    test('renders Reset Password button', () => {
        render(<Dashboard />);
        const resetButton = screen.getByText('Reset Password');
        expect(resetButton).toBeInTheDocument();
        expect(resetButton).toHaveClass('btn-outline-success');
    });

    test('renders Add Item For Sale button', () => {
        render(<Dashboard />);
        const addButton = screen.getByText('Add Item For Sale +');
        expect(addButton).toBeInTheDocument();
        expect(addButton).toHaveClass('btn-success');
    });

    test('renders item card with correct title', () => {
        render(<Dashboard />);
        expect(screen.getByText('Dell Chromebook 3180')).toBeInTheDocument();
    });

    test('renders offers table with correct headers', () => {
        render(<Dashboard />);
        expect(screen.getByText('Id')).toBeInTheDocument();
        expect(screen.getByText('FROM')).toBeInTheDocument();
        expect(screen.getByText('CONTACT')).toBeInTheDocument();
        expect(screen.getByText('OFFER PRICE')).toBeInTheDocument();
        expect(screen.getByText('ACTION')).toBeInTheDocument();
    });

    test('renders offer row with correct data', () => {
        render(<Dashboard />);
        expect(screen.getByText('1')).toBeInTheDocument();
        expect(screen.getByText('sam@my.unt.edu')).toBeInTheDocument();
        expect(screen.getByText('Unavailable')).toBeInTheDocument();
        expect(screen.getByText('$325.00')).toBeInTheDocument();
    });

    test('renders Accept and Decline buttons in offer row', () => {
        render(<Dashboard />);
        const acceptButton = screen.getAllByText('Accept')[0];
        const declineButton = screen.getAllByText('Decline')[0];

        expect(acceptButton).toBeInTheDocument();
        expect(declineButton).toBeInTheDocument();

        fireEvent.click(acceptButton);
        fireEvent.click(declineButton);

        expect(acceptButton).toHaveClass('btn-success');
        expect(declineButton).toHaveClass('btn-danger');
    });
});

[Raviteja-11-2002]