Interstitials

cypress/tests/font-settings.js

@@ -18,6 +18,7 @@ describe('Font Settings', () => {
     })
     cy.contains('Submit').click({ force: true })
     cy.contains('Get Started').click()
+    cy.contains('Start Voting').click()
     cy.contains('Settings').click()
     cy.contains('Adjust the following settings to meet your needs.')
       .should('have.css', 'font-size')

cypress/tests/scroll-buttons.js

@@ -8,6 +8,7 @@ describe('Scroll Buttons', () => {
     })
     cy.contains('Submit').click({ force: true })
     cy.contains('Get Started').click()
+    cy.contains('Start Voting').click()
     cy.contains('Next').click()
     cy.queryByText('↓ See More', { timeout: 0 }).should('not.be.visible')
     cy.contains('Next').click()
@@ -46,6 +47,7 @@ describe('Scroll Buttons', () => {
     })
     cy.contains('Submit').click({ force: true })
     cy.contains('Get Started').click()
+    cy.contains('Start Voting').click()
     cy.contains('Next').click()
     cy.queryByText('↓ See More', { timeout: 0 }).should('not.be.visible')
     cy.contains('Next').click()

cypress/tests/scroll-to-contest.js

@@ -1,4 +1,4 @@
-const clickThoughPages = new Array(21) // number of contests + pre-review screen for activation code 'VX.23.12'
+const clickThoughPages = new Array(20) // number of contests for activation code 'VX.23.12'
 
 describe('Review Page', () => {
   it('When navigating from contest, scroll to contest and place focus on contest.', () => {
@@ -8,9 +8,11 @@ describe('Review Page', () => {
     })
     cy.contains('Submit').click({ force: true })
     cy.contains('Get Started').click()
+    cy.contains('Start Voting').click()
     cy.wrap(clickThoughPages).each(() => {
       cy.contains('Next').click()
     })
+    cy.contains('Review Selections').click()
     cy.get('#contest-county-commissioners').click()
     cy.contains('Review Ballot').click()
     cy.get('#contest-county-commissioners').should('be.visible')

src/App.test.tsx

@@ -77,9 +77,12 @@ describe('loads election', () => {
 
     const { getByText } = render(<App />)
 
-    // Click Get Started
+    // Go to Voting Instructions
     fireEvent.click(getByText('Get Started'))
 
+    // Go to First Contest
+    fireEvent.click(getByText('Start Voting'))
+
     // First contest candidate should be selected
     const candidate1Input = getByText(presidentFirstCandidate.name)
       .closest('label')!
@@ -98,6 +101,7 @@ describe('can start over', () => {
     // TODO: replace next line with "Enter" keyDown on activation code input
     fireEvent.click(getByText('Submit'))
     fireEvent.click(getByText('Get Started'))
+    fireEvent.click(getByText('Start Voting'))
     fireEvent.click(getByText('Settings'))
     fireEvent.click(getByText('Start Over'))
     expect(getByText('Scan Your Activation Code')).toBeTruthy()
@@ -111,6 +115,7 @@ describe('can start over', () => {
     // TODO: replace next line with "Enter" keyDown on activation code input
     fireEvent.click(getByText('Submit'))
     fireEvent.click(getByText('Get Started'))
+    fireEvent.click(getByText('Start Voting'))
     fireEvent.click(getByText(contest0candidate0.name).closest('label')!)
     fireEvent.click(getByText('Settings'))
     fireEvent.click(getByText('Start Over'))
@@ -131,6 +136,7 @@ describe(`Can update settings`, () => {
     // TODO: replace next line with "Enter" keyDown on activation code input
     fireEvent.click(getByText('Submit'))
     fireEvent.click(getByText('Get Started'))
+    fireEvent.click(getByText('Start Voting'))
     fireEvent.click(getByText('Settings'))
     expect(
       (getByLabelText('Font Size') as HTMLInputElement).value === '1'

src/AppActivationCodes.test.tsx

@@ -79,9 +79,12 @@ it(`Displays alternate ballot`, () => {
   // TODO: replace next line with "Enter" keyDown on activation code input
   fireEvent.click(getByText('Submit'))
 
-  // Get Started Page
+  // Go to Voting Instructions
   fireEvent.click(getByText('Get Started'))
 
+  // Go to First Contest
+  fireEvent.click(getByText('Start Voting'))
+
   // Number of questions maps to expected length
   getByText('1 of 11')
 })

src/AppAlternateBallotStyle.test.tsx

@@ -40,9 +40,12 @@ it(`Displays alternate ballot`, async () => {
   // TODO: replace next line with "Enter" keyDown on activation code input
   fireEvent.click(getByText('Submit'))
 
-  // Get Started Page
+  // Go to Voting Instructions
   fireEvent.click(getByText('Get Started'))
 
+  // Go to First Contest
+  fireEvent.click(getByText('Start Voting'))
+
   // Number of questions maps to expected length
   getByText('1 of 11')
 })

src/AppContestMultiSeat.test.tsx

@@ -29,8 +29,13 @@ it(`Multi-seat Contest Flow`, () => {
 
   // TODO: replace next line with "Enter" keyDown on activation code input
   fireEvent.click(getByText('Submit'))
+
+  // Go to Voting Instructions
   fireEvent.click(getByText('Get Started'))
 
+  // Go to First Contest
+  fireEvent.click(getByText('Start Voting'))
+
   // click Next until getting to multi-seat contest
   while (!queryByText(multiSeatContest.title)) {
     fireEvent.click(getByText('Next'))
@@ -54,9 +59,10 @@ it(`Multi-seat Contest Flow`, () => {
     }, you must first unselect selected candidates.`
   )
 
-  while (!queryByText('Review Your Ballot Selections')) {
+  while (!queryByText('Review Your Selections')) {
     fireEvent.click(getByText('Next'))
   }
+  fireEvent.click(getByText('Review Selections'))
   expect(getByText(multiSeatCandidate0.name)).toBeTruthy()
   expect(getByText(multiSeatCandidate1.name)).toBeTruthy()
   expect(getByText(multiSeatCandidate2.name)).toBeTruthy()

src/AppContestOvervote.test.tsx

@@ -28,8 +28,13 @@ it(`Overvote triggers modal`, () => {
   })
   // TODO: replace next line with "Enter" keyDown on activation code input
   fireEvent.click(getByText('Submit'))
+
+  // Go to Voting Instructions
   fireEvent.click(getByText('Get Started'))
 
+  // Go to First Contest
+  fireEvent.click(getByText('Start Voting'))
+
   // Confirm Correct Contest
   getByText(contest0.title)
   expect(contest0.seats).toEqual(1)

src/AppContestWriteIn.test.tsx

@@ -31,8 +31,13 @@ it(`Write-In Candidate flow with single seat contest`, () => {
 
   // TODO: replace next line with "Enter" keyDown on activation code input
   fireEvent.click(getByText('Submit'))
+
+  // Go to Voting Instructions
   fireEvent.click(getByText('Get Started'))
 
+  // Go to First Contest
+  fireEvent.click(getByText('Start Voting'))
+
   // click Next until getting to multi-seat contest
   while (!queryByText(contestWithWriteIn.title)) {
     fireEvent.click(getByText('Next'))
@@ -80,9 +85,10 @@ it(`Write-In Candidate flow with single seat contest`, () => {
   fireEvent.click(getByText('Okay'))
 
   // Go to review page and confirm write in exists
-  while (!queryByText('Review Your Ballot Selections')) {
+  while (!queryByText('Review Your Selections')) {
     fireEvent.click(getByText('Next'))
   }
+  fireEvent.click(getByText('Review Selections'))
   expect(getByText('SAL')).toBeTruthy()
   expect(getByText('(write-in)')).toBeTruthy()
 

src/AppContestYesNo.test.tsx

@@ -30,8 +30,13 @@ it(`Yes/No Contest`, () => {
 
   // TODO: replace next line with "Enter" keyDown on activation code input
   fireEvent.click(getByText('Submit'))
+
+  // Go to Voting Instructions
   fireEvent.click(getByText('Get Started'))
 
+  // Go to First Contest
+  fireEvent.click(getByText('Start Voting'))
+
   // click Next until getting to multi-seat contest
   while (!queryByText(yesNoContest.title)) {
     fireEvent.click(getByText('Next'))
@@ -59,9 +64,10 @@ it(`Yes/No Contest`, () => {
   fireEvent.click(getByText('Okay'))
 
   // Go to review page and confirm write in exists
-  while (!queryByText('Review Your Ballot Selections')) {
+  while (!queryByText('Review Your Selections')) {
     fireEvent.click(getByText('Next'))
   }
+  fireEvent.click(getByText('Review Selections'))
   const reviewTitle = getByText(
     `${yesNoContest.section}, ${yesNoContest.title}`
   )

src/AppEndToEnd.test.tsx

@@ -131,9 +131,12 @@ it(`basic end-to-end flow`, async () => {
   currentCardValue = cardValueVoter
   await sleep(250)
 
-  // Go to First Contest
+  // Go to Voting Instructions
   fireEvent.click(getByText('Get Started'))
 
+  // Go to First Contest
+  fireEvent.click(getByText('Start Voting'))
+
   // Vote for President contest
   expect(container.firstChild).toMatchSnapshot()
   fireEvent.click(
@@ -150,14 +153,13 @@ it(`basic end-to-end flow`, async () => {
   expect(container.firstChild).toMatchSnapshot()
 
   // Go to Pre Review Screen
-  while (!queryByText('Pre Review Screen')) {
+  while (!queryByText('Review Your Selections')) {
     fireEvent.click(getByText('Next'))
   }
-  getByText('Pre Review Screen')
   expect(container.firstChild).toMatchSnapshot()
 
   // Go to Review Screen
-  fireEvent.click(getByText('Next'))
+  fireEvent.click(getByText('Review Selections'))
   getByText('Review Your Ballot Selections')
   expect(container.firstChild).toMatchSnapshot()
 
@@ -187,7 +189,7 @@ it(`basic end-to-end flow`, async () => {
 
   // Print Screen
   fireEvent.click(getByText('Next'))
-  getByText('Print your ballot')
+  getByText('Print your official ballot')
 
   // Test Print Ballot Modal
   fireEvent.click(getByText('Print Ballot'))
@@ -210,7 +212,7 @@ it(`basic end-to-end flow`, async () => {
   // Review and Cast Instructions
   // wait a little bit because the page transition is behind a setTimeout
   await sleep(100)
-  getByText('Verify and Cast Your Ballot')
+  getByText('Cast your printed ballot')
 
   // ===========================================================================
   // TODO: determine why test errors occur here when the following click is uncommented.

src/__snapshots__/AppContestOvervote.test.tsx.snap

@@ -15,6 +15,7 @@ exports[`Overvote triggers modal 1`] = `
 }
 
 .c3 {
+  width: 100%;
   max-width: 66ch;
   line-height: 1.2;
 }
@@ -32,7 +33,8 @@ exports[`Overvote triggers modal 1`] = `
 
 .c3 h3,
 .c3 p {
-  margin: 1rem 0;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
   font-size: 1rem;
 }
 
@@ -57,34 +59,6 @@ exports[`Overvote triggers modal 1`] = `
   margin-bottom: 0;
 }
 
-.c15 {
-  border: none;
-  border-radius: 0.25rem;
-  box-sizing: border-box;
-  background: rgb(211,211,211);
-  cursor: pointer;
-  padding: 0.4rem 0.7rem;
-  line-height: 1;
-  white-space: nowrap;
-  color: black;
-}
-
-.c14 {
-  border: none;
-  border-radius: 0.25rem;
-  box-sizing: border-box;
-  background: rgb(71,167,75);
-  cursor: pointer;
-  padding: 0.4rem 0.7rem;
-  line-height: 1;
-  white-space: nowrap;
-  color: #FFFFFF;
-}
-
-.c11 {
-  word-break: break-word;
-}
-
 .c13 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -103,7 +77,7 @@ exports[`Overvote triggers modal 1`] = `
   justify-content: space-between;
   border-bottom: 1px solid rgb(169,169,169);
   background: #455a64;
-  padding: 0.5rem;
+  padding: 0.25rem;
 }
 
 .c13 > *:first-child {
@@ -140,7 +114,7 @@ exports[`Overvote triggers modal 1`] = `
   order: -1;
   border-bottom: 1px solid rgb(169,169,169);
   background: #455a64;
-  padding: 0.5rem;
+  padding: 0.25rem;
 }
 
 .c17 > *:first-child {
@@ -156,6 +130,32 @@ exports[`Overvote triggers modal 1`] = `
   margin: 0.25rem;
 }
 
+.c15 {
+  border: none;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  background: rgb(211,211,211);
+  cursor: pointer;
+  padding: 0.75rem 1rem;
+  line-height: 1.25;
+  color: black;
+}
+
+.c14 {
+  border: none;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  background: rgb(71,167,75);
+  cursor: pointer;
+  padding: 0.75rem 1rem;
+  line-height: 1.25;
+  color: #FFFFFF;
+}
+
+.c11 {
+  word-break: break-word;
+}
+
 .c2 {
   margin: 0 auto;
   width: 100%;