remove classList polyfill in tests

package.json

@@ -49,7 +49,6 @@
     "babel-preset-es2015-rollup-vue": "^1.1.0",
     "babel-preset-flow-vue": "^1.0.0",
     "chromedriver": "^2.21.2",
-    "classlist-polyfill": "^1.0.0",
     "codecov.io": "^0.1.6",
     "cross-spawn": "^4.0.0",
     "entities": "^1.1.1",

src/platforms/web/runtime/class-util.js

@@ -5,6 +5,7 @@
  * SVG elements in IE
  */
 export function addClass (el: Element, cls: string) {
+  /* istanbul ignore else */
   if (el.classList) {
     if (cls.indexOf(' ') > -1) {
       cls.split(/\s+/).forEach(c => el.classList.add(c))
@@ -24,6 +25,7 @@ export function addClass (el: Element, cls: string) {
  * SVG elements in IE
  */
 export function removeClass (el: Element, cls: string) {
+  /* istanbul ignore else */
   if (el.classList) {
     if (cls.indexOf(' ') > -1) {
       cls.split(/\s+/).forEach(c => el.classList.remove(c))

test/helpers/classlist.js

@@ -0,0 +1,18 @@
+beforeEach(() => {
+  jasmine.addMatchers({
+    // since classList may not be supported in all browsers
+    toHaveClass: () => {
+      return {
+        compare: (el, cls) => {
+          const pass = el.classList
+            ? el.classList.contains(cls)
+            : el.getAttribute('class').split(/\s+/g).indexOf(cls) > -1
+          return {
+            pass,
+            message: `Expected element${pass ? ' ' : ' not '}to have class ${cls}`
+          }
+        }
+      }
+    }
+  })
+})

test/unit/features/render/render.spec.js

@@ -26,7 +26,7 @@ describe('Render', () => {
       }
     }).$mount()
     expect(vm.$el.childNodes[0].tagName).toBe('DIV')
-    expect(vm.$el.childNodes[0].classList.contains('message')).toBe(true)
+    expect(vm.$el.childNodes[0]).toHaveClass('message')
     expect(vm.$el.childNodes[0].childNodes[0].tagName).toBe('P')
     expect(vm.$el.childNodes[0].childNodes[0].textContent).toBe('hello world')
   })
@@ -56,7 +56,7 @@ describe('Render', () => {
     for (let i = 0; i < ul.children.length; i++) {
       const li = ul.children[i]
       expect(li.tagName).toBe('LI')
-      expect(li.classList.contains(`class${i}`)).toBe(true)
+      expect(li).toHaveClass(`class${i}`)
     }
   })
 

test/unit/features/transition/transition.spec.js

@@ -4,13 +4,16 @@ import { nextFrame } from 'web/runtime/modules/transition'
 
 if (!isIE9) {
   describe('Transition system', () => {
-    const duration = 30
+    const duration = 20
     insertCSS(`
       .test {
         -webkit-transition: opacity ${duration}ms ease;
         transition: opacity ${duration}ms ease;
       }
-      .test-enter, .test-leave-active, .hello, .bye.active, .changed-enter {
+      .v-enter, .v-leave-active,
+      .test-enter, .test-leave-active,
+      .hello, .bye.active,
+      .changed-enter {
         opacity: 0;
       }
       .test-anim-enter-active {
@@ -45,7 +48,32 @@ if (!isIE9) {
       document.body.appendChild(el)
     })
 
-    it('basic transitions', done => {
+    it('basic transition', done => {
+      const vm = new Vue({
+        template: '<div><div v-if="ok" class="test" transition>foo</div></div>',
+        data: { ok: true }
+      }).$mount(el)
+
+      // should not apply transition on initial render by default
+      expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')
+      vm.ok = false
+      waitForUpdate(() => {
+        expect(vm.$el.children[0].className).toBe('test v-leave')
+      }).thenWaitFor(nextFrame).then(() => {
+        expect(vm.$el.children[0].className).toBe('test v-leave-active')
+      }).thenWaitFor(timeout(duration + 10)).then(() => {
+        expect(vm.$el.children.length).toBe(0)
+        vm.ok = true
+      }).then(() => {
+        expect(vm.$el.children[0].className).toBe('test v-enter')
+      }).thenWaitFor(nextFrame).then(() => {
+        expect(vm.$el.children[0].className).toBe('test v-enter-active')
+      }).thenWaitFor(timeout(duration + 10)).then(() => {
+        expect(vm.$el.children[0].className).toBe('test')
+      }).then(done)
+    })
+
+    it('named transition', done => {
       const vm = new Vue({
         template: '<div><div v-if="ok" class="test" transition="test">foo</div></div>',
         data: { ok: true }
@@ -58,18 +86,14 @@ if (!isIE9) {
         expect(vm.$el.children[0].className).toBe('test test-leave')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-leave-active')
-      }).thenWaitFor(timeout(duration / 2)).then(() => {
-        expect(window.getComputedStyle(vm.$el.children[0]).opacity).not.toBe('1')
-      }).thenWaitFor(timeout(duration / 2 + 10)).then(() => {
+      }).thenWaitFor(timeout(duration + 10)).then(() => {
         expect(vm.$el.children.length).toBe(0)
         vm.ok = true
       }).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-enter')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-enter-active')
-      }).thenWaitFor(timeout(duration / 2)).then(() => {
-        expect(window.getComputedStyle(vm.$el.children[0]).opacity).not.toBe('0')
-      }).thenWaitFor(timeout(duration / 2 + 10)).then(() => {
+      }).thenWaitFor(timeout(duration + 10)).then(() => {
         expect(vm.$el.children[0].className).toBe('test')
       }).then(done)
     })
@@ -95,18 +119,14 @@ if (!isIE9) {
         expect(vm.$el.children[0].className).toBe('test bye')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test bye active')
-      }).thenWaitFor(timeout(duration / 2)).then(() => {
-        expect(window.getComputedStyle(vm.$el.children[0]).opacity).not.toBe('1')
-      }).thenWaitFor(timeout(duration / 2 + 10)).then(() => {
+      }).thenWaitFor(timeout(duration + 10)).then(() => {
         expect(vm.$el.children.length).toBe(0)
         vm.ok = true
       }).then(() => {
         expect(vm.$el.children[0].className).toBe('test hello')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test hello-active')
-      }).thenWaitFor(timeout(duration / 2)).then(() => {
-        expect(window.getComputedStyle(vm.$el.children[0]).opacity).not.toBe('0')
-      }).thenWaitFor(timeout(duration / 2 + 10)).then(() => {
+      }).thenWaitFor(timeout(duration + 10)).then(() => {
         expect(vm.$el.children[0].className).toBe('test')
       }).then(done)
     })
@@ -127,9 +147,7 @@ if (!isIE9) {
         expect(vm.$el.children[0].className).toBe('test test-leave')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-leave-active')
-      }).thenWaitFor(timeout(duration / 2)).then(() => {
-        expect(window.getComputedStyle(vm.$el.children[0]).opacity).not.toBe('1')
-      }).thenWaitFor(timeout(duration / 2 + 10)).then(() => {
+      }).thenWaitFor(timeout(duration + 10)).then(() => {
         expect(vm.$el.children.length).toBe(0)
         vm.ok = true
         vm.trans = 'changed'
@@ -137,9 +155,7 @@ if (!isIE9) {
         expect(vm.$el.children[0].className).toBe('test changed-enter')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test changed-enter-active')
-      }).thenWaitFor(timeout(duration / 2)).then(() => {
-        expect(window.getComputedStyle(vm.$el.children[0]).opacity).not.toBe('0')
-      }).thenWaitFor(timeout(duration / 2 + 10)).then(() => {
+      }).thenWaitFor(timeout(duration + 10)).then(() => {
         expect(vm.$el.children[0].className).toBe('test')
       }).then(done)
     })
@@ -162,18 +178,14 @@ if (!isIE9) {
         expect(vm.$el.children[0].className).toBe('test bye')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test bye active')
-      }).thenWaitFor(timeout(duration / 2)).then(() => {
-        expect(window.getComputedStyle(vm.$el.children[0]).opacity).not.toBe('1')
-      }).thenWaitFor(timeout(duration / 2 + 10)).then(() => {
+      }).thenWaitFor(timeout(duration + 10)).then(() => {
         expect(vm.$el.children.length).toBe(0)
         vm.ok = true
       }).then(() => {
         expect(vm.$el.children[0].className).toBe('test hello')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test hello-active')
-      }).thenWaitFor(timeout(duration / 2)).then(() => {
-        expect(window.getComputedStyle(vm.$el.children[0]).opacity).not.toBe('0')
-      }).thenWaitFor(timeout(duration / 2 + 10)).then(() => {
+      }).thenWaitFor(timeout(duration + 10)).then(() => {
         expect(vm.$el.children[0].className).toBe('test')
       }).then(done)
     })
@@ -216,9 +228,7 @@ if (!isIE9) {
       }).thenWaitFor(nextFrame).then(() => {
         expect(hooks.afterLeave).not.toHaveBeenCalled()
         expect(vm.$el.children[0].className).toBe('test test-leave-active')
-      }).thenWaitFor(timeout(duration / 2)).then(() => {
-        expect(window.getComputedStyle(vm.$el.children[0]).opacity).not.toBe('1')
-      }).thenWaitFor(timeout(duration / 2 + 10)).then(() => {
+      }).thenWaitFor(timeout(duration + 10)).then(() => {
         expect(hooks.afterLeave).toHaveBeenCalled()
         expect(vm.$el.children.length).toBe(0)
         vm.ok = true
@@ -229,14 +239,78 @@ if (!isIE9) {
       }).thenWaitFor(nextFrame).then(() => {
         expect(hooks.afterEnter).not.toHaveBeenCalled()
         expect(vm.$el.children[0].className).toBe('test test-enter-active')
-      }).thenWaitFor(timeout(duration / 2)).then(() => {
-        expect(window.getComputedStyle(vm.$el.children[0]).opacity).not.toBe('0')
-      }).thenWaitFor(timeout(duration / 2 + 10)).then(() => {
+      }).thenWaitFor(timeout(duration + 10)).then(() => {
         expect(hooks.afterEnter).toHaveBeenCalled()
         expect(vm.$el.children[0].className).toBe('test')
       }).then(done)
     })
 
+    it('explicit user callback in JavaScript hooks', done => {
+      let next
+      const vm = new Vue({
+        template: '<div><div v-if="ok" class="test" transition="test">foo</div></div>',
+        data: { ok: true },
+        transitions: {
+          test: {
+            enter: (el, cb) => {
+              next = cb
+            },
+            leave: (el, cb) => {
+              next = cb
+            }
+          }
+        }
+      }).$mount(el)
+      vm.ok = false
+      waitForUpdate(() => {
+        expect(vm.$el.children[0].className).toBe('test test-leave')
+      }).thenWaitFor(nextFrame).then(() => {
+        expect(vm.$el.children[0].className).toBe('test test-leave-active')
+      }).thenWaitFor(timeout(duration + 10)).then(() => {
+        expect(vm.$el.children[0].className).toBe('test test-leave-active')
+        expect(next).toBeTruthy()
+        next()
+        expect(vm.$el.children.length).toBe(0)
+      }).then(() => {
+        vm.ok = true
+      }).then(() => {
+        expect(vm.$el.children[0].className).toBe('test test-enter')
+      }).thenWaitFor(nextFrame).then(() => {
+        expect(vm.$el.children[0].className).toBe('test test-enter-active')
+      }).thenWaitFor(timeout(duration + 10)).then(() => {
+        expect(vm.$el.children[0].className).toBe('test test-enter-active')
+        expect(next).toBeTruthy()
+        next()
+        expect(vm.$el.children[0].className).toBe('test')
+      }).then(done)
+    })
+
+    it('css: false', done => {
+      const enterSpy = jasmine.createSpy('enter')
+      const leaveSpy = jasmine.createSpy('leave')
+      const vm = new Vue({
+        template: '<div><div v-if="ok" class="test" transition="test">foo</div></div>',
+        data: { ok: true },
+        transitions: {
+          test: {
+            css: false,
+            enter: enterSpy,
+            leave: leaveSpy
+          }
+        }
+      }).$mount(el)
+
+      vm.ok = false
+      waitForUpdate(() => {
+        expect(leaveSpy).toHaveBeenCalled()
+        expect(vm.$el.innerHTML).toBe('')
+        vm.ok = true
+      }).then(() => {
+        expect(enterSpy).toHaveBeenCalled()
+        expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')
+      }).then(done)
+    })
+
     it('enterCancelled', done => {
       const spy = jasmine.createSpy('enterCancelled')
       const vm = new Vue({
@@ -279,10 +353,7 @@ if (!isIE9) {
         expect(vm.$el.children[0].className).toBe('test test-leave')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-leave-active')
-      }).thenWaitFor(timeout(duration / 2)).then(() => {
-        expect(window.getComputedStyle(vm.$el.children[0]).opacity).not.toBe('1')
-        expect(vm.$el.children[0].style.display).toBe('')
-      }).thenWaitFor(timeout(duration / 2 + 10)).then(() => {
+      }).thenWaitFor(timeout(duration + 10)).then(() => {
         expect(vm.$el.children[0].style.display).toBe('none')
         vm.ok = true
       }).then(() => {
@@ -290,9 +361,7 @@ if (!isIE9) {
         expect(vm.$el.children[0].className).toBe('test test-enter')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-enter-active')
-      }).thenWaitFor(timeout(duration / 2)).then(() => {
-        expect(window.getComputedStyle(vm.$el.children[0]).opacity).not.toBe('0')
-      }).thenWaitFor(timeout(duration / 2 + 10)).then(() => {
+      }).thenWaitFor(timeout(duration + 10)).then(() => {
         expect(vm.$el.children[0].className).toBe('test')
       }).then(done)
     })
@@ -316,7 +385,6 @@ if (!isIE9) {
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-leave-active')
       }).thenWaitFor(timeout(duration / 2)).then(() => {
-        expect(window.getComputedStyle(vm.$el.children[0]).opacity).not.toBe('1')
         vm.ok = true
       }).then(() => {
         expect(spy).toHaveBeenCalled()
@@ -325,7 +393,6 @@ if (!isIE9) {
         expect(vm.$el.children[0].className).toBe('test test-enter-active')
       }).thenWaitFor(timeout(duration + 10)).then(() => {
         expect(vm.$el.children[0].style.display).toBe('')
-        expect(window.getComputedStyle(vm.$el.children[0]).opacity).toBe('1')
       }).then(done)
     })
 
@@ -342,24 +409,56 @@ if (!isIE9) {
         expect(vm.$el.children[0].className).toBe('test test-anim-leave')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-anim-leave-active')
-      }).thenWaitFor(timeout(duration / 2)).then(() => {
-        expect(window.getComputedStyle(vm.$el.children[0]).opacity).not.toBe('1')
-      }).thenWaitFor(timeout(duration / 2 + 10)).then(() => {
+      }).thenWaitFor(timeout(duration + 10)).then(() => {
         expect(vm.$el.children.length).toBe(0)
         vm.ok = true
       }).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-anim-enter')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-anim-enter-active')
-      }).thenWaitFor(timeout(duration / 2)).then(() => {
-        expect(window.getComputedStyle(vm.$el.children[0]).opacity).not.toBe('0')
-      }).thenWaitFor(timeout(duration / 2 + 10)).then(() => {
+      }).thenWaitFor(timeout(duration + 10)).then(() => {
         expect(vm.$el.children[0].className).toBe('test')
       }).then(done)
     })
 
-    it('transition on appear', () => {
+    it('transition on appear', done => {
+      const vm = new Vue({
+        template: '<div><div v-if="ok" class="test" transition="test" transition-on-appear>foo</div></div>',
+        data: { ok: true }
+      }).$mount(el)
+
+      waitForUpdate(() => {
+        expect(vm.$el.children[0].className).toBe('test test-enter')
+      }).thenWaitFor(nextFrame).then(() => {
+        expect(vm.$el.children[0].className).toBe('test test-enter-active')
+      }).thenWaitFor(timeout(duration + 10)).then(() => {
+        expect(vm.$el.children[0].className).toBe('test')
+      }).then(done)
+    })
 
+    it('transition on SVG elements', done => {
+      const vm = new Vue({
+        template: '<svg><circle cx="0" cy="0" r="10" v-if="ok" class="test" transition></circle></svg>',
+        data: { ok: true }
+      }).$mount(el)
+
+      // should not apply transition on initial render by default
+      expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test')
+      vm.ok = false
+      waitForUpdate(() => {
+        expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-leave')
+      }).thenWaitFor(nextFrame).then(() => {
+        expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-leave-active')
+      }).thenWaitFor(timeout(duration + 10)).then(() => {
+        expect(vm.$el.childNodes.length).toBe(0)
+        vm.ok = true
+      }).then(() => {
+        expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-enter')
+      }).thenWaitFor(nextFrame).then(() => {
+        expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-enter-active')
+      }).thenWaitFor(timeout(duration + 10)).then(() => {
+        expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test')
+      }).then(done)
     })
   })
 }

test/unit/index.js

@@ -1,5 +1,4 @@
 import Vue from 'vue'
-import 'classlist-polyfill' // for IE9
 
 // ignore whitespace in tests
 Vue.config.preserveWhitespace = false

test/unit/modules/vdom/modules/attrs.spec.js

@@ -7,14 +7,14 @@ describe('attrs module', () => {
     const vnode = new VNode('p', { staticAttrs: { id: 1, class: 'class1' }})
     const elm = patch(null, vnode)
     expect(elm.id).toBe('1')
-    expect(elm.classList.contains('class1')).toBe(true)
+    expect(elm).toHaveClass('class1')
   })
 
   it('should create an element with attrs', () => {
     const vnode = new VNode('p', { attrs: { id: 1, class: 'class1' }})
     const elm = patch(null, vnode)
     expect(elm.id).toBe('1')
-    expect(elm.classList.contains('class1')).toBe(true)
+    expect(elm).toHaveClass('class1')
   })
 
   it('should change the elements attrs', () => {
@@ -23,9 +23,9 @@ describe('attrs module', () => {
     patch(null, vnode1)
     const elm = patch(vnode1, vnode2)
     expect(elm.id).toBe('2')
-    expect(elm.classList.contains('i')).toBe(true)
-    expect(elm.classList.contains('am')).toBe(true)
-    expect(elm.classList.contains('vdom')).toBe(false)
+    expect(elm).toHaveClass('i')
+    expect(elm).toHaveClass('am')
+    expect(elm).not.toHaveClass('vdom')
   })
 
   it('should remove the elements attrs', () => {
@@ -34,7 +34,7 @@ describe('attrs module', () => {
     patch(null, vnode1)
     const elm = patch(vnode1, vnode2)
     expect(elm.id).toBe('1')
-    expect(elm.classList.length).toBe(0)
+    expect(elm.className).toBe('')
   })
 
   it('should remove the falsy value from boolean attr', () => {

test/unit/modules/vdom/modules/class.spec.js

@@ -5,20 +5,20 @@ describe('class module', () => {
   it('shuold create an element with staticClass', () => {
     const vnode = new VNode('p', { staticClass: 'class1' })
     const elm = patch(null, vnode)
-    expect(elm.classList.contains('class1')).toBe(true)
+    expect(elm).toHaveClass('class1')
   })
 
   it('should create an element with class', () => {
     const vnode = new VNode('p', { class: 'class1' })
     const elm = patch(null, vnode)
-    expect(elm.classList.contains('class1')).toBe(true)
+    expect(elm).toHaveClass('class1')
   })
 
   it('should create an element with array class', () => {
     const vnode = new VNode('p', { class: ['class1', 'class2'] })
     const elm = patch(null, vnode)
-    expect(elm.classList.contains('class1')).toBe(true)
-    expect(elm.classList.contains('class2')).toBe(true)
+    expect(elm).toHaveClass('class1')
+    expect(elm).toHaveClass('class2')
   })
 
   it('should create an element with object class', () => {
@@ -26,9 +26,9 @@ describe('class module', () => {
       class: { class1: true, class2: false, class3: true }
     })
     const elm = patch(null, vnode)
-    expect(elm.classList.contains('class1')).toBe(true)
-    expect(elm.classList.contains('class2')).toBe(false)
-    expect(elm.classList.contains('class3')).toBe(true)
+    expect(elm).toHaveClass('class1')
+    expect(elm).not.toHaveClass('class2')
+    expect(elm).toHaveClass('class3')
   })
 
   it('should create an element with mixed class', () => {
@@ -36,19 +36,19 @@ describe('class module', () => {
       class: [{ class1: false, class2: true, class3: false }, 'class4', ['class5', 'class6']]
     })
     const elm = patch(null, vnode)
-    expect(elm.classList.contains('class1')).toBe(false)
-    expect(elm.classList.contains('class2')).toBe(true)
-    expect(elm.classList.contains('class3')).toBe(false)
-    expect(elm.classList.contains('class4')).toBe(true)
-    expect(elm.classList.contains('class5')).toBe(true)
-    expect(elm.classList.contains('class6')).toBe(true)
+    expect(elm).not.toHaveClass('class1')
+    expect(elm).toHaveClass('class2')
+    expect(elm).not.toHaveClass('class3')
+    expect(elm).toHaveClass('class4')
+    expect(elm).toHaveClass('class5')
+    expect(elm).toHaveClass('class6')
   })
 
   it('should create an element with staticClass and class', () => {
     const vnode = new VNode('p', { staticClass: 'class1', class: 'class2' })
     const elm = patch(null, vnode)
-    expect(elm.classList.contains('class1')).toBe(true)
-    expect(elm.classList.contains('class2')).toBe(true)
+    expect(elm).toHaveClass('class1')
+    expect(elm).toHaveClass('class2')
   })
 
   it('should handle transition class', () => {
@@ -61,10 +61,10 @@ describe('class module', () => {
       class: { class1: true, class2: true, class3: true }
     })
     elm = patch(vnode1, vnode2)
-    expect(elm.classList.contains('class1')).toBe(true)
-    expect(elm.classList.contains('class2')).toBe(true)
-    expect(elm.classList.contains('class3')).toBe(true)
-    expect(elm.classList.contains('class4')).toBe(true)
+    expect(elm).toHaveClass('class1')
+    expect(elm).toHaveClass('class2')
+    expect(elm).toHaveClass('class3')
+    expect(elm).toHaveClass('class4')
   })
 
   it('should change the elements class', () => {
@@ -74,11 +74,11 @@ describe('class module', () => {
     const vnode2 = new VNode('p', { staticClass: 'foo bar' })
     let elm = patch(null, vnode1)
     elm = patch(vnode1, vnode2)
-    expect(elm.classList.contains('class1')).toBe(false)
-    expect(elm.classList.contains('class2')).toBe(false)
-    expect(elm.classList.contains('class3')).toBe(false)
-    expect(elm.classList.contains('foo')).toBe(true)
-    expect(elm.classList.contains('bar')).toBe(true)
+    expect(elm).not.toHaveClass('class1')
+    expect(elm).not.toHaveClass('class2')
+    expect(elm).not.toHaveClass('class3')
+    expect(elm).toHaveClass('foo')
+    expect(elm).toHaveClass('bar')
   })
 
   it('should remove the elements class', () => {
@@ -88,8 +88,8 @@ describe('class module', () => {
     const vnode2 = new VNode('p', { class: {}})
     let elm = patch(null, vnode1)
     elm = patch(vnode1, vnode2)
-    expect(elm.classList.contains('class1')).toBe(false)
-    expect(elm.classList.contains('class2')).toBe(false)
-    expect(elm.classList.contains('class3')).toBe(false)
+    expect(elm).not.toHaveClass('class1')
+    expect(elm).not.toHaveClass('class2')
+    expect(elm).not.toHaveClass('class3')
   })
 })