chore(e2e): add e2e test cases (#602)

* chore: update example

* chore: e2e

* chore: circle

* chore: start

* chore: config.yml

* chore: update yarn.lock

* chore: cypress

* chore: yarn pkg

* chore: yarn.lock

* chore: jest config

* chore: yarn.lock

* chore: yarn.lock

* chore: yarn.lock

* chore: yarn.lock

* chore: cypress/run

* chore: record

* chore: example

* chore: run

* chore: start

* chore: cache

* chore: config-file

* chore: spec

* chore: circle ci

* chore: node

* chore: unit-test

* chore: test

* chore: circle ci

* chore: speed

* chore: run test

* chore: spec

* chore: root

* chore: e2e

* chore: silent

* chore: use setup-node@v2

* fix: error

.circleci/config.yml

@@ -1,36 +1,37 @@
-version: 2
+version: 2.1
+orbs:
+  cypress: cypress-io/cypress@1.26.0
+  node: circleci/node@4.3.0
+
 jobs:
-  build:
+  unit-test:
     docker:
-      - image: circleci/node:latest-browsers
-
-    working_directory: ~/repo
-
+      - image: 'cimg/base:stable'
     steps:
       - checkout
-
-      - restore_cache:
-          key: node-modules-{{ checksum "yarn.lock" }}
-
+      - node/install:
+          install-yarn: true
+          install-npm: false
+      - run: yarn install --frozen-lockfile --ignore-engines --silent
+      - run: yarn build
       - run:
-          name: Install Dependencies
-          command: yarn --frozen-lockfile
-
-      - save_cache:
-          key: node-modules-{{ checksum "yarn.lock" }}
-          paths:
-            - ./node_modules
-            - ~/.cache/yarn
-
-      - run:
-          name: Run Build
-          command: yarn build
-
-      - run:
-          name: Run Tests
+          name: Run Test
           command: yarn test:coverage --forceExit --detectOpenHandles --maxWorkers=2
           no_output_timeout: 300m
 
-      - run:
-          name: Generate coverage
-          command: bash <(curl -s https://codecov.io/bash)
+
+workflows:
+  run:
+    jobs:
+      - cypress/run:
+          executor: cypress/base-14
+          yarn: true
+          no-workspace: true
+          cache-key: yarn-packages-{{ arch }}-{{ checksum "yarn.lock" }}
+          build: yarn build
+          start: cd example && npm start
+          wait-on: 'http://localhost:8000'
+  unit-test:
+    jobs:
+      - unit-test
+

.github/workflows/ci.yml

@@ -14,10 +14,11 @@ jobs:
         with:
             fetch-depth: '1'
       - name: Use Node.js ${{ matrix.node_version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node_version }}
-      - run: yarn --ignore-engines --frozen-lockfile
+          registry-url: 'https://registry.yarnpkg.com'
+      - run: yarn --ignore-engines --frozen-lockfile --silent
       - run: yarn build
       - run: yarn test --forceExit
         env:

azure-pipelines.yml

@@ -9,7 +9,7 @@ trigger:
 
 jobs:
   - job: windows_test
-    timeoutInMinutes: 30
+    timeoutInMinutes: 60
     pool:
       vmImage: 'vs2017-win2016'
     strategy:
@@ -31,11 +31,11 @@ jobs:
               yarn | "$(Agent.OS)"
           path: $(YARN_CACHE_FOLDER)
         displayName: Cache Yarn packages
-      - script: yarn install --frozen-lockfile
+      - script: yarn install --frozen-lockfile --ignore-engines --silent
         displayName: install
       - script: yarn build
         displayName: build
-      - script: yarn test --forceExit --detectOpenHandles --maxWorkers=2
+      - script: yarn test --forceExit --maxWorkers=2
         env:
           PROGRESS: none
           CI: true

cypress.json

@@ -0,0 +1,4 @@
+{
+  "projectId": "aprgbp",
+  "baseUrl": "http://localhost:8000"
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/examples/index.spec.js

@@ -0,0 +1,77 @@
+/// <reference types="cypress" />
+
+describe('examples', () => {
+  it('home', () => {
+    cy.visit('http://localhost:8000/');
+    cy.get('#root > div').should('have.text', 'Home');
+  });
+
+  it('plugin-model', () => {
+    cy.visit('http://localhost:8000/plugin-model');
+    cy.get('[data-cy=model-add-btn]').click();
+    cy.get('[data-cy=model-add-btn]').click();
+    cy.get('[data-cy=model-add-btn]').click();
+
+    cy.get('[data-cy=model-count]').should('contain.text', '3');
+
+    // page initial-state
+    cy.get('[data-cy=go-to-plugin-initial-state]').click();
+    cy.get('[data-cy=another-model-count]').should('contain.text', '999');
+    cy.get('[data-cy=go-back-plugin-model]').click();
+    cy.get('[data-cy=model-count]').should('contain.text', '999');
+  });
+
+  it('plugin-locale', () => {
+    cy.visit('http://localhost:8000/plugin-locale');
+
+    cy.get('[data-cy=link-en-US]').click();
+    cy.get('[data-cy=locale-text]').should('contain.text', 'Hi');
+
+    cy.get('[data-cy=link-zh-CN]').click();
+    cy.get('[data-cy=locale-text]').should('contain.text', '你好');
+
+    cy.get('[data-cy=link-zh-TW]').click();
+    cy.get('[data-cy=locale-text]').should('contain.text', '妳好');
+  });
+
+  it('plugin-request', () => {
+    cy.visit('http://localhost:8000/request/?delay=200');
+
+    cy.intercept('/api/user', {
+      success: true,
+      data: { name: 'ycjcl868' },
+      result: { name: 'name in result' },
+      name: 'name outside',
+    }).as('getUser');
+
+    cy.waitUntil(() =>
+      cy.get('[data-cy=data-text]').should('have.text', 'ycjcl868'),
+    );
+  });
+
+  it('plugin-request', () => {
+    cy.visit('http://localhost:8000/request/?delay=200');
+
+    cy.intercept('/api/user', {
+      success: true,
+      data: { name: 'ycjcl868' },
+      result: { name: 'name in result' },
+      name: 'name outside',
+    }).as('getUser');
+
+    cy.waitUntil(() =>
+      cy.get('[data-cy=data-text]').should('have.text', 'ycjcl868'),
+    );
+  });
+
+  it('plugin-access', () => {
+    cy.visit('http://localhost:8000/plugin-no-access');
+    cy.get('[data-cy=no-access-text]').should('have.text', 'no access');
+
+    cy.visit('http://localhost:8000/plugin-access');
+    cy.get('[data-cy=access-text]').should(
+      'have.text',
+      'you can read the article',
+    );
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <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,26 @@
+// ***********************************************
+// 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) => { ... })
+import 'cypress-wait-until';

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')

example/.umirc.ts

@@ -1,8 +1,11 @@
 import { defineConfig } from 'umi';
 
 export default defineConfig({
-  presets: [require.resolve('../packages/preset-react/lib')],
-  // plugins: [require.resolve('../packages/plugin-webpack-5/lib')],
+  presets: [
+    require.resolve('../packages/preset-react/lib'),
+    // require.resolve('../packages/plugin-esbuild'),
+  ],
+  plugins: [require.resolve('../packages/plugin-esbuild/lib')],
   routes: [
     {
       name: 'model 测试',
@@ -16,17 +19,31 @@ export default defineConfig({
       component: './plugin-initial-state',
       icon: 'star',
     },
-    {
-      name: 'utils 测试',
-      path: '/utils',
-      component: './utils',
-    },
     {
       name: 'request 测试',
       path: '/request',
       component: './request',
       menu: false,
     },
+    {
+      name: 'access 测试（有权限）',
+      path: '/plugin-access',
+      component: './plugin-access',
+      access: 'readArticle',
+      menu: false,
+    },
+    {
+      name: 'access 测试（没有权限）',
+      path: '/plugin-no-access',
+      component: './plugin-no-access',
+      access: 'updateArticle',
+      menu: false,
+    },
+    {
+      name: 'locale 测试',
+      path: '/plugin-locale',
+      component: './plugin-locale',
+    },
     {
       name: '首页',
       path: '/',

example/package.json

@@ -1,3 +1,8 @@
 {
+  "scripts": {
+    "dev": "../node_modules/umi/bin/umi.js dev",
+    "start": "../node_modules/umi/bin/umi.js dev",
+    "build": "../node_modules/umi/bin/umi.js build"
+  },
   "dependencies": {}
 }