feat(cypress): 🚀 added cypress integration (#72)

* feat(cypress): 🚀  added cypress integration

* fix(github-actions): 🐛  added cypress-io/github-action@v2

* chore(gh-actions): 🤖  specify headless chrome for the job

* fix(cypress): 🐛  also run the project

* fix(cypress): 🐛  use vercel deployment url

* fix(vercel-url): 🐛  await deployment url

* fix(base-url): 🐛  wrong variable name for deployment url

* fix(ci): 🐛  prefer cached modules

* feat(artifacts): 🚀  add screenshots (on failure) and videos

* refactor(test): 🔍  last part of title is env dependend

* fix(cache): 🐛  skip install if cache is found

* fix(naming): 🐛  job id naming

* fix(yarn): 🐛  not using yarn v2

* fix(cache): 🐛  more caching fixes

* fix(cache): 🐛  this is the way

* fix(seo): 🐛  adjustment to default seo markup

* fix(cache): 🐛  cache node_modules and run yarn always

* refactor(formatting): 🔍  adjusted formattig for the GA jobs

* fix(git-checkout): 🐛  make sure to checkout repo for each job

.github/workflows/test.yaml

@@ -1,9 +1,11 @@
 name: CI
+
 on: [pull_request]
+
 jobs:
-  test:
-    name: 'Test'
+  run-tests:
     runs-on: ubuntu-latest
+
     steps:
       - name: Checkout repo
         uses: actions/checkout@v2
@@ -15,12 +17,16 @@ jobs:
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
+        run: echo "::set-output name=dir::$(yarn cache dir)"
 
       - name: Cache yarn dependencies
         uses: actions/cache@v2
+        id: yarn-cache
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          path: |
+            ${{ steps.yarn-cache-dir-path.outputs.dir }}
+            node_modules
+            */*/node_modules
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
@@ -30,3 +36,35 @@ jobs:
 
       - name: Run tests
         run: yarn test
+
+  run-cypress:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Get deployment URL
+        uses: patrickedqvist/wait-for-vercel-preview@master
+        id: waitFor200
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          max_timeout: 300
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v2
+        with:
+          config: 'baseUrl=${{ steps.waitFor200.outputs.url }}'
+
+      # screenshots are only created on failure, thus we use the "failure()" condition
+      - uses: actions/upload-artifact@v1
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+
+      # videos are always created, thus we use the "always()" condition
+      - uses: actions/upload-artifact@v1
+        if: always()
+        with:
+          name: cypress-videos
+          path: cypress/videos

.gitignore

@@ -27,3 +27,7 @@ yarn-error.log*
 
 # storybook
 storybook-static
+
+# cypress
+cypress/videos
+cypress/screenshots

cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "viewport": "macbook-15"
+}

cypress/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  root: true,
+  plugins: ['eslint-plugin-cypress'],
+  extends: ['@storyofams/eslint-config-ams/web', 'plugin:cypress/recommended'],
+  env: { 'cypress/globals': true },
+};

cypress/e2e/home.spec.ts

@@ -0,0 +1,25 @@
+beforeEach(() => {
+  cy.visit('/');
+});
+
+describe('Home page general', () => {
+  it('should have valid seo tags', () => {
+    cy.title().should('contain', 'Home -');
+  });
+});
+
+describe('Home page mobile', () => {
+  beforeEach(() => {
+    cy.viewport('iphone-5');
+  });
+
+  it('should render the page', () => {});
+});
+
+describe('Home page desktop', () => {
+  beforeEach(() => {
+    cy.viewport('macbook-15');
+  });
+
+  it('should render the page', () => {});
+});

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/plugins/index.ts

@@ -0,0 +1,26 @@
+/// <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
+  Object.assign(config, {
+    integrationFolder: 'cypress/e2e',
+  });
+
+  return config;
+};

cypress/support/commands.ts

@@ -0,0 +1,2 @@
+import 'cypress-hmr-restarter';
+import '@testing-library/cypress/add-commands';

cypress/support/index.ts

@@ -0,0 +1,16 @@
+// ***********************************************************
+// 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';

cypress/tsconfig.json

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

package.json

@@ -14,7 +14,10 @@
     "storybook": "start-storybook -s ./public/static -p 6006",
     "build-storybook": "build-storybook",
     "semantic-release": "semantic-release",
-    "analyze": "ANALYZE=true next build"
+    "analyze": "ANALYZE=true next build",
+    "cy:install": "cypress install",
+    "cy:run": "cypress run",
+    "cy:open": "cypress open"
   },
   "dependencies": {
     "@next/bundle-analyzer": "^10.0.6",
@@ -64,6 +67,7 @@
     "@storybook/addons": "6.1.14",
     "@storybook/react": "6.1.14",
     "@storyofams/eslint-config-ams": "1.1.2",
+    "@testing-library/cypress": "^7.0.4",
     "@testing-library/jest-dom": "5.11.9",
     "@testing-library/react": "11.2.3",
     "@types/jest": "26.0.20",
@@ -82,10 +86,13 @@
     "babel-loader": "8.2.2",
     "babel-plugin-styled-components": "1.12.0",
     "babel-preset-react-app": "10.0.0",
+    "cypress": "^6.5.0",
+    "cypress-hmr-restarter": "^2.0.1",
     "cz-customizable": "git+https://github.com/storyofams/cz-customizable.git#6.3.1",
     "eslint": "7.18.0",
     "eslint-config-prettier": "7.1.0",
     "eslint-import-resolver-alias": "1.1.2",
+    "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-mdx": "1.8.2",