test: refactor tests to avoid spies

Author: keithamus

test/bind.js

@@ -31,129 +31,102 @@ describe('bind', () => {
     const instance = document.createElement('bind-test-element')
     chai.spy.on(instance, 'foo')
     const el = document.createElement('div')
-    instance.querySelectorAll = () => [el]
-    el.closest = () => instance
-    el.getAttribute = () => 'click:bind-test-element#foo'
-    chai.spy.on(el, 'addEventListener')
+    el.setAttribute('data-action', 'click:bind-test-element#foo')
+    instance.appendChild(el)
     bind(instance)
-    expect(el.addEventListener).to.have.been.called.once.with('click')
-    const {calls} = el.addEventListener.__spy
-    const fn = calls[0][1]
     expect(instance.foo).to.have.not.been.called()
-    fn()
+    el.click()
     expect(instance.foo).to.have.been.called(1)
   })
 
   it('allows for the presence of `:` in an event name', () => {
     const instance = document.createElement('bind-test-element')
     chai.spy.on(instance, 'foo')
     const el = document.createElement('div')
-    instance.querySelectorAll = () => [el]
-    el.closest = () => instance
-    el.getAttribute = () => 'custom:event:bind-test-element#foo'
-    chai.spy.on(el, 'addEventListener')
+    el.setAttribute('data-action', 'custom:event:bind-test-element#foo')
+    instance.appendChild(el)
     bind(instance)
-    expect(el.addEventListener).to.have.been.called.once.with('custom:event')
-    const {calls} = el.addEventListener.__spy
-    const fn = calls[0][1]
     expect(instance.foo).to.have.not.been.called()
-    fn()
+    el.dispatchEvent(new CustomEvent('custom:event'))
     expect(instance.foo).to.have.been.called(1)
   })
 
   it('binds events on the controller to itself', () => {
     const instance = document.createElement('bind-test-element')
     chai.spy.on(instance, 'foo')
-    instance.matches = () => true
-    instance.getAttribute = () => 'click:bind-test-element#foo'
-    instance.addEventListener = () => true
-    instance.querySelectorAll = () => []
-    chai.spy.on(instance, 'addEventListener')
+    instance.setAttribute('data-action', 'click:bind-test-element#foo')
     bind(instance)
-    expect(instance.addEventListener).to.have.been.called.once.with('click')
-    const {calls} = instance.addEventListener.__spy
-    const fn = calls[0][1]
     expect(instance.foo).to.have.not.been.called()
-    fn()
+    instance.click()
     expect(instance.foo).to.have.been.called(1)
   })
 
   it('does not bind elements whose closest selector is not this controller', () => {
     const instance = document.createElement('bind-test-element')
     chai.spy.on(instance, 'foo')
     const el = document.createElement('div')
-    instance.querySelectorAll = () => [el]
-    el.closest = () => null
-    el.getAttribute = () => 'click:bind-test-element#foo'
-    chai.spy.on(el, 'addEventListener')
+    el.getAttribute('data-action', 'click:bind-test-element#foo')
+    const container = document.createElement('div')
+    container.append(instance, el)
     bind(instance)
-    expect(el.addEventListener).to.have.not.been.called()
+    el.click()
+    expect(instance.foo).to.have.not.been.called()
   })
 
   it('does not bind elements whose data-action does not match controller tagname', () => {
     const instance = document.createElement('bind-test-element')
     chai.spy.on(instance, 'foo')
     const el = document.createElement('div')
-    instance.querySelectorAll = () => [el]
-    el.closest = () => null
-    el.getAttribute = () => 'click:other-controller#foo'
-    chai.spy.on(el, 'addEventListener')
+    el.setAttribute('data-action', 'click:other-controller#foo')
+    instance.appendChild(el)
     bind(instance)
-    expect(el.addEventListener).to.have.not.been.called()
+    expect(instance.foo).to.have.not.been.called()
+    el.click()
+    expect(instance.foo).to.have.not.been.called()
   })
 
   it('does not bind methods that dont exist', () => {
     const instance = document.createElement('bind-test-element')
     chai.spy.on(instance, 'foo')
     const el = document.createElement('div')
-    instance.querySelectorAll = () => [el]
-    el.closest = () => instance
-    el.getAttribute = () => 'click:bind-test-element#frob'
-    chai.spy.on(el, 'addEventListener')
+    el.setAttribute('data-action', 'click:bind-test-element#frob')
+    instance.appendChild(el)
     bind(instance)
-    expect(el.addEventListener).to.have.not.been.called()
+    el.click()
+    expect(instance.foo).to.have.not.been.called()
   })
 
   it('can bind multiple event types', () => {
     const instance = document.createElement('bind-test-element')
     chai.spy.on(instance, 'foo')
     const el = document.createElement('div')
-    instance.querySelectorAll = () => [el]
-    el.closest = () => instance
-    el.getAttribute = () => 'click:bind-test-element#foo submit:bind-test-element#foo'
-    chai.spy.on(el, 'addEventListener')
+    el.setAttribute('data-action', 'click:bind-test-element#foo submit:bind-test-element#foo')
+    instance.appendChild(el)
     bind(instance)
-    expect(el.addEventListener).to.have.been.called(2)
-    expect(el.addEventListener).to.be.first.called.with('click')
-    expect(el.addEventListener).to.be.second.called.with('submit')
-    const {calls} = el.addEventListener.__spy
     expect(instance.foo).to.have.not.been.called()
-    calls[0][1]('a')
-    expect(instance.foo).to.have.been.called.once.with('a')
-    calls[1][1]('b')
-    expect(instance.foo).to.have.been.called.twice.second.with('b')
+    el.dispatchEvent(new CustomEvent('click'))
+    expect(instance.foo).to.have.been.called.exactly(1)
+    el.dispatchEvent(new CustomEvent('submit'))
+    expect(instance.foo).to.have.been.called.exactly(2)
+    const calls = instance.foo.__spy.calls
+    expect(calls).to.have.nested.property('[0][0].type', 'click')
+    expect(calls).to.have.nested.property('[1][0].type', 'submit')
   })
 
   it('can bind multiple elements to the same event', () => {
     const instance = document.createElement('bind-test-element')
     chai.spy.on(instance, 'foo')
     const el1 = document.createElement('div')
     const el2 = document.createElement('div')
-    instance.querySelectorAll = () => [el1, el2]
-    el1.closest = () => instance
-    el2.closest = () => instance
-    el1.getAttribute = () => 'click:bind-test-element#foo'
-    el2.getAttribute = () => 'submit:bind-test-element#foo'
-    chai.spy.on(el1, 'addEventListener')
-    chai.spy.on(el2, 'addEventListener')
+    el1.setAttribute('data-action', 'click:bind-test-element#foo')
+    el2.setAttribute('data-action', 'submit:bind-test-element#foo')
+    instance.append(el1, el2)
     bind(instance)
-    expect(el1.addEventListener).to.be.called.once.with('click')
-    expect(el2.addEventListener).to.be.called.once.with('submit')
     expect(instance.foo).to.have.not.been.called()
-    el1.addEventListener.__spy.calls[0][1]('a')
-    expect(instance.foo).to.have.been.called.once.with('a')
-    el2.addEventListener.__spy.calls[0][1]('b')
-    expect(instance.foo).to.have.been.called.twice.second.with('b')
+    el1.click()
+    expect(instance.foo).to.have.been.called.exactly(1)
+    el2.dispatchEvent(new CustomEvent('submit'))
+    expect(instance.foo).to.have.been.called.exactly(2)
   })
 
   describe('listenForBind', () => {