Merge pull request #136 from cfpb/560-add-cypress-tests

Add Cypress tests

.gitignore

@@ -15,6 +15,9 @@
 .env.development.local
 .env.test.local
 .env.production.local
+cypress.env.json
+cypress/videos
+cypress/snapshots
 
 npm-debug.log*
 yarn-debug.log*

cypress.json

@@ -0,0 +1,10 @@
+{
+  "chromeWebSecurity": false,
+  "pluginsFile": false,
+  "env": {
+    "HH_INSTITUTION": "FRONTENDTESTBANK9999",
+    "HH_AUTH_REALM": "hmda2",
+    "HH_AUTH_CLIENT_ID": "hmda2-api",
+    "HH_HOST": "http://localhost:3000"
+  }
+}

cypress/integration/institution.spec.js

@@ -0,0 +1,115 @@
+const {
+  HH_HOST,
+  HH_USERNAME,
+  HH_PASSWORD,
+  HH_INSTITUTION,
+  HH_AUTH_URL,
+  HH_AUTH_REALM,
+  HH_AUTH_CLIENT_ID
+} = Cypress.env()
+
+describe('HMDA Help', () => {
+  beforeEach(() => {
+    cy.logout({ root: HH_AUTH_URL, realm: HH_AUTH_REALM })
+    cy.login({
+      root: HH_AUTH_URL,
+      realm: HH_AUTH_REALM,
+      client_id: HH_AUTH_CLIENT_ID,
+      redirect_uri: HH_HOST,
+      username: HH_USERNAME,
+      password: HH_PASSWORD
+    })
+    cy.viewport(1600, 900)
+    cy.visit(HH_HOST)
+  })
+
+  it('Can update existing Institutions', () => {
+    // Search for existing Instititution
+    cy.findByLabelText("LEI").type(HH_INSTITUTION)
+    cy.findByText('Search institutions').click()
+    cy.findAllByText('Update')
+      .first()
+      .click()
+
+    const successMessage = `The institution, ${HH_INSTITUTION}, has been updated.`
+    const nameLabelText = 'Respondent Name'
+    const updateButtonText = 'Update the institution'
+    const testName = 'Cypress Test Name Update'
+
+    cy.findByLabelText(nameLabelText).then($name => {
+      const savedName = $name.attr('value')
+      expect($name.attr('value')).to.not.contain(testName)
+
+      // Change Respondent Name
+      cy.findByLabelText(nameLabelText)
+        .type('{selectAll}' + testName)
+        .blur()
+        .then($name2 => {
+          cy.findByText(updateButtonText)
+            .should('be.enabled')
+            .click()
+            .then(() => {
+              // Validate
+              cy.findAllByText(successMessage)
+                .should('exist')
+                .then(() => {
+                  expect($name2.attr('value')).to.contain(testName)
+                })
+            })
+        })
+
+      // Change it back
+      cy.findByLabelText(nameLabelText)
+        .type('{selectAll}' + savedName)
+        .blur()
+        .then(() => {
+          cy.findByText(updateButtonText)
+            .should('be.enabled')
+            .click()
+            .then(() => {
+              // Validate
+              cy.findAllByText(successMessage)
+                .should('exist')
+                .then(() => {
+                  expect($name.attr('value')).to.contain(savedName)
+                })
+            })
+        })
+    })
+  })
+
+  it('Can delete and create Institutions', () => {
+    const institution = 'MEISSADIATESTBANK001'
+    const year = '2020'
+
+    // Delete
+    cy.findByLabelText("LEI").type(`${institution}{enter}`)
+    cy.get('table.institutions tbody tr').first().get('td').first().should('contain', year)
+    cy.findAllByText('Delete').first().click()
+    cy.findAllByText('Yes').first().click()
+    cy.get('table.institutions tbody tr').first().get('td').first().should('not.contain', year)
+
+    // Create
+    cy.visit(HH_HOST)
+    cy.findByLabelText("LEI").type("MEISSADIATESTBANK001{enter}")
+    cy.findByText(`Add ${institution} for ${year}`).click()
+
+    cy.findByLabelText('Activity Year').select(year).should('have.value', year)
+    cy.findByLabelText('Respondent Name').type('MD Bank 1')
+    cy.findByLabelText('Email Domains').type('bank1.com')
+    cy.findByLabelText('Tax Id').type('53-0000001')
+    cy.findByLabelText('9 - Consumer Financial Protection Bureau (CFPB)').click()
+
+    cy.findByText('Show other fields').click()
+    cy.findByLabelText('RSSD').type('-1')
+    cy.findByLabelText('Parent ID RSSD').type('-1')
+    cy.findByLabelText('Assets').type('-1')
+    cy.findByLabelText('Top Holder ID RSSD').type('-1')
+
+    cy.findByText('Add the institution')
+      .should('be.enabled')
+      .click()
+
+    cy.findAllByText(`The institution, ${institution}, has been added!`).should('exist')
+  })
+})

cypress/support/index.js

@@ -0,0 +1,7 @@
+// ***********************************************************
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+import '@testing-library/cypress/add-commands'
+import 'cypress-keycloak';

package.json

@@ -27,6 +27,11 @@
     "react-router-dom": "4.3.1",
     "react-scripts": "3.4.1"
   },
+  "devDependencies": {
+    "@testing-library/cypress": "6.0.0",
+    "cypress": "4.11.0",
+    "cypress-keycloak": "1.5.0"
+  },
   "browserslist": [
     "Chrome >= 60",
     "Safari >= 10.1",

src/InputRadio.js

@@ -26,7 +26,7 @@ class InputRadio extends Component {
   render() {
     return (
       <React.Fragment>
-        <label>{this.props.label}</label>
+        <label htmlFor={this.props.id}>{this.props.label}</label>
         <ul className="unstyled-list">
           {this.props.options.map((option, i) => {
             return (

src/InputSelect.js

@@ -26,11 +26,11 @@ class InputSelect extends Component {
   render() {
     return (
       <React.Fragment>
-        <label>{this.props.label}</label>
+        <label htmlFor={this.props.id}>{this.props.label}</label>
         <select
           ref={this.props.innerRef}
           name={this.props.name}
-          id={this.props.inputId}
+          id={this.props.id}
           onChange={this.handleChange}
           disabled={this.props.disabled}
           value={this.state.value}

src/InputText.js

@@ -42,7 +42,7 @@ class InputText extends Component {
   render() {
     return (
       <React.Fragment>
-        <label>{this.props.label}</label>
+        <label htmlFor={this.props.id}>{this.props.label}</label>
         {this.state.error ? (
           <span className="input-error-message">{this.state.error}</span>
         ) : null}