feat: allow options when using extensions in tests (#342)

```js
const use = [
  MyPlugin, // this plugin does not need options
  [MyPluginWithOptions, { label: 'testing' }], // this plugin needs options
]

// extend Vue with plugins
const extensions = {
  use,
}

mount({}, { extensions })
```

Author: bahmutov

README.md

@@ -588,6 +588,7 @@ describe('HelloWorld component', () => {
 Spec | Description
 --- | ---
 [Hello](cypress/component/basic/hello) | Testing examples from Vue2 cookbook
+[Plugins](cypress/component/basic/plugins) | Loading additional plugins
 <!-- prettier-ignore-end -->
 
 ### Advanced examples

cypress/component/basic/plugin-spec.js

@@ -1,6 +1,7 @@
 // https://vuejs.org/v2/guide/plugins.html
+// https://alligator.io/vuejs/creating-custom-plugins/
 export const MyPlugin = {
-  install(Vue, options) {
+  install(Vue) {
     // 1. add global method or property
     Vue.aPluginMethod = function () {
       return 'foo'

cypress/component/basic/MyPlugin.js renamed to cypress/component/basic/plugins/MyPlugin.js

@@ -0,0 +1,14 @@
+// https://vuejs.org/v2/guide/plugins.html
+// https://alligator.io/vuejs/creating-custom-plugins/
+export const MyPluginWithOptions = {
+  install(Vue, options) {
+    if (!options) {
+      throw new Error('MyPlugin is missing options!')
+    }
+
+    // this method uses options argument
+    Vue.anotherPluginMethod = function () {
+      return options.label
+    }
+  },
+}

cypress/component/basic/plugins/MyPluginWithOptions.js

@@ -0,0 +1,17 @@
+# plugins
+
+Spec file [plugin-spec.js](plugin-spec.js) shows how to load plugins while doing testing. The plugins might require options, which you can pass using array syntax
+
+```js
+const use = [
+  MyPlugin, // this plugin does not need options
+  [MyPluginWithOptions, { label: 'testing' }], // this plugin needs options
+]
+
+// extend Vue with plugins
+const extensions = {
+  use,
+}
+
+mount({}, { extensions })
+```

cypress/component/basic/plugins/README.md

@@ -0,0 +1,62 @@
+/// <reference types="cypress" />
+import { MyPlugin } from './MyPlugin'
+import { MyPluginWithOptions } from './MyPluginWithOptions'
+import { mount, mountCallback } from 'cypress-vue-unit-test'
+
+describe('Single component mount', () => {
+  it('has the plugin', () => {
+    const use = [MyPlugin]
+
+    // extend Vue with plugins
+    const extensions = {
+      use,
+    }
+
+    mount({}, { extensions })
+
+    cy.window().its('Vue').invoke('aPluginMethod').should('equal', 'foo')
+  })
+})
+
+describe('Custom plugin MyPlugin', () => {
+  const use = [MyPlugin]
+
+  // extend Vue with plugins
+  const extensions = {
+    use,
+  }
+  // use "mountCallback" to register the plugins
+  beforeEach(mountCallback({}, { extensions }))
+
+  it('registers global method on Vue instance', () => {
+    cy.window().its('Vue').its('aPluginMethod').should('be.a', 'function')
+  })
+
+  it('can call this global function', () => {
+    cy.window().its('Vue').invoke('aPluginMethod').should('equal', 'foo')
+  })
+})
+
+describe('Plugins with options', () => {
+  it('passes options', () => {
+    const use = [
+      MyPlugin, // this plugin does not need options
+      [MyPluginWithOptions, { label: 'testing' }], // this plugin needs options
+    ]
+
+    // extend Vue with plugins
+    const extensions = {
+      use,
+    }
+
+    mount({}, { extensions })
+
+    // first plugin works
+    cy.window().its('Vue').invoke('aPluginMethod').should('equal', 'foo')
+    // second plugin works
+    cy.window()
+      .its('Vue')
+      .invoke('anotherPluginMethod')
+      .should('equal', 'testing')
+  })
+})

cypress/component/basic/plugins/plugin-spec.js

@@ -48,7 +48,12 @@ const installPlugins = (Vue, options) => {
     Cypress._.get(options, 'extensions.plugins')
   if (Cypress._.isArray(plugins)) {
     plugins.forEach((plugin) => {
-      Vue.use(plugin)
+      if (Array.isArray(plugin)) {
+        const [aPlugin, options] = plugin
+        Vue.use(aPlugin, options)
+      } else {
+        Vue.use(plugin)
+      }
     })
   }
 }