feat(project): adding cypress into element plus (element-plus#5281)

* feat(project): adding cypress into element plus

- Introduce Cypress to Element Plus
- Add Action config for running Cypress automatically after workflow for build website done
- Add a base case for button.spec.ts
- Add cypress recordings and screenshots to gitignore
- Add Cypress into tsconfig.json for global typing intelligence
- Add scripts for running cypress

* - Update cpress.yml syntax error

* - Remove cypress from jest running collector

.env

@@ -0,0 +1 @@
+E2E_TEST_PORT=5001

.github/workflows/cypress.yml

@@ -0,0 +1,39 @@
+name: Cypress E2E testing
+
+on:
+  workflow_run:
+    workflows: ['Website Preview']
+    types: [completed]
+
+jobs:
+  cypress-run:
+    name: Cypress Run
+    runs-on: ubuntu-latest
+    container: cypress/browsers:node14.7.0-chrome84
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Download artifact
+        uses: dawidd6/action-download-artifact@v2
+        with:
+          workflow: ${{ github.event.workflow.id }}
+          run_id: ${{ github.event.workflow_run.id }}
+          name: docs
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: latest
+
+      - name: Install dependencies
+        run: pnpm i --frozen-lockfile
+
+      - name: Install serve
+        run: pnpm install serve -D -w
+
+      - name: Serve documentation site
+        run: pnpm exec serve docs -p 5001
+
+      - name: Run Cypress
+        run: npx cypress run

.gitignore

@@ -15,3 +15,5 @@ packages/element-plus/version.ts
 
 # local env files
 *.local
+cypress/screenshots/*
+cypress/videos/*

cypress.json

@@ -0,0 +1,4 @@
+{
+  "video": false,
+  "baseUrl": "http://localhost:5001/en-US/"
+}

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/integration/components/button.spec.ts

@@ -0,0 +1,10 @@
+context('ElButton', () => {
+  beforeEach(() => {
+    cy.visit('component/button.html')
+  })
+
+  it('should be able to render button on the screen', () => {
+    cy.screenshot()
+    cy.get('.el-button').should('have.lengthOf', 68)
+  })
+})

cypress/plugins/index.js

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/// <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}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (_on, _config) => {
+  // `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')

docs/package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "dev": "pnpm gen-locale && vitepress dev .",
     "build": "cross-env NODE_ENV=production && vitepress build .",
-    "serve": "cross-env NODE_ENV=production && vitepress serve .",
+    "serve": "cross-env NODE_ENV=production vitepress serve . --port 5001",
     "gen-locale": "rimraf .vitepress/i18n && sucrase-node .vitepress/build/crowdin-generate.ts",
     "crowdin-credentials": "sucrase-node .vitepress/build/crowdin-credentials.ts"
   },

jest.config.js

@@ -9,7 +9,7 @@ module.exports = {
   },
   setupFiles: ['./jest.setup.js'],
   testPathIgnorePatterns: ['/node_modules/', 'dist'],
-  modulePathIgnorePatterns: ['/node_modules/', 'dist'],
+  modulePathIgnorePatterns: ['/node_modules/', 'dist', 'cypress'],
   testEnvironment: 'jsdom',
   transform: {
     // Doesn't support jsx/tsx since sucrase doesn't support Vue JSX

package.json

@@ -12,6 +12,9 @@
   "scripts": {
     "cz": "git-cz",
     "test": "jest",
+    "prepare:e2e": "if [ ! -d \"docs/.vitepress/dist\" ]; then pnpm run docs:build; fi;",
+    "e2e": "cypress open",
+    "e2e:ci": "cypress run",
     "dev": "pnpm -C play dev",
     "gen": "bash ./scripts/gc.sh",
     "gen:version": "sucrase-node scripts/gen-version.ts",
@@ -87,6 +90,7 @@
     "chalk": "4.1.2",
     "components-helper": "1.0.5",
     "csstype": "2.6.19",
+    "cypress": "^9.2.0",
     "cz-conventional-changelog": "3.3.0",
     "esbuild": "0.14.11",
     "eslint": "8.6.0",