-
Notifications
You must be signed in to change notification settings - Fork 8
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add navigator #190
Add navigator #190
Conversation
The navigator allows us to split up large forms into multiple pages. It has a side navigation that allows any page to be selected. The side nav displays the state of each page.
Switch from using fireEvent to userEvent. Will update additional tests as I come accross them. Reduce the instances of using "act" in tests, now we properly wait for all the rerenders to occur. Some tests still need to use act. Most deal with third party libraries
Conflicts: frontend/src/App.js frontend/src/pages/Unauthenticated/index.js
Conflicts: frontend/yarn.lock
Conflicts: frontend/yarn.lock
Add navigator
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great work, overall. I think there are a couple things that could be slightly improved, but the big change I'd like to see is that the "Not started" tags fail accessibility for contrast: https://app.circleci.com/pipelines/github/adhocteam/Head-Start-TTADP/684/workflows/7799b4b8-0574-4042-ad1b-460d705cdf10/jobs/3019
* Change navigator status colors to be more accessible * Page titles are now most specific to least specific * Add navigator test making sure "complete" state is shown * Fix cucumber test to look for proper label * Activity report uses proper label for "grantee/non-grantee name(s)"
Navigator feedback
Description of change
The navigator allows us to split up large forms into multiple pages. It has a side navigation that allows any page to be selected. The side navigation displays the state of each page and is stickied to the top of the page. Some notes:
react-helmet
to help update page titles. This library helps keep the page title updated with the page the user is viewing in the activity report. Note this library will be replaced withreact-helmet-async
(https://github.com/staylor/react-helmet-async) that removes some react deprecation warnings but has the same usage.act(...)
in tests. Previously we would get warnings that looked likeWarning: An update to *COMPONENT* inside a test was not wrapped in act(...).
. This indicates updates to the DOM were happening outside of a test. I've updated tests to not need to be wrapped in act. Some tests still use act but they deal with third party libraries or using mock timers.fireEvent
withuserEvent
per this suggestion. Will make a separate PR to switch everything overHow to test
OR
localhost:3000/activity-report
Issue(s)
Checklist