Skip to content

Commit d76d943

Browse files
koddssonkoddsson
authored
Merge pull request #40 from github/use-real-custom-elements-in-tests
Use real custom elements in tests
2 parents 77048ec + 5592b18 commit d76d943

2 files changed

Lines changed: 51 additions & 63 deletions

File tree

‎catalyst/test/bind.js‎

Lines changed: 27 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,22 @@
11
import {bind} from '../lib/bind.js'
22

33
describe('bind', () => {
4-
class FakeElement {
5-
addEventListener() {}
6-
getAttribute() {}
7-
closest() {}
8-
}
9-
class MyController {
10-
get tagName() {
11-
return 'my-controller'
12-
}
13-
querySelectorAll() {}
14-
foo() {}
15-
matches() {}
16-
}
4+
window.customElements.define('bind-test-element', class extends HTMLElement {})
175

186
it('queries for Elements matching data-action*="tagname"', () => {
19-
const instance = new MyController()
7+
const instance = document.createElement('bind-test-element')
208
chai.spy.on(instance, 'querySelectorAll', () => [])
219
bind(instance)
22-
expect(instance.querySelectorAll).to.have.been.called.once.with.exactly('[data-action*=":my-controller#"]')
10+
expect(instance.querySelectorAll).to.have.been.called.once.with.exactly('[data-action*=":bind-test-element#"]')
2311
})
2412

2513
it('binds events on elements based on their data-action attribute', () => {
26-
const instance = new MyController()
14+
const instance = document.createElement('bind-test-element')
2715
chai.spy.on(instance, 'foo')
28-
const el = new FakeElement()
16+
const el = document.createElement('div')
2917
instance.querySelectorAll = () => [el]
3018
el.closest = () => instance
31-
el.getAttribute = () => 'click:my-controller#foo'
19+
el.getAttribute = () => 'click:bind-test-element#foo'
3220
chai.spy.on(el, 'addEventListener')
3321
bind(instance)
3422
expect(el.addEventListener).to.have.been.called.once.with('click')
@@ -40,12 +28,12 @@ describe('bind', () => {
4028
})
4129

4230
it('allows for the presence of `:` in an event name', () => {
43-
const instance = new MyController()
31+
const instance = document.createElement('bind-test-element')
4432
chai.spy.on(instance, 'foo')
45-
const el = new FakeElement()
33+
const el = document.createElement('div')
4634
instance.querySelectorAll = () => [el]
4735
el.closest = () => instance
48-
el.getAttribute = () => 'custom:event:my-controller#foo'
36+
el.getAttribute = () => 'custom:event:bind-test-element#foo'
4937
chai.spy.on(el, 'addEventListener')
5038
bind(instance)
5139
expect(el.addEventListener).to.have.been.called.once.with('custom:event')
@@ -57,10 +45,10 @@ describe('bind', () => {
5745
})
5846

5947
it('binds events on the controller to itself', () => {
60-
const instance = new MyController()
48+
const instance = document.createElement('bind-test-element')
6149
chai.spy.on(instance, 'foo')
6250
instance.matches = () => true
63-
instance.getAttribute = () => 'click:my-controller#foo'
51+
instance.getAttribute = () => 'click:bind-test-element#foo'
6452
instance.addEventListener = () => true
6553
instance.querySelectorAll = () => []
6654
chai.spy.on(instance, 'addEventListener')
@@ -74,21 +62,21 @@ describe('bind', () => {
7462
})
7563

7664
it('does not bind elements whose closest selector is not this controller', () => {
77-
const instance = new MyController()
65+
const instance = document.createElement('bind-test-element')
7866
chai.spy.on(instance, 'foo')
79-
const el = new FakeElement()
67+
const el = document.createElement('div')
8068
instance.querySelectorAll = () => [el]
8169
el.closest = () => null
82-
el.getAttribute = () => 'click:my-controller#foo'
70+
el.getAttribute = () => 'click:bind-test-element#foo'
8371
chai.spy.on(el, 'addEventListener')
8472
bind(instance)
8573
expect(el.addEventListener).to.have.not.been.called()
8674
})
8775

8876
it('does not bind elements whose data-action does not match controller tagname', () => {
89-
const instance = new MyController()
77+
const instance = document.createElement('bind-test-element')
9078
chai.spy.on(instance, 'foo')
91-
const el = new FakeElement()
79+
const el = document.createElement('div')
9280
instance.querySelectorAll = () => [el]
9381
el.closest = () => null
9482
el.getAttribute = () => 'click:other-controller#foo'
@@ -98,24 +86,24 @@ describe('bind', () => {
9886
})
9987

10088
it('does not bind methods that dont exist', () => {
101-
const instance = new MyController()
89+
const instance = document.createElement('bind-test-element')
10290
chai.spy.on(instance, 'foo')
103-
const el = new FakeElement()
91+
const el = document.createElement('div')
10492
instance.querySelectorAll = () => [el]
10593
el.closest = () => instance
106-
el.getAttribute = () => 'click:my-controller#frob'
94+
el.getAttribute = () => 'click:bind-test-element#frob'
10795
chai.spy.on(el, 'addEventListener')
10896
bind(instance)
10997
expect(el.addEventListener).to.have.not.been.called()
11098
})
11199

112100
it('can bind multiple event types', () => {
113-
const instance = new MyController()
101+
const instance = document.createElement('bind-test-element')
114102
chai.spy.on(instance, 'foo')
115-
const el = new FakeElement()
103+
const el = document.createElement('div')
116104
instance.querySelectorAll = () => [el]
117105
el.closest = () => instance
118-
el.getAttribute = () => 'click:my-controller#foo submit:my-controller#foo'
106+
el.getAttribute = () => 'click:bind-test-element#foo submit:bind-test-element#foo'
119107
chai.spy.on(el, 'addEventListener')
120108
bind(instance)
121109
expect(el.addEventListener).to.have.been.called(2)
@@ -130,15 +118,15 @@ describe('bind', () => {
130118
})
131119

132120
it('can bind multiple elements to the same event', () => {
133-
const instance = new MyController()
121+
const instance = document.createElement('bind-test-element')
134122
chai.spy.on(instance, 'foo')
135-
const el1 = new FakeElement()
136-
const el2 = new FakeElement()
123+
const el1 = document.createElement('div')
124+
const el2 = document.createElement('div')
137125
instance.querySelectorAll = () => [el1, el2]
138126
el1.closest = () => instance
139127
el2.closest = () => instance
140-
el1.getAttribute = () => 'click:my-controller#foo'
141-
el2.getAttribute = () => 'submit:my-controller#foo'
128+
el1.getAttribute = () => 'click:bind-test-element#foo'
129+
el2.getAttribute = () => 'submit:bind-test-element#foo'
142130
chai.spy.on(el1, 'addEventListener')
143131
chai.spy.on(el2, 'addEventListener')
144132
bind(instance)

‎catalyst/test/findtarget.js‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
import {findTarget, findTargets} from '../lib/findtarget.js'
22

3-
class MyController extends HTMLElement {}
4-
if (!window.customElements.get('my-controller')) {
5-
window.MyController = MyController
6-
window.customElements.define('my-controller', MyController)
7-
}
8-
93
describe('findTarget', () => {
4+
window.customElements.define('find-target-test-element', class extends HTMLElement {})
5+
106
let root
117

128
beforeEach(() => {
@@ -19,31 +15,33 @@ describe('findTarget', () => {
1915
})
2016

2117
it('calls querySelectorAll with the controller name and target name', () => {
22-
const instance = new MyController()
18+
const instance = document.createElement('find-target-test-element')
2319
chai.spy.on(instance, 'querySelectorAll', () => [])
2420
findTarget(instance, 'foo')
25-
expect(instance.querySelectorAll).to.have.been.called.once.with.exactly('[data-target~="my-controller.foo"]')
21+
expect(instance.querySelectorAll).to.have.been.called.once.with.exactly(
22+
'[data-target~="find-target-test-element.foo"]'
23+
)
2624
})
2725

2826
it('returns the first element where closest tag is the controller', () => {
2927
const els = [document.createElement('div'), document.createElement('div')]
30-
const instance = new MyController()
28+
const instance = document.createElement('find-target-test-element')
3129
chai.spy.on(instance, 'querySelectorAll', () => els)
3230
chai.spy.on(els[0], 'closest', () => null)
3331
chai.spy.on(els[1], 'closest', () => instance)
3432
const target = findTarget(instance, 'foo')
35-
expect(els[0].closest).to.have.been.called.once.with.exactly('my-controller')
36-
expect(els[1].closest).to.have.been.called.once.with.exactly('my-controller')
33+
expect(els[0].closest).to.have.been.called.once.with.exactly('find-target-test-element')
34+
expect(els[1].closest).to.have.been.called.once.with.exactly('find-target-test-element')
3735
expect(target).to.equal(els[1])
3836
})
3937

4038
it('returns the first element that has the exact target name', () => {
41-
const instance = document.createElement('my-controller')
39+
const instance = document.createElement('find-target-test-element')
4240

4341
const notExactMatch = document.createElement('div')
44-
notExactMatch.setAttribute('data-target', 'my-controller.foobar')
42+
notExactMatch.setAttribute('data-target', 'find-target-test-element.foobar')
4543
const exactMatch = document.createElement('div')
46-
exactMatch.setAttribute('data-target', 'my-controller.foo')
44+
exactMatch.setAttribute('data-target', 'find-target-test-element.foo')
4745

4846
instance.appendChild(notExactMatch)
4947
instance.appendChild(exactMatch)
@@ -54,10 +52,10 @@ describe('findTarget', () => {
5452
})
5553

5654
it('returns targets when there are mutliple target values', () => {
57-
const instance = document.createElement('my-controller')
55+
const instance = document.createElement('find-target-test-element')
5856

5957
const el = document.createElement('div')
60-
el.setAttribute('data-target', 'my-controller.barfoo my-controller.foobar')
58+
el.setAttribute('data-target', 'find-target-test-element.barfoo find-target-test-element.foobar')
6159

6260
instance.appendChild(el)
6361

@@ -69,10 +67,10 @@ describe('findTarget', () => {
6967
})
7068

7169
it('returns targets when there are mutliple target values with different controllers', () => {
72-
const instance = document.createElement('my-controller')
70+
const instance = document.createElement('find-target-test-element')
7371

7472
const el = document.createElement('div')
75-
el.setAttribute('data-target', 'other-controller.barfoo my-controller.foobar')
73+
el.setAttribute('data-target', 'other-controller.barfoo find-target-test-element.foobar')
7674

7775
instance.appendChild(el)
7876

@@ -86,23 +84,25 @@ describe('findTarget', () => {
8684

8785
describe('findTargets', () => {
8886
it('calls querySelectorAll with the controller name and target name', () => {
89-
const instance = new MyController()
87+
const instance = document.createElement('find-target-test-element')
9088
chai.spy.on(instance, 'querySelectorAll', () => [])
9189
findTargets(instance, 'foo')
92-
expect(instance.querySelectorAll).to.have.been.called.once.with.exactly('[data-target~="my-controller.foo"]')
90+
expect(instance.querySelectorAll).to.have.been.called.once.with.exactly(
91+
'[data-target~="find-target-test-element.foo"]'
92+
)
9393
})
9494

9595
it('returns all elements where closest tag is the controller', () => {
9696
const els = [document.createElement('div'), document.createElement('div'), document.createElement('div')]
97-
const instance = new MyController()
97+
const instance = document.createElement('find-target-test-element')
9898
chai.spy.on(instance, 'querySelectorAll', () => els)
9999
chai.spy.on(els[0], 'closest', () => instance)
100100
chai.spy.on(els[1], 'closest', () => null)
101101
chai.spy.on(els[2], 'closest', () => instance)
102102
const targets = findTargets(instance, 'foo')
103-
expect(els[0].closest).to.have.been.called.once.with.exactly('my-controller')
104-
expect(els[1].closest).to.have.been.called.once.with.exactly('my-controller')
105-
expect(els[2].closest).to.have.been.called.once.with.exactly('my-controller')
103+
expect(els[0].closest).to.have.been.called.once.with.exactly('find-target-test-element')
104+
expect(els[1].closest).to.have.been.called.once.with.exactly('find-target-test-element')
105+
expect(els[2].closest).to.have.been.called.once.with.exactly('find-target-test-element')
106106
expect(targets).to.deep.equal([els[0], els[2]])
107107
})
108108
})

0 commit comments

Comments
 (0)