initial commit for cypress framework along with several custom commands and tests (#1)

Author: tsyqe

.gitignore

@@ -0,0 +1,25 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.idea
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+cypress/videos
+cypress/screenshots
+
+# Ignore env local files
+.env*.local
+cypress.env.json

README.md

@@ -18,3 +18,28 @@ Runs the backend using json-server at [http://localhost:4000](http://localhost:4
 
 #### `npm run build`
 Builds the app for production to the `build` folder. Bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes. [Deployment info here](https://facebook.github.io/create-react-app/docs/deployment).
+
+## Tests
+These tests can be run against `localhost` as per above steps.  The tests are using [Cypress](https://www.cypress.io) E2E framework to execute.
+
+## Test Configuration
+Env variables are currently configured in `cypress.config.js` and additional configurations can be added as needed.  
+A `cypress.env.json` file can be created locally that will override values defined in `cypress.config.js` (in the `env` section).  
+Run configuration scripts can also be modified in `package.json` to run in other browsers or only running specific spec files.
+
+## Running Tests
+#### `npm ci`
+(requires [email protected])
+To pull down latest packages including the Cypress framework.
+
+#### `npm test`
+Currently configured to run in headless mode using Chrome browser.  
+Configuration can be changed to run with other browsers that are installed on the local machine by modifying the `scripts` in `package.json`.
+
+#### `npm run cy-open`
+To watch the tests run in a headful browser, this command will open up the Cypress UI application and a locally installed browser.  Useful for debugging and observing failures in real time or with the 'rewind' option.  Currently configured to use the Firefox browser.  
+Configuration can be changed to run with other browsers that are installed on the local machine by modifying the `scripts` in `package.json`.
+
+## Developing Tests
+Tests are located in `/cypress/e2e`. They are written in Javascript and can be run individually through the UI or in headless terminal.
+Custom commands have been created to target common page objects and actions and they can be viewed in `/cypress/support/commands.js`.

cypress.config.js

@@ -0,0 +1,13 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  env: {
+      mainUrl: 'http://localhost:3000',
+      apiUrl: 'http://localhost:4000'
+    }
+  },
+});

cypress/e2e/main.cy.js

@@ -0,0 +1,232 @@
+/// <reference types="cypress" />
+
+describe('Page Object Checks', () => {
+  beforeEach(() => {
+    cy.visit(Cypress.env('mainUrl'));
+
+  });
+
+  it('loads main search dashboard', () => {
+    cy.url().should('eq', 'http://localhost:3000/')
+    cy.title().should('eq', 'Biobot Search Example')
+    cy.get('.app-logo').should('exist')
+    cy.get('.app-header').contains('Welcome to the Biobot Test Kit Search App')
+    cy.get('.search-box-container').should('be.visible');
+  
+  });
+
+  it('should always display label Id placeholder text in the search box', () => {
+    cy.get('#mui-2-label').should('contain.text', 'Label Id')
+    cy.get('#mui-2').click()
+    cy.get('#mui-2-label').should('contain.text', 'Label Id')
+    cy.get('#mui-2').type('populate')
+    cy.get('#mui-2-label').should('contain.text', 'Label Id')
+    cy.get('#mui-2').clear()
+    cy.get('.app').click()
+    cy.get('#mui-2-label').should('contain.text', 'Label Id')
+  
+  });
+
+  it('should display search/clear buttons under correct circumstances', () => {
+    cy.getBySel('SearchIcon').should('exist')
+    cy.getBySel('CloseIcon').should('not.exist')
+    cy.get('#mui-2').type('populate')
+    cy.getBySel('CloseIcon').should('exist')
+    cy.get('#mui-2').clear()
+    cy.get('.app').click()
+    cy.getBySel('CloseIcon').should('not.exist')
+  
+  });
+
+  it('should display caption after populating search results', () => {
+    cy.addSample();
+    cy.successModalTrue();
+  
+    cy.get('caption')
+      .should('exist')
+      .contains('Table containing test kit shipping data, use the search bar above to search for your test kit');
+  
+  });
+
+  it('should display id and shipping columns after populating search results', () => {
+    cy.addSample();
+    cy.successModalTrue();
+    cy.get('.MuiTableHead-root')
+      .should('exist')
+      .and('contains.text', 'Label Id')
+      .and('contains.text', 'Shipping Tracking Code');
+  
+  });
+  
+});
+
+
+describe('Common Scenarios', () => {
+  beforeEach(() => {
+    cy.visit(Cypress.env('mainUrl'));
+
+  });
+
+  it('does exact search for random known id and confirms correct formatting', () => {
+      
+    cy.sampleByDataJson().then((sample) => 
+        cy.addSampleBySearch(sample)
+    );
+    cy.successModalTrue();
+    cy.resultsTrue();
+    cy.regexLabelId();
+    cy.regexTrackingId();
+  
+  });
+
+  it('does exact search for multiple random known ids and confirms correct formatting', () => {
+    //this can be modified to change the number of label ids we want to grab or even update it to always run through the entire list.
+    for (let i = 0; i < 5; i++) {
+      cy.sampleByDataJson().then((sample) => 
+        cy.addSampleBySearch(sample)
+      );
+    }
+    cy.successModalTrue();
+    cy.resultsTrue();
+    cy.regexLabelId();
+    cy.regexTrackingId();
+  
+  });
+
+  it('successfully populates a single kit id', () => {
+    cy.addSample();
+    cy.successModalTrue();
+    cy.resultsTrue();
+    cy.regexLabelId();
+    cy.regexTrackingId();
+  
+  });
+
+  it('successfully populates multiple kit ids', () => {
+    //pass in however many we want to populate here.
+    cy.addSample(5);
+    cy.successModalTrue();
+    cy.resultsTrue();
+    cy.regexLabelId();
+    cy.regexTrackingId();
+  
+  });
+
+  it('does partial search for known and existing kit id', () => {
+    cy.addSampleBySearch('007')
+    cy.successModalTrue();
+    cy.regexLabelId();
+    cy.regexTrackingId();
+   
+  });
+
+  it('does partial search for multiple known and existing kit ids', () => {
+    cy.addSampleBySearch('007')
+    cy.successModalTrue()
+    cy.addSampleBySearch('008')
+    cy.successModalTrue();
+    cy.regexLabelId();
+    cy.regexTrackingId();
+ 
+  });
+
+  it('dismiss modal after approximately 7 seconds', () => {
+    cy.addSample();
+    cy.successModalTrue();
+
+    cy.get('.Toastify__toast-container').should('exist')
+      //normally try to avoid waits with cypress, but the goal here was just to make sure modals will always remain visible for at least 7 seconds.
+      .wait(7000)
+      .should('not.exist');
+    
+  });
+
+  it('dimiss modal when user closes manually', () => {
+    cy.addSample();
+    cy.successModalTrue();
+
+    cy.get('.Toastify__toast-container').should('exist')
+    cy.get('.Toastify__close-button').click()
+    cy.get('.Toastify__toast-container').should('not.exist');
+    
+  });
+
+  it('clear button removes all previous results', () => {
+    cy.addSample(5);
+    cy.successModalTrue();
+    cy.addSampleBySearch('007');
+    cy.resultsTrue();
+
+    cy.get('.MuiButtonBase-root').click()
+    cy.get('.results-container').should('not.exist');
+  
+  });
+  
+});
+
+
+describe('Exercise API directly', () => {
+
+  it('gets an API response from shipping_data label_id', () => {
+    const labelId = '22-252-1407'
+    cy.request(Cypress.env('apiUrl') + '/shipping_data?label_id=' + labelId).as('apiReq') 
+    cy.get('@apiReq').then(
+      (response) => {
+        expect(response.status).to.eq(200)
+        expect(response.body[0]).to.have.property('id')
+        expect(response.body[0]).to.have.property('label_id', labelId)
+        expect(response.body[0]).to.have.property('shipping_tracking_code');
+      })
+  });
+  
+});
+
+
+describe('Error Scenarios', () => {
+  beforeEach(() => {
+    cy.visit(Cypress.env('mainUrl'));
+
+  });
+
+  it('displays error modal for no results found', () => {
+    cy.get('#mui-2').type('foo').type('{enter}')
+    cy.errorModalTrue();
+  
+  });
+
+  it('displays error modal when clicking search button without criteria', () => {
+    //was expecting there to be more built in elements that used the data-testid attribute, but discovered there weren't many as it stands.
+    //ideally we could add more of these data-testid attributes to help with maintenance.
+    cy.getBySel('SearchIcon').click()
+    cy.errorModalTrue();
+  
+  });
+
+  it('should generate and search for common bad strings', () => {
+    //this can be modified to change the number of bad strings we want to try here or even update it to always run through the entire list.
+    for (let i = 0; i < 5; i++) {
+      cy.badString().then((ns) => 
+        cy.addSampleBySearch(ns)
+      );
+    }
+  });
+
+  it('checks for common injections', () => {
+    //arbitrarily picked a few common injection tests using different quote characters.
+    cy.get('#mui-2').type(`‘ or 1=1;–`).type('{enter}')
+    cy.errorModalTrue();
+    cy.get('#mui-2').clear()
+    cy.get('#mui-2').type(`“ or 1=1;–`).type('{enter}')
+    cy.errorModalTrue();
+    cy.get('#mui-2').clear()
+    cy.get('#mui-2').type(`‘ or ‘abc‘=‘abc‘;–`).type('{enter}')
+    cy.errorModalTrue();
+    cy.get('#mui-2').clear()
+    cy.get('#mui-2').type(`‘ or ‘ ‘=‘ ‘;–`).type('{enter}')
+    cy.errorModalTrue();
+    cy.get('#mui-2').clear()
+  
+  });
+  
+});
+

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}