feat(#23): update cypress, tests and workflow

.github/workflows/ci.yml

@@ -48,8 +48,14 @@ jobs:
       - name: Run linting 🔎
         run: cd nuxt && yarn lint
 
-      - name: Run tests 🧪
-        run: cd nuxt && yarn test
+      - name: Run Jest tests 🧪
+        run: cd nuxt && yarn test:jest
+
+      - name: Run Cypress tests 🧪
+        uses: cypress-io/github-action@v2
+        with:
+          start: npm serve
+          working-directory: nuxt
 
       - uses: codecov/codecov-action@v2
         with:

nuxt/.gitignore

@@ -16,6 +16,10 @@ pids
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
 
+# Cypress test artefacts
+cypress/screenshots
+cypress/videos
+
 # Coverage directory used by tools like istanbul
 coverage
 

nuxt/cypress.json

@@ -1,4 +1,5 @@
 {
-  "testFiles": "**/*.yarn .js",
-  "componentFolder": "components"
+  "baseUrl": "http://localhost:3000",
+  "componentFolder": "components",
+  "testFiles": "**/*.{feature,features}"
 }

nuxt/cypress/integration/Homepage.feature

@@ -0,0 +1,5 @@
+Feature: Homepage
+
+  Scenario: Anonymous user visits the homepage
+    Given I visit the homepage
+    Then I see "#__nuxt" element

nuxt/cypress/integration/Homepage/index.js

@@ -0,0 +1,5 @@
+/* globals cy */
+import { Given, Then } from 'cypress-cucumber-preprocessor/steps'
+
+Given('I visit the homepage', () => cy.visit('/'))
+Then('I see "#__nuxt" element', () => cy.get('#__nuxt').should('exist'))

nuxt/cypress/plugins/index.js

@@ -1,5 +1,6 @@
 const { startDevServer } = require('@cypress/webpack-dev-server')
 const { getWebpackConfig } = require('nuxt')
+const cucumber = require('cypress-cucumber-preprocessor').default
 
 module.exports = (on, config) => {
   on('dev-server:start', async (options) => {
@@ -10,5 +11,7 @@ module.exports = (on, config) => {
     })
   })
 
+  on('file:preprocessor', cucumber())
+
   return config
 }

nuxt/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) => { ... })

nuxt/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')

nuxt/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "build": "nuxt build",
+    "cy:run": "cypress run",
     "deploy": "npx netlify-cli deploy -d ./dist",
     "dev": "nuxt",
     "generate": "nuxt generate",
@@ -13,9 +14,15 @@
     "lint": "yarn lint:js && yarn lint:style && yarn lint:prettier",
     "lintfix": "prettier --write --list-different . && yarn lint:js --fix && yarn lint:style --fix",
     "prepare": "cd .. && husky install nuxt/.husky",
+    "serve": "yarn generate && yarn start",
     "start": "nuxt start",
     "storybook": "nuxt storybook",
-    "test": "jest"
+    "test:cy": "start-server-and-test serve http://localhost:3000 cy:run",
+    "test:jest": "jest",
+    "test": "yarn test:jest && yarn test:cy"
+  },
+  "cypress-cucumber-preprocessor": {
+    "nonGlobalStepDefinitions": true
   },
   "lint-staged": {
     "*.{js,vue}": "eslint --cache",
@@ -47,6 +54,7 @@
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "^27.4.5",
     "cypress": "^9.2.0",
+    "cypress-cucumber-preprocessor": "^4.3.1",
     "eslint": "^8.6.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-nuxt": "^3.1.0",
@@ -58,10 +66,12 @@
     "postcss": "8.3.9",
     "postcss-html": "^1.3.0",
     "prettier": "^2.5.1",
+    "start-server-and-test": "^1.14.0",
     "stylelint": "^14.2.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-recommended-vue": "^1.1.0",
     "stylelint-config-standard": "^24.0.0",
-    "vue-jest": "^3.0.7"
+    "vue-jest": "^3.0.7",
+    "webpack-dev-server": "^4.7.2"
   }
 }