feat: pass custom Vue path or url, close #1

bahmutov · bahmutov · commit 022be782154d · 2017-12-26T22:39:51.000-05:00
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@ node_modules/
 .DS_Store
 npm-debug.log
 cypress/videos/
+cypress/screenshots
diff --git a/README.md b/README.md
@@ -24,6 +24,48 @@ npm install --save-dev cypress-vue-unit-test
 
 ## Use
 
+Before each test, inject your component to test
+
+```js
+const mountVue = require('cypress-vue-unit-test')
+describe('My Vue', () => {
+  beforeEach(mountVue(/* my Vue code */, /* options */))
+  it('renders', () => {
+    // Any Cypress command
+    // Cypress.vue is the mounted component reference
+  })
+})
+```
+
+See examples below for details.
+
+### Options
+
+See [cypress/integration/options-spec.js](cypress/integration/options-spec.js)
+for examples of options.
+
+* `vue` - path or URL to the Vue library to load. By default, will
+try to load `../node_modules/vue/dist/vue.js`, but you can pass your
+own path or URL.
+
+```js
+const options = {
+  vue: 'https://unpkg.com/vue'
+}
+beforeEach(mountVue(/* my Vue code */, options))
+```
+
+* `html` - custom test HTML to inject instead of default one. Good
+place to load additional libraries, polyfills and styles.
+
+```js
+const vue = '../node_modules/vue/dist/vue.js'
+const options = {
+  html: `<div id="app"></div><script src="${vue}"></script>`
+}
+beforeEach(mountVue(/* my Vue code */, options))
+```
+
 ### The intro example
 
 Take a look at the first Vue v2 example:
diff --git a/cypress/integration/options-spec.js b/cypress/integration/options-spec.js
@@ -0,0 +1,47 @@
+const mountVue = require('../..')
+
+const template = `
+    <div id="app">
+      {{ message }}
+    </div>
+  `
+
+const data = {
+  message: 'Hello Vue!'
+}
+
+/* eslint-env mocha */
+describe('Pass Vue.js url', () => {
+  const options = {
+    vue: 'https://unpkg.com/vue'
+  }
+
+  const component = { template, data }
+  beforeEach(mountVue(component, options))
+
+  it('shows hello', () => {
+    cy.contains('Hello Vue!')
+  })
+
+  it('has version', () => {
+    cy.window().its('Vue.version').should('be.a', 'string')
+  })
+})
+
+describe('Pass window HTML to use', () => {
+  const vue = '../node_modules/vue/dist/vue.js'
+  const options = {
+    html: `<div id="app"></div><script src="${vue}"></script>`
+  }
+
+  const component = { template, data }
+  beforeEach(mountVue(component, options))
+
+  it('shows hello', () => {
+    cy.contains('Hello Vue!')
+  })
+
+  it('has version', () => {
+    cy.window().its('Vue.version').should('be.a', 'string')
+  })
+})
diff --git a/package.json b/package.json
@@ -93,5 +93,8 @@
       "Cypress",
       "cy"
     ]
+  },
+  "dependencies": {
+    "common-tags": "1.6.0"
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,4 @@
-/* global Cypress, cy */
+const { stripIndent } = require('common-tags')
 
 // having weak reference to styles prevents garbage collection
 // and "losing" styles when the next test starts
@@ -42,20 +42,33 @@ function deleteCachedConstructors (component) {
   Cypress._.values(component.components).forEach(deleteConstructor)
 }
 
-const vueHtml = `
-<html>
-<head></head>
-<body>
-  <script src="../node_modules/vue/dist/vue.js"></script>
-  <div id="app"></div>
-</body>
-</html>
-`
+const getVuePath = options =>
+  options.vue || options.vuePath || '../node_modules/vue/dist/vue.js'
 
-const mountVue = component => () => {
+const getPageHTML = options => {
+  if (options.html) {
+    return options.html
+  }
+  const vue = getVuePath(options)
+  const vueHtml = stripIndent`
+    <html>
+      <head></head>
+      <body>
+        <div id="app"></div>
+        <script src="${vue}"></script>
+      </body>
+    </html>
+  `
+  return vueHtml
+}
+
+const mountVue = (component, options = {}) => () => {
   cy.document().then(document => {
+    const vueHtml = getPageHTML(options)
     document.write(vueHtml)
     document.close()
+    console.log('wrote html')
+    console.log(vueHtml)
   })
   cy
     .window()

Original file line number	Diff line number	Diff line change
`@@ -93,5 +93,8 @@`
`93`	`93`	`"Cypress",`
`94`	`94`	`"cy"`
`95`	`95`	`]`
	`96`	`+ },`
	`97`	`+ "dependencies": {`
	`98`	`+ "common-tags": "1.6.0"`
`96`	`99`	`}`
`97`	`100`	`}`