Replace mocked elements with real ones

Author: koddsson

catalyst/test/bind.js

@@ -1,29 +1,22 @@
 import {bind} from '../lib/bind.js'
 
 describe('bind', () => {
-  class MyController {
-    get tagName() {
-      return 'my-controller'
-    }
-    querySelectorAll() {}
-    foo() {}
-    matches() {}
-  }
+  window.customElements.define('bind-test-element', class extends HTMLElement {})
 
   it('queries for Elements matching data-action*="tagname"', () => {
-    const instance = new MyController()
+    const instance = document.createElement('bind-test-element')
     chai.spy.on(instance, 'querySelectorAll', () => [])
     bind(instance)
-    expect(instance.querySelectorAll).to.have.been.called.once.with.exactly('[data-action*=":my-controller#"]')
+    expect(instance.querySelectorAll).to.have.been.called.once.with.exactly('[data-action*=":bind-test-element#"]')
   })
 
   it('binds events on elements based on their data-action attribute', () => {
-    const instance = new MyController()
+    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:my-controller#foo'
+    el.getAttribute = () => 'click:bind-test-element#foo'
     chai.spy.on(el, 'addEventListener')
     bind(instance)
     expect(el.addEventListener).to.have.been.called.once.with('click')
@@ -35,12 +28,12 @@ describe('bind', () => {
   })
 
   it('allows for the presence of `:` in an event name', () => {
-    const instance = new MyController()
+    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:my-controller#foo'
+    el.getAttribute = () => 'custom:event:bind-test-element#foo'
     chai.spy.on(el, 'addEventListener')
     bind(instance)
     expect(el.addEventListener).to.have.been.called.once.with('custom:event')
@@ -52,10 +45,10 @@ describe('bind', () => {
   })
 
   it('binds events on the controller to itself', () => {
-    const instance = new MyController()
+    const instance = document.createElement('bind-test-element')
     chai.spy.on(instance, 'foo')
     instance.matches = () => true
-    instance.getAttribute = () => 'click:my-controller#foo'
+    instance.getAttribute = () => 'click:bind-test-element#foo'
     instance.addEventListener = () => true
     instance.querySelectorAll = () => []
     chai.spy.on(instance, 'addEventListener')
@@ -69,19 +62,19 @@ describe('bind', () => {
   })
 
   it('does not bind elements whose closest selector is not this controller', () => {
-    const instance = new MyController()
+    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:my-controller#foo'
+    el.getAttribute = () => 'click:bind-test-element#foo'
     chai.spy.on(el, 'addEventListener')
     bind(instance)
     expect(el.addEventListener).to.have.not.been.called()
   })
 
   it('does not bind elements whose data-action does not match controller tagname', () => {
-    const instance = new MyController()
+    const instance = document.createElement('bind-test-element')
     chai.spy.on(instance, 'foo')
     const el = document.createElement('div')
     instance.querySelectorAll = () => [el]
@@ -93,24 +86,24 @@ describe('bind', () => {
   })
 
   it('does not bind methods that dont exist', () => {
-    const instance = new MyController()
+    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:my-controller#frob'
+    el.getAttribute = () => 'click:bind-test-element#frob'
     chai.spy.on(el, 'addEventListener')
     bind(instance)
     expect(el.addEventListener).to.have.not.been.called()
   })
 
   it('can bind multiple event types', () => {
-    const instance = new MyController()
+    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:my-controller#foo submit:my-controller#foo'
+    el.getAttribute = () => 'click:bind-test-element#foo submit:bind-test-element#foo'
     chai.spy.on(el, 'addEventListener')
     bind(instance)
     expect(el.addEventListener).to.have.been.called(2)
@@ -125,15 +118,15 @@ describe('bind', () => {
   })
 
   it('can bind multiple elements to the same event', () => {
-    const instance = new MyController()
+    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:my-controller#foo'
-    el2.getAttribute = () => 'submit:my-controller#foo'
+    el1.getAttribute = () => 'click:bind-test-element#foo'
+    el2.getAttribute = () => 'submit:bind-test-element#foo'
     chai.spy.on(el1, 'addEventListener')
     chai.spy.on(el2, 'addEventListener')
     bind(instance)

catalyst/test/findtarget.js

@@ -1,12 +1,8 @@
 import {findTarget, findTargets} from '../lib/findtarget.js'
 
-class MyController extends HTMLElement {}
-if (!window.customElements.get('my-controller')) {
-  window.MyController = MyController
-  window.customElements.define('my-controller', MyController)
-}
-
 describe('findTarget', () => {
+  window.customElements.define('find-target-test-element', class extends HTMLElement {})
+
   let root
 
   beforeEach(() => {
@@ -19,31 +15,33 @@ describe('findTarget', () => {
   })
 
   it('calls querySelectorAll with the controller name and target name', () => {
-    const instance = new MyController()
+    const instance = document.createElement('find-target-test-element')
     chai.spy.on(instance, 'querySelectorAll', () => [])
     findTarget(instance, 'foo')
-    expect(instance.querySelectorAll).to.have.been.called.once.with.exactly('[data-target~="my-controller.foo"]')
+    expect(instance.querySelectorAll).to.have.been.called.once.with.exactly(
+      '[data-target~="find-target-test-element.foo"]'
+    )
   })
 
   it('returns the first element where closest tag is the controller', () => {
     const els = [document.createElement('div'), document.createElement('div')]
-    const instance = new MyController()
+    const instance = document.createElement('find-target-test-element')
     chai.spy.on(instance, 'querySelectorAll', () => els)
     chai.spy.on(els[0], 'closest', () => null)
     chai.spy.on(els[1], 'closest', () => instance)
     const target = findTarget(instance, 'foo')
-    expect(els[0].closest).to.have.been.called.once.with.exactly('my-controller')
-    expect(els[1].closest).to.have.been.called.once.with.exactly('my-controller')
+    expect(els[0].closest).to.have.been.called.once.with.exactly('find-target-test-element')
+    expect(els[1].closest).to.have.been.called.once.with.exactly('find-target-test-element')
     expect(target).to.equal(els[1])
   })
 
   it('returns the first element that has the exact target name', () => {
-    const instance = document.createElement('my-controller')
+    const instance = document.createElement('find-target-test-element')
 
     const notExactMatch = document.createElement('div')
-    notExactMatch.setAttribute('data-target', 'my-controller.foobar')
+    notExactMatch.setAttribute('data-target', 'find-target-test-element.foobar')
     const exactMatch = document.createElement('div')
-    exactMatch.setAttribute('data-target', 'my-controller.foo')
+    exactMatch.setAttribute('data-target', 'find-target-test-element.foo')
 
     instance.appendChild(notExactMatch)
     instance.appendChild(exactMatch)
@@ -54,10 +52,10 @@ describe('findTarget', () => {
   })
 
   it('returns targets when there are mutliple target values', () => {
-    const instance = document.createElement('my-controller')
+    const instance = document.createElement('find-target-test-element')
 
     const el = document.createElement('div')
-    el.setAttribute('data-target', 'my-controller.barfoo my-controller.foobar')
+    el.setAttribute('data-target', 'find-target-test-element.barfoo find-target-test-element.foobar')
 
     instance.appendChild(el)
 
@@ -69,10 +67,10 @@ describe('findTarget', () => {
   })
 
   it('returns targets when there are mutliple target values with different controllers', () => {
-    const instance = document.createElement('my-controller')
+    const instance = document.createElement('find-target-test-element')
 
     const el = document.createElement('div')
-    el.setAttribute('data-target', 'other-controller.barfoo my-controller.foobar')
+    el.setAttribute('data-target', 'other-controller.barfoo find-target-test-element.foobar')
 
     instance.appendChild(el)
 
@@ -86,23 +84,25 @@ describe('findTarget', () => {
 
 describe('findTargets', () => {
   it('calls querySelectorAll with the controller name and target name', () => {
-    const instance = new MyController()
+    const instance = document.createElement('find-target-test-element')
     chai.spy.on(instance, 'querySelectorAll', () => [])
     findTargets(instance, 'foo')
-    expect(instance.querySelectorAll).to.have.been.called.once.with.exactly('[data-target~="my-controller.foo"]')
+    expect(instance.querySelectorAll).to.have.been.called.once.with.exactly(
+      '[data-target~="find-target-test-element.foo"]'
+    )
   })
 
   it('returns all elements where closest tag is the controller', () => {
     const els = [document.createElement('div'), document.createElement('div'), document.createElement('div')]
-    const instance = new MyController()
+    const instance = document.createElement('find-target-test-element')
     chai.spy.on(instance, 'querySelectorAll', () => els)
     chai.spy.on(els[0], 'closest', () => instance)
     chai.spy.on(els[1], 'closest', () => null)
     chai.spy.on(els[2], 'closest', () => instance)
     const targets = findTargets(instance, 'foo')
-    expect(els[0].closest).to.have.been.called.once.with.exactly('my-controller')
-    expect(els[1].closest).to.have.been.called.once.with.exactly('my-controller')
-    expect(els[2].closest).to.have.been.called.once.with.exactly('my-controller')
+    expect(els[0].closest).to.have.been.called.once.with.exactly('find-target-test-element')
+    expect(els[1].closest).to.have.been.called.once.with.exactly('find-target-test-element')
+    expect(els[2].closest).to.have.been.called.once.with.exactly('find-target-test-element')
     expect(targets).to.deep.equal([els[0], els[2]])
   })
 })