feat: support base option for bahmutov/cypress-vue-unit-test#4

bahmutov · bahmutov · commit ba141101fdb6 · 2017-12-27T13:51:01.000-05:00
diff --git a/README.md b/README.md
@@ -56,6 +56,17 @@ const options = {
 beforeEach(mountVue(/* my Vue code */, options))
 ```
 
+* `base` - specify `<base href=...>` path. Useful to get static assets work,
+but might prevent relative HTTP references from working (like path to Vue.js
+from `../../node_modules/vue/dist/vue.js` for example)
+
+```js
+const options = {
+  base: '/'
+}
+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.
 
@@ -466,6 +477,11 @@ describe('Hello.vue', () => {
 })
 ```
 
+## FAQ
+
+- If your component's static assets are not loading, you probably need
+to start and proxy Webpack dev server. See [issue #4](https://github.com/bahmutov/cypress-vue-unit-test/issues/4)
+
 ## Related info
 
 - [Testing Vue web applications with Vuex data store & REST backend](https://www.cypress.io/blog/2017/11/28/testing-vue-web-application-with-vuex-data-store-and-rest-backend/)
diff --git a/cypress/integration/options-spec.js b/cypress/integration/options-spec.js
@@ -45,3 +45,21 @@ describe('Pass window HTML to use', () => {
     cy.window().its('Vue.version').should('be.a', 'string')
   })
 })
+
+describe('Pass Vue.js url and base tag', () => {
+  const options = {
+    vue: 'https://unpkg.com/vue',
+    base: '/'
+  }
+
+  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/src/index.js b/src/index.js
@@ -53,11 +53,34 @@ const getPageHTML = options => {
 
   // note: add "base" tag to force loading static assets
   // from the server, not from the "spec" file URL
+  if (options.base) {
+    if (vue.startsWith('.')) {
+      console.error(
+        'You are using base tag %s and relative Vue path %s',
+        options.base,
+        vue
+      )
+      console.error('the relative path might NOT work')
+      console.error(
+        'maybe pass Vue url using "https://unpkg.com/vue/dist/vue.js"'
+      )
+    }
+    return stripIndent`
+      <html>
+        <head>
+          <base href="${options.base}" />
+        </head>
+        <body>
+          <div id="app"></div>
+          <script src="${vue}"></script>
+        </body>
+      </html>
+    `
+  }
+
   const vueHtml = stripIndent`
     <html>
-      <head>
-        <base href="/" />
-      </head>
+      <head></head>
       <body>
         <div id="app"></div>
         <script src="${vue}"></script>
