diff --git a/circle.yml b/circle.yml index 32efdaa2878a..29a9193ed0ac 100644 --- a/circle.yml +++ b/circle.yml @@ -1327,7 +1327,7 @@ jobs: npm-vue: <<: *defaults resource_class: medium - parallelism: 4 + parallelism: 3 steps: - restore_cached_workspace - run: diff --git a/npm/vite-dev-server/package.json b/npm/vite-dev-server/package.json index 56472c92cd19..a1ed755f5a0d 100644 --- a/npm/vite-dev-server/package.json +++ b/npm/vite-dev-server/package.json @@ -17,7 +17,7 @@ }, "devDependencies": { "@cypress/react": "0.0.0-development", - "@cypress/vue": "3.0.1", + "@cypress/vue": "0.0.0-development", "@testing-library/cypress": "7.0.4", "@vitejs/plugin-vue": "1.2.0", "@vue/compiler-sfc": "3.0.9", diff --git a/npm/vue/.releaserc.js b/npm/vue/.releaserc.js index d03a94376bf5..f4e7ee771023 100644 --- a/npm/vue/.releaserc.js +++ b/npm/vue/.releaserc.js @@ -1,7 +1,7 @@ module.exports = { ...require('../../.releaserc.base'), branches: [ - { name: 'master' }, - { name: 'next/npm/vue', channel: 'next', prerelease: 'alpha' }, + { name: 'next/npm/vue2' }, + { name: 'master', channel: 'next', prerelease: 'beta' }, ], } diff --git a/npm/vue/CHANGELOG.md b/npm/vue/CHANGELOG.md index b65a937844ba..7fd9029908d3 100644 --- a/npm/vue/CHANGELOG.md +++ b/npm/vue/CHANGELOG.md @@ -1,22 +1,91 @@ -# [@cypress/vue-v2.2.3](https://github.com/cypress-io/cypress/compare/@cypress/vue-v2.2.2...@cypress/vue-v2.2.3) (2021-05-11) +# [@cypress/vue-v3.0.1](https://github.com/cypress-io/cypress/compare/@cypress/vue-v3.0.0...@cypress/vue-v3.0.1) (2021-04-08) + +### Bug Fixes + +* adjust optional peer deps ([735d61d](https://github.com/cypress-io/cypress/commit/735d61d15a34c04729bff692861faad2dc1b6a35)) +* allow fo any VTU 2 version using ^ ([a1da052](https://github.com/cypress-io/cypress/commit/a1da0520651eaa1d83db96fe9d692b28ad2fc727)) + +# [@cypress/vue-v3.0.0](https://github.com/cypress-io/cypress/compare/@cypress/vue-v2.2.0...@cypress/vue-v3.0.0) (2021-04-07) ### Bug Fixes -* accept webapck 4 & 5 as peer dependencies of @cypress/vue and @cypress/react ([#16290](https://github.com/cypress-io/cypress/issues/16290)) ([c4151fb](https://github.com/cypress-io/cypress/commit/c4151fbd9f3c10de28e3e8dd3a75d0e0973b52e2)) +* add cleanup event ([cf51935](https://github.com/cypress-io/cypress/commit/cf51935bf5a49594b012e9a6bd9cabe983fbe500)) +* mistreatment of monorepo dependency ([a21afb2](https://github.com/cypress-io/cypress/commit/a21afb2f2204debd191586bcb250bb64ecbdfd25)) +* setup for cypress vue tests ([c27dc77](https://github.com/cypress-io/cypress/commit/c27dc77ecdb9b33c68737db690432e0418181286)) +* update dependency to webpack dev server ([717ea3a](https://github.com/cypress-io/cypress/commit/717ea3a628c26743a9fe8868e01291ad6b8c0977)) +* use __cy_root at the root element ([9cf102a](https://github.com/cypress-io/cypress/commit/9cf102ad6248a90a91ca766e2ff9267db0f208fa)) -# [@cypress/vue-v2.2.2](https://github.com/cypress-io/cypress/compare/@cypress/vue-v2.2.1...@cypress/vue-v2.2.2) (2021-05-05) + +### Features + +* vue3 support for @cypress/vue ([#15100](https://github.com/cypress-io/cypress/issues/15100)) ([71e85a0](https://github.com/cypress-io/cypress/commit/71e85a03682d577344e705548b5350ec84c29382)) + + +### Reverts + +* Revert "feat(vue): vue 3 support in @cypress/vue" ([53fc995](https://github.com/cypress-io/cypress/commit/53fc9958d111a8e60c6dcd873c9d89666c86dfc8)) + + +### BREAKING CHANGES + +* dropped support for vue 2 in favor of vue 3 + +* test: remove filter tests not relevant in vue 3 + +# [@cypress/vue-v3.0.0-alpha.4](https://github.com/cypress-io/cypress/compare/@cypress/vue-v3.0.0-alpha.3...@cypress/vue-v3.0.0-alpha.4) (2021-03-10) ### Bug Fixes -* accept webapck 4 & 5 as peer dependencies of @cypress/vue and @cypress/react ([#16290](https://github.com/cypress-io/cypress/issues/16290)) ([500cab9](https://github.com/cypress-io/cypress/commit/500cab95ef7a7d6b74b366ba8066bcf73f2955aa)) +* **component-testing:** video recording for single browser session mode ([#15328](https://github.com/cypress-io/cypress/issues/15328)) ([cce08d2](https://github.com/cypress-io/cypress/commit/cce08d23b781b219635d43419e5b6177927e1ba5)) -# [@cypress/vue-v2.2.1](https://github.com/cypress-io/cypress/compare/@cypress/vue-v2.2.0...@cypress/vue-v2.2.1) (2021-04-21) +# [@cypress/vue-v3.0.0-alpha.3](https://github.com/cypress-io/cypress/compare/@cypress/vue-v3.0.0-alpha.2...@cypress/vue-v3.0.0-alpha.3) (2021-02-24) + + +### Bug Fixes + +* mistreatment of monorepo dependency ([a21afb2](https://github.com/cypress-io/cypress/commit/a21afb2f2204debd191586bcb250bb64ecbdfd25)) + +# [@cypress/vue-v3.0.0-alpha.2](https://github.com/cypress-io/cypress/compare/@cypress/vue-v3.0.0-alpha.1...@cypress/vue-v3.0.0-alpha.2) (2021-02-24) ### Bug Fixes +* make webpack-dev-server a peer dependency ([#15163](https://github.com/cypress-io/cypress/issues/15163)) ([fa969fb](https://github.com/cypress-io/cypress/commit/fa969fba78d86494b5d920f573768677301fad13)) +* update dependency to webpack dev server ([717ea3a](https://github.com/cypress-io/cypress/commit/717ea3a628c26743a9fe8868e01291ad6b8c0977)) + +# [@cypress/vue-v3.0.0-alpha.1](https://github.com/cypress-io/cypress/compare/@cypress/vue-v2.0.1...@cypress/vue-v3.0.0-alpha.1) (2021-02-18) + + +### Features + +* vue3 support for @cypress/vue ([#15100](https://github.com/cypress-io/cypress/issues/15100)) ([71e85a0](https://github.com/cypress-io/cypress/commit/71e85a03682d577344e705548b5350ec84c29382)) + + +### Reverts + +* Revert "feat(vue): vue 3 support in @cypress/vue" ([53fc995](https://github.com/cypress-io/cypress/commit/53fc9958d111a8e60c6dcd873c9d89666c86dfc8)) + + +### BREAKING CHANGES + +* dropped support for vue 2 in favor of vue 3 + +* test: remove filter tests not relevant in vue 3 + +# [@cypress/vue-v2.2.3](https://github.com/cypress-io/cypress/compare/@cypress/vue-v2.2.2...@cypress/vue-v2.2.3) (2021-05-11) + +### Bug Fixes + +* accept webapck 4 & 5 as peer dependencies of @cypress/vue and @cypress/react ([#16290](https://github.com/cypress-io/cypress/issues/16290)) ([c4151fb](https://github.com/cypress-io/cypress/commit/c4151fbd9f3c10de28e3e8dd3a75d0e0973b52e2)) + +# [@cypress/vue-v2.2.2](https://github.com/cypress-io/cypress/compare/@cypress/vue-v2.2.1...@cypress/vue-v2.2.2) (2021-05-05) + +* accept webapck 4 & 5 as peer dependencies of @cypress/vue and @cypress/react ([#16290](https://github.com/cypress-io/cypress/issues/16290)) ([500cab9](https://github.com/cypress-io/cypress/commit/500cab95ef7a7d6b74b366ba8066bcf73f2955aa)) + +# [@cypress/vue-v2.2.1](https://github.com/cypress-io/cypress/compare/@cypress/vue-v2.2.0...@cypress/vue-v2.2.1) (2021-04-21) + * improve handling of userland injected styles in component testing ([#16024](https://github.com/cypress-io/cypress/issues/16024)) ([fe0b63c](https://github.com/cypress-io/cypress/commit/fe0b63c299947470c9cdce3a0d00364a1e224bdb)) # [@cypress/vue-v2.2.0](https://github.com/cypress-io/cypress/compare/@cypress/vue-v2.1.1...@cypress/vue-v2.2.0) (2021-04-05) diff --git a/npm/vue/cypress/component/advanced/access-component/message-spec.js b/npm/vue/cypress/component/advanced/access-component/message-spec.js index 82fdbf745c75..41e969305b70 100644 --- a/npm/vue/cypress/component/advanced/access-component/message-spec.js +++ b/npm/vue/cypress/component/advanced/access-component/message-spec.js @@ -15,11 +15,6 @@ describe('Message', () => { cy.wrap(Cypress).its('vue.message').should('equal', 'hey') }) - it('has no cat property', () => { - createCmp({ cat: 'hey', message: 'hey' }) - cy.wrap(Cypress).its('vue').should('not.have.property', 'cat') - }) - it('Paco is the default author', () => { createCmp({ message: 'hey' }) cy.wrap(Cypress).its('vue.author').should('equal', 'Paco') @@ -65,14 +60,10 @@ describe('Message', () => { it('triggers a message-clicked event clicked', () => { createCmp({ message: 'Cat' }).then(() => { - const stub = cy.spy() - - Cypress.vue.$on('message-clicked', stub) cy.get('.message') .click() .then(() => { - expect(stub).to.be.calledOnce - expect(stub).to.be.calledWith('Cat') + expect(Cypress.vueWrapper.emitted()).to.have.property('message-clicked') }) }) }) diff --git a/npm/vue/cypress/component/advanced/i18n/spec.js b/npm/vue/cypress/component/advanced/i18n/spec.js index 31096d421ad4..02361c667621 100644 --- a/npm/vue/cypress/component/advanced/i18n/spec.js +++ b/npm/vue/cypress/component/advanced/i18n/spec.js @@ -1,8 +1,7 @@ /// -import Vue from 'vue' import TranslatedMessageWithJSON from './TranslatedJSONMessage.vue' import TranslatedMessageI18nBlock from './TranslatedI18nMessage.vue' -import VueI18n from 'vue-i18n' +import { createI18n } from 'vue-i18n' import { mount } from '@cypress/vue' import messages from './translations.json' @@ -22,13 +21,11 @@ function expectHelloWorldGreeting () { } describe('VueI18n', () => { - Vue.use(VueI18n) - describe('with i18n block', () => { beforeEach(() => { - const i18n = new VueI18n({ locale: 'en' }) + const i18n = createI18n({ locale: 'en' }) - mount(TranslatedMessageI18nBlock, { i18n }) + mount(TranslatedMessageI18nBlock, { global: { plugins: [i18n] } }) }) it('shows HelloWorld for all locales', expectHelloWorldGreeting) @@ -36,9 +33,9 @@ describe('VueI18n', () => { describe('with messages argument', () => { beforeEach(() => { - const i18n = new VueI18n({ locale: 'en', messages }) + const i18n = createI18n({ locale: 'en', messages }) - mount(TranslatedMessageWithJSON, { i18n }) + mount(TranslatedMessageWithJSON, { global: { plugins: [i18n] } }) }) it('shows HelloWorld for all locales', expectHelloWorldGreeting) diff --git a/npm/vue/cypress/component/advanced/render-functions/spec.js b/npm/vue/cypress/component/advanced/render-functions/spec.js index d7c831d17506..634f9ca69a81 100644 --- a/npm/vue/cypress/component/advanced/render-functions/spec.js +++ b/npm/vue/cypress/component/advanced/render-functions/spec.js @@ -1,5 +1,6 @@ /// import { mount } from '@cypress/vue' +import { h as createElement } from 'vue' describe('Single render function component', () => { // the component definition @@ -118,18 +119,19 @@ describe('Component with slot', () => { describe('Component with arguments', () => { // the component definition const appComponent = { - render (createElement) { + render () { let a = this.elementtype.split(',') return createElement( a[0], { - attrs: { - id: a[3], - style: `color:${a[1]};font-size:${a[2]};`, + id: a[3], + style: { + color: a[1], + 'font-size': `${a[2]}pt`, }, }, - this.$slots.default || '', + this.$slots.default ? this.$slots.default() : '', ) }, props: { @@ -144,7 +146,7 @@ describe('Component with arguments', () => { // we want to use custom app component above extensions: { components: { - 'app-component': appComponent, + appComponent, }, }, } @@ -168,13 +170,13 @@ describe('Component with arguments', () => { cy.contains('h3', 'Hello Peter').should( 'have.attr', 'style', - 'color:red;font-size:30;', + 'color: red; font-size: 30pt;', ) cy.contains('p', 'Hello John').should( 'have.attr', 'style', - 'color:green;font-size:30;', + 'color: green; font-size: 30pt;', ) }) @@ -189,7 +191,7 @@ describe('Component with arguments', () => { cy.contains('').should( 'have.attr', 'style', - 'color:red;font-size:30;', + 'color: red; font-size: 30pt;', ) }) }) diff --git a/npm/vue/cypress/component/basic/filters/README.md b/npm/vue/cypress/component/basic/filters/README.md deleted file mode 100644 index 18e9c89d7c88..000000000000 --- a/npm/vue/cypress/component/basic/filters/README.md +++ /dev/null @@ -1,13 +0,0 @@ -# filters - -You can register global Vue filters when mounting the component. See [spec.js](spec.js) - -```js -mount(component, { - extensions: { - filters: { ... } - } -}) -``` - -Read [Vue global filters docs](https://vuejs.org/v2/api/#Vue-filter) diff --git a/npm/vue/cypress/component/basic/filters/reverse.js b/npm/vue/cypress/component/basic/filters/reverse.js deleted file mode 100644 index a2cae51c4b4e..000000000000 --- a/npm/vue/cypress/component/basic/filters/reverse.js +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Reverses a string - * @param {string} s String to reverse - * @returns {string} Reversed string - */ -export const reverse = (s) => s.split('').reverse().join('') diff --git a/npm/vue/cypress/component/basic/filters/spec.js b/npm/vue/cypress/component/basic/filters/spec.js deleted file mode 100644 index bda6c7fdf879..000000000000 --- a/npm/vue/cypress/component/basic/filters/spec.js +++ /dev/null @@ -1,35 +0,0 @@ -/// -import { mountCallback } from '@cypress/vue' -import { reverse } from './reverse' - -describe('Global filters', () => { - const filters = { - reverse, - } - - // use reverse filter in template - const template = ` -
{{ "foo-bar" | reverse }}
- ` - - // extend Vue with global filters - const extensions = { - filters, - } - - beforeEach(mountCallback({ template }, { extensions })) - - it('registers global filter', () => { - cy.wrap(window.Vue) - .invoke('filter', 'reverse') - .should('equal', filters.reverse) - }) - - it('tests the reverse function', () => { - expect(reverse('Hello')).to.equal('olleH') - }) - - it('reverses the string', () => { - cy.contains('rab-oof') - }) -}) diff --git a/npm/vue/cypress/component/basic/options-spec.js b/npm/vue/cypress/component/basic/options-spec.js index 2376d0ecaf0d..dd8817cb95a0 100644 --- a/npm/vue/cypress/component/basic/options-spec.js +++ b/npm/vue/cypress/component/basic/options-spec.js @@ -23,8 +23,4 @@ describe('Mount component', () => { it('shows hello', () => { cy.contains('Hello Vue!') }) - - it('has version', () => { - cy.window().its('Vue.version').should('be.a', 'string') - }) }) diff --git a/npm/vue/cypress/component/basic/plugins/MyPlugin.js b/npm/vue/cypress/component/basic/plugins/MyPlugin.js index c7ddd079921f..d470a2a7ace8 100644 --- a/npm/vue/cypress/component/basic/plugins/MyPlugin.js +++ b/npm/vue/cypress/component/basic/plugins/MyPlugin.js @@ -1,9 +1,9 @@ // https://vuejs.org/v2/guide/plugins.html // https://alligator.io/vuejs/creating-custom-plugins/ export const MyPlugin = { - install (Vue) { + install (app) { // 1. add global method or property - Vue.aPluginMethod = function () { + app.config.globalProperties.aPluginMethod = function () { return 'foo' } }, diff --git a/npm/vue/cypress/component/basic/plugins/MyPluginWithOptions.js b/npm/vue/cypress/component/basic/plugins/MyPluginWithOptions.js index 4b09ce0b572f..bade7e07fc08 100644 --- a/npm/vue/cypress/component/basic/plugins/MyPluginWithOptions.js +++ b/npm/vue/cypress/component/basic/plugins/MyPluginWithOptions.js @@ -1,13 +1,13 @@ // https://vuejs.org/v2/guide/plugins.html // https://alligator.io/vuejs/creating-custom-plugins/ export const MyPluginWithOptions = { - install (Vue, options) { + install (app, options) { if (!options) { throw new Error('MyPlugin is missing options!') } // this method uses options argument - Vue.anotherPluginMethod = function () { + app.config.globalProperties.anotherPluginMethod = function () { return options.label } }, diff --git a/npm/vue/cypress/component/basic/plugins/plugin-spec.js b/npm/vue/cypress/component/basic/plugins/plugin-spec.js index 4bf3c9d7afb8..276c5f3cf7cd 100644 --- a/npm/vue/cypress/component/basic/plugins/plugin-spec.js +++ b/npm/vue/cypress/component/basic/plugins/plugin-spec.js @@ -16,7 +16,7 @@ describe('Single component mount', () => { mount(EmptyComponent, { extensions }) - cy.window().its('Vue').invoke('aPluginMethod').should('equal', 'foo') + cy.wrap(Cypress).its('vue').invoke('aPluginMethod').should('equal', 'foo') }) }) @@ -32,11 +32,11 @@ describe('Custom plugin MyPlugin', () => { beforeEach(mountCallback(EmptyComponent, { extensions })) it('registers global method on Vue instance', () => { - cy.window().its('Vue').its('aPluginMethod').should('be.a', 'function') + cy.wrap(Cypress).its('vue').its('aPluginMethod').should('be.a', 'function') }) it('can call this global function', () => { - cy.window().its('Vue').invoke('aPluginMethod').should('equal', 'foo') + cy.wrap(Cypress).its('vue').invoke('aPluginMethod').should('equal', 'foo') }) }) @@ -55,10 +55,9 @@ describe('Plugins with options', () => { mount(EmptyComponent, { extensions }) // first plugin works - cy.window().its('Vue').invoke('aPluginMethod').should('equal', 'foo') + cy.wrap(Cypress).its('vue').invoke('aPluginMethod').should('equal', 'foo') // second plugin works - cy.window() - .its('Vue') + cy.wrap(Cypress).its('vue') .invoke('anotherPluginMethod') .should('equal', 'testing') }) diff --git a/npm/vue/cypress/component/basic/props/message-list-spec.js b/npm/vue/cypress/component/basic/props/message-list-spec.js index ab1e79885713..15878b5884bb 100644 --- a/npm/vue/cypress/component/basic/props/message-list-spec.js +++ b/npm/vue/cypress/component/basic/props/message-list-spec.js @@ -29,16 +29,12 @@ describe('Props', () => { it('shows messages', () => { getItems().should('not.exist') - // after mounting we can set props using "Cypress.vue" + // after mounting we can set props using "vueWrapper.setProps" cy.log('setting messages').then(() => { - Cypress.vue.messages = ['one', 'two'] + Cypress.vueWrapper.setProps({ messages: ['one', 'two'] }) }) getItems().should('have.length', 2) - cy.then(() => { - Cypress.vue.messages.push('three') - getItems().should('have.length', 3) - }) }) }) diff --git a/npm/vue/cypress/component/basic/slots/Card.spec.js b/npm/vue/cypress/component/basic/slots/Card.spec.js index 07a98afc8b57..4b528233325f 100644 --- a/npm/vue/cypress/component/basic/slots/Card.spec.js +++ b/npm/vue/cypress/component/basic/slots/Card.spec.js @@ -28,8 +28,8 @@ describe('Card', () => { it('renders scopedSlots', () => { mount(Card, { - scopedSlots: { - default: '

Yay! {{props.content}}

', + slots: { + default: '', }, }) diff --git a/npm/vue/cypress/component/basic/spec.js b/npm/vue/cypress/component/basic/spec.js index b66f654f38c7..777caccf6601 100644 --- a/npm/vue/cypress/component/basic/spec.js +++ b/npm/vue/cypress/component/basic/spec.js @@ -23,8 +23,8 @@ describe('Declarative rendering', () => { }) it('changes message if data changes', () => { - // mounted Vue instance is available under Cypress.vue - Cypress.vue.message = 'Vue rocks!' + // mounted Vue instance is available under Cypress.vueWrapper + Cypress.vueWrapper.setData({ message: 'Vue rocks!' }) cy.contains('Vue rocks!') }) }) diff --git a/npm/vue/cypress/component/button/button-counter-spec.js b/npm/vue/cypress/component/button/button-counter-spec.js index a64abf0c70e9..809197bb48f6 100644 --- a/npm/vue/cypress/component/button/button-counter-spec.js +++ b/npm/vue/cypress/component/button/button-counter-spec.js @@ -14,14 +14,11 @@ describe('ButtonCounter', () => { }) it('emits "increment" event on click', () => { - const spy = cy.spy() - - Cypress.vue.$on('increment', spy) cy.get('button') .click() .click() .then(() => { - expect(spy).to.be.calledTwice + cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'increment') }) }) }) diff --git a/npm/vue/cypress/component/counter-vuex/counter-vuex-spec.js b/npm/vue/cypress/component/counter-vuex/counter-vuex-spec.js index 05ea68400eb8..56e16dcde857 100644 --- a/npm/vue/cypress/component/counter-vuex/counter-vuex-spec.js +++ b/npm/vue/cypress/component/counter-vuex/counter-vuex-spec.js @@ -2,14 +2,13 @@ // https://github.com/vuejs/vuex/tree/dev/examples/counter import Counter from './Counter.vue' import store from './store' -import Vuex from 'vuex' import { mountCallback } from '@cypress/vue' /* eslint-env mocha */ describe('Vuex Counter', () => { // configure component const extensions = { - plugins: [Vuex], + plugins: [store], components: { Counter, }, diff --git a/npm/vue/cypress/component/counter-vuex/store.js b/npm/vue/cypress/component/counter-vuex/store.js index c15d537f0ec1..4f1b6df04cd0 100644 --- a/npm/vue/cypress/component/counter-vuex/store.js +++ b/npm/vue/cypress/component/counter-vuex/store.js @@ -1,7 +1,4 @@ -import Vue from 'vue' -import Vuex from 'vuex' - -Vue.use(Vuex) +import { createStore } from 'vuex' // root state object. // each Vuex instance is just a single state tree. @@ -53,7 +50,7 @@ const getters = { // A Vuex instance is created by combining the state, mutations, actions, // and getters. -export default new Vuex.Store({ +export default createStore({ state, getters, actions, diff --git a/npm/vue/cypress/component/router-example/PizzaShop/Home.vue b/npm/vue/cypress/component/router-example/PizzaShop/Home.vue index 8944987f406d..2ba7e7e0ca30 100644 --- a/npm/vue/cypress/component/router-example/PizzaShop/Home.vue +++ b/npm/vue/cypress/component/router-example/PizzaShop/Home.vue @@ -1,12 +1,10 @@