LG-14290- Add step indicator to How To Verify View

[gina-yamada]

🎫 Ticket

LG-14290 Eng: Add step indicator component to Opt-in page (How to Verify)

🛠 Summary of changes

• Add Step Indicator Component to How to Verify View
• Set current step as "Getting started"

📜 Testing Plan

• Step 1 Ensure the following variables are set to true in config.application.yml; in_person_proofing_opt_in_enabled and in_person_proofing_enabled
• Step 2 Start identity-idp and identity-oidc-sinatra severs. Enter Login via localhost:9292. Create an account. Step through the app to begin identity verification. Visit /verify/welcome and then /verify/agreement. Open the console. Continue on. Next you will land on /verify/how_to_verify.
• Step 3 Confirm you can see the step indicator on the page. Confirm you see the following 5 steps: Getting started, Verify your ID, Verify your information, Verify your phone number, Re-enter your password.
• Step 4 Confirm current step is Getting started
• Step 5 Confirm there are no errors in the console
• Step 6 Check that the step nav is responsive
• Step 7 Change the language to ensure the step nav is being translated for each language (Spanish, French, Chinese)
• Step 8 Visit /verify/how_to_verify from a different path (not coming from /verify/agreement)- ie: Click the 'Cancel' link at the bottom and then click on button 'No, keep going'. Confirm step 3 - step 6 is working as expected.
• Step 9 Visit /verify/how_to_verify from a different path (not coming from /verify/agreement) - ie: Click the 'Continue in person' button. Once on verify/document_capture (Verify your identity in person), confirm the step nav changed. (Find a Post Office, Verify your information, Verify your phone number, Re-enter your password, Go to the Post Office). Then click the 'Back' link on this page. You should be on /verify/how_to_verify again. Confirm step 3 - step 6 is working as expected.
• Step 10 Play around with getting to /verify/how_to_verify in other paths not mentioned for step 2, 8 or 9. I don't think there are other paths but double check. Goal is to confirm there are no errors and the correct step is selected from any entry point
• Step 11 Go to file app/controllers/idv/how_to_verify_controller.rb and set @selfie_required to true in method set_how_to_verify_presenter. Confirm Step nav displays on the page and that current step is Getting started
• Step 12 Go to file app/controllers/idv/how_to_verify_controller.rb and set @selfie_required to false in method set_how_to_verify_presenter. Confirm Step nav displays on the page and that current step is Getting started

👀 Screenshots

Before:

After:

After (Responsive):

After (Languages):

After (Biometrics):

[gina-yamada]

Thanks @KeithNava for the review!

[jennyverdeyen]

Testing steps all pass, code looks good to me!

[gina-yamada]

@sumiat There are screenshots above in the description. Thank you

[sumiat]

thanks @gina-yamada, looks good!

[aduth]

Conventionally, we don't include parentheses for RSpec BDD methods.

I would also personally expect the "it" parameterization to read as a human-readable sentence. Currently it lacks a verb of what "it" is doing.

Suggested change

	it('a step indicator with Getting started as the current step') do
	it 'renders a step indicator with Getting started as the current step' do

[gina-yamada]

@aduth Ahh, good eye! Thank you
Updates made here

[gina-yamada]

Updates merged in. Thanks for the review