✅ Add ripple tests

src/ripple.js

@@ -16,13 +16,13 @@ export default {
   componentUpdated (el, binding, vnode, oldVnode) {
     // Always recreate for functional components
     if (vnode.functionalContext) {
-      console.log('updated', el)
       el.mdcRipple_.destroy()
       binding.def.bind(el, binding)
     }
   },
 
   unbind (el, binding) {
+    // istanbul ignore else
     if (el.mdcRipple_) {
       el.mdcRipple_.destroy()
       el.classList.remove(surfaceClass)

test/specs/ripple.spec.js

@@ -20,6 +20,21 @@ describe('Ripple', function () {
     }).then(done)
   })
 
+  it('can use custom class', function (done) {
+    const vm = createVM(
+      this,
+      `<div class='my-ripple' v-ripple.custom>Custom</div>`,
+      { directives: { ripple }}
+    )
+    nextTick().then(() => {
+      const ripple = vm.$('.my-ripple')
+      ripple.should.not.have.class('mdc-ripple-surface')
+    }).then(() => {
+      const ripple = vm.$('.my-ripple')
+      ripple.should.have.class('mdc-ripple-upgraded')
+    }).then(done)
+  })
+
   it('unbounds events and clases', function (done) {
     const vm = createVM(this, function (h) {
       const opts = {
@@ -46,4 +61,109 @@ describe('Ripple', function () {
       ripple.should.not.have.class('mdc-ripple-surface')
     }).then(done)
   })
+
+  it('works with regular elements', function (done) {
+    const vm = createVM(
+      this,
+      `<div class="my-ripple" v-ripple :key="text">A div</div>`,
+      {
+        data: {
+          text: 'foo',
+        },
+        directives: { ripple },
+      }
+    )
+    const oldEl = vm.$('.my-ripple')
+    vm.text = 'bar'
+    nextTick().then(() => {
+      // we need to wait an extra tick
+    }).then(() => {
+      const ripple = vm.$('.my-ripple')
+      oldEl.should.not.equal(ripple)
+      ripple.should.have.class('mdc-ripple-upgraded')
+      ripple.should.have.class('mdc-ripple-surface')
+    }).then(done)
+  })
+
+  it('works with regular components', function (done) {
+    const vm = createVM(
+      this,
+      `<foo class="my-ripple" v-ripple :key="text">A foo</foo>`,
+      {
+        data: {
+          text: 'foo',
+        },
+        directives: { ripple },
+        components: {
+          Foo: {
+            template: '<div><slot/></div>',
+          },
+        },
+      }
+    )
+    const oldEl = vm.$('.my-ripple')
+    vm.text = 'bar'
+    nextTick().then(() => {
+      // we need to wait an extra tick
+    }).then(() => {
+      const ripple = vm.$('.my-ripple')
+      oldEl.should.not.equal(ripple)
+      ripple.should.have.class('mdc-ripple-upgraded')
+      ripple.should.have.class('mdc-ripple-surface')
+    }).then(done)
+  })
+
+  it('works with functional components', function (done) {
+    const vm = createVM(
+      this,
+      `<foo class="my-ripple" v-ripple>{{text}}</foo>`,
+      {
+        data: {
+          text: 'foo',
+        },
+        directives: { ripple },
+        components: {
+          Foo: {
+            functional: true,
+            render: (h, { data, children }) => h('div', data, children),
+          },
+        },
+      }
+    )
+    const oldEl = vm.$('.my-ripple')
+    vm.text = 'bar'
+    nextTick().then(() => {
+      // we need to wait an extra tick
+    }).then(() => {
+      const ripple = vm.$('.my-ripple')
+      // The same object is reused
+      oldEl.should.equal(ripple)
+      ripple.should.have.class('mdc-ripple-upgraded')
+      ripple.should.have.class('mdc-ripple-surface')
+    }).then(done)
+  })
+
+  it('works when the node is reused', function (done) {
+    const vm = createVM(
+      this,
+      `<div class="my-ripple" v-ripple>{{text}}</div>`,
+      {
+        data: {
+          text: 'foo',
+        },
+        directives: { ripple },
+      }
+    )
+    const oldEl = vm.$('.my-ripple')
+    vm.text = 'bar'
+    nextTick().then(() => {
+      // we need to wait an extra tick
+    }).then(() => {
+      const ripple = vm.$('.my-ripple')
+      // The same object is reused
+      oldEl.should.equal(ripple)
+      ripple.should.have.class('mdc-ripple-upgraded')
+      ripple.should.have.class('mdc-ripple-surface')
+    }).then(done)
+  })
 })