feat: add global mixins, close #5

Author: bahmutov

README.md

@@ -110,9 +110,9 @@ beforeEach(mountVue({ template, data }, { extensions }))
 ```
 
 See [Vue component docs](https://vuejs.org/v2/api/#Vue-component),
-[message-list-spec.js](cypress/integration/message-list-spec.js)
+[global-components-spec.js](cypress/integration/global-components-spec.js)
 
-* `use` - list of plugins
+* `use` (alias `plugins`) - list of plugins
 
 ```js
 const use = [MyPlugin]
@@ -126,6 +126,30 @@ beforeEach(mountVue({}, { extensions }))
 See [Vue plugin docs](https://vuejs.org/v2/guide/plugins.html)
 and [plugin-spec.js](cypress/integrstion/plugin-spec.js)
 
+* `mixin` (alias `mixins`) - list of global mixins
+
+```js
+const MyMixin = {
+  // we have to use original Sinon to create a spy
+  // because we are outside a test function
+  // and cannot use "cy.spy"
+  created: Cypress.sinon.spy()
+}
+const mixin = [MyMixin]
+// extend Vue with mixins
+const extensions = {
+  mixin
+}
+beforeEach(mountVue({}, { extensions }))
+
+it('calls mixin "created" method', () => {
+  expect(MyMixin.created).to.have.been.calledOnce
+})
+```
+
+See [Vue global mixin docs](https://vuejs.org/v2/guide/mixins.html#Global-Mixin)
+and [mixin-spec.js](cypress/integrstion/mixin-spec.js)
+
 ### The intro example
 
 Take a look at the first Vue v2 example:

cypress/integration/global-components-spec.js

@@ -0,0 +1,43 @@
+import MessageList from '../../components/MessageList.vue'
+const mountVue = require('../..')
+
+// common utils for MessageList
+const getItems = () => cy.get('ul li')
+
+/* eslint-env mocha */
+describe('Global components', () => {
+  // two different components, each gets "numbers" list
+  // into its property "messages"
+  const template = `
+    <div>
+      <message-list :messages="numbers"/>
+      <a-list :messages="numbers"/>
+    </div>
+  `
+  // our top level data
+  const data = () => ({ numbers: ['uno', 'dos'] })
+  // register same component globally under different names
+  const components = {
+    'message-list': MessageList,
+    'a-list': MessageList
+  }
+  // extend Vue with global components
+  const extensions = {
+    components
+  }
+  beforeEach(mountVue({ template, data }, { extensions }))
+
+  it('registers global component', () => {
+    cy
+      .window()
+      .its('Vue')
+      .invoke('component', 'message-list')
+      // returns component constructor
+      // so we can compare with our component's constructor (Ctor)
+      .should('equal', MessageList._Ctor[0])
+  })
+
+  it('shows two items at the start in both lists', () => {
+    getItems().should('have.length', 4)
+  })
+})

cypress/integration/message-list-spec.js

@@ -22,43 +22,6 @@ describe('MessageList', () => {
   })
 })
 
-describe('MessageList as global component', () => {
-  // two different components, each gets "numbers" list
-  // into its property "messages"
-  const template = `
-    <div>
-      <message-list :messages="numbers"/>
-      <a-list :messages="numbers"/>
-    </div>
-  `
-  // our top level data
-  const data = () => ({ numbers: ['uno', 'dos'] })
-  // register same component globally under different names
-  const components = {
-    'message-list': MessageList,
-    'a-list': MessageList
-  }
-  // extend Vue with global components
-  const extensions = {
-    components
-  }
-  beforeEach(mountVue({ template, data }, { extensions }))
-
-  it('registers global component', () => {
-    cy
-      .window()
-      .its('Vue')
-      .invoke('component', 'message-list')
-      // returns component constructor
-      // so we can compare with our component's constructor (Ctor)
-      .should('equal', MessageList._Ctor[0])
-  })
-
-  it('shows two items at the start in both lists', () => {
-    getItems().should('have.length', 4)
-  })
-})
-
 describe('MessageList with props', () => {
   const template = `
     <div>

cypress/integration/mixin-spec.js

@@ -0,0 +1,21 @@
+const mountVue = require('../..')
+
+/* eslint-env mocha */
+describe('Global mixin', () => {
+  const MyMixin = {
+    // we have to use original Sinon to create a spy
+    // because we are outside a test function
+    // and cannot use "cy.spy"
+    created: Cypress.sinon.spy()
+  }
+  const mixin = [MyMixin]
+  // extend Vue with mixins
+  const extensions = {
+    mixin
+  }
+  beforeEach(mountVue({}, { extensions }))
+
+  it('calls mixin "created" method', () => {
+    expect(MyMixin.created).to.have.been.calledOnce
+  })
+})

src/index.js

@@ -100,14 +100,27 @@ const registerGlobalComponents = (Vue, options) => {
 }
 
 const installPlugins = (Vue, options) => {
-  const plugins = Cypress._.get(options, 'extensions.use')
+  const plugins =
+    Cypress._.get(options, 'extensions.use') ||
+    Cypress._.get(options, 'extensions.plugins')
   if (Cypress._.isArray(plugins)) {
     plugins.forEach(plugin => {
       Vue.use(plugin)
     })
   }
 }
 
+const installMixins = (Vue, options) => {
+  const mixins =
+    Cypress._.get(options, 'extensions.mixin') ||
+    Cypress._.get(options, 'extensions.mixins')
+  if (Cypress._.isArray(mixins)) {
+    mixins.forEach(mixin => {
+      Vue.mixin(mixin)
+    })
+  }
+}
+
 const mountVue = (component, options = {}) => () => {
   const vueHtml = getPageHTML(options)
   const document = cy.state('document')
@@ -120,6 +133,7 @@ const mountVue = (component, options = {}) => () => {
     .window({ log: false })
     .its('Vue')
     .then(Vue => {
+      installMixins(Vue, options)
       installPlugins(Vue, options)
       registerGlobalComponents(Vue, options)
       deleteCachedConstructors(component)