Write tests for modals

[huyenltnguyen]

Description

Before we migrate the Modal component (#52759), we want to ensure the existing modals have sufficient test coverage.

If we already have a corresponding Playwright test file for the modal, check if the test suite covers all expected behaviors (conditional rendering logic, user interaction, keyboard usage, etc.). If we don't have a corresponding Playwright test file for the modal, add the file in.

Note: I think we might want to incorporate modal tests with the relevant user flows rather than having them in separate files, but we can move the tests around later when we have all of them in.

Guides

• https://contribute.freecodecamp.org/#/how-to-add-playwright-tests
• https://contribute.freecodecamp.org/#/how-to-add-playwright-tests?id=best-practices-for-writing-e2e-tests

Task list

Tasks

Beta Give feedback

1. client/src/components/Donation/donation-modal.tsx
2. client/src/components/profile/components/time-line.tsx
3. client/src/components/settings/delete-modal.tsx - test(playwright): added tests for delete-modal component #54019
4. client/src/components/settings/reset-modal.tsx - test(playwright): minor improvements to reset-modal.spec.ts #54070
5. client/src/components/signout-modal/index.tsx - fix: sign-out-modal playwright test #54032
6. client/src/components/SolutionViewer/exam-results-modal.tsx - test(playwright): add exam-results-modal tests #54091
7. client/src/components/SolutionViewer/project-modal.tsx
8. client/src/components/staging-warning-modal/index.tsx
9. client/src/templates/Challenges/components/completion-modal.tsx
10. client/src/templates/Challenges/components/help-modal.tsx - fix: help-modal playwright test #54039
11. client/src/templates/Challenges/components/project-preview-modal.tsx
12. client/src/templates/Challenges/components/reset-modal.tsx - test(playwright): minor improvements to reset-modal.spec.ts #54070
13. client/src/templates/Challenges/components/shortcuts-modal.tsx - test(playwright): shortcuts-modal improvements #54104
14. client/src/templates/Challenges/components/video-modal.tsx - fix(playwright): video-modal test #54085
15. client/src/templates/Challenges/exam/components/exit-exam-modal.tsx
16. client/src/templates/Challenges/exam/components/finish-exam-modal.tsx
17. client/src/templates/Challenges/exam/components/foundational-c-sharp-survey.tsx
18. client/src/templates/Challenges/exam/components/survey-modal.tsx

[a2937]

I believe I spotted the existing Playwright test for the donation modal.

There is the modal body itself that appears to need a fair bit of tests like the animation, the bear block completion illustration, the rows, the confirmation, and the header. Is this something I should consider working on in this file?

[huyenltnguyen]

@a2937 That's my least favorite modal (because of its complexity), so feel free to look into it 🙂 I think we can use that donate-page-default.spec.ts file for donation-modal's tests.

Just a note: If you need to add new tests, try to avoid the getByTestId() locator as much as possible. getByRole(), getByLabel(), and getByText() should be sufficient in most cases.

Here is our guide to working with Playwright: https://contribute.freecodecamp.org/#/how-to-add-playwright-tests.

[huyenltnguyen]

Closing this issue as we have decided to incorporate tests in the migration work, rather than making the changes in phases.

The tests will be part of #52759.