fix: vue2 global directives in component testing

npm/vue2/README.md

@@ -57,10 +57,31 @@ 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, see [Components](cypress/component/basic/components) example
-- `use` (alias `plugins`) - list of plugins, see [Plugins](cypress/component/basic/plugins)
-- `mixin` (alias `mixins`) - list of global mixins, see [Mixins](cypress/component/basic/mixins) example
-- `filters` - hash of global filters, see [Filters](cypress/component/basic/filters) example
+- `components` - object of 'id' and components to register globally. See docs [here](https://v2.vuejs.org/v2/guide/components-registration.html#Global-Registration).
+- `use` (alias `plugins`) - list of plugins.  See docs [here](https://v2.vuejs.org/v2/guide/plugins.html#Using-a-Plugin).
+- `mixin` (alias `mixins`) - list of global mixins.  See docs [here](https://v2.vuejs.org/v2/guide/mixins.html#Global-Mixin).
+- `filters` - hash of global filters. See docs [here](https://v2.vuejs.org/v2/guide/filters.html).
+- `directives` - global directives, see `directives` docs [here](https://v2.vuejs.org/v2/guide/custom-directive.html#ad) and [here](https://vuejs.org/guide/reusability/custom-directives.html).
+
+```js
+import Todo from './Todo.vue'
+import MyMixin1 from '../mixins/MyMixin1'
+import MyMixin2 from '../mixins/MyMixin2'
+import MyPlugin from '../plugins/MyPlugin'
+import MyGlobalComponent1 from '../global/MyGlobalComponent1.vue'
+import MyGlobalComponent2 from '../global/MyGlobalComponent2.vue'
+import MyDirective from '../directives/MyDirective'
+
+mount(Todo, {
+  extensions: {
+    mixins: [MyMixin1, MyMixin2],
+    plugins: [MyPlugin],
+    // or use: [MyPlugin]
+    components: { MyGlobalComponent1, MyGlobalComponent2 },
+    directives: { MyDirective },
+  }
+})
+```
 
 ## Compatibility
 

npm/vue2/src/index.ts

@@ -69,6 +69,17 @@ const installMixins = (Vue, options) => {
   }
 }
 
+const registerGlobalDirectives = (Vue, options) => {
+  const directives =
+    Cypress._.get(options, 'extensions.directives')
+
+  if (Cypress._.isPlainObject(directives)) {
+    Object.keys(directives).forEach((name) => {
+      Vue.directive(name, directives[name])
+    })
+  }
+}
+
 const hasStore = ({ store }: { store: any }) => Boolean(store && store._vm)
 
 const forEachValue = <T>(obj: Record<string, T>, fn: (value: T, key: string) => void) => {
@@ -127,6 +138,10 @@ type VueFilters = {
   [key: string]: (value: string) => string
 }
 
+type VueDirectives = {
+  [key: string]: Function | Object
+}
+
 type VueMixin = unknown
 type VueMixins = VueMixin | VueMixin[]
 
@@ -211,6 +226,27 @@ interface MountOptionsExtensions {
    * @memberof MountOptionsExtensions
    */
   plugins?: VuePlugins
+
+  /**
+   * Optional Vue directives to install while mounting the component
+   *
+   * @memberof MountOptionsExtensions
+   * @see https://github.com/cypress-io/cypress/tree/develop/npm/vue#examples
+   * @example
+   *  const directives = {
+   *    custom: {
+   *        name: 'custom',
+   *        bind (el, binding) {
+   *          el.dataset['custom'] = binding.value
+   *        },
+   *        unbind (el) {
+   *          el.removeAttribute('data-custom')
+   *        },
+   *    },
+   *  }
+   *  mount(Hello, { extensions: { directives }})
+   */
+  directives?: VueDirectives
 }
 
 /**
@@ -400,6 +436,7 @@ export const mount = (
     installFilters(localVue, options)
     installMixins(localVue, options)
     installPlugins(localVue, options, props)
+    registerGlobalDirectives(localVue, options)
     registerGlobalComponents(localVue, options)
 
     props.attachTo = componentNode

system-tests/projects/vueclivue2-configured/README.md

@@ -1,4 +1,4 @@
-# vueclivue2-unconfigured
+# vueclivue2-configured
 
 ## Project setup
 ```

system-tests/projects/vueclivue2-configured/src/components/GlobalComponentWithCustomDirective.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="child" v-custom="test" />
+</template>
+
+<script>
+export default {
+  name: 'GlobalComponentWithCustomDirective',
+}
+</script>

system-tests/projects/vueclivue2-configured/src/components/HelloWorld.cy.js

@@ -1,5 +1,7 @@
 import { mount } from 'cypress/vue2'
 import HelloWorld from './HelloWorld.vue'
+import GlobalComponentWithCustomDirective from './GlobalComponentWithCustomDirective.vue'
+import custom from '../directive'
 
 describe('<Logo />', () => {
   it('contains the default slot in its h1', () => {
@@ -13,4 +15,30 @@ describe('<Logo />', () => {
 
     cy.contains('h1', slotContent)
   })
+
+  it('Vue2 custom directive should work ', () => {
+    mount(GlobalComponentWithCustomDirective, {
+      extensions: {
+        directives: { custom },
+      },
+    })
+
+    cy.get('.child').should('have.attr', 'data-custom', 'test')
+  })
+
+  it('Vue2 custom directive should work in nested component', () => {
+    const slotContent = 'Welcome to testing in Vue CLI'
+
+    mount(HelloWorld, {
+      propsData: {
+        msg: slotContent,
+      },
+      extensions: {
+        components: { GlobalComponentWithCustomDirective },
+        directives: { custom },
+      },
+    })
+
+    cy.get('.child').should('have.attr', 'data-custom', 'test')
+  })
 })

system-tests/projects/vueclivue2-configured/src/components/HelloWorld.vue

@@ -25,6 +25,7 @@
       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
     </ul>
+    <GlobalComponentWithCustomDirective/>
   </div>
 </template>
 

system-tests/projects/vueclivue2-configured/src/directive.js

@@ -0,0 +1,9 @@
+export default {
+  name: 'custom',
+  bind (el, binding) {
+    el.dataset['custom'] = binding.value
+  },
+  unbind (el) {
+    el.removeAttribute('data-custom')
+  },
+}

system-tests/projects/vueclivue2-configured/src/main.js

@@ -1,8 +1,14 @@
 import Vue from 'vue'
 import App from './App.vue'
+import GlobalComponentWithCustomDirective from './components/GlobalComponentWithCustomDirective.vue'
+import custom from './directive'
 
 Vue.config.productionTip = false
+Vue.component('GlobalComponentWithCustomDirective', GlobalComponentWithCustomDirective)
+Vue.directive('custom', custom)
 
 new Vue({
-  render: function (h) { return h(App) },
+  render (h) {
+    return h(App)
+  },
 }).$mount('#app')

tooling/v8-snapshot/cache/dev-linux/snapshot-meta.cache.json

@@ -3527,4 +3527,4 @@
   ],
   "deferredHashFile": "yarn.lock",
   "deferredHash": "95205f49259fe2d246d45ef15d1499f6e3d1d235d6db892124bbd5423f1ba872"
-}
+}