test(client): await lazy loaded pages

Author: purfectliterature

client/app/bundles/course/assessment/components/AssessmentForm/__test__/index.test.tsx

@@ -1,5 +1,5 @@
 import { ComponentProps } from 'react';
-import { fireEvent, render, RenderResult } from 'test-utils';
+import { fireEvent, render, RenderResult, waitFor } from 'test-utils';
 
 import AssessmentForm from '..';
 
@@ -61,143 +61,173 @@ beforeEach(() => {
 });
 
 describe('<AssessmentForm />', () => {
-  it('renders assessment details sections options', () => {
+  it('renders assessment details sections options', async () => {
     renderForm();
 
-    expect(form.getByText('Assessment details')).toBeVisible();
-    expect(form.getByLabelText('Starts at *')).toBeVisible();
-    expect(form.getByLabelText('Ends at')).toBeVisible();
-    expect(form.getByLabelText('Title *')).toHaveValue(INITIAL_VALUES.title);
-    expect(form.getByText('Description')).toBeVisible();
-    expect(form.getByDisplayValue(INITIAL_VALUES.description)).toBeVisible();
+    await waitFor(() => {
+      expect(form.getByText('Assessment details')).toBeVisible();
+      expect(form.getByLabelText('Starts at *')).toBeVisible();
+      expect(form.getByLabelText('Ends at')).toBeVisible();
+      expect(form.getByLabelText('Title *')).toHaveValue(INITIAL_VALUES.title);
+      expect(form.getByText('Description')).toBeVisible();
+      expect(form.getByDisplayValue(INITIAL_VALUES.description)).toBeVisible();
+    });
   });
 
-  it('renders grading section options', () => {
+  it('renders grading section options', async () => {
     renderForm();
 
-    expect(form.getByText('Grading')).toBeVisible();
-    expect(form.getByText('Grading mode')).toBeVisible();
+    await waitFor(() => {
+      expect(form.getByText('Grading')).toBeVisible();
+      expect(form.getByText('Grading mode')).toBeVisible();
 
-    expect(form.getByText('Autograded')).toBeVisible();
-    expect(form.getByDisplayValue('autograded')).not.toBeChecked();
+      expect(form.getByText('Autograded')).toBeVisible();
+      expect(form.getByDisplayValue('autograded')).not.toBeChecked();
 
-    expect(form.getByText('Manual')).toBeVisible();
-    expect(form.getByDisplayValue('manual')).toBeChecked();
+      expect(form.getByText('Manual')).toBeVisible();
+      expect(form.getByDisplayValue('manual')).toBeChecked();
 
-    expect(form.getByLabelText('Public test cases')).toBeChecked();
-    expect(form.getByLabelText('Private test cases')).toBeChecked();
-    expect(form.getByLabelText('Evaluation test cases')).not.toBeChecked();
+      expect(form.getByLabelText('Public test cases')).toBeChecked();
+      expect(form.getByLabelText('Private test cases')).toBeChecked();
+      expect(form.getByLabelText('Evaluation test cases')).not.toBeChecked();
 
-    expect(
-      form.getByLabelText('Enable delayed grade publication'),
-    ).not.toBeChecked();
+      expect(
+        form.getByLabelText('Enable delayed grade publication'),
+      ).not.toBeChecked();
+    });
   });
 
-  it('renders answers and test cases section options', () => {
+  it('renders answers and test cases section options', async () => {
     renderForm();
 
-    expect(form.getByText('Answers and test cases')).toBeVisible();
-    expect(form.getByLabelText('Allow to skip steps')).not.toBeChecked();
-    expect(
-      form.getByLabelText('Allow submission with incorrect answers'),
-    ).not.toBeChecked();
-    expect(form.getByLabelText('Show private test cases')).not.toBeChecked();
-    expect(form.getByLabelText('Show evaluation test cases')).not.toBeChecked();
-    expect(form.getByLabelText('Show MCQ/MRQ solution(s)')).not.toBeChecked();
+    await waitFor(() => {
+      expect(form.getByText('Answers and test cases')).toBeVisible();
+      expect(form.getByLabelText('Allow to skip steps')).not.toBeChecked();
+      expect(
+        form.getByLabelText('Allow submission with incorrect answers'),
+      ).not.toBeChecked();
+      expect(form.getByLabelText('Show private test cases')).not.toBeChecked();
+      expect(
+        form.getByLabelText('Show evaluation test cases'),
+      ).not.toBeChecked();
+      expect(form.getByLabelText('Show MCQ/MRQ solution(s)')).not.toBeChecked();
+    });
   });
 
-  it('renders organization section options', () => {
+  it('renders organization section options', async () => {
     renderForm();
 
-    expect(form.getByText('Organization')).toBeVisible();
-    expect(form.getByText('Single Page')).toBeVisible();
+    await waitFor(() => {
+      expect(form.getByText('Organization')).toBeVisible();
+      expect(form.getByText('Single Page')).toBeVisible();
+    });
   });
 
-  it('renders exams and access control section options', () => {
+  it('renders exams and access control section options', async () => {
     renderForm();
 
-    expect(form.getByText('Exams and access control')).toBeVisible();
-    expect(
-      form.getByLabelText('Block students from viewing finalized submissions'),
-    ).not.toBeChecked();
-    expect(form.getByLabelText('Show MCQ submit result')).not.toBeChecked();
-    expect(form.getByLabelText('Enable password protection')).not.toBeChecked();
+    await waitFor(() => {
+      expect(form.getByText('Exams and access control')).toBeVisible();
+      expect(
+        form.getByLabelText(
+          'Block students from viewing finalized submissions',
+        ),
+      ).not.toBeChecked();
+      expect(form.getByLabelText('Show MCQ submit result')).not.toBeChecked();
+      expect(
+        form.getByLabelText('Enable password protection'),
+      ).not.toBeChecked();
+    });
   });
 
-  it('does not render gamified options when course is not gamified', () => {
+  it('does not render gamified options when course is not gamified', async () => {
     renderForm();
 
-    expect(form.queryByText('Gamification')).not.toBeInTheDocument();
-    expect(form.queryByLabelText('Bonus ends at')).not.toBeInTheDocument();
-    expect(form.queryByLabelText('Base EXP')).not.toBeInTheDocument();
-    expect(form.queryByLabelText('Time Bonus EXP')).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(form.queryByText('Gamification')).not.toBeInTheDocument();
+      expect(form.queryByLabelText('Bonus ends at')).not.toBeInTheDocument();
+      expect(form.queryByLabelText('Base EXP')).not.toBeInTheDocument();
+      expect(form.queryByLabelText('Time Bonus EXP')).not.toBeInTheDocument();
+    });
   });
 
-  it('renders gamified options when course is gamified', () => {
+  it('renders gamified options when course is gamified', async () => {
     props.gamified = true;
     renderForm();
 
-    expect(form.getByText('Gamification')).toBeVisible();
-    expect(form.getByLabelText('Bonus ends at')).toBeVisible();
-    expect(form.getByLabelText('Base EXP')).toHaveValue(
-      INITIAL_VALUES.base_exp.toString(),
-    );
-    expect(form.getByLabelText('Time Bonus EXP')).toHaveValue(
-      INITIAL_VALUES.time_bonus_exp.toString(),
-    );
+    await waitFor(() => {
+      expect(form.getByText('Gamification')).toBeVisible();
+      expect(form.getByLabelText('Bonus ends at')).toBeVisible();
+      expect(form.getByLabelText('Base EXP')).toHaveValue(
+        INITIAL_VALUES.base_exp.toString(),
+      );
+      expect(form.getByLabelText('Time Bonus EXP')).toHaveValue(
+        INITIAL_VALUES.time_bonus_exp.toString(),
+      );
+    });
   });
 
-  it('does not render editing options when rendered in new assessment page', () => {
-    expect(form.queryByText('Visibility')).not.toBeInTheDocument();
-    expect(form.queryByText('Published')).not.toBeInTheDocument();
-    expect(form.queryByText('Draft')).not.toBeInTheDocument();
-    expect(form.queryByText('Files')).not.toBeInTheDocument();
-    expect(form.queryByText('Add Files')).not.toBeInTheDocument();
-    expect(form.queryByText('Unlock conditions')).not.toBeInTheDocument();
-    expect(form.queryByText('Add a condition')).not.toBeInTheDocument();
+  it('does not render editing options when rendered in new assessment page', async () => {
+    await waitFor(() => {
+      expect(form.queryByText('Visibility')).not.toBeInTheDocument();
+      expect(form.queryByText('Published')).not.toBeInTheDocument();
+      expect(form.queryByText('Draft')).not.toBeInTheDocument();
+      expect(form.queryByText('Files')).not.toBeInTheDocument();
+      expect(form.queryByText('Add Files')).not.toBeInTheDocument();
+      expect(form.queryByText('Unlock conditions')).not.toBeInTheDocument();
+      expect(form.queryByText('Add a condition')).not.toBeInTheDocument();
+    });
   });
 
-  it('renders editing options when rendered in edit assessment page', () => {
+  it('renders editing options when rendered in edit assessment page', async () => {
     props.editing = true;
     renderForm();
 
-    expect(form.getByText('Visibility')).toBeVisible();
-    expect(form.getByText('Published')).toBeVisible();
-    expect(form.getByDisplayValue('published')).not.toBeChecked();
-    expect(form.getByText('Draft')).toBeVisible();
-    expect(form.getByDisplayValue('draft')).toBeChecked();
-    expect(form.getByText('Files')).toBeVisible();
-    expect(form.getByText('Add Files')).toBeVisible();
-    expect(form.queryByText('Unlock conditions')).not.toBeInTheDocument();
-    expect(form.queryByText('Add a condition')).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(form.getByText('Visibility')).toBeVisible();
+      expect(form.getByText('Published')).toBeVisible();
+      expect(form.getByDisplayValue('published')).not.toBeChecked();
+      expect(form.getByText('Draft')).toBeVisible();
+      expect(form.getByDisplayValue('draft')).toBeChecked();
+      expect(form.getByText('Files')).toBeVisible();
+      expect(form.getByText('Add Files')).toBeVisible();
+      expect(form.queryByText('Unlock conditions')).not.toBeInTheDocument();
+      expect(form.queryByText('Add a condition')).not.toBeInTheDocument();
+    });
 
     props.gamified = true;
     renderForm();
 
-    expect(form.getByText('Unlock conditions')).toBeVisible();
-    expect(form.getByText('Add a condition')).toBeVisible();
+    await waitFor(() => {
+      expect(form.getByText('Unlock conditions')).toBeVisible();
+      expect(form.getByText('Add a condition')).toBeVisible();
+    });
   });
 
-  it('prevents grading mode switching when there are submissions', () => {
+  it('prevents grading mode switching when there are submissions', async () => {
     props.modeSwitching = false;
     renderForm();
 
-    expect(form.getByDisplayValue('autograded')).toBeDisabled();
-    expect(form.getByDisplayValue('manual')).toBeDisabled();
+    await waitFor(() => {
+      expect(form.getByDisplayValue('autograded')).toBeDisabled();
+      expect(form.getByDisplayValue('manual')).toBeDisabled();
+    });
   });
 
-  it('disables unavailable options in autograded mode', () => {
+  it('disables unavailable options in autograded mode', async () => {
     renderForm();
 
-    expect(form.getByLabelText('Allow to skip steps')).toBeDisabled();
-    expect(
-      form.getByLabelText('Allow submission with incorrect answers'),
-    ).toBeDisabled();
-    expect(
-      form.getByLabelText('Enable delayed grade publication'),
-    ).toBeEnabled();
-    expect(form.getByLabelText('Show MCQ submit result')).toBeDisabled();
-    expect(form.getByLabelText('Enable password protection')).toBeEnabled();
+    await waitFor(() => {
+      expect(form.getByLabelText('Allow to skip steps')).toBeDisabled();
+      expect(
+        form.getByLabelText('Allow submission with incorrect answers'),
+      ).toBeDisabled();
+      expect(
+        form.getByLabelText('Enable delayed grade publication'),
+      ).toBeEnabled();
+      expect(form.getByLabelText('Show MCQ submit result')).toBeDisabled();
+      expect(form.getByLabelText('Enable password protection')).toBeEnabled();
+    });
 
     const autogradedRadio = form.getByDisplayValue('autograded');
     fireEvent.click(autogradedRadio);
@@ -213,18 +243,20 @@ describe('<AssessmentForm />', () => {
     expect(form.getByLabelText('Enable password protection')).toBeDisabled();
   });
 
-  it('handles password protection options', () => {
+  it('handles password protection options', async () => {
     renderForm();
 
-    expect(
-      form.queryByLabelText('Assessment password *'),
-    ).not.toBeInTheDocument();
-    expect(
-      form.queryByLabelText('Enable session protection'),
-    ).not.toBeInTheDocument();
-    expect(
-      form.queryByLabelText('Session unlock password *'),
-    ).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(
+        form.queryByLabelText('Assessment password *'),
+      ).not.toBeInTheDocument();
+      expect(
+        form.queryByLabelText('Enable session protection'),
+      ).not.toBeInTheDocument();
+      expect(
+        form.queryByLabelText('Session unlock password *'),
+      ).not.toBeInTheDocument();
+    });
 
     const passwordCheckbox = form.getByLabelText('Enable password protection');
     expect(passwordCheckbox).toBeEnabled();
@@ -260,19 +292,25 @@ describe('<AssessmentForm />', () => {
     expect(browserAuthorizationCheckbox).toBeChecked();
   });
 
-  it('renders personalised timelines options when enabled', () => {
+  it('renders personalised timelines options when enabled', async () => {
     renderForm();
 
-    expect(form.queryByLabelText('Has personal times')).not.toBeInTheDocument();
-    expect(
-      form.queryByLabelText('Affects personal times'),
-    ).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(
+        form.queryByLabelText('Has personal times'),
+      ).not.toBeInTheDocument();
+      expect(
+        form.queryByLabelText('Affects personal times'),
+      ).not.toBeInTheDocument();
+    });
 
     props.showPersonalizedTimelineFeatures = true;
     renderForm();
 
-    expect(form.getByLabelText('Has personal times')).toBeEnabled();
-    expect(form.getByLabelText('Affects personal times')).toBeEnabled();
+    await waitFor(() => {
+      expect(form.getByLabelText('Has personal times')).toBeEnabled();
+      expect(form.getByLabelText('Affects personal times')).toBeEnabled();
+    });
   });
 
   // Randomized Assessment is temporarily hidden (PR#5406)

client/app/bundles/course/assessment/components/FileManager/__test__/index.test.tsx

@@ -41,8 +41,8 @@ beforeEach(() => {
 beforeEach(mock.reset);
 
 describe('<FileManager />', () => {
-  it('shows existing files', () => {
-    expect(fileManager.getByText('Material 1')).toBeVisible();
+  it('shows existing files', async () => {
+    expect(await fileManager.findByText('Material 1')).toBeVisible();
     expect(fileManager.getByText('Material 2')).toBeVisible();
   });
 
@@ -56,8 +56,7 @@ describe('<FileManager />', () => {
       });
 
     const uploadApi = jest.spyOn(CourseAPI.materialFolders, 'upload');
-    const addFilesButton = fileManager.getByText('Add Files');
-    expect(addFilesButton).toBeVisible();
+    expect(await fileManager.findByText('Add Files')).toBeVisible();
 
     const fileInput = fileManager.getByTestId('FileInput');
 

client/app/bundles/course/assessment/pages/AssessmentEdit/__test__/index.test.tsx

@@ -65,7 +65,7 @@ describe('<AssessmentEdit />', () => {
   it('submits correct form data', async () => {
     const user = userEvent.setup();
 
-    const title = form.getByLabelText('Title *');
+    const title = await form.findByLabelText('Title *');
     await user.type(title, '{Control>}a{/Control}{Delete}');
     await user.type(title, NEW_VALUES.title);
     expect(title).toHaveValue(NEW_VALUES.title);

client/app/bundles/course/assessment/pages/AssessmentsIndex/__test__/index.test.jsx

@@ -6,7 +6,7 @@ describe('<AssessmentIndex />', () => {
   it('renders the index page', async () => {
     const page = render(<AssessmentIndex categoryId={1} tabId={1} />);
 
-    const newButton = page.getByRole('button');
+    const newButton = await page.findByRole('button');
     fireEvent.click(newButton);
 
     expect(page.getByRole('heading', { name: 'New Assessment' })).toBeVisible();

client/app/bundles/course/assessment/submission/components/ScribingView/__test__/ScribingToolbar.test.jsx

@@ -151,13 +151,13 @@ beforeEach(() => {
 describe('ScribingToolbar', () => {
   it('renders tool popovers', async () => {
     const page = render(<ScribingToolbar {...props} />);
-    expect(page.getAllByRole('button')).toHaveLength(20);
+    expect(await page.findAllByRole('button')).toHaveLength(20);
   });
 
   it('renders color pickers', async () => {
     const page = render(<ScribingToolbar {...props} />);
 
-    const buttons = page.getAllByRole('button');
+    const buttons = await page.findAllByRole('button');
     fireEvent.click(buttons[2]);
     expect(page.getByText('Text')).toBeVisible();
 
@@ -183,7 +183,7 @@ describe('ScribingToolbar', () => {
       dispatch(setColoringToolColor(answerId, coloringTool, color)),
     );
 
-    const buttons = page.getAllByRole('button');
+    const buttons = await page.findAllByRole('button');
     fireEvent.click(buttons[2]);
 
     const colorPicker = page.getByLabelText('Color Picker');