test: add unit tests

Author: diana-villalvazo-wgu

src/openResponses/OpenResponsesPage.test.tsx

@@ -0,0 +1,67 @@
+import { screen } from '@testing-library/react';
+import OpenResponsesPage from './OpenResponsesPage';
+import { renderWithQueryClient } from '../testUtils';
+import messages from './messages';
+import { useDetailAssessmentsData, useOpenResponsesData } from './data/apiHook';
+
+jest.mock('react-router-dom', () => ({
+  useParams: () => ({ courseId: 'course-v1:edX+Test+2024' }),
+}));
+
+jest.mock('./data/apiHook', () => ({
+  useOpenResponsesData: jest.fn(),
+  useDetailAssessmentsData: jest.fn(),
+}));
+
+const mockResults = {
+  useDetailAssessmentsData: [
+    {
+      id: '1',
+      unitName: 'Unit 1',
+      displayName: 'Assessment 1',
+      totalResponses: 2,
+      training: 0,
+      peer: 1,
+      self: 0,
+      waiting: 0,
+      staff: 0,
+      finalGradeReceived: 1,
+      url: 'http://test-url.com',
+    },
+  ],
+  useOpenResponsesData: {
+    totalUnits: '5',
+    totalAssessments: '10',
+    totalResponses: '15',
+    training: '2',
+    peer: '3',
+    self: '4',
+    waiting: '1',
+    staff: '6',
+    finalGradeReceived: '7',
+  }
+};
+
+describe('OpenResponsesPage', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useDetailAssessmentsData as jest.Mock).mockReturnValue({
+      data: { count: 1, results: mockResults.useDetailAssessmentsData },
+      isLoading: false,
+    });
+    (useOpenResponsesData as jest.Mock).mockReturnValue({
+      data: { count: 1, results: mockResults.useOpenResponsesData },
+      isLoading: false,
+    });
+  });
+
+  it('renders OpenResponsesSummary component', () => {
+    renderWithQueryClient(<OpenResponsesPage />);
+    expect(screen.getByRole('heading', { name: messages.summaryTitle.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('renders DetailAssessmentsList component', () => {
+    renderWithQueryClient(<OpenResponsesPage />);
+    expect(screen.getByRole('heading', { name: messages.details.defaultMessage })).toBeInTheDocument();
+  });
+});

src/openResponses/components/DetailAssessmentsList.tsx

@@ -41,7 +41,7 @@ const DetailAssessmentsList = () => {
 
   const tableData = data.results.map(item => ({
     ...item,
-    staffGrader: <Button variant="link" size="inline" href={item.url}>View and Grade Responses</Button>,
+    staffGrader: <Button variant="link" size="inline" href={item.url}>{intl.formatMessage(messages.viewAndGradeResponses)}</Button>,
   }));
 
   return (

src/openResponses/messages.ts

@@ -70,7 +70,12 @@ const messages = defineMessages({
     id: 'instruct.openResponses.table.header.staffGrader',
     defaultMessage: 'Staff Grader',
     description: 'Label for the staff grader header'
-  }
+  },
+  viewAndGradeResponses: {
+    id: 'instruct.openResponses.button.viewAndGradeResponses',
+    defaultMessage: 'View and Grade Responses',
+    description: 'Label for the link to view and grade responses'
+  },
 });
 
 export default messages;

src/testUtils.tsx

@@ -1,5 +1,15 @@
 import { render } from '@testing-library/react';
 import { IntlProvider } from '@openedx/frontend-base';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const queryClient = new QueryClient();
+
+export const renderWithQueryClient = (ui: React.ReactElement) =>
+  renderWithIntl(
+    <QueryClientProvider client={queryClient}>
+      {ui}
+    </QueryClientProvider>
+  );
 
 export const renderWithIntl = (component) => {
   return render(<IntlProvider locale="en" messages={{}}>{ component }</IntlProvider>);