feat: extend Vue with global components for #5

Author: bahmutov

README.md

@@ -78,6 +78,37 @@ const options = {
 beforeEach(mountVue(/* my Vue code */, options))
 ```
 
+### Global Vue extensions
+
+You can pass extensions (global components, mixins, modules to use)
+when mounting Vue component. Use `{ extensions: { ... }}` object inside
+the `options`.
+
+* `components` - object of 'id' and components to register globally.
+
+```js
+// 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 }))
+```
+
 ### The intro example
 
 Take a look at the first Vue v2 example:

cypress/integration/message-list-spec.js

@@ -22,6 +22,43 @@ 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>

src/index.js

@@ -90,6 +90,15 @@ const getPageHTML = options => {
   return vueHtml
 }
 
+const registerGlobalComponents = (Vue, options) => {
+  const globalComponents = Cypress._.get(options, 'extensions.components')
+  if (Cypress._.isPlainObject(globalComponents)) {
+    Cypress._.forEach(globalComponents, (component, id) => {
+      Vue.component(id, component)
+    })
+  }
+}
+
 const mountVue = (component, options = {}) => () => {
   const vueHtml = getPageHTML(options)
   const document = cy.state('document')
@@ -102,6 +111,7 @@ const mountVue = (component, options = {}) => () => {
     .window({ log: false })
     .its('Vue')
     .then(Vue => {
+      registerGlobalComponents(Vue, options)
       deleteCachedConstructors(component)
       Cypress.vue = new Vue(component).$mount('#app')
       copyStyles(component)