VOTE-555 update cypress tests for new enhancements (#469)

usagov · Dec 12, 2023 · dc1955f · dc1955f
1 parent 7f5b166
commit dc1955f
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 23 deletions.
diff --git a/testing/cypress/e2e/frontEndTests/language-selector.cy.js b/testing/cypress/e2e/frontEndTests/language-selector.cy.js
@@ -11,7 +11,7 @@ describe('Test language selector', () => {
       url: page.route,
     })
       cy.get('[data-test="language-dropdown"]').click().get('[data-test="language-selection"]').should('be.visible').then(selection => {
-        cy.get(selection).get('[class="usa-language__submenu-item is-active"]').each(li => {
+        cy.get(selection).get('[class="usa-language__submenu-item nonvfont is-active"]').each(li => {
             cy.get(li).find('a').each(link => {
               cy.request({
                 url: link.prop('href'),

diff --git a/testing/cypress/e2e/frontEndTests/state-registration.cy.js b/testing/cypress/e2e/frontEndTests/state-registration.cy.js
@@ -1,23 +1,60 @@
 /// <reference types="Cypress" />
 
 describe('Validate state selection options', () => {
-  it('verify state selection is correct', () => {
+  beforeEach('visit page', () => {
     cy.visit('/')
-    cy.get('[data-test="state-selection"]').find('option:not([value="default"])').each(option => {
-      // * trimming white space 
-      const opn = option.text().trim()
-        cy.get(option).invoke('attr', 'value').then(value => {
-          // * getting the value that is in the option and saving it for later to be compared with the url
-          cy.wrap(value)
-          cy.get('[data-test="state-selection"]').select(opn)
-          cy.get('[data-test="register-button"]').click()
-          // * comparing the URL to the sorted value and then checking that the url is giving a status of 200
-          cy.url().should('contain', value).then(url => {
-            cy.request(url).then((response) => {
-              expect(response.status).to.eq(200)})
-          })
-          cy.get('[data-test="back-button"]').click()
-        })
-      })
-   })
-})
+  })
+
+  it('Verify that menu drop down is working', () => {
+    cy.get('[data-test="dropdown-btn"]').click()
+    cy.get('[data-test="state-list"]').should('be.visible')
+  })
+
+  it('Verify that type search is working', () => {
+    // * Check that 'South' renders expected states
+    cy.get('[data-test="state-selection"]').type('South')
+    cy.get('[data-test="state-list"]').should('contain', 'South Carolina', 'South Dakota')
+    cy.reload()
+    // * Check that 'Virgin' renders expected states
+    cy.get('[data-test="state-selection"]').type('Virgin')
+    cy.get('[data-test="state-list"]').should('contain', 'U.S. Virgin Island', 'Virginia', 'West Virginia')
+    cy.reload()
+    // * Check that 'Carolina' renders expected states
+    cy.get('[data-test="state-selection"]').type('Carolina')
+    cy.get('[data-test="state-list"]').should('contain', 'South Carolina', 'North Carolina')
+    cy.reload()
+    // * Check that 'mar' renders expected states
+    cy.get('[data-test="state-selection"]').type('mar')
+    cy.get('[data-test="state-list"]').should('contain', 'Maryland', 'Northern Mariana Islands')
+  })
+
+  it('Verify that user can navigate to state page from dropdown', () => {
+    // * Check Alaska
+    cy.get('[data-test="dropdown-btn"]').click()
+    cy.get('[data-test=state-list]').find('li').then(option => {
+      cy.get(option[1]).realClick()
+    })
+    cy.url().should('include', '/register/ak')
+    cy.get('[data-test="vote-logo"]').click()
+    // * Check American Samoa
+    cy.get('[data-test="dropdown-btn"]').click()
+    cy.get('[data-test=state-list]').find('li').then(option => {
+      cy.get(option[2]).realClick()
+    })
+    cy.url().should('include', '/register/as')
+    cy.get('[data-test="vote-logo"]').click()
+    // * Check Arkansas
+    cy.get('[data-test="dropdown-btn"]').click()
+    cy.get('[data-test=state-list]').find('li').then(option => {
+      cy.get(option[4]).realClick()
+    })
+    cy.url().should('include', '/register/ar')
+    cy.get('[data-test="vote-logo"]').click()
+    // * Check North Dakota
+    cy.get('[data-test="dropdown-btn"]').click()
+    cy.get('[data-test=state-list]').find('li').then(option => {
+      cy.get(option[36]).realClick()
+    })  
+    cy.url().should('include', '/register/nd')
+  })
+})
diff --git a/web/themes/custom/vote_gov/templates/paragraph/paragraph--registration-tool.html.twig b/web/themes/custom/vote_gov/templates/paragraph/paragraph--registration-tool.html.twig
@@ -26,14 +26,14 @@
               <label for="state-input">{{ content.field_form_heading | field_value }}</label>
               <div class="input-buttons-group">
                 <input type="text" class="state-input" id="state-input" autocomplete="off"
-                       placeholder="{{ content.field_placeholder | field_value }}">
+                       placeholder="{{ content.field_placeholder | field_value }}" data-test="state-selection">
                 <div class="input-control-container">
                   <button id="state-dropdown-btn" tabindex="-1" class="dropdown-btn" type="button"
-                          aria-hidden="true"></button>
+                          aria-hidden="true" data-test="dropdown-btn"></button>
                 </div>
               </div>
               <nav id="state-results-container" hidden>
-                <ul id="results-list">
+                <ul id="results-list" data-test="state-list">
                   {% set results = drupal_view_result('state_territory', 'block') %}
                   {% for result in results %}
                     {% set nodeID = result._entity.id() %}