feat: split jest test and e2e test

.github/workflows/e2e.yaml

@@ -0,0 +1,55 @@
+name: E2E Tests
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+env:
+  NODE_VERSION: 18
+  PNPM_VERSION: 8.5.0
+  COVERAGE: false
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: ${{ env.PNPM_VERSION }}
+
+      - name: Install dependencies
+        run: pnpm install
+        shell: bash
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          component: true
+          build: pnpm run build
+          start: pnpm run start
+          browser: chrome
+
+      - name: Run Component Tests
+        run: |
+          echo "Starting component tests..."
+          pnpm test:components:parallel
+          echo "Component tests finished."
+
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v3
+        with:
+          token: cf9245e0-e136-4e21-b0ee-35755fa0c493
+          files: coverage/cypress/lcov.info
+          flags: appflowy_web_e2e
+          name: codecov-umbrella-e2e
+          fail_ci_if_error: true
+          verbose: true

.github/workflows/web_coverage.yaml

@@ -28,33 +28,30 @@ jobs:
           sudo rm -rf /opt/hostedtoolcache/codeQL
           sudo rm -rf ${GITHUB_WORKSPACE}/.git
           sudo rm -rf $ANDROID_HOME/ndk
+
       - name: setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VERSION }}
+
       - name: setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
           version: ${{ env.PNPM_VERSION }}
-      # Install pnpm dependencies, cache them correctly
-      # and run all Cypress tests
-      - name: Cypress run
-        uses: cypress-io/github-action@v6
-        with:
-          component: true
-          build: pnpm run build
-          start: pnpm run start
-          browser: chrome
+
+      - name: Install dependencies
+        run: pnpm install
+        shell: bash
 
       - name: Jest run
         run: |
           pnpm run test:unit
 
       - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v2
+        uses: codecov/codecov-action@v3
         with:
           token: cf9245e0-e136-4e21-b0ee-35755fa0c493
-          files: coverage/jest/lcov.info, coverage/cypress/lcov.info
+          files: coverage/jest/lcov.info
           flags: appflowy_web
           name: codecov-umbrella
           fail_ci_if_error: true

cypress.config.ts

@@ -1,4 +1,6 @@
 import { defineConfig } from 'cypress';
+import codeCoverageTask from '@cypress/code-coverage/task.js';
+import { execSync } from 'child_process';
 
 export default defineConfig({
   env: {
@@ -8,13 +10,12 @@ export default defineConfig({
   },
   watchForFileChanges: false,
   component: {
+    // src/components/editor/__tests__/blocks/Paragraph.cy.tsx
+    specPattern: 'src/**/__tests__/**/*.cy.tsx',
     devServer: {
       framework: 'react',
       bundler: 'vite',
     },
-    setupNodeEvents(on, config) {
-      return config;
-    },
     supportFile: 'cypress/support/component.ts',
   },
   chromeWebSecurity: false,

cypress/support/component.ts

@@ -12,11 +12,12 @@
 // You can read more here:
 // https://on.cypress.io/configuration
 // ***********************************************************
-import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
-import 'cypress-real-events';
 
-// Import commands.js using ES2015 syntax:
+// Import code coverage support first
 import '@cypress/code-coverage/support';
+
+import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
+import 'cypress-real-events';
 import 'cypress-real-events/support';
 import './commands';
 import './document';

multi-reporter-config.json

@@ -0,0 +1,3 @@
+{
+  "reporterEnabled": "cypress-parallel/json-stream.reporter.js, cypress-parallel/simple-spec.reporter.js"
+}

package.json

@@ -5,17 +5,22 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "dev:coverage": "cross-env COVERAGE=true vite",
     "build": "vite build",
     "lint": "tsc --noEmit --project tsconfig.web.json && eslint --ext .js,.ts,.tsx . --ignore-path .eslintignore.web",
     "start": "vite preview --port 3000",
     "css:variables": "node scripts/generateTailwindColors.cjs",
     "analyze": "cross-env ANALYZE_MODE=true vite build",
     "cypress:open": "cypress open",
+    "test:cy": "cypress run",
     "test": "pnpm run test:unit && pnpm run test:components",
-    "test:components": "cypress run --component --browser chrome --headless",
     "test:unit": "jest --coverage",
-    "test:cy": "cypress run",
-    "coverage": "pnpm run test:unit && pnpm run test:components",
+    "test:unit:coverage": "cross-env COVERAGE=true jest --coverage",
+    "test:components:coverage": "cross-env COVERAGE=true cypress run --component --browser chrome --headless",
+    "test:components": "cypress run --component --browser chrome --headless",
+    "test:components:parallel": "cypress-parallel -s test:components -t 4 -d \"src/**/__tests__/**/*.cy.{js,jsx,ts,tsx}\"",
+    "test:components:coverage:parallel": "cypress-parallel -s test:components:coverage -t 4 -d \"src/**/__tests__/**/*.cy.{js,jsx,ts,tsx}\"",
+    "coverage": "cross-env COVERAGE=true pnpm run test:unit && cross-env COVERAGE=true pnpm run test:components",
     "generate-tokens": "node scripts/system-token/convert-tokens.cjs"
   },
   "dependencies": {
@@ -174,7 +179,10 @@
     "cross-env": "^7.0.3",
     "cypress": "^13.7.2",
     "cypress-image-snapshot": "^4.0.1",
+    "cypress-multi-reporters": "^2.0.5",
+    "cypress-parallel": "^0.15.0",
     "cypress-real-events": "^1.13.0",
+    "cypress-split": "^1.24.15",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -189,6 +197,7 @@
     "prettier": "2.8.4",
     "prettier-plugin-tailwindcss": "^0.2.2",
     "rollup-plugin-visualizer": "^5.12.0",
+    "start-server-and-test": "^2.0.11",
     "style-dictionary": "^3.9.2",
     "tailwindcss": "^3.2.7",
     "ts-jest": "^29.1.1",