Merge pull request #23 from nimblehq/feature/e2e-testing-cypress

Add Cypress for UI Test

Author: carryall

template.json

@@ -4,18 +4,22 @@
       "@testing-library/jest-dom": "5.11.4",
       "@testing-library/react": "11.1.0",
       "@testing-library/user-event": "12.1.10",
+      "@testing-library/cypress": "7.0.4",
       "@types/node": "12.0.0",
       "@types/react": "17.0.0",
       "@types/react-dom": "17.0.0",
       "@types/jest": "26.0.15",
       "typescript": "4.1.2",
       "web-vitals": "1.0.1",
       "axios": "0.21.1",
+      "cypress": "7.4.0",
+      "cypress-react-selector": "2.3.6",
       "eslint": "7.25.0",
       "prettier": "2.2.1",
       "@nimbl3/eslint-config-nimbl3": "2.1.1",
       "eslint-plugin-prettier": "3.4.0",
       "eslint-config-prettier": "8.3.0",
+      "eslint-plugin-cypress": "2.11.2",
       "eslint-plugin-import": "2.22.1",
       "eslint-plugin-jsx-a11y": "6.4.1",
       "eslint-plugin-react": "7.23.2",
@@ -31,12 +35,14 @@
       "stylelint-config-property-sort-order-smacss": "7.1.0"
     },
     "scripts": {
-      "lint": "eslint ./src --ext .ts,.tsx",
-      "lint:fix": "eslint ./src --ext .ts,.tsx --fix",
+      "lint": "eslint ./src ./cypress --ext .ts,.tsx",
+      "lint:fix": "eslint ./src ./cypress --ext .ts,.tsx --fix",
       "stylelint": "stylelint '**/*.scss'",
       "stylelint:fix": "stylelint '**/*.scss' --fix",
       "codebase:lint": "yarn lint && yarn stylelint",
-      "codebase:fix": "yarn lint:fix && yarn stylelint:fix"
+      "codebase:fix": "yarn lint:fix && yarn stylelint:fix",
+      "cypress:run": "cypress run",
+      "cypress:open": "cypress open"
     }
   }
 }

template/.eslintrc.js

@@ -21,6 +21,12 @@ module.exports = {
         'plugin:jest/recommended',
         'plugin:jest/style'
       ]
+    },
+    {
+      files: 'cypress/**/*.ts',
+      extends: [
+        'plugin:cypress/recommended'
+      ]
     }
   ],
   parser: '@typescript-eslint/parser',

template/README.md

@@ -35,6 +35,10 @@ All of the commands except `eject` will still work, but they will point to the c
 
 `yarn codebase:fix`: Fix auto-correctable ESLint and Stylelint errors together in the project.
 
+`yarn cypress:run`: Runs Cypress tests to completion. By default, cypress run will run all tests headlessly in the Electron browser. [Check options](https://docs.cypress.io/guides/guides/command-line#cypress-run)
+
+`yarn cypress:open`: Opens the Cypress Test Runner. [Check options](https://docs.cypress.io/guides/guides/command-line#cypress-open)
+
 ## Learn More
 
 You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

template/cypress.json

@@ -0,0 +1,11 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "testFiles": ["**/*.spec.ts"],
+  "cypress-react-selector": {
+    "root": "#root"
+  },
+  "retries": {
+    "runMode": 2,
+    "openMode": 0
+  }
+}

template/cypress/fixtures/.keep

@@ -0,0 +1,9 @@
+describe('Cypress', () => {
+  it('is working', () => {
+    expect(true).to.equal(true)
+  })
+
+  it('visits the app', () => {
+    cy.visit('/')
+  })
+})

template/cypress/integration/init.spec.ts

@@ -0,0 +1,3 @@
+/* eslint-disable */
+
+module.exports = (on, config) => {};

template/cypress/plugins/index.ts

@@ -0,0 +1 @@
+// Import commands from the commands folder.

template/cypress/support/commands.ts

@@ -0,0 +1 @@
+import 'cypress-react-selector'

template/cypress/support/commands/.keep

@@ -0,0 +1,4 @@
+// we are configuring the default lookout of data attribute of
+// cypress-testing-library(https://github.com/testing-library/cypress-testing-library).
+import { configure } from '@testing-library/cypress'
+configure({ testIdAttribute: 'data-test-id' })

template/cypress/support/component-selector.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+    }
+  }
+}

template/cypress/support/configure-testing-library.ts

@@ -0,0 +1,5 @@
+/* eslint-disable */
+
+import './commands'
+import './configure-testing-library'
+import './component-selector'

template/cypress/support/index.d.ts

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["node", "cypress", "@testing-library/cypress"],
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "esModuleInterop": true
+  },
+  "include": ["**/*.ts"],
+  "files": ["./support/index.d.ts"]
+}