(#692) Add cypress to ncids-js-testing

.github/workflows/workflow.yml

@@ -97,9 +97,9 @@ jobs:
         run: yarn test
         env:
           CI: true
-      ## Test a11y
-      - name: Run accessibility tests
-        run: yarn test:a11y
+      ## Test a11y and integration tests
+      - name: Test ncids-js-testing
+        run: yarn test:js
         env:
           CI: true
       ## Now test the css

package.json

@@ -33,7 +33,7 @@
 		"prepare": "lerna run prepare",
 		"test": "lerna run test",
 		"test:css": "lerna run test:css",
-		"test:a11y": "lerna run test:a11y",
+		"test:js": "lerna run test:js",
 		"test:css:generate": "lerna run test:css:generate"
 	},
 	"devDependencies": {

testing/ncids-js-testing/.gitignore

@@ -0,0 +1 @@
+/cypress/screenshots

testing/ncids-js-testing/README.md

@@ -19,3 +19,8 @@ $: yarn start
 $: yarn test-pa11y
 ```
 
+### integration testing
+```
+$: yarn test-it
+```
+

testing/ncids-js-testing/cypress.config.js

@@ -0,0 +1,14 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+	video: false,
+	e2e: {
+		// We've imported your old cypress plugins here.
+		// You may want to clean this up later by importing these.
+		setupNodeEvents(on, config) {
+			return require('./cypress/plugins/index.js')(on, config);
+		},
+		specPattern: 'cypress/integration/**/*.feature',
+		baseUrl: 'http://localhost:8080',
+	},
+});

testing/ncids-js-testing/cypress/integration/InnerPage.feature

@@ -0,0 +1,8 @@
+Feature: Inner page template
+
+	I want to open see the example inner page
+
+	Scenario: Opening a page template
+		Given The user navigates to "/inner-pages/inner-page.html"
+		Then The browser title is "Example Inner Page"
+		Then The page title is "Page heading (h1)"

testing/ncids-js-testing/cypress/integration/InnerPage/inner-page.js

@@ -0,0 +1,5 @@
+import { Given } from 'cypress-cucumber-preprocessor/steps';
+
+Given('The user navigates to {string}', (path) => {
+	cy.visit(path);
+});

testing/ncids-js-testing/cypress/integration/common/index.js

@@ -0,0 +1,9 @@
+import { Then } from 'cypress-cucumber-preprocessor/steps';
+
+Then(`The browser title is {string}`, (title) => {
+	cy.title().should('include', title);
+});
+
+Then('The page title is {string}', (title) => {
+	cy.get('h1').should('contain', title);
+});

testing/ncids-js-testing/cypress/plugins/index.js

@@ -0,0 +1,22 @@
+// ***********************************************************
+// 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)
+const cucumber = require('cypress-cucumber-preprocessor').default;
+
+module.exports = (on, config) => {
+	//require('@cypress/code-coverage/task')(on, config);
+	// `on` is used to hook into various events Cypress emits
+	// `config` is the resolved Cypress config
+	on('file:preprocessor', cucumber());
+
+	return config;
+};

testing/ncids-js-testing/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) => { ... })

testing/ncids-js-testing/cypress/support/e2e.js

@@ -0,0 +1,21 @@
+// ***********************************************************
+// 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';
+//import '@cypress/code-coverage/support';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

testing/ncids-js-testing/package.json

@@ -15,8 +15,11 @@
     "build": "cross-env NODE_ENV=production webpack --config config/webpack.prod.js",
     "start": "cross-env NODE_ENV=development webpack serve --progress --config config/webpack.dev.js",
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
-    "test:a11y": "start-server-and-test 'yarn start' 'http-get://localhost:8080/assets/images/logo_NCI_mobile.svg' 'yarn test-pa11y'",
-    "test-pa11y": "pa11y-ci"
+    "test:a11y": "start-server-and-test 'yarn start' 'http-get://localhost:8080' 'yarn test-pa11y'",
+    "test-pa11y": "pa11y-ci",
+    "test:it": "start-server-and-test 'yarn start' 'http-get://localhost:8080' 'yarn test-it'",
+    "test-it": "cypress run",
+    "test:js": "start-server-and-test 'yarn start' 'http-get://localhost:8080' 'yarn test-pa11y && yarn test-it'"
   },
   "bugs": {
     "url": "https://github.com/nciocpl/ncids/issues"
@@ -34,6 +37,8 @@
     "cross-env": "^7.0.3",
     "css-loader": "^6.5.1",
     "css-minimizer-webpack-plugin": "^3.4.1",
+    "cypress": "^10.9.0",
+    "cypress-cucumber-preprocessor": "^4.3.1",
     "eslint": "^7.32.0",
     "glob": "^8.0.3",
     "html-webpack-plugin": "^5.5.0",
@@ -70,5 +75,10 @@
   "dependencies": {
     "@nciocpl/ncids-css": "^1.0.0",
     "@nciocpl/ncids-js": "^1.0.0"
+  },
+  "cypress-cucumber-preprocessor": {
+    "nonGlobalStepDefinitions": true,
+    "stepDefinitions": "cypress/integration",
+    "commonPath": "cypress/integration/common"
   }
 }