Allow selectors in template option when testing

vuejs · Dec 16, 2019 · e1c1b95 · e1c1b95
1 parent 3115396
commit e1c1b95
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git a/packages/shared/compile-template.js b/packages/shared/compile-template.js
@@ -17,6 +17,16 @@ export function compileFromString(str: string) {
 
 export function compileTemplate(component: Component): void {
   if (component.template) {
+    if (component.template.charAt('#') === '#') {
+      var el = document.querySelector(component.template)
+      if (!el) {
+        throwError('Cannot find element' + component.template)
+
+        el = document.createElement('div')
+      }
+      component.template = el.innerHTML
+    }
+
     Object.assign(component, compileToFunctions(component.template))
   }
 

diff --git a/test/specs/mount.spec.js b/test/specs/mount.spec.js
@@ -161,6 +161,26 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => {
     expect(wrapper.html()).to.equal(`<div>foo</div>`)
   })
 
+  it('compiles templates from querySelector', () => {
+    if (
+      !(navigator.userAgent.includes && navigator.userAgent.includes('node.js'))
+    ) {
+      return
+    }
+    const template = window.createElement('div')
+    template.setAttribute('id', 'foo')
+    template.innerHTML = '<div>foo</div>'
+    window.document.body.appendChild(template)
+
+    const wrapper = mount({
+      template: '#foo'
+    })
+    expect(wrapper.vm).to.be.an('object')
+    expect(wrapper.html()).to.equal(`<div>foo</div>`)
+
+    window.body.removeChild(template)
+  })
+
   itDoNotRunIf(vueVersion < 2.3, 'overrides methods', () => {
     const stub = sandbox.stub()
     const TestComponent = Vue.extend({