diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml deleted file mode 100644 index f7d6d870cc..0000000000 --- a/.github/workflows/cypress.yml +++ /dev/null @@ -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 diff --git a/cypress.json b/cypress.json index 2807a91ba0..753253798c 100644 --- a/cypress.json +++ b/cypress.json @@ -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" } diff --git a/cypress/integration/components/button.spec.ts b/cypress/integration/components/button.spec.ts deleted file mode 100644 index 959c833657..0000000000 --- a/cypress/integration/components/button.spec.ts +++ /dev/null @@ -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) - }) -}) diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js index 4fa6e92f37..0471e4178f 100644 --- a/cypress/plugins/index.js +++ b/cypress/plugins/index.js @@ -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 diff --git a/cypress/vite.config.cy.mjs b/cypress/vite.config.cy.mjs new file mode 100644 index 0000000000..38201c4751 --- /dev/null +++ b/cypress/vite.config.cy.mjs @@ -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, + }, +}) diff --git a/e2e/button/button.spec.cy.tsx b/e2e/button/button.spec.cy.tsx new file mode 100644 index 0000000000..814ef6cf9b --- /dev/null +++ b/e2e/button/button.spec.cy.tsx @@ -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(() => {AXIOM}) + + cy.get('.el-button').should('have.text', AXIOM) + }) + }) +}) diff --git a/package.json b/package.json index 171238c782..982fb19bea 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e422a6dc9e..ecf98b6be9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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: