fix: get launch url using exam id instead of attempt id

[varshamenon4]

Instead of getting the launch url using the exam id, the ReviewExamAttemptButton was using the attempt id. This bug is fixed in this PR by getting the exam id using hooks. Ticket here: COSMO-63

[varshamenon4]

Because I'm now getting the currentExam via the useExamsData hook, I'm needing to mock this fn and create a default exams data in both AttemptList and the ReviewExamAttemptButton. I don't love that I need to have it in the AttemptList since it's just the parent component - wondering if there is a better way to mock this. I see a console error when these tests were failing about error boundaries: https://legacy.reactjs.org/docs/error-boundaries.html so I can look into that too if that's better.

[MichaelRoytman]

You could try mocking out the actual children of AttemptList (e.g. ReviewExamAttemptButton)? That way, you're only testing the functionality in the AttemptList component without rendering the ReviewExamAttemptButton and needing to mock out the useExamsData hook.

However, I suspect that's not the testing strategy the React Testing Library would recommend, right? If I recall correctly, their approach is to test the application as closely as it would appear to the user. Mocking out children components is not that.

I was reading this thread from some ideas. It's a little old, though. But, based on the conversation in that thread, I wonder if the tests in ReviewExamAttemptButton.jsx should be moved into AttemptList.test.jsx, and the AttemptList.test.jsx acts as the E2E testing suite for that whole component?

I'm not sure what the right approach is here, but these are just some ideas. Maybe a good topic for standup?

[varshamenon4]

Notes:

• In the learning assistant library, we set up a mock redux store. That could also solve the problem potentially. > is this recommended?
• What we were using before worked well for mocking child components. React Testing Library kind of wants you to put together the whole testing state.
• Approach is to test whole app, not in pieces.
• ask in fedx channel about testing best practices
• look at redux best practices (helper that sets up everything)
• https://github.com/edx/frontend-lib-learning-assistant/blob/main/src/utils/utils.test.jsx#L10-L31

[zacharis278]

maybe a simpler path than following the learning MFE, which handles everything (rendering, i18n, redux) is just to have a helper / setup code that populates a default state. That's pretty close to what we're already doing on the base component. Wouldn't require any large refactoring to make something like this a default for all tests: https://github.com/edx/frontend-app-exams-dashboard/blob/main/src/pages/ExamsPage/index.test.jsx#L26-L40

[varshamenon4]

Cool! Refactored to have a default for all tests in testutils.

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (3288715) 75.08% compared to head (022a865) 75.42%.
Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main      #17      +/-   ##
==========================================
+ Coverage   75.08%   75.42%   +0.34%     
==========================================
  Files          22       22              
  Lines         289      293       +4     
  Branches       29       29              
==========================================
+ Hits          217      221       +4     
  Misses         69       69              
  Partials        3        3              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[varshamenon4]

Refactored to have all of the default values live in a test utils file. But lemme know if there is a better place for these.

[varshamenon4]

Changed to have default state live here but let me know if there is a better place for this.

[zacharis278]

This looks great!