From 5cdf4abd92a5d4d0c6725ad2f8af3bffdec5090c Mon Sep 17 00:00:00 2001 From: Philippe <83185129+phil3838@users.noreply.github.com> Date: Thu, 27 Mar 2025 14:45:50 -0400 Subject: [PATCH] new tests for ReturnButton --- .../ReturnButton/ReturnButton.test.tsx | 160 ++++++++++++++---- 1 file changed, 131 insertions(+), 29 deletions(-) diff --git a/client/src/__tests__/components/ReturnButton/ReturnButton.test.tsx b/client/src/__tests__/components/ReturnButton/ReturnButton.test.tsx index 8f8ef99..0766908 100644 --- a/client/src/__tests__/components/ReturnButton/ReturnButton.test.tsx +++ b/client/src/__tests__/components/ReturnButton/ReturnButton.test.tsx @@ -1,46 +1,148 @@ import React from 'react'; -import { render, screen, fireEvent } from '@testing-library/react'; +import { render, screen, fireEvent, waitFor } from '@testing-library/react'; import '@testing-library/jest-dom'; -import ReturnButton from 'src/components/ReturnButton/ReturnButton'; import { useNavigate } from 'react-router-dom'; +import ReturnButton from '../../../components/ReturnButton/ReturnButton.tsx'; // Adjust path as needed +import ApiService from '../../../services/ApiService'; +// Mock react-router-dom's useNavigate jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), - useNavigate: jest.fn() + useNavigate: jest.fn(), })); -describe('ReturnButton', () => { - test('navigates back when askConfirm is false', () => { - const navigateMock = jest.fn(); - (useNavigate as jest.Mock).mockReturnValue(navigateMock); - render(); - fireEvent.click(screen.getByText('Retour')); - expect(navigateMock).toHaveBeenCalledWith(-1); +// Mock ApiService +jest.mock('../../../services/ApiService', () => ({ + createQuiz: jest.fn(), + updateQuiz: jest.fn(), +})); + +describe('ReturnButton Component', () => { + const mockNavigate = jest.fn(); + const mockOnReturn = jest.fn(); + + beforeEach(() => { + // Reset mocks before each test + jest.clearAllMocks(); + (useNavigate as jest.Mock).mockReturnValue(mockNavigate); + (ApiService.createQuiz as jest.Mock).mockResolvedValue({}); + (ApiService.updateQuiz as jest.Mock).mockResolvedValue({}); }); - test('shows confirmation modal when askConfirm is true', () => { - render(); - fireEvent.click(screen.getByText('Retour')); - const confirmButton = screen.getByTestId('modal-confirm-button'); - expect(confirmButton).toBeInTheDocument(); + test('renders the button with "Retour" text when not saving', () => { + render(); + expect(screen.getByText('Retour')).toBeInTheDocument(); }); - /*test('navigates back after confirming in the modal', () => { - const navigateMock = jest.fn(); - (useNavigate as jest.Mock).mockReturnValue(navigateMock); - render(); + test('renders "Enregistrement..." text when saving', async () => { + render(); fireEvent.click(screen.getByText('Retour')); - const confirmButton = screen.getByTestId('modal-confirm-button'); - fireEvent.click(confirmButton); - expect(navigateMock).toHaveBeenCalledWith(-1); - });*/ + expect(screen.getByText('Enregistrement...')).toBeInTheDocument(); + await waitFor(() => expect(screen.queryByText('Enregistrement...')).not.toBeInTheDocument()); + }); - test('cancels navigation when canceling in the modal', () => { - const navigateMock = jest.fn(); - (useNavigate as jest.Mock).mockReturnValue(navigateMock); - render(); + test('navigates to /teacher/dashboard by default when clicked', async () => { + render(); fireEvent.click(screen.getByText('Retour')); - fireEvent.click(screen.getByText('Annuler')); - expect(navigateMock).not.toHaveBeenCalled(); + await waitFor(() => expect(mockNavigate).toHaveBeenCalledWith('/teacher/dashboard')); + }); + + test('calls onReturn prop instead of navigating when provided', async () => { + render(); + fireEvent.click(screen.getByText('Retour')); + await waitFor(() => { + expect(mockOnReturn).toHaveBeenCalled(); + expect(mockNavigate).not.toHaveBeenCalled(); + }); + }); + + test('disables button while saving', async () => { + render(); + const button = screen.getByText('Retour'); + fireEvent.click(button); + expect(button).toBeDisabled(); + await waitFor(() => expect(button).not.toBeDisabled()); + }); + + test('calls ApiService.createQuiz for new quiz with valid data', async () => { + const props = { + quizTitle: 'New Quiz', + quizContent: ['Q1', 'Q2'], + quizFolder: 'folder1', + isNewQuiz: true, + }; + render(); + fireEvent.click(screen.getByText('Retour')); + await waitFor(() => { + expect(ApiService.createQuiz).toHaveBeenCalledWith('New Quiz', ['Q1', 'Q2'], 'folder1'); + expect(ApiService.updateQuiz).not.toHaveBeenCalled(); + }); + }); + + test('calls ApiService.updateQuiz for existing quiz with valid data', async () => { + const props = { + quizId: 'quiz123', + quizTitle: 'Updated Quiz', + quizContent: ['Q1', 'Q2'], + isNewQuiz: false, + }; + render(); + fireEvent.click(screen.getByText('Retour')); + await waitFor(() => { + expect(ApiService.updateQuiz).toHaveBeenCalledWith('quiz123', 'Updated Quiz', ['Q1', 'Q2']); + expect(ApiService.createQuiz).not.toHaveBeenCalled(); + }); + }); + + test('does not call ApiService if quizTitle is missing for new quiz', async () => { + render(); + fireEvent.click(screen.getByText('Retour')); + await waitFor(() => { + expect(ApiService.createQuiz).not.toHaveBeenCalled(); + expect(ApiService.updateQuiz).not.toHaveBeenCalled(); + expect(mockNavigate).toHaveBeenCalledWith('/teacher/dashboard'); + }); + }); + + test('does not call ApiService if quizId and quizTitle are missing for update', async () => { + render(); + fireEvent.click(screen.getByText('Retour')); + await waitFor(() => { + expect(ApiService.createQuiz).not.toHaveBeenCalled(); + expect(ApiService.updateQuiz).not.toHaveBeenCalled(); + expect(mockNavigate).toHaveBeenCalledWith('/teacher/dashboard'); + }); + }); + + test('navigates even if ApiService.createQuiz fails', async () => { + (ApiService.createQuiz as jest.Mock).mockRejectedValue(new Error('Save failed')); + const props = { + quizTitle: 'New Quiz', + quizContent: ['Q1'], + quizFolder: 'folder1', + isNewQuiz: true, + }; + render(); + fireEvent.click(screen.getByText('Retour')); + await waitFor(() => { + expect(ApiService.createQuiz).toHaveBeenCalled(); + expect(mockNavigate).toHaveBeenCalledWith('/teacher/dashboard'); + }); + }); + + test('navigates even if ApiService.updateQuiz fails', async () => { + (ApiService.updateQuiz as jest.Mock).mockRejectedValue(new Error('Update failed')); + const props = { + quizId: 'quiz123', + quizTitle: 'Updated Quiz', + quizContent: ['Q1'], + isNewQuiz: false, + }; + render(); + fireEvent.click(screen.getByText('Retour')); + await waitFor(() => { + expect(ApiService.updateQuiz).toHaveBeenCalled(); + expect(mockNavigate).toHaveBeenCalledWith('/teacher/dashboard'); + }); }); });