summaryrefslogtreecommitdiff
path: root/packages/webapi/test/elements.js
blob: 5d7501592919354adc98669d204a96d8115976da (plain) (blame)
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import { assert, test } from '../run/test.setup.js'
import { polyfill } from '../mod.js'

test(() => {
	return [
		{
			name: 'Includes Custom Element functionality',
			test() {
				const target = {}

				polyfill(target)

				assert.equal(Reflect.has(target, 'CustomElementRegistry'), true)
				assert.equal(Reflect.has(target, 'customElements'), true)
				assert.equal(Reflect.has(target, 'HTMLElement'), true)
			},
		},
		{
			name: 'Supports Custom Element creation',
			test() {
				const target = {}

				polyfill(target)

				const CustomElement = class HTMLCustomElement extends target.HTMLElement {}

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

				assert.equal(target.customElements.get('custom-element'), CustomElement)
				assert.equal(target.customElements.getName(CustomElement), 'custom-element')
			},
		},
		{
			name: 'Supports Custom Elements created from Document',
			test() {
				const target = {}

				polyfill(target)

				assert.equal(target.document.body.localName, 'body')
				assert.equal(target.document.body.tagName, 'BODY')

				assert.equal(target.document.createElement('custom-element').constructor.name, 'HTMLUnknownElement')

				const CustomElement = class HTMLCustomElement extends target.HTMLElement {}

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

				assert.equal(target.document.createElement('custom-element').constructor.name, 'HTMLCustomElement')
			},
		},
		{
			name: 'Supports Custom Elements with properties',
			test() {
				const target = {}

				polyfill(target)

				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)

				assert.equal(CustomElement.method(), testSymbol)

				const customElement = new CustomElement()

				assert.equal(customElement.method(), testSymbol)
			},
		},
	]
})