packages/webapi/test/elements.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

import { expect } from 'chai'
import { polyfill } from '../mod.js'

describe('Custom Elements', () => {
	const target = {}

	beforeEach(() => polyfill(target))

	it('Includes Custom Element functionality', () => {
		expect(target).to.have.property('CustomElementRegistry')
		expect(target).to.have.property('customElements')
		expect(target).to.have.property('HTMLElement')
	})

	it('Supports Custom Element creation', () => {
		const CustomElement = class HTMLCustomElement extends target.HTMLElement {}

		target.customElements.define('custom-element', CustomElement)

		expect(target.customElements.get('custom-element')).to.equal(CustomElement)
		expect(target.customElements.getName(CustomElement)).to.equal(
			'custom-element'
		)
	})

	it('Supports Custom Elements created from Document', () => {
		expect(target.document.body.localName).to.equal('body')
		expect(target.document.body.tagName).to.equal('BODY')

		expect(
			target.document.createElement('custom-element').constructor.name
		).to.equal('HTMLUnknownElement')

		const CustomElement = class HTMLCustomElement extends target.HTMLElement {}

		target.customElements.define('custom-element', CustomElement)

		expect(
			target.document.createElement('custom-element').constructor.name
		).to.equal('HTMLCustomElement')
	})

	it('Supports Custom Elements with properties', () => {
		const testSymbol = Symbol.for('webapi.test')

		const CustomElement = class HTMLCustomElement extends target.HTMLElement {
			otherMethod = () => testSymbol

			method() {
				return this.otherMethod()
			}

			static method() {
				return this.otherMethod()
			}

			static otherMethod() {
				return testSymbol
			}
		}

		target.customElements.define('custom-element', CustomElement)

		expect(CustomElement.method()).to.equal(testSymbol)

		const customElement = new CustomElement()

		expect(customElement.method()).to.equal(testSymbol)
	})
})