ci(test): add SSR test framework (#6570)

* test(ci): add ssr test framework

- Setup SSR test framework (cypress)

* Update cypress configs

* Fix format issue

* Move cypress tests

* Move vite.config.cy.mjs under cypress/
This commit is contained in:
JeremyWuuuuu 2022-03-13 00:11:02 +08:00 committed by GitHub
parent 4ad2453124
commit 16f79ede21
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 109 additions and 70 deletions

View File

@ -1,51 +0,0 @@
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@v3
- 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: Cache ~/.pnpm-store
uses: actions/cache@v2
env:
cache-name: cache-pnpm-store
with:
path: ~/.pnpm-store
key: ${{ runner.os }}-test-${{ env.cache-name }}-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-test-${{ env.cache-name }}-
${{ runner.os }}-test-
${{ runner.os }}-
- 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

View File

@ -1,4 +1,7 @@
{
"componentFolder": "e2e",
"testFiles": "**/*spec.cy.{ts,tsx}",
"video": false,
"baseUrl": "http://127.0.0.1:5001/en-US/"
"supportFile": "./cypress/support/index.js",
"pluginFile": "./cypress/plugins/index.js"
}

View File

@ -1,10 +0,0 @@
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)
})
})

View File

@ -11,19 +11,15 @@
// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)
const { startDevServer } = require('@cypress/vite-dev-server')
/**
* @type {Cypress.PluginConfig}
*/
// eslint-disable-next-line @typescript-eslint/no-unused-vars
module.exports = (on, _config) => {
on('before:browser:launch', (browser = {}, args) => {
if (browser.name === 'chrome') {
// ^ make sure this is your browser name, you may
// be using 'canary' or 'chromium' for example, so change it to match!
args.push('--proxy-bypass-list=<-loopback>')
return args
}
on('dev-server:start', async (options) => {
const { default: viteConfig } = await import('../vite.config.cy.mjs')
return startDevServer({ options, viteConfig })
})
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config

View File

@ -0,0 +1,20 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import DefineOptions from 'unplugin-vue-define-options/rollup'
import ElementPlus from 'unplugin-element-plus/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vueJsx(),
DefineOptions(),
ElementPlus({
// options
}),
],
server: {
port: 5000,
},
})

View File

@ -0,0 +1,14 @@
import { mount } from '@cypress/vue'
import { ElButton } from 'element-plus'
const AXIOM = 'rem is the best girl'
describe('Cypress Button', () => {
describe('when initialized', () => {
it('render correctly', () => {
mount(() => <ElButton>{AXIOM}</ElButton>)
cy.get('.el-button').should('have.text', AXIOM)
})
})
})

View File

@ -83,6 +83,8 @@
"@babel/preset-typescript": "^7.16.7",
"@commitlint/cli": "^16.2.1",
"@commitlint/config-conventional": "^16.2.1",
"@cypress/vite-dev-server": "^2.2.2",
"@cypress/vue": "^3.1.0",
"@element-plus/eslint-config": "workspace:*",
"@pnpm/find-workspace-packages": "^3.1.42",
"@pnpm/logger": "^4.0.0",
@ -134,6 +136,7 @@
"ts-morph": "^14.0.0",
"type-fest": "^2.12.0",
"typescript": "^4.6.2",
"unplugin-element-plus": "^0.3.1",
"unplugin-vue-define-options": "^0.4.0",
"vitest": "^0.5.9",
"vue": "^3.2.31",

View File

