flatironinstitute / mcmc-monitor

Monitor MCMC runs in the browser
Other
35 stars 0 forks source link

Add support for testing React components, with one model. #80

Closed jsoules closed 1 year ago

jsoules commented 1 year ago

This PR adds some dependencies on front-end testing frameworks (mainly testing-library and the jsdom and happy-dom in-Javascript DOM environments that facilitate front-end testing). It also adds some model unit test code for the (arbitrarily chosen) ChainSelector component.

I'm still improving at writing front-end test code (and test code in general--a lot of this could be less verbose/repetitive) but this model demonstrates working solutions for some common problems, i.e. mocking state-fetch and state-mutation functions, rendering content to a page, and making assertions on parts of that content. We'll probably get more sophisticated with this as time goes on.

We will still need to experiment with testing hooks and contexts to work out good ways to do that. There is a react-hooks-testing-library that may be helpful with the former, and I have some other resources on the latter.

Since this model includes some instances where in-our-code dependencies of the system-under-test are not mocked, the coverage charts suggest that we now have some coverage for a random smattering of hooks, utility functions, etc. Reviewing the details, this largely just indicates that those files' imports and function definitions didn't break everything--we haven't asserted anything about the actual logic itself (which never gets called meaningfully). I suppose it's just another reminder that line coverage needs to be interpreted in context.

The only change to non-test code is to refactor the toggle function, which appeared multiple places with an identical definition, into a utility function toggleListItem that gets imported where used.

codecov-commenter commented 1 year ago

Codecov Report

Merging #80 (d1e1bd3) into main (027c1b2) will increase coverage by 2.72%. The diff coverage is 78.57%.

@@            Coverage Diff            @@
##            main      #80      +/-   ##
=========================================
+ Coverage   9.75%   12.48%   +2.72%     
=========================================
  Files         74       75       +1     
  Lines       5640     5641       +1     
  Branches     111      121      +10     
=========================================
+ Hits         550      704     +154     
+ Misses      5090     4937     -153     
Flag Coverage Δ
gui_units 16.00% <78.57%> (+3.67%) :arrow_up:
svc_units 2.27% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
src/components/VariablesSelector.tsx 0.00% <0.00%> (ø)
src/components/ChainsSelector.tsx 97.72% <80.00%> (+97.72%) :arrow_up:
src/util/toggleListItem.ts 100.00% <100.00%> (ø)

... and 3 files with indirect coverage changes

:mega: We’re building smart automated test selection to slash your CI/CD build times. Learn more

magland commented 1 year ago

Looks good to me.