Added cypress to app (#695)

* added cypress to app

* add eslint plugin for cypress

* typescript fix

.eslintrc.json

@@ -1,3 +1,7 @@
 {
-  "extends": ["next", "plugin:prettier/recommended"]
+  "extends": [
+    "next",
+    "plugin:prettier/recommended",
+    "plugin:cypress/recommended"
+  ]
 }

cypress.config.js

@@ -0,0 +1,5 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  e2e: { baseUrl: 'http://localhost:3000' },
+})

cypress/e2e/app.cy.ts

@@ -0,0 +1,40 @@
+/* eslint-disable */
+// Disable ESLint to prevent failing linting inside the Next.js repo.
+// If you're using ESLint on your project, we recommend installing the ESLint Cypress plugin instead:
+// https://github.com/cypress-io/eslint-plugin-cypress
+
+beforeEach(() => {
+  cy.visit('/')
+})
+
+describe('app page loads', () => {
+  it('displays the index page', () => {
+    cy.location('pathname').should('equal', '/')
+  })
+
+  it('redirects to / when accessing /en', () => {
+    cy.visit('/en')
+    cy.location('pathname').should('equal', '/')
+  })
+
+  it('redirects to / when accessing /fr', () => {
+    cy.visit('/fr')
+    cy.location('pathname').should('equal', '/')
+  })
+
+  it('should have correct title', () => {
+    cy.title().should(
+      'eq',
+      "Passport Application Status Checker | Vérificateur de l'état d'une demande de passeport - Canada.ca"
+    )
+  })
+
+  it('has no detectable a11y violations on load', () => {
+    cy.injectAxe()
+    cy.wait(500)
+    cy.checkA11y()
+  })
+})
+
+// Prevent TypeScript from reading file as legacy script
+export {}

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/support/commands.ts

@@ -0,0 +1,28 @@
+// ***********************************************
+// 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) => { ... })
+
+// Prevent TypeScript from reading file as legacy script
+export {}

cypress/support/e2e.ts

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

cypress/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "cypress-axe", "node"]
+  },
+  "include": ["**/*.ts"]
+}

package.json

@@ -11,10 +11,15 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "cypress": "cypress open",
+    "cypress:run": "cypress run",
+    "e2e": "start-server-and-test dev http://localhost:3000 cypress",
+    "test:e2e": "start-server-and-test dev http://localhost:3000 cypress:run",
     "test:unit": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
     "test:ci": "jest --ci --coverage --silent",
+    "test": "yarn run lint && yarn run test:e2e && yarn run test:unit",
     "prepare": "husky install",
     "reformat": "prettier --write .",
     "run-scraper": "ts-node utils/api/scrapers/_main.ts"
@@ -42,15 +47,21 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.4",
+    "@types/cypress": "^1.1.3",
     "@types/jest": "^27.5.1",
     "@types/lodash": "^4.14.181",
     "@types/node": "^17.0.23",
     "@types/react": "^17.0.42",
     "@types/testing-library__jest-dom": "^5.14.3",
     "autoprefixer": "^10.4.4",
+    "axe-core": "^4.7.0",
+    "cypress": "12.9.0",
+    "cypress-axe": "^1.4.0",
+    "cypress-multi-reporters": "^1.6.3",
     "eslint": "^8.17.0",
     "eslint-config-next": "^12.1.4",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-cypress": "^2.13.2",
     "eslint-plugin-prettier": "^4.0.0",
     "husky": "^7.0.4",
     "jest": "^27.5.1",
@@ -59,6 +70,7 @@
     "node-mocks-http": "^1.11.0",
     "postcss": "^8.4.12",
     "prettier": "^2.6.2",
+    "start-server-and-test": "^2.0.0",
     "string.prototype.replaceall": "^1.0.6",
     "tailwindcss": "^3.0.23",
     "typescript": "^4.6.3"

tsconfig.json

@@ -15,6 +15,6 @@
     "isolatedModules": true,
     "jsx": "preserve"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "cypress.config.js"],
   "exclude": ["node_modules"]
 }