FS-49: Adding cypress testing framework

README.md

@@ -50,6 +50,12 @@ You will see the build errors and lint warnings in the console.
 
 When you run the start script `yarn start`, code quality (linting) tests are automatically run and feedback is provided in the terminal.
 
+Cypress is installed for end-to-end testing. You can run the tests by running `yarn cypress`. This will open an Electron binary to run end-to-end testing. See `cypress` folder to view tests. 
+
+**Note**: Cypress is testing the following path, to run the test suites: `http://localhost:3000`. This is set at `cypress.json` in the root folder.
+
+For more information on Cypress, see here: https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Cypress-Can-Be-Simple-Sometimes
+
 ## Code quality
 
 ### Linting

cypress.json

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://localhost:3000"
+}

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"
+}

cypress/integration/app.test.js

@@ -0,0 +1,27 @@
+// <reference types="cypress" />
+
+describe('App is loading', () => {
+  it('Verify Federated Search App is loading basic markup.', () => {
+    cy.visit('/');
+    cy.get('#fs-root');
+
+    // Text field search.
+    cy.contains('Enter search term:');
+    cy.get('.fs-search-form__input');
+    cy.get('.fs-search-form__submit');
+
+    // Sort by field.
+    cy.contains('Sort By');
+    cy.get('#sort-by');
+
+    // Fitler fields.
+    cy.contains('Filter Results');
+    cy.get('form.fs-search-filters__form').find('.fs-search-accordion');
+    cy.get('.fs-search-filters').find('.fs-search-accordion__group-item');
+    cy.get('.fs-search-filters').find('.fs-search-accordion__content-item');
+    cy.get('.fs-search-filters__reset').should('be.visible');
+
+    // Default message text when app is loaded.
+    cy.get('.solr-search-results-container__prompt').contains('Please enter a search term.');
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package.json

@@ -16,6 +16,7 @@
     "babel-polyfill": "^6.26.0",
     "breakpoint-sass": "^2.7.0",
     "core-js": "^3.6.4",
+    "cypress": "^4.2.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-plugin-flowtype": "3.x",
@@ -52,7 +53,7 @@
     "copy-package": "cp -rf package.json build/static",
     "fix-media-path": "replace-x '../../static/media/' '../media/' ./build/static/css/*",
     "deploy": "scripts/deploy.js",
-    "test": "react-scripts test --env=jsdom",
+    "cypress": "cypress open",
     "eject": "react-scripts eject",
     "postinstall": "patch-package"
   },