@ -12,6 +12,8 @@ importers:
'@babel/preset-typescript': ^7.16.7
'@commitlint/cli': ^16.2.1
'@commitlint/config-conventional': ^16.2.1
'@cypress/vite-dev-server': ^2.2.2
'@cypress/vue': ^3.1.0
'@element-plus/components': workspace:*
'@element-plus/constants': workspace:*
'@element-plus/directives': workspace:*
@ -83,6 +85,7 @@ importers:
ts-morph: ^14.0.0
type-fest: ^2.12.0
typescript: ^4.6.2
unplugin-element-plus: ^0.3.1
unplugin-vue-define-options: ^0.4.0
vitest: ^0.5.9
vue: ^3.2.31
@ -116,6 +119,8 @@ importers:
'@babel/preset-typescript': 7.16.7_@babel+core@7.17.5
'@commitlint/cli': 16.2.1
'@commitlint/config-conventional': 16.2.1
'@cypress/vite-dev-server': 2.2.2
'@cypress/vue': 3.1.0_cypress@8.5.0+vue@3.2.31
'@element-plus/eslint-config': link:internal/eslint-config
'@pnpm/find-workspace-packages': 3.1.42_@pnpm+logger@4.0.0
'@pnpm/logger': 4.0.0
@ -167,6 +172,7 @@ importers:
ts-morph: 14.0.0
type-fest: 2.12.0
typescript: 4.6.2
unplugin-element-plus: 0.3.1_c30e5c6c929d1f3c3b17cbac52c918c0
unplugin-vue-define-options: 0.4.0_c30e5c6c929d1f3c3b17cbac52c918c0
vitest: 0.5.9_0806f0693d07c4237ca3c20ba5503180
vue: 3.2.31
@ -1866,6 +1872,10 @@ packages:
engines: {node: '>=10'}
dev: false
/@cypress/mount-utils/1.0.2:
resolution: {integrity: sha512-Fn3fdTiyayHoy8Ol0RSu4MlBH2maQ2ZEXeEVKl/zHHXEQpld5HX3vdNLhK5YLij8cLynA4DxOT/nO9iEnIiOXw==}
dev: true
/@cypress/request/2.88.10:
resolution: {integrity: sha512-Zp7F+R93N0yZyG34GutyTNr+okam7s/Fzc1+i3kcqOP8vk6OuajuE9qZJ6Rs+10/1JFtXFYMdyarnU1rZuJesg==}
engines: {node: '>= 6'}
@ -1890,6 +1900,37 @@ packages:
uuid: 8.3.2
dev: true
/@cypress/vite-dev-server/2.2.2:
resolution: {integrity: sha512-02y/Fm0N+CQjKbSjjRtktPgPbp91kOvtc8+WW2l2odIYQkKlG6IOCpmgc898muW0lBAcCszdEIHR/ItdZDiYPw==}
peerDependencies:
vite: '>= 2.1.3'
dependencies:
debug: 4.3.3
get-port: 5.1.1
transitivePeerDependencies:
- supports-color
dev: true
/@cypress/vue/3.1.0_cypress@8.5.0+vue@3.2.31:
resolution: {integrity: sha512-E2aFQtPvLLW9yKZz7t94VN1SuO53Jx9wN12gi7pvpHId5E6p+8Z+v2zlzzREpA8Gbi2QGNMwK8ciSYcwZG2bXg==}
engines: {node: '>=8'}
peerDependencies:
'@cypress/webpack-dev-server': '*'
babel-loader: '*'
cypress: '>=7.0.0'
vue: '>=3.0.0'
peerDependenciesMeta:
'@cypress/webpack-dev-server':
optional: true
babel-loader:
optional: true
dependencies:
'@cypress/mount-utils': 1.0.2
'@vue/test-utils': 2.0.0-rc.16_vue@3.2.31
cypress: 8.5.0
vue: 3.2.31
dev: true
/@cypress/xvfb/1.2.4:
resolution: {integrity: sha512-skbBzPggOVYCbnGgV+0dmBdW/s77ZkAOXIC1knS8NagwDjBrNC1LuXtQJeiN6l+m7lzmHtaoUw/ctJKdqkG57Q==}
dependencies:
@ -6855,6 +6896,11 @@ packages:
engines: {node: '>=8.0.0'}
dev: true
/get-port/5.1.1:
resolution: {integrity: sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==}
engines: {node: '>=8'}
dev: true
/get-source/2.0.12:
resolution: {integrity: sha512-X5+4+iD+HoSeEED+uwrQ07BOQr0kEDFMVqqpBuI+RaZBpBpHCuXxo70bjar6f0b0u/DQJsJ7ssurpP0V60Az+w==}
dependencies:
@ -12022,6 +12068,24 @@ packages:
engines: {node: '>= 10.0.0'}
dev: true
/unplugin-element-plus/0.3.1_c30e5c6c929d1f3c3b17cbac52c918c0:
resolution: {integrity: sha512-DowQB5yvyJ/89q45o9LELGiRFYIGo5AJZqEBsjVJOVHL0x3OY57XB5BTLxUd5Of3wPk646MvADKY3htJvopy9w==}
engines: {node: '>=14'}
peerDependencies:
vue: '3'
dependencies:
'@rollup/pluginutils': 4.1.2
es-module-lexer: 0.9.3
magic-string: 0.25.7
unplugin: 0.3.2_esbuild@0.14.25+rollup@2.69.2
vue: 3.2.31
transitivePeerDependencies:
- esbuild
- rollup
- vite
- webpack
dev: true
/unplugin-icons/0.13.2_d1ceb6729d992b8502afaf839b1d9fb4:
resolution: {integrity: sha512-Dwfn5DkKrp/BpZV0R/2wgU39j+kjkeuIQ54PmJ9LhXNpNAS+Huf6Fl/PUmUrlWOvMAz0uPo3y/5lQKZUBjBkBQ==}
peerDependencies: