Add e2e test with Cypress (#172)

* Add e2e test with Cypress

* Try with normal tsconfig.json

* Fix environments

* Avoid build

* Fix tests E2E

* Try with a build version

* Fix coverage

* Improve linting

* Fix cypress

* Enable always cypress records

* Add screenshots

.github/workflows/frontend-lint.yaml

@@ -54,7 +54,7 @@ jobs:
               run: yarn install --frozen-lockfile
 
             - name: Run ESLint to ensure Javascript coding standards
-              run: yarn run eslint components contexts types hooks layouts lib pages ui
+              run: yarn run eslint components contexts types hooks layouts lib pages ui tests
 
             - name: Run Prettier to ensure Javascript styling
               run: yarn run prettier --check **/*.{js,ts,tsx}

.github/workflows/frontend-test.yaml

@@ -17,8 +17,8 @@ on:
             - main
 
 jobs:
-    frontend-test:
-        name: Node ${{ matrix.node }}
+    frontend-unit-test:
+        name: Node ${{ matrix.node }} - Unit
 
         runs-on: ubuntu-latest
 
@@ -53,8 +53,64 @@ jobs:
             - name: Install all NPM dependencies
               run: yarn install --frozen-lockfile
 
-            - name: Execute Jest Javascript tests
+            - name: Execute Jest Unit tests
               run: yarn run test --coverage
 
             - name: Send coverage to Codecov
               uses: codecov/codecov-action@v2
+
+    frontend-e2e-test:
+        name: Node ${{ matrix.node }} - E2E
+
+        runs-on: ubuntu-latest
+
+        defaults:
+            run:
+                working-directory: frontend
+
+        strategy:
+            matrix:
+                node: ['14.15']
+
+        steps:
+            - name: Checkout the repository to Github workspace
+              uses: actions/checkout@v2
+
+            - name: Setup the Node environment
+              uses: actions/setup-node@v2
+              with:
+                  node-version: ${{ matrix.node }}
+
+            - name: Find Yarn cache directory
+              id: yarn-cache
+              run: echo "::set-output name=dir::$(yarn cache dir)"
+
+            - name: Recover Yarn cache to speed up builds
+              uses: actions/cache@v2
+              with:
+                  path: ${{ steps.yarn-cache.outputs.dir }}
+                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+                  restore-keys: ${{ runner.os }}-yarn-
+
+            - name: Install all NPM dependencies
+              run: yarn install --frozen-lockfile
+
+            - name: Execute Cypress E2E tests
+              uses: cypress-io/github-action@v2
+              with:
+                install: false
+                build: yarn run build-e2e
+                start: yarn run start-e2e
+                wait-on: 'http://localhost:3000'
+                parallel: true
+                record: true
+                working-directory: frontend
+              env:
+                CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+                GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+                CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
+
+            - name: Send coverage to Codecov
+              uses: codecov/codecov-action@v2
+              with:
+                  file: coverage/clover.xml

frontend/.babelrc

@@ -3,6 +3,9 @@
   "env": {
     "test": {
       "plugins": ["transform-dynamic-import"]
+    },
+    "e2e": {
+      "plugins": ["istanbul"]
     }
   },
   "plugins": [["styled-components", { "ssr": true }]]

frontend/.gitignore

@@ -12,6 +12,8 @@
 
 # testing
 .coverage
+.nyc_output
+coverage
 
 # next.js
 /.next/
@@ -35,3 +37,7 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
+
+# cypress
+tests/e2e/screenshots
+tests/e2e/videos

frontend/.nycrc

@@ -0,0 +1,14 @@
+{
+  "all": true,
+  "reporter": [
+    "html",
+    "clover"
+  ],
+  "exclude": [
+    "**/__setups__/**",
+    "**/__tests__/**",
+    "**/public/vendor/**",
+    "**/{jest,next,prettier}.config.js",
+    "**/**.d.ts"
+  ]
+}

frontend/.prettierignore

@@ -10,4 +10,7 @@
 *.json
 *.min.css
 *.module.css
-node_modules/*
+node_modules
+coverage
+.next
+.coverage

frontend/cypress.json

@@ -0,0 +1,15 @@
+{
+  "baseUrl": "http://localhost:3000/",
+  "testFiles": "**/*.feature",
+  "fixturesFolder": "tests/e2e/fixtures",
+  "integrationFolder": "tests/e2e/features",
+  "pluginsFile": "tests/e2e/plugins",
+  "screenshotsFolder": "tests/e2e/screenshots",
+  "supportFile": "tests/e2e/support",
+  "videosFolder": "tests/e2e/videos",
+  "env": {
+    "codeCoverage": {
+      "url": "/api/__coverage__"
+    }
+  }
+}

frontend/jest.config.js

@@ -18,6 +18,10 @@ module.exports = {
     "**/*.{js,jsx,ts,tsx}",
     "!**/node_modules/**",
     "!**/.coverage/**",
+    "!**/__setups__/**",
+    "!**/public/vendor/**",
+    "!**/tests/**",
+    "!**/{jest,next,prettier}.config.js"
   ],
   moduleNameMapper: {
     '\\.(css|less|scss|sss|styl)$': '<rootDir>/node_modules/jest-css-modules',

frontend/package.json

@@ -4,14 +4,22 @@
   "scripts": {
     "dev": "NODE_OPTIONS='--inspect' next dev",
     "build": "next build",
+    "build-e2e": "NODE_ENV=e2e next build",
     "start": "next start",
+    "start-e2e": "NODE_ENV=e2e next start",
     "build-start": "next build && next start",
     "design-tokens": "design-tokens",
     "test": "jest --env=jsdom",
     "test-watch": "jest --watch --env=jsdom",
     "prettify": "prettier --write **/*.{js,ts,tsx}",
-    "lint:js": "eslint components contexts types hooks layouts lib pages ui",
-    "lint:fix": "eslint components contexts types hooks hocs layouts lib pages types ui --fix"
+    "lint:js": "eslint components contexts types hooks layouts lib pages ui tests",
+    "lint:fix": "eslint components contexts types hooks hocs layouts lib pages types ui tests --fix",
+    "test:e2e:dev": "cypress open",
+    "test:e2e:run": "cypress run"
+  },
+  "cypress-cucumber-preprocessor": {
+    "nonGlobalStepDefinitions": true,
+    "stepDefinitions": "tests/e2e/features"
   },
   "dependencies": {
     "@apollo/client": "3.3.18",
@@ -46,14 +54,20 @@
     "yup": "0.32.9"
   },
   "devDependencies": {
+    "@cypress/code-coverage": "3.9.12",
     "@runroom/design-tokens": "1.0.0",
     "@runroom/npm-scripts": "1.0.8",
     "@svgr/webpack": "^6.0.0",
+    "@testing-library/cypress": "8.0.2",
     "@testing-library/jest-dom": "5.14.1",
     "@testing-library/react": "12.1.2",
+    "@types/cypress-cucumber-preprocessor": "4.0.1",
     "@types/jest": "27.0.2",
     "@typescript-eslint/eslint-plugin": "4.28.5",
+    "babel-plugin-istanbul": "6.1.1",
     "babel-plugin-transform-dynamic-import": "2.1.0",
+    "cypress": "9.3.1",
+    "cypress-cucumber-preprocessor": "4.3.1",
     "eslint": "7.31.0",
     "eslint-config-next": "11.0.1",
     "eslint-config-prettier": "8.3.0",
@@ -64,6 +78,7 @@
     "jest-canvas-mock": "2.3.1",
     "jest-css-modules": "2.1.0",
     "jest-next-dynamic": "1.0.1",
+    "nyc": "15.1.0",
     "prettier": "2.3.2"
   }
 }

frontend/pages/api/__coverage__.ts

@@ -0,0 +1,10 @@
+/*!
+ * This file is part of the Stooa codebase.
+ *
+ * (c) 2020 - present Runroom SL
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+export { default } from '@cypress/code-coverage/middleware/nextjs';

frontend/tests/e2e/features/common/index.ts

@@ -0,0 +1,28 @@
+/*!
+ * This file is part of the Stooa codebase.
+ *
+ * (c) 2020 - present Runroom SL
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import { Then, When } from 'cypress-cucumber-preprocessor/steps';
+
+When('navigates to {string}', (url = '') => {
+  cy.visit(url, { timeout: 10000 });
+});
+
+When('clicks on {string}', (text = '') => {
+  cy.findAllByRole('link', { name: text }).first().click({ force: true });
+});
+
+Then('sees {string}', (text = '') => {
+  cy.findByText(text).should('be.visible');
+
+  cy.screenshot();
+});
+
+Then('gets redirect to {string}', (url = '') => {
+  cy.location('pathname', { timeout: 10000 }).should('eq', url);
+});

frontend/tests/e2e/features/home.feature

@@ -0,0 +1,13 @@
+Feature: Home
+  As a Stooa user
+  I can access the Home page
+
+  Scenario: User can see the Home page
+    When navigates to "/"
+    Then sees "The online fishbowl tool"
+
+  Scenario: User will be redirect to register when trying to create a fishbowl
+    When navigates to "/"
+    And clicks on "Create a free fishbowl"
+    Then gets redirect to "/register"
+    And sees the register form

frontend/tests/e2e/features/home/home.ts

@@ -0,0 +1,16 @@
+/*!
+ * This file is part of the Stooa codebase.
+ *
+ * (c) 2020 - present Runroom SL
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import { Then } from 'cypress-cucumber-preprocessor/steps';
+
+Then('sees the register form', () => {
+  cy.findByRole('heading', { name: 'Register to get started' });
+
+  cy.screenshot();
+});

frontend/tests/e2e/plugins/index.js

@@ -0,0 +1,27 @@
+/*!
+ * This file is part of the Stooa codebase.
+ *
+ * (c) 2020 - present Runroom SL
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import { defaultOptions } from '@cypress/browserify-preprocessor';
+import coverage from '@cypress/code-coverage/task';
+import { sync } from 'resolve';
+
+const cucumber = require('cypress-cucumber-preprocessor').default // eslint-disable-line @typescript-eslint/no-var-requires
+
+export default function handler(on, config) {
+  coverage(on, config);
+
+  const options = {
+    ...defaultOptions,
+    typescript: sync('typescript', { baseDir: config.projectRoot })
+  };
+
+  on('file:preprocessor', cucumber(options));
+
+  return config;
+};

frontend/tests/e2e/support/index.ts

@@ -0,0 +1,11 @@
+/*!
+ * This file is part of the Stooa codebase.
+ *
+ * (c) 2020 - present Runroom SL
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import '@testing-library/cypress/add-commands';
+import '@cypress/code-coverage/support';

frontend/tsconfig.json

@@ -20,6 +20,7 @@
     "isolatedModules": true,
     "sourceMap": true,
     "jsx": "preserve",
+    "types": ["cypress", "@testing-library/cypress"],
     "typeRoots": ["./node_modules/@types/*", "./*.d.ts", "./types/*"]
   },
   "exclude": ["node_modules"],