OLD | NEW |
(Empty) | |
| 1 |
| 2 let testNumber = 1; |
| 3 |
| 4 function defineNewCustomElement(observedAttributes) { |
| 5 let log = []; |
| 6 let name = 'custom-element-' + testNumber++; |
| 7 |
| 8 class CustomElement extends HTMLElement { |
| 9 constructor() { |
| 10 super(); |
| 11 log.push({type: 'constructed', element: this}); |
| 12 } |
| 13 attributeChangedCallback(name, oldValue, newValue, namespace) { |
| 14 log.push({type: 'attributeChanged', element: this, name: name, oldVa
lue: oldValue, newValue: newValue, namespace: namespace}); |
| 15 } |
| 16 connectedCallback() { log.push({type: 'connected', element: this}); } |
| 17 disconnectedCallback() { log.push({type: 'disconnected', element: this})
; } |
| 18 adoptedCallback(oldDocument, newDocument) { log.push({type: 'adopted', e
lement: this, oldDocument: oldDocument, newDocument: newDocument}); } |
| 19 } |
| 20 CustomElement.observedAttributes = observedAttributes || ['id', 'title']; |
| 21 |
| 22 customElements.define(name, CustomElement); |
| 23 |
| 24 return { |
| 25 name: name, |
| 26 log: function () { |
| 27 let currentLog = log; log = []; |
| 28 return { |
| 29 types: () => currentLog.map((entry) => entry.type), |
| 30 log: (i) => currentLog[i == undefined ? currentLog.length - 1 :
i], |
| 31 } |
| 32 } |
| 33 }; |
| 34 } |
| 35 |
| 36 function testNodeConnector(testFunction, name) { |
| 37 let container = document.createElement('div'); |
| 38 container.appendChild(document.createElement('div')); |
| 39 document.body.appendChild(container); |
| 40 |
| 41 test(function () { |
| 42 var element = defineNewCustomElement(); |
| 43 var instance = document.createElement(element.name); |
| 44 assert_array_equals(element.log().types(), ['constructed']); |
| 45 testFunction(container, instance); |
| 46 assert_array_equals(element.log().types(), ['connected']); |
| 47 }, name + ' must enqueue a connected reaction'); |
| 48 |
| 49 test(function () { |
| 50 var element = defineNewCustomElement(); |
| 51 var instance = document.createElement(element.name); |
| 52 assert_array_equals(element.log().types(), ['constructed']); |
| 53 var newDoc = document.implementation.createHTMLDocument(); |
| 54 testFunction(container, instance); |
| 55 assert_array_equals(element.log().types(), ['connected']); |
| 56 testFunction(newDoc.documentElement, instance); |
| 57 assert_array_equals(element.log().types(), ['disconnected', 'adopted', '
connected']); |
| 58 }, name + ' must enqueue a disconnected reaction, an adopted reaction, and a
connected reaction when the custom element was in another document'); |
| 59 |
| 60 container.parentNode.removeChild(container); |
| 61 } |
| 62 |
| 63 function testNodeDisconnector(testFunction, name) { |
| 64 let container = document.createElement('div'); |
| 65 container.appendChild(document.createElement('div')); |
| 66 document.body.appendChild(container); |
| 67 |
| 68 test(function () { |
| 69 var element = defineNewCustomElement(); |
| 70 var instance = document.createElement(element.name); |
| 71 assert_array_equals(element.log().types(), ['constructed']); |
| 72 container.appendChild(instance); |
| 73 assert_array_equals(element.log().types(), ['connected']); |
| 74 testFunction(instance); |
| 75 assert_array_equals(element.log().types(), ['disconnected']); |
| 76 }, name + ' must enqueue a disconnected reaction'); |
| 77 |
| 78 container.parentNode.removeChild(container); |
| 79 } |
| 80 |
| 81 function testReflectAttribute(jsAttributeName, contentAttributeName, validValue1
, validValue2, name) { |
| 82 test(function () { |
| 83 var element = defineNewCustomElement([contentAttributeName]); |
| 84 var instance = document.createElement(element.name); |
| 85 assert_array_equals(element.log().types(), ['constructed']); |
| 86 instance[jsAttributeName] = validValue1; |
| 87 var logEntries = element.log(); |
| 88 assert_array_equals(logEntries.types(), ['attributeChanged']); |
| 89 assert_equals(logEntries.log().name, contentAttributeName); |
| 90 assert_equals(logEntries.log().oldValue, null); |
| 91 assert_equals(logEntries.log().newValue, validValue1); |
| 92 assert_equals(logEntries.log().namespace, null); |
| 93 }, name + ' must enqueue a attributeChanged reaction when adding ' + content
AttributeName + ' content attribute'); |
| 94 |
| 95 test(function () { |
| 96 var element = defineNewCustomElement([contentAttributeName]); |
| 97 var instance = document.createElement(element.name); |
| 98 instance[jsAttributeName] = validValue1; |
| 99 assert_array_equals(element.log().types(), ['constructed', 'attributeCha
nged']); |
| 100 instance[jsAttributeName] = validValue2; |
| 101 var logEntries = element.log(); |
| 102 assert_array_equals(logEntries.types(), ['attributeChanged']); |
| 103 assert_equals(logEntries.log().name, contentAttributeName); |
| 104 assert_equals(logEntries.log().oldValue, validValue1); |
| 105 assert_equals(logEntries.log().newValue, validValue2); |
| 106 assert_equals(logEntries.log().namespace, null); |
| 107 }, name + ' must enqueue a attributeChanged reaction when replacing an exist
ing attribute'); |
| 108 } |
| 109 |
| 110 function testAttributeAdder(testFunction, name) { |
| 111 test(function () { |
| 112 var element = defineNewCustomElement(); |
| 113 var instance = document.createElement(element.name); |
| 114 assert_array_equals(element.log().types(), ['constructed']); |
| 115 testFunction(instance, 'id', 'foo'); |
| 116 var logEntries = element.log(); |
| 117 assert_array_equals(logEntries.types(), ['attributeChanged']); |
| 118 assert_equals(logEntries.log().name, 'id'); |
| 119 assert_equals(logEntries.log().oldValue, null); |
| 120 assert_equals(logEntries.log().newValue, 'foo'); |
| 121 assert_equals(logEntries.log().namespace, null); |
| 122 }, name + ' must enqueue a attributeChanged reaction when adding an attribut
e'); |
| 123 |
| 124 test(function () { |
| 125 var element = defineNewCustomElement(); |
| 126 var instance = document.createElement(element.name); |
| 127 assert_array_equals(element.log().types(), ['constructed']); |
| 128 testFunction(instance, 'data-lang', 'en'); |
| 129 assert_array_equals(element.log().types(), []); |
| 130 }, name + ' must not enqueue a attributeChanged reaction when adding an unob
served attribute'); |
| 131 |
| 132 test(function () { |
| 133 var element = defineNewCustomElement(); |
| 134 var instance = document.createElement(element.name); |
| 135 instance.setAttribute('title', 'hello'); |
| 136 assert_array_equals(element.log().types(), ['constructed', 'attributeCha
nged']); |
| 137 testFunction(instance, 'title', 'world'); |
| 138 var logEntries = element.log(); |
| 139 assert_array_equals(logEntries.types(), ['attributeChanged']); |
| 140 assert_equals(logEntries.log().name, 'title'); |
| 141 assert_equals(logEntries.log().oldValue, 'hello'); |
| 142 assert_equals(logEntries.log().newValue, 'world'); |
| 143 assert_equals(logEntries.log().namespace, null); |
| 144 }, name + ' must enqueue a attributeChanged reaction when replacing an exist
ing attribute'); |
| 145 |
| 146 test(function () { |
| 147 var element = defineNewCustomElement(); |
| 148 var instance = document.createElement(element.name); |
| 149 instance.setAttribute('data-lang', 'zh'); |
| 150 assert_array_equals(element.log().types(), ['constructed']); |
| 151 testFunction(instance, 'data-lang', 'en'); |
| 152 assert_array_equals(element.log().types(), []); |
| 153 }, name + ' must enqueue a attributeChanged reaction when replacing an exist
ing unobserved attribute'); |
| 154 } |
| 155 |
| 156 function testAttributeMutator(testFunction, name) { |
| 157 test(function () { |
| 158 var element = defineNewCustomElement(); |
| 159 var instance = document.createElement(element.name); |
| 160 instance.setAttribute('title', 'hello'); |
| 161 assert_array_equals(element.log().types(), ['constructed', 'attributeCha
nged']); |
| 162 testFunction(instance, 'title', 'world'); |
| 163 var logEntries = element.log(); |
| 164 assert_array_equals(logEntries.types(), ['attributeChanged']); |
| 165 assert_equals(logEntries.log().name, 'title'); |
| 166 assert_equals(logEntries.log().oldValue, 'hello'); |
| 167 assert_equals(logEntries.log().newValue, 'world'); |
| 168 assert_equals(logEntries.log().namespace, null); |
| 169 }, name + ' must enqueue a attributeChanged reaction when replacing an exist
ing attribute'); |
| 170 |
| 171 test(function () { |
| 172 var element = defineNewCustomElement(); |
| 173 var instance = document.createElement(element.name); |
| 174 instance.setAttribute('data-lang', 'zh'); |
| 175 assert_array_equals(element.log().types(), ['constructed']); |
| 176 testFunction(instance, 'data-lang', 'en'); |
| 177 assert_array_equals(element.log().types(), []); |
| 178 }, name + ' must enqueue a attributeChanged reaction when replacing an exist
ing unobserved attribute'); |
| 179 } |
| 180 |
| 181 function testAttributeRemover(testFunction, name) { |
| 182 test(function () { |
| 183 var element = defineNewCustomElement(); |
| 184 var instance = document.createElement(element.name); |
| 185 assert_array_equals(element.log().types(), ['constructed']); |
| 186 testFunction(instance, 'title'); |
| 187 assert_array_equals(element.log().types(), []); |
| 188 }, name + ' must not enqueue a attributeChanged reaction when removing an at
tribute that does not exist'); |
| 189 |
| 190 test(function () { |
| 191 var element = defineNewCustomElement(); |
| 192 var instance = document.createElement(element.name); |
| 193 instance.setAttribute('data-lang', 'hello'); |
| 194 assert_array_equals(element.log().types(), ['constructed']); |
| 195 testFunction(instance, 'data-lang'); |
| 196 assert_array_equals(element.log().types(), []); |
| 197 }, name + ' must not enqueue a attributeChanged reaction when removing an un
observed attribute that does not exist'); |
| 198 |
| 199 test(function () { |
| 200 var element = defineNewCustomElement(); |
| 201 var instance = document.createElement(element.name); |
| 202 instance.setAttribute('title', 'hello'); |
| 203 assert_array_equals(element.log().types(), ['constructed', 'attributeCha
nged']); |
| 204 testFunction(instance, 'title'); |
| 205 var logEntries = element.log(); |
| 206 assert_array_equals(logEntries.types(), ['attributeChanged']); |
| 207 assert_equals(logEntries.log().name, 'title'); |
| 208 assert_equals(logEntries.log().oldValue, 'hello'); |
| 209 assert_equals(logEntries.log().newValue, null); |
| 210 assert_equals(logEntries.log().namespace, null); |
| 211 }, name + ' must enqueue a attributeChanged reaction when removing an existi
ng attribute'); |
| 212 |
| 213 test(function () { |
| 214 var element = defineNewCustomElement(); |
| 215 var instance = document.createElement(element.name); |
| 216 instance.setAttribute('data-lang', 'ja'); |
| 217 assert_array_equals(element.log().types(), ['constructed']); |
| 218 testFunction(instance, 'data-lang'); |
| 219 assert_array_equals(element.log().types(), []); |
| 220 }, name + ' must not enqueue a attributeChanged reaction when removing an ex
isting unobserved attribute'); |
| 221 } |
OLD | NEW |