Skip to content
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

Merged
merged 12 commits into from
Dec 8, 2020
Merged

Add navigator #190

merged 12 commits into from
Dec 8, 2020

Conversation

jasalisbury
Copy link
Contributor

@jasalisbury jasalisbury commented Dec 7, 2020

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:

  • Adds a new library 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 with react-helmet-async(https://github.com/staylor/react-helmet-async) that removes some react deprecation warnings but has the same usage.
  • Reduced the use of act(...) in tests. Previously we would get warnings that looked like Warning: 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.
  • Started replacing fireEvent with userEvent per this suggestion. Will make a separate PR to switch everything over
  • The activity summary page is pretty long, it would not surprise me if it gets broken down into multiple pages at some point.

How to test

  1. Browse to https://tta-smarthub-sandbox.app.cloud.gov/activity-reports and fill out the form

OR

  1. Pull down branch
  2. Install deps
  3. Start dev environment, login and browse to localhost:3000/activity-report
  4. Fill out the form

Issue(s)

Checklist

  • Meets issue criteria
  • Code tested
  • Meets accessibility standards (WCAG 2.1 Levels A, AA)
  • [n/a] Documentation updated

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
@jasalisbury jasalisbury requested a review from rahearn December 7, 2020 20:55
Copy link
Contributor

@rahearn rahearn left a 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)"
@rahearn rahearn merged commit 1d9013a into HHS:main Dec 8, 2020
rahearn pushed a commit that referenced this pull request Feb 24, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Activity Report navigation (stepper replacement)
2 participants