feat: setup Cypress (#136)

* feat(cypress): setup cypress with Next.js

* ci(cypress): run cypress on pull requests

* refactor(cypress): migrate from tsconfig.json to .eslintrc.json

* ci: update job names

* ci(cypress): save cypress artifacts

* fix(analytics): fix analytics extra script html tags

.github/workflows/commitlint.yml

@@ -4,6 +4,7 @@ on: pull_request
 
 jobs:
   lint:
+    name: Lint commit messages
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

.github/workflows/lint.yml

@@ -4,6 +4,7 @@ on: pull_request
 
 jobs:
   code:
+    name: Lint code
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

.github/workflows/release.yml

@@ -7,6 +7,7 @@ on:
 
 jobs:
   release:
+    name: Semantic Release
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

.github/workflows/tests.yml

@@ -0,0 +1,44 @@
+name: Tests
+
+on: pull_request
+
+jobs:
+  wait_deploy:
+    name: Wait Vercel Deploy
+    runs-on: ubuntu-latest
+    outputs:
+      preview_url: ${{ steps.waitForVercelPreviewDeployment.outputs.url }}
+    steps:
+      - name: Wait for Vercel preview deployment to be ready
+        uses: patrickedqvist/wait-for-vercel-preview@master
+        id: waitForVercelPreviewDeployment
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          max_timeout: 120
+
+  test_e2e:
+    name: Run Cypress
+    needs: wait_deploy
+    runs-on: ubuntu-16.04
+    steps:
+      - uses: actions/checkout@v2
+      - name: Run Cypress
+        uses: cypress-io/github-action@v1
+        with:
+          config: baseUrl=${{ needs.wait_deploy.outputs.preview_url }}
+          install: false # We test a live preview URL, no need to install packages
+      # after the test run completes
+      # store videos and any screenshots
+      # NOTE: screenshots will be generated only if E2E test failed
+      # thus we store screenshots only on failures
+      - uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+      # Test run video was always captured, so this action uses "always()" condition
+      - uses: actions/upload-artifact@v2
+        if: always()
+        with:
+          name: cypress-videos
+          path: cypress/videos

cypress.json

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

cypress/.eslintrc.json

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

cypress/fixtures/example.json

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

cypress/integration/sample.spec.js

@@ -0,0 +1,7 @@
+/// <reference types="cypress" />
+
+describe('My First Test', () => {
+	it('Visits the Favycon', () => {
+		cy.visit('/')
+	})
+})

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` 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

@@ -39,7 +39,8 @@
 		"storybook": "start-storybook -s ./public -p 6006",
 		"storybook:build": "build-storybook -s ./public",
 		"commit": "git-cz",
-		"chromatic": "chromatic --build-script-name=storybook:build"
+		"e2e": "start-test dev 3000 cy:open",
+		"cy:open": "cypress open"
 	},
 	"dependencies": {
 		"@fiahfy/ico-convert": "0.0.7",
@@ -97,12 +98,14 @@
 		"babel-plugin-prismjs": "2.0.1",
 		"babel-preset-react-app": "9.1.2",
 		"commitizen": "4.1.2",
+		"cypress": "4.9.0",
 		"cz-conventional-changelog": "3.2.0",
 		"dotenv": "8.2.0",
 		"eslint": "6.8.0",
 		"eslint-config-prettier": "6.11.0",
 		"eslint-config-react": "1.1.7",
 		"eslint-config-react-app": "5.2.1",
+		"eslint-plugin-cypress": "2.11.1",
 		"eslint-plugin-flowtype": "4.7.0",
 		"eslint-plugin-import": "2.21.2",
 		"eslint-plugin-jsx-a11y": "6.3.1",
@@ -117,6 +120,7 @@
 		"sass": "1.26.9",
 		"sass-loader": "8.0.2",
 		"semantic-release": "17.0.8",
+		"start-server-and-test": "1.11.0",
 		"stylelint": "13.6.1",
 		"stylelint-config-css-modules": "2.2.0",
 		"stylelint-config-prettier": "8.0.2",

pages/_document.tsx

@@ -13,12 +13,10 @@ class MyDocument extends Document {
 						<script
 							dangerouslySetInnerHTML={{
 								__html: `
-							<script>
 								window.dataLayer = window.dataLayer || [];
 								function gtag() { dataLayer.push(arguments); }
 								gtag('js', new Date());
 								gtag('config', 'UA-171039315-1', { 'anonymize_ip': true });
-							</script>
 							`,
 							}}
 						/>

tsconfig.json

@@ -20,5 +20,5 @@
 		"baseUrl": "."
 	},
 	"exclude": ["node_modules"],
-	"include": ["**/*.ts", "**/*.tsx", "./*.js", "./public/**/*.js"]
+	"include": ["**/*.ts", "**/*.tsx", "./*.js", "./public/**/*.js", "./cypress/**/*.js"]
 }