QA test plan & testing of injected header flattening / header-footer

jilladams commented 4 months ago

Testing context

Implementation ticket being tested: #17291 Who wrote the changes: @randimays

Where can testing be performed

[x] Local. WHY: Review Instances don't work. We can't figure out why.
[ ] Review instance on a PR
[ ] Tugboat. WHY:
[ ] Staging behind a flipper. WHY:

Scope of changes: high level

In #17291, Randi has made the following changes:

Used browser-rendered HTML as a starting to replace React code with basic HTML wherever possible, in both the header & footer
- on VA.gov
- in Injected header

Everything from the header and footer that can be clicked should be checked.

Affected components / what changed / what is new and should be tested

Updated HTML for both VA.gov & Injected header
- Header: Veterans Crisis line modal: updated HTML
- Header: Search bar - flattened
- Header: Megamenu, including behaviors like menu expansion, promo blocks appearing within right side of megamenu
- Header & Footer: Markup for all links has been updated
- Header: Govt header bar: " An official website of the United States government"
- Footer: VA logo behavior
Injected header: Login / Auth modal before logging in: under "Having trouble signing in?", fixed broken telephone web component
Styling across breakpoints
Cross-browser behavior: should check
- Win/ Mac
- Chrome, Safari, MS Edge
a11y functionality
Hover behavior

Only things that are still react are the Search bar and login modal

Gotchas / Exceptions

Logging in doesn't work locally
Megamenu Promo block images don't work locally. The dev branch is pulling from Staging, and these images are broken on Drupal staging as well.

Acceptance Criteria / Ownership

[ ] @jv-agile6 Build a test plan in https://docs.google.com/spreadsheets/d/1JzJ8iso1Ji4_PQgTykZ2nl-FhGwZ9Pp1YrFfHMKG4uo/edit#gid=0. Including:
- [ ] Prod behavior cases: https://va.gov
- [ ] Prod behavior cases on an injected header site: https://www.va.gov/health
[ ] Run test cases on a local build of Randi's #17291 branch
- [ ] Note failures in the spreadsheet and point to either a GH ticket or a Mural to demonstrate what you found
[x] @laflannery Requires accessibility review
[ ] @thejordanwood Requires design review
[ ] @chriskim2311 Code review
[ ] Production UAT

jilladams commented 4 months ago

@FranECross we realized today in scrum that in the spirit of our recent QA conversations we need to be very deliberate about how we go about testing Randi's injected header changes, to make sure we don't break anything in prod. We're working up this ticket and will need to figure out how to cover the work in it (most of which may happen while you're out this week.)

randimays commented 3 months ago

The pull request for the code split is ready for review: https://github.com/department-of-veterans-affairs/vets-website/pull/27590

As a reminder, the injected scenario can only be tested when running locally. But we also want to verify that no regressions were introduced to the VA.gov header/footer. This can be checked on the review instance in the PR.

randimays commented 3 months ago

Megamenu Promo block images don't work locally. The dev branch is pulling from Staging, and these images are broken on Drupal staging as well.

I was able to get the promo block images to show up after some metaphorical tree shaking on content-build (maybe cached Drupal assets?). It may be a toss-up whether it works for other folks, but the promo block info is in my screenshots in the PR description.

jilladams commented 3 months ago

@jv-agile6 is completing test plan for mobile steps & what injected does on prod vs. VA.gov @chriskim2311 will run the test cases for injection locally @laflannery / @thejordanwood will divide the modernized testing on RI

laflannery commented 3 months ago

I have completed my testing, all my notes are in the test plan doc and related mural. Let me know if anything needs further clarifcation

thejordanwood commented 3 months ago

I've also completed testing and added my notes to the spreadsheet and Mural.

chriskim2311 commented 3 months ago

Completed testing and updated spreadsheet and added a few cards to the mural.

randimays commented 3 months ago

Update: I've addressed most of the feedback, but this one requires significant rework:

Unfortunately we'll have to go through the spreadsheet for testing again as I'll be changing most of the code.

jilladams commented 3 months ago

Mid-sprint: testing will repeat, timing to close for end of sprint will depend on re-verification.

jilladams commented 3 months ago

Thread with more details on the rework / plan of record: https://dsva.slack.com/archives/C03LFSPGV16/p1720028486617809

randimays commented 3 months ago

@chriskim2311 @thejordanwood @laflannery I've completed the refactor and addressing the initial wave of feedback. The PR is now ready for your review again 🥳

CC @FranECross @jilladams @Agile6MSkinner

The screenshots below are intentional changes / differences; they were defects in Teamsites that have been fixed to match VA.gov.

Round 1 Feedback

laflannery commented 3 months ago

I made a Round 2 page in the spreadsheet and a round 2 section in the mural for our testing

thejordanwood commented 3 months ago

I've completed round 2 of testing and put my notes in the spreadsheet and Mural board.

laflannery commented 3 months ago

I am also done and my notes are added as well

chriskim2311 commented 3 months ago

Code review and local testing complete from my end, no additional notes/comments than already stated.

randimays commented 3 months ago

@chriskim2311 @thejordanwood @laflannery Injected header/footer is ready for Round 3 of testing! The changes were more isolated this time; I don't think it'll be necessary to click every link, but test as you see fit.

@chriskim2311 here's the only commit of the changes made since the last round: https://github.com/department-of-veterans-affairs/vets-website/pull/27590/commits/75b70e424652826d19a98b0bc4f759c1b676c8fd

Here's what's changed since last time

Login modal removed and replaced with a link to https://www.va.gov/my-va (Slack thread for context)
Fixes:
- Crisis Line Modal opening/closing appropriately
- Focus behavior for mobile mega menu (click a link, click "Back to menu," focus lands back on the originally clicked link)
- Getting promo blocks to show up correctly locally
- Width of mega menu on tablet and desktop (with/without promo blocks)
- Gray text on Veterans Crisis Line banner for the benefits.va.gov/benefits page
- Height of mobile search button
- Desktop mega menu active behavior:

Regular header/footer: removed the special TeamSites sign in button vs. link handling; please test regular header/footer sign in modal (that it appears)

laflannery commented 3 months ago

@randimays (and others for awareness who are retesting), I went through the issues we found and for the most part everything was resolved. I found 1 item that I still saw and one new item on the promos.

Preexisting:
- The submenus still remain open after I have closed and reopened the main mobile menu, this is different behavior to prod.
- Direct Mural link - Number 4 in this section
New:
- Now that I can see the promos, some of the longer ones do not fit on the Benefits site. But they do on the other sites (health, CEM)
- Direct Mural link

randimays commented 3 months ago

@laflannery Addressed those issues in the latest commit that is pushed up to the branch: https://github.com/department-of-veterans-affairs/va.gov-cms/issues/18358#issuecomment-2239712724

laflannery commented 3 months ago

@randimays Re-reviewed and I got nothing left for you!

chriskim2311 commented 3 months ago

@randimays PR approved, no issues in code changes or visually!

thejordanwood commented 2 months ago

@randimays Re-reviewed this and everything looks good. Approved!

jilladams commented 2 months ago

CLOSING. WOO.

randimays commented 2 months ago

@jilladams Should we leave this open to test the headers in staging and prod?

department-of-veterans-affairs / va.gov-cms