test for 3f943c6, also extract inDoc patch for PhantomJS tests into e…

…xternal file
9kopb · Feb 2, 2015 · b04c209 · b04c209
1 parent 3f943c6
commit b04c209
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 28 deletions.
diff --git a/gruntfile.js b/gruntfile.js
@@ -41,10 +41,12 @@ module.exports = function (grunt) {
         frameworks: ['jasmine', 'commonjs'],
         files: [
           'src/**/*.js',
+          'test/unit/lib/indoc_patch.js',
           'test/unit/specs/**/*.js'
         ],
         preprocessors: {
           'src/**/*.js': ['commonjs'],
+          'test/unit/lib/indoc_patch.js': ['commonjs'],
           'test/unit/specs/**/*.js': ['commonjs']
         },
         singleRun: true
@@ -61,6 +63,7 @@ module.exports = function (grunt) {
           reporters: ['progress', 'coverage'],
           preprocessors: {
             'src/**/*.js': ['commonjs', 'coverage'],
+            'test/unit/lib/indoc_patch.js': ['commonjs'],
             'test/unit/specs/**/*.js': ['commonjs']
           },
           coverageReporter: {

diff --git a/test/unit/lib/indoc_patch.js b/test/unit/lib/indoc_patch.js
@@ -0,0 +1,23 @@
+// PhantomJS always return false when using Element.contains
+// on a comment node - so we have to patch the inDoc util
+// function when running in PhantomJS.
+
+var _ = require('../../../src/util')
+var inDoc = _.inDoc
+
+_.inDoc = function (el) {
+  if (el && el.nodeType === 8) {
+    return manualInDoc(el)
+  }
+  return inDoc(el)  
+}
+
+function manualInDoc (el) {
+  while (el) {
+    if (el === document.documentElement) {
+      return true
+    }
+    el = el.parentNode
+  }
+  return false
+}
diff --git a/test/unit/specs/directives/component_spec.js b/test/unit/specs/directives/component_spec.js
@@ -1,3 +1,5 @@
+// patch inDoc
+require('../../lib/indoc_patch')
 var _ = require('../../../../src/util')
 var Vue = require('../../../../src/vue')
 
@@ -7,9 +9,14 @@ if (_.inBrowser) {
     var el
     beforeEach(function () {
       el = document.createElement('div')
+      document.body.appendChild(el)
       spyOn(_, 'warn')
     })
 
+    afterEach(function () {
+      document.body.removeChild(el)
+    })
+
     it('static', function () {
       var vm = new Vue({
         el: el,
@@ -248,15 +255,6 @@ if (_.inBrowser) {
       var spy1 = jasmine.createSpy('enter')
       var spy2 = jasmine.createSpy('leave')
       var next
-      // === IMPORTANT ===
-      // PhantomJS always returns false when calling
-      // Element.contains() on a comment node. This causes
-      // transitions to be skipped. Monkey patching here
-      // isn't ideal but does the job...
-      var inDoc = _.inDoc
-      _.inDoc = function () {
-        return true
-      }
       var vm = new Vue({
         el: el,
         data: {
@@ -289,8 +287,6 @@ if (_.inBrowser) {
         next()
         expect(spy2).toHaveBeenCalled()
         expect(el.textContent).toBe('BBB')
-        // clean up
-        _.inDoc = inDoc
         done()
       })
     })
@@ -299,10 +295,6 @@ if (_.inBrowser) {
       var spy1 = jasmine.createSpy('enter')
       var spy2 = jasmine.createSpy('leave')
       var next
-      var inDoc = _.inDoc
-      _.inDoc = function () {
-        return true
-      }
       var vm = new Vue({
         el: el,
         data: {
@@ -335,8 +327,6 @@ if (_.inBrowser) {
         next()
         expect(spy2).toHaveBeenCalled()
         expect(el.textContent).toBe('BBB')
-        // clean up
-        _.inDoc = inDoc
         done()
       })
     })

diff --git a/test/unit/specs/directives/repeat_spec.js b/test/unit/specs/directives/repeat_spec.js
@@ -1,3 +1,5 @@
+// patch inDoc
+require('../../lib/indoc_patch')
 var _ = require('../../../../src/util')
 var Vue = require('../../../../src/vue')
 
@@ -456,15 +458,7 @@ if (_.inBrowser) {
     })
 
     it('with transition', function (done) {
-      // === IMPORTANT ===
-      // PhantomJS always returns false when calling
-      // Element.contains() on a comment node. This causes
-      // transitions to be skipped. Monkey patching here
-      // isn't ideal but does the job...
-      var inDoc = _.inDoc
-      _.inDoc = function () {
-        return true
-      }
+      document.body.appendChild(el)
       var vm = new Vue({
         el: el,
         template: '<div v-repeat="items" v-transition="test">{{a}}</div>',
@@ -482,8 +476,7 @@ if (_.inBrowser) {
       vm.items.splice(1, 1, {a:4})
       setTimeout(function () {
         expect(el.innerHTML).toBe('<div>1</div><div>4</div><div>3</div><!--v-repeat-->')
-        // clean up
-        _.inDoc = inDoc
+        document.body.removeChild(el)
         done()
       }, 30)
     })

diff --git a/test/unit/specs/misc_spec.js b/test/unit/specs/misc_spec.js
@@ -1,3 +1,5 @@
+// patch inDoc
+require('../lib/indoc_patch')
 // test cases for edge cases & bug fixes
 var Vue = require('../../../src/vue')
 
@@ -22,4 +24,29 @@ describe('Misc', function () {
     expect(vm.$el.textContent).toBe('yo hi')
   })
 
+  it('attached/detached hooks for transcluded components', function () {
+    var spy1 = jasmine.createSpy('attached')
+    var spy2 = jasmine.createSpy('detached')
+    var el = document.createElement('div')
+    el.innerHTML = '<div v-component="outter" v-ref="outter"><div v-component="inner"></div></div>'
+    document.body.appendChild(el)
+
+    var vm = new Vue({
+      el: el,
+      components: {
+        outter: {
+          template: '<content></content>'
+        },
+        inner: {
+          template: 'hi',
+          attached: spy1,
+          detached: spy2
+        }
+      }
+    })
+    expect(spy1).toHaveBeenCalled()
+    vm.$.outter.$remove()
+    expect(spy2).toHaveBeenCalled()
+  })
+
 })