diff --git a/src/certificates/CertificatesPage.test.tsx b/src/certificates/CertificatesPage.test.tsx index 4b0d0a2e..f91bec44 100644 --- a/src/certificates/CertificatesPage.test.tsx +++ b/src/certificates/CertificatesPage.test.tsx @@ -2,7 +2,7 @@ import { screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import CertificatesPage from '@src/certificates/CertificatesPage'; import { renderWithAlertAndIntl } from '@src/testUtils'; -import { useCourseInfo } from '@src/data/apiHook'; +import { useCourseInfo, usePendingTasks } from '@src/data/apiHook'; import { useCertificateGenerationHistory, useGrantBulkExceptions, @@ -25,9 +25,22 @@ jest.mock('react-router-dom', () => ({ jest.mock('@src/certificates/data/apiHook'); jest.mock('@src/data/apiHook', () => ({ useCourseInfo: jest.fn(), + usePendingTasks: jest.fn(), +})); + +jest.mock('@src/components/PendingTasks', () => ({ + PendingTasks: function MockPendingTasks({ onToggle }: { isOpen: boolean, onToggle: () => void }) { + return ( +
+ Pending Tasks + +
+ ); + }, })); const mockUseCourseInfo = useCourseInfo as jest.MockedFunction; +const mockUsePendingTasks = usePendingTasks as jest.MockedFunction; const mockUseCertificateGenerationHistory = useCertificateGenerationHistory as jest.MockedFunction; const mockUseInstructorTasks = useInstructorTasks as jest.MockedFunction; const mockUseIssuedCertificates = useIssuedCertificates as jest.MockedFunction; @@ -56,6 +69,12 @@ describe('CertificatesPage', () => { error: null, } as any); + mockUsePendingTasks.mockReturnValue({ + data: [], + isLoading: false, + refetch: jest.fn(), + } as any); + mockUseCertificateGenerationHistory.mockReturnValue({ data: { results: [], @@ -181,6 +200,17 @@ describe('CertificatesPage', () => { expect(screen.getByText(messages.generationHistoryTab.defaultMessage)).toBeInTheDocument(); }); + it('renders pending tasks component', async () => { + renderWithAlertAndIntl(); + const user = userEvent.setup(); + + expect(screen.getByTestId('pending-tasks')).toBeInTheDocument(); + + // Test toggle functionality + const toggleButton = screen.getByText('Toggle'); + await user.click(toggleButton); + }); + it('renders issued certificates tab by default', () => { renderWithAlertAndIntl(); diff --git a/src/certificates/CertificatesPage.tsx b/src/certificates/CertificatesPage.tsx index 2e5527d7..d59d3cce 100644 --- a/src/certificates/CertificatesPage.tsx +++ b/src/certificates/CertificatesPage.tsx @@ -4,6 +4,7 @@ import { Card, Container, Button, ButtonGroup, Alert } from '@openedx/paragon'; import { useIntl } from '@openedx/frontend-base'; import { useAlert } from '@src/providers/AlertProvider'; import { useCourseInfo } from '@src/data/apiHook'; +import { PendingTasks } from '@src/components/PendingTasks'; import CertificatesPageHeader from '@src/certificates/components/CertificatesPageHeader'; import IssuedCertificatesTab from '@src/certificates/components/IssuedCertificatesTab'; import GenerationHistoryTable from '@src/certificates/components/GenerationHistoryTable'; @@ -53,6 +54,7 @@ const CertificatesPage = () => { const [isDisableCertificatesOpen, setIsDisableCertificatesOpen] = useState(false); const [isRegenerateModalOpen, setIsRegenerateModalOpen] = useState(false); const [isGenerateModalOpen, setIsGenerateModalOpen] = useState(false); + const [isPendingTasksOpen, setIsPendingTasksOpen] = useState(false); const { data: certificatesData, @@ -150,6 +152,7 @@ const CertificatesPage = () => { title: intl.formatMessage(messages.errorModalTitle), message: `Some invalidations failed:\n${errorMessages}`, variant: ALERT_VARIANTS.WARNING, + confirmText: intl.formatMessage(messages.close), }); } if (data.success && data.success.length > 0) { @@ -504,6 +507,7 @@ const CertificatesPage = () => { isSubmitting={false} learnerCount={certificatesData?.count || 0} /> + setIsPendingTasksOpen(prev => !prev)} /> ); }; diff --git a/src/providers/AlertProvider.tsx b/src/providers/AlertProvider.tsx index f33b93f9..d9f09631 100644 --- a/src/providers/AlertProvider.tsx +++ b/src/providers/AlertProvider.tsx @@ -229,7 +229,7 @@ export const AlertProvider: FC = ({ children }) => { {modal.confirmText && (