From 0a16be5683752ab1d9b7c078ba5684ad0a890d9d Mon Sep 17 00:00:00 2001
From: Gleb Bahmutov <gleb.bahmutov@gmail.com>
Date: Fri, 10 Jul 2020 14:49:02 -0400
Subject: [PATCH] fix: add types for Cypress.vue property (#354)

and update constructor type for Vue components
---
 README.md                                     |  1 +
 .../access-component}/Message.vue             |  0
 .../advanced/access-component/README.md       | 16 ++++++++++++
 .../access-component}/message-spec.js         |  1 +
 src/index.ts                                  | 26 ++++++++++++++++++-
 5 files changed, 43 insertions(+), 1 deletion(-)
 rename cypress/component/{basic => advanced/access-component}/Message.vue (100%)
 create mode 100644 cypress/component/advanced/access-component/README.md
 rename cypress/component/{basic => advanced/access-component}/message-spec.js (97%)

diff --git a/README.md b/README.md
index 839de38..d05533e 100644
--- a/README.md
+++ b/README.md
@@ -596,6 +596,7 @@ Spec | Description
 <!-- prettier-ignore-start -->
 Spec | Description
 --- | ---
+[access-component](cypress/component/advanced/access-component) | Access the mounted component directly from test
 [i18n](cypress/component/advanced/i18n) | Testing component that uses [Vue I18n](https://kazupon.github.io/vue-i18n/) plugin
 [mocking-axios](cypress/component/advanced/mocking-axios) | Mocking 3rd party module imports, like `axios` for fetching data
 [mocking-components](cypress/component/advanced/mocking-components) | Mocking locally registered child components during tests
diff --git a/cypress/component/basic/Message.vue b/cypress/component/advanced/access-component/Message.vue
similarity index 100%
rename from cypress/component/basic/Message.vue
rename to cypress/component/advanced/access-component/Message.vue
diff --git a/cypress/component/advanced/access-component/README.md b/cypress/component/advanced/access-component/README.md
new file mode 100644
index 0000000..33525d8
--- /dev/null
+++ b/cypress/component/advanced/access-component/README.md
@@ -0,0 +1,16 @@
+# Access the component
+
+If you need to access the mounted component from test, a reference is available at `Cypress.vue` after the `mount` finishes (asynchronously).
+
+```js
+mount(...)
+.then(() => {
+  Cypress.vue.<prop> = ...
+  // or call a method
+  Cypress.vue.<method()
+})
+// then check the UI
+cy.contains(...)
+```
+
+See component [Message.vue](Message.vue) and [message-spec.js](message-spec.js)
diff --git a/cypress/component/basic/message-spec.js b/cypress/component/advanced/access-component/message-spec.js
similarity index 97%
rename from cypress/component/basic/message-spec.js
rename to cypress/component/advanced/access-component/message-spec.js
index e6be1e8..4fe7675 100644
--- a/cypress/component/basic/message-spec.js
+++ b/cypress/component/advanced/access-component/message-spec.js
@@ -1,3 +1,4 @@
+/// <reference path="../../../../dist/index.d.ts" />
 import Message from './Message.vue'
 import { mount } from 'cypress-vue-unit-test'
 
diff --git a/src/index.ts b/src/index.ts
index 7238a8d..639faaf 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -119,7 +119,7 @@ const resetStoreVM = (Vue, { store }) => {
  *         ^^^^^ this type
  *  mount(Hello)
  */
-type VueComponent = Vue.ComponentOptions<any>
+type VueComponent = Vue.ComponentOptions<any> | Vue.VueConstructor
 
 /**
  * Options to pass to the component when creating it, like
@@ -286,6 +286,28 @@ interface MountOptions {
  */
 type MountOptionsArgument = Partial<ComponentOptions & MountOptions>
 
+// when we mount a Vue component, we add it to the global Cypress object
+// so here we extend the global Cypress namespace and its Cypress interface
+declare global {
+  // eslint-disable-next-line no-redeclare
+  namespace Cypress {
+    interface Cypress {
+      /**
+       * Mounted Vue instance is available under Cypress.vue
+       * @memberof Cypress
+       * @example
+       *  mount(Greeting)
+       *  .then(() => {
+       *    Cypress.vue.message = 'Hello There'
+       *  })
+       *  // new message is displayed
+       *  cy.contains('Hello There').should('be.visible')
+       */
+      vue: Vue
+    }
+  }
+}
+
 /**
  * Direct Vue errors to the top error handler
  * where they will fail Cypress test
@@ -352,6 +374,7 @@ export const mount = (
   // https://github.com/bahmutov/cypress-vue-unit-test/issues/313
   if (
     Cypress._.isPlainObject(component) &&
+    // @ts-ignore
     Cypress._.isFunction(component.render)
   ) {
     // @ts-ignore
@@ -412,6 +435,7 @@ export const mount = (
       // create root Vue component
       // and make it accessible via Cypress.vue
       if (isConstructor(component)) {
+        // @ts-ignore
         const Cmp = Vue.extend(component)
         // @ts-ignore
         Cypress.vue = new Cmp(props).$mount(componentNode)