tungsten 0.2.9 → 0.2.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Components.d.ts +0 -3
- package/dist/Components.d.ts.map +1 -1
- package/dist/Components.js +0 -18
- package/dist/Instance/Instance.d.ts +1 -0
- package/dist/Instance/Instance.d.ts.map +1 -1
- package/dist/Instance/Instance.js +19 -1
- package/dist/Instance/runTrackedWork.sxyt.d.ts +2 -0
- package/dist/Instance/runTrackedWork.sxyt.d.ts.map +1 -0
- package/dist/Instance/runTrackedWork.sxyt.js +35 -0
- package/dist/componentProxyHandlers.d.ts.map +1 -1
- package/dist/componentProxyHandlers.js +5 -8
- package/dist/components/bindable/BindableSelect.d.ts +11 -11
- package/dist/components/bindable/BindableSelect.d.ts.map +1 -1
- package/dist/components/bindable/BindableSelect.js +8 -4
- package/dist/components/bindable/BindableSelect.sxyt.d.ts +2 -0
- package/dist/components/bindable/BindableSelect.sxyt.d.ts.map +1 -0
- package/dist/components/bindable/BindableSelect.sxyt.js +186 -0
- package/dist/hydrate/hydrate.js +0 -1
- package/dist/testing/createTestApp.sxyt.d.ts +2 -0
- package/dist/testing/createTestApp.sxyt.d.ts.map +1 -0
- package/dist/testing/createTestApp.sxyt.js +470 -0
- package/dist/testing/ensureTestEnvLoaded.d.ts +4 -0
- package/dist/testing/ensureTestEnvLoaded.d.ts.map +1 -0
- package/dist/testing/ensureTestEnvLoaded.js +32 -0
- package/dist/testing/ensureTestEnvLoaded.sxyt.d.ts +2 -0
- package/dist/testing/ensureTestEnvLoaded.sxyt.d.ts.map +1 -0
- package/dist/testing/ensureTestEnvLoaded.sxyt.js +20 -0
- package/dist/testing/index.d.ts +36 -0
- package/dist/testing/index.d.ts.map +1 -0
- package/dist/testing/index.js +157 -0
- package/dist/update/integrateUpdateVdom.js +0 -1
- package/package.json +1 -1
- package/readme.md +2 -2
|
@@ -0,0 +1,470 @@
|
|
|
1
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
2
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
3
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
4
|
+
import { expect } from 'chai';
|
|
5
|
+
import { Window } from 'happy-dom';
|
|
6
|
+
import { describe } from 'sxy-test-runner';
|
|
7
|
+
import { TungstenBaseSimpleStoreComponent, TungstenSimpleComponent, TungstenStatefulComponent } from "../Components.js";
|
|
8
|
+
import { registerStore } from "../Store/registerStore.js";
|
|
9
|
+
import { createTestApp, testStore } from "./index.js";
|
|
10
|
+
import { jsxs as _jsxs, jsx as _jsx } from "tungsten/jsxRuntime.js";
|
|
11
|
+
class Counter extends TungstenStatefulComponent {
|
|
12
|
+
constructor(...args) {
|
|
13
|
+
super(...args);
|
|
14
|
+
_defineProperty(this, "state", {
|
|
15
|
+
count: 0
|
|
16
|
+
});
|
|
17
|
+
_defineProperty(this, "clientInitialized", false);
|
|
18
|
+
_defineProperty(this, "clientInit", () => {
|
|
19
|
+
this.clientInitialized = true;
|
|
20
|
+
});
|
|
21
|
+
_defineProperty(this, "content", () => _jsxs("button", {
|
|
22
|
+
onClick: () => {
|
|
23
|
+
this.state.count++;
|
|
24
|
+
},
|
|
25
|
+
children: [this.props.label, ":", this.state.count]
|
|
26
|
+
}));
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
class TestStoreSchema {
|
|
30
|
+
constructor() {
|
|
31
|
+
_defineProperty(this, "value", 0);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
const testStoreRegistration = registerStore(TestStoreSchema);
|
|
35
|
+
class StoreRoot extends TungstenBaseSimpleStoreComponent {
|
|
36
|
+
constructor(...args) {
|
|
37
|
+
super(...args);
|
|
38
|
+
_defineProperty(this, "store", testStoreRegistration.getComponentStore(this));
|
|
39
|
+
_defineProperty(this, "init", () => {
|
|
40
|
+
this.store.value.subscribe();
|
|
41
|
+
});
|
|
42
|
+
_defineProperty(this, "content", () => _jsx("p", {
|
|
43
|
+
children: this.store.value.get()
|
|
44
|
+
}));
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
describe('createTestApp()', ({
|
|
48
|
+
it
|
|
49
|
+
}) => {
|
|
50
|
+
it('mounts, resolves updates, preserves the root for props, and unmounts', async () => {
|
|
51
|
+
const window = new Window();
|
|
52
|
+
const document = window.document;
|
|
53
|
+
const testApp = await createTestApp(Counter, {
|
|
54
|
+
document,
|
|
55
|
+
props: {
|
|
56
|
+
label: 'Count'
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
const root = testApp.component;
|
|
60
|
+
expect(root.clientInitialized).to.equal(true);
|
|
61
|
+
expect(testApp.container.textContent).to.equal('Count:0');
|
|
62
|
+
const button = testApp.container.querySelector('button');
|
|
63
|
+
expect(button).not.to.equal(null);
|
|
64
|
+
button.dispatchEvent(new window.Event('click', {
|
|
65
|
+
bubbles: true
|
|
66
|
+
}));
|
|
67
|
+
await testApp.resolved();
|
|
68
|
+
expect(testApp.container.textContent).to.equal('Count:1');
|
|
69
|
+
await testApp.setProps({
|
|
70
|
+
label: 'Total'
|
|
71
|
+
});
|
|
72
|
+
expect(testApp.component).to.equal(root);
|
|
73
|
+
expect(testApp.container.textContent).to.equal('Total:1');
|
|
74
|
+
const container = testApp.container;
|
|
75
|
+
await testApp.unmount();
|
|
76
|
+
await testApp.unmount();
|
|
77
|
+
expect(container.isConnected).to.equal(false);
|
|
78
|
+
});
|
|
79
|
+
it('tracks asynchronous event work', async () => {
|
|
80
|
+
const window = new Window();
|
|
81
|
+
const document = window.document;
|
|
82
|
+
let release;
|
|
83
|
+
const released = new Promise(resolve => {
|
|
84
|
+
release = resolve;
|
|
85
|
+
});
|
|
86
|
+
class AsyncButton extends TungstenStatefulComponent {
|
|
87
|
+
constructor(...args) {
|
|
88
|
+
super(...args);
|
|
89
|
+
_defineProperty(this, "state", {
|
|
90
|
+
finished: false
|
|
91
|
+
});
|
|
92
|
+
_defineProperty(this, "content", () => _jsx("button", {
|
|
93
|
+
onClick: async () => {
|
|
94
|
+
await released;
|
|
95
|
+
this.state.finished = true;
|
|
96
|
+
},
|
|
97
|
+
children: this.state.finished ? 'finished' : 'waiting'
|
|
98
|
+
}));
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
const testApp = await createTestApp(AsyncButton, {
|
|
102
|
+
document
|
|
103
|
+
});
|
|
104
|
+
testApp.container.querySelector('button').dispatchEvent(new window.Event('click'));
|
|
105
|
+
release();
|
|
106
|
+
await testApp.resolved();
|
|
107
|
+
expect(testApp.container.textContent).to.equal('finished');
|
|
108
|
+
await testApp.unmount();
|
|
109
|
+
});
|
|
110
|
+
it('settles asynchronous lifecycle-triggered updates', async () => {
|
|
111
|
+
const window = new Window();
|
|
112
|
+
const document = window.document;
|
|
113
|
+
class LifecycleRoot extends TungstenStatefulComponent {
|
|
114
|
+
constructor(...args) {
|
|
115
|
+
super(...args);
|
|
116
|
+
_defineProperty(this, "state", {
|
|
117
|
+
phase: 'mounting'
|
|
118
|
+
});
|
|
119
|
+
_defineProperty(this, "componentDidMount", async () => {
|
|
120
|
+
await Promise.resolve();
|
|
121
|
+
this.state.phase = 'ready';
|
|
122
|
+
});
|
|
123
|
+
_defineProperty(this, "componentDidUpdate", async () => {
|
|
124
|
+
if (this.state.phase !== 'clicked') return;
|
|
125
|
+
await Promise.resolve();
|
|
126
|
+
this.state.phase = 'settled';
|
|
127
|
+
});
|
|
128
|
+
_defineProperty(this, "content", () => _jsx("button", {
|
|
129
|
+
onClick: () => {
|
|
130
|
+
this.state.phase = 'clicked';
|
|
131
|
+
},
|
|
132
|
+
children: this.state.phase
|
|
133
|
+
}));
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
const testApp = await createTestApp(LifecycleRoot, {
|
|
137
|
+
document
|
|
138
|
+
});
|
|
139
|
+
expect(testApp.container.textContent).to.equal('ready');
|
|
140
|
+
testApp.container.querySelector('button').dispatchEvent(new window.Event('click'));
|
|
141
|
+
await testApp.resolved();
|
|
142
|
+
expect(testApp.container.textContent).to.equal('settled');
|
|
143
|
+
await testApp.unmount();
|
|
144
|
+
});
|
|
145
|
+
it('initializes independent real stores before mounting', async () => {
|
|
146
|
+
const firstWindow = new Window();
|
|
147
|
+
const secondWindow = new Window();
|
|
148
|
+
const first = await createTestApp(StoreRoot, {
|
|
149
|
+
document: firstWindow.document,
|
|
150
|
+
stores: [testStore(testStoreRegistration, store => {
|
|
151
|
+
store.value.set(1);
|
|
152
|
+
})]
|
|
153
|
+
});
|
|
154
|
+
const second = await createTestApp(StoreRoot, {
|
|
155
|
+
document: secondWindow.document,
|
|
156
|
+
stores: [testStore(testStoreRegistration, store => {
|
|
157
|
+
store.value.set(2);
|
|
158
|
+
})]
|
|
159
|
+
});
|
|
160
|
+
expect(first.container.textContent).to.equal('1');
|
|
161
|
+
expect(second.container.textContent).to.equal('2');
|
|
162
|
+
first.component.store.value.set(3);
|
|
163
|
+
await first.resolved();
|
|
164
|
+
expect(first.container.textContent).to.equal('3');
|
|
165
|
+
expect(second.container.textContent).to.equal('2');
|
|
166
|
+
await first.unmount();
|
|
167
|
+
await second.unmount();
|
|
168
|
+
});
|
|
169
|
+
it('recursively unmounts components below HTML elements', async () => {
|
|
170
|
+
const window = new Window();
|
|
171
|
+
const document = window.document;
|
|
172
|
+
const lifecycle = [];
|
|
173
|
+
class Child extends TungstenSimpleComponent {
|
|
174
|
+
constructor(...args) {
|
|
175
|
+
super(...args);
|
|
176
|
+
_defineProperty(this, "content", () => _jsx("span", {
|
|
177
|
+
children: "child"
|
|
178
|
+
}));
|
|
179
|
+
_defineProperty(this, "componentWillUnmount", () => {
|
|
180
|
+
lifecycle.push('will');
|
|
181
|
+
});
|
|
182
|
+
_defineProperty(this, "componentDidUnmount", () => {
|
|
183
|
+
lifecycle.push('did');
|
|
184
|
+
});
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
class Root extends TungstenSimpleComponent {
|
|
188
|
+
constructor(...args) {
|
|
189
|
+
super(...args);
|
|
190
|
+
_defineProperty(this, "content", () => _jsx("main", {
|
|
191
|
+
children: _jsx(Child, {})
|
|
192
|
+
}));
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
const container = window.document.createElement('section');
|
|
196
|
+
window.document.body.appendChild(container);
|
|
197
|
+
const testApp = await createTestApp(Root, {
|
|
198
|
+
document,
|
|
199
|
+
container: container
|
|
200
|
+
});
|
|
201
|
+
await testApp.unmount();
|
|
202
|
+
expect(lifecycle).to.deep.equal(['will', 'did']);
|
|
203
|
+
expect(window.document.body.contains(container)).to.equal(true);
|
|
204
|
+
expect(container.childNodes.length).to.equal(0);
|
|
205
|
+
});
|
|
206
|
+
it('rejects a non-empty container without modifying it', async () => {
|
|
207
|
+
const window = new Window();
|
|
208
|
+
const document = window.document;
|
|
209
|
+
const container = window.document.createElement('div');
|
|
210
|
+
container.textContent = 'existing';
|
|
211
|
+
let error;
|
|
212
|
+
try {
|
|
213
|
+
await createTestApp(Counter, {
|
|
214
|
+
document,
|
|
215
|
+
container: container,
|
|
216
|
+
props: {
|
|
217
|
+
label: 'Count'
|
|
218
|
+
}
|
|
219
|
+
});
|
|
220
|
+
} catch (caught) {
|
|
221
|
+
error = caught;
|
|
222
|
+
}
|
|
223
|
+
expect(error).to.be.instanceOf(Error);
|
|
224
|
+
expect(container.textContent).to.equal('existing');
|
|
225
|
+
});
|
|
226
|
+
it('rolls back partially mounted descendants after an error', async () => {
|
|
227
|
+
const window = new Window();
|
|
228
|
+
const document = window.document;
|
|
229
|
+
const lifecycle = [];
|
|
230
|
+
class MountedChild extends TungstenSimpleComponent {
|
|
231
|
+
constructor(...args) {
|
|
232
|
+
super(...args);
|
|
233
|
+
_defineProperty(this, "content", () => _jsx("span", {
|
|
234
|
+
children: "mounted"
|
|
235
|
+
}));
|
|
236
|
+
_defineProperty(this, "componentDidMount", () => {
|
|
237
|
+
lifecycle.push('mount');
|
|
238
|
+
});
|
|
239
|
+
_defineProperty(this, "componentWillUnmount", () => {
|
|
240
|
+
lifecycle.push('will');
|
|
241
|
+
});
|
|
242
|
+
_defineProperty(this, "componentDidUnmount", () => {
|
|
243
|
+
lifecycle.push('did');
|
|
244
|
+
});
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
class BrokenChild extends TungstenSimpleComponent {
|
|
248
|
+
constructor(...args) {
|
|
249
|
+
super(...args);
|
|
250
|
+
_defineProperty(this, "content", () => {
|
|
251
|
+
throw new Error('broken child');
|
|
252
|
+
});
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
class BrokenRoot extends TungstenSimpleComponent {
|
|
256
|
+
constructor(...args) {
|
|
257
|
+
super(...args);
|
|
258
|
+
_defineProperty(this, "content", () => _jsxs("main", {
|
|
259
|
+
children: [_jsx(MountedChild, {}), _jsx(BrokenChild, {})]
|
|
260
|
+
}));
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
const originalBodyChildren = window.document.body.childNodes.length;
|
|
264
|
+
let error;
|
|
265
|
+
try {
|
|
266
|
+
await createTestApp(BrokenRoot, {
|
|
267
|
+
document
|
|
268
|
+
});
|
|
269
|
+
} catch (caught) {
|
|
270
|
+
error = caught;
|
|
271
|
+
}
|
|
272
|
+
expect(error).to.be.instanceOf(Error);
|
|
273
|
+
expect(lifecycle).to.deep.equal(['mount', 'will', 'did']);
|
|
274
|
+
expect(window.document.body.childNodes.length).to.equal(originalBodyChildren);
|
|
275
|
+
});
|
|
276
|
+
it('supports input, checkbox, and select bindings', async () => {
|
|
277
|
+
const window = new Window();
|
|
278
|
+
const document = window.document;
|
|
279
|
+
class FormRoot extends TungstenStatefulComponent {
|
|
280
|
+
constructor(...args) {
|
|
281
|
+
super(...args);
|
|
282
|
+
_defineProperty(this, "state", {
|
|
283
|
+
name: 'Robert',
|
|
284
|
+
checked: false,
|
|
285
|
+
choice: 'b'
|
|
286
|
+
});
|
|
287
|
+
_defineProperty(this, "content", () => _jsxs("form", {
|
|
288
|
+
children: [_jsx("input", {
|
|
289
|
+
name: "name",
|
|
290
|
+
bind: [this.state, 'name']
|
|
291
|
+
}), _jsx("input", {
|
|
292
|
+
name: "enabled",
|
|
293
|
+
type: "checkbox",
|
|
294
|
+
bindChecked: [this.state, 'checked']
|
|
295
|
+
}), _jsxs("select", {
|
|
296
|
+
name: "choice",
|
|
297
|
+
bind: [this.state, 'choice'],
|
|
298
|
+
children: [_jsx("option", {
|
|
299
|
+
value: "a",
|
|
300
|
+
children: "A"
|
|
301
|
+
}), _jsx("option", {
|
|
302
|
+
value: "b",
|
|
303
|
+
children: "B"
|
|
304
|
+
}), _jsx("option", {
|
|
305
|
+
value: "c",
|
|
306
|
+
children: "C"
|
|
307
|
+
})]
|
|
308
|
+
}), _jsxs("output", {
|
|
309
|
+
children: [this.state.name, ":", String(this.state.checked), ":", this.state.choice]
|
|
310
|
+
})]
|
|
311
|
+
}));
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
const testApp = await createTestApp(FormRoot, {
|
|
315
|
+
document
|
|
316
|
+
});
|
|
317
|
+
const name = testApp.container.querySelector('input[name="name"]');
|
|
318
|
+
const enabled = testApp.container.querySelector('input[name="enabled"]');
|
|
319
|
+
const choice = testApp.container.querySelector('select');
|
|
320
|
+
name.value = 'Alice';
|
|
321
|
+
name.dispatchEvent(new window.Event('input', {
|
|
322
|
+
bubbles: true
|
|
323
|
+
}));
|
|
324
|
+
enabled.checked = true;
|
|
325
|
+
enabled.dispatchEvent(new window.Event('change', {
|
|
326
|
+
bubbles: true
|
|
327
|
+
}));
|
|
328
|
+
choice.value = 'c';
|
|
329
|
+
choice.dispatchEvent(new window.Event('input', {
|
|
330
|
+
bubbles: true
|
|
331
|
+
}));
|
|
332
|
+
await testApp.resolved();
|
|
333
|
+
expect(testApp.component.state.name).to.equal('Alice');
|
|
334
|
+
expect(testApp.component.state.checked).to.equal(true);
|
|
335
|
+
expect(testApp.component.state.choice).to.equal('c');
|
|
336
|
+
expect(testApp.container.querySelector('output').textContent).to.equal('Alice:true:c');
|
|
337
|
+
await testApp.unmount();
|
|
338
|
+
});
|
|
339
|
+
it('preserves keyed nodes and controlled select values during reconciliation', async () => {
|
|
340
|
+
const window = new Window();
|
|
341
|
+
const document = window.document;
|
|
342
|
+
class ReconciliationRoot extends TungstenStatefulComponent {
|
|
343
|
+
constructor(...args) {
|
|
344
|
+
super(...args);
|
|
345
|
+
_defineProperty(this, "state", {
|
|
346
|
+
items: ['a', 'b', 'c'],
|
|
347
|
+
selected: 'b',
|
|
348
|
+
updates: 0
|
|
349
|
+
});
|
|
350
|
+
_defineProperty(this, "content", () => _jsxs("main", {
|
|
351
|
+
children: [_jsx("ul", {
|
|
352
|
+
children: this.state.items.map(item => _jsx("li", {
|
|
353
|
+
"data-key": item,
|
|
354
|
+
children: item
|
|
355
|
+
}, item))
|
|
356
|
+
}), _jsxs("select", {
|
|
357
|
+
value: this.state.selected,
|
|
358
|
+
children: [_jsx("option", {
|
|
359
|
+
value: "a",
|
|
360
|
+
children: "A"
|
|
361
|
+
}), _jsx("option", {
|
|
362
|
+
value: "b",
|
|
363
|
+
children: "B"
|
|
364
|
+
}), _jsx("option", {
|
|
365
|
+
value: "c",
|
|
366
|
+
children: "C"
|
|
367
|
+
})]
|
|
368
|
+
}), _jsx("button", {
|
|
369
|
+
onClick: () => {
|
|
370
|
+
this.state.updates++;
|
|
371
|
+
},
|
|
372
|
+
children: "update"
|
|
373
|
+
}), _jsx("output", {
|
|
374
|
+
children: this.state.updates
|
|
375
|
+
})]
|
|
376
|
+
}));
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
const testApp = await createTestApp(ReconciliationRoot, {
|
|
380
|
+
document
|
|
381
|
+
});
|
|
382
|
+
const nodeA = testApp.container.querySelector('[data-key="a"]');
|
|
383
|
+
const nodeB = testApp.container.querySelector('[data-key="b"]');
|
|
384
|
+
const select = testApp.container.querySelector('select');
|
|
385
|
+
testApp.component.state.items = ['c', 'a', 'b'];
|
|
386
|
+
await testApp.resolved();
|
|
387
|
+
expect(testApp.container.querySelector('[data-key="a"]')).to.equal(nodeA);
|
|
388
|
+
expect(testApp.container.querySelector('[data-key="b"]')).to.equal(nodeB);
|
|
389
|
+
expect(select.value).to.equal('b');
|
|
390
|
+
testApp.container.querySelector('button').dispatchEvent(new window.Event('click'));
|
|
391
|
+
await testApp.resolved();
|
|
392
|
+
expect(select.value).to.equal('b');
|
|
393
|
+
await testApp.unmount();
|
|
394
|
+
});
|
|
395
|
+
it('runs componentDidUpdate exactly once for a props-driven update', async () => {
|
|
396
|
+
const window = new Window();
|
|
397
|
+
const document = window.document;
|
|
398
|
+
const updates = [];
|
|
399
|
+
class Child extends TungstenStatefulComponent {
|
|
400
|
+
constructor(...args) {
|
|
401
|
+
super(...args);
|
|
402
|
+
_defineProperty(this, "state", {
|
|
403
|
+
local: 0
|
|
404
|
+
});
|
|
405
|
+
_defineProperty(this, "componentDidUpdate", () => {
|
|
406
|
+
updates.push('child');
|
|
407
|
+
});
|
|
408
|
+
_defineProperty(this, "content", () => _jsxs("span", {
|
|
409
|
+
children: [this.props.value, ":", this.state.local]
|
|
410
|
+
}));
|
|
411
|
+
}
|
|
412
|
+
}
|
|
413
|
+
class Parent extends TungstenStatefulComponent {
|
|
414
|
+
constructor(...args) {
|
|
415
|
+
super(...args);
|
|
416
|
+
_defineProperty(this, "state", {
|
|
417
|
+
value: 0
|
|
418
|
+
});
|
|
419
|
+
_defineProperty(this, "content", () => _jsxs("main", {
|
|
420
|
+
children: [_jsx("button", {
|
|
421
|
+
onClick: () => {
|
|
422
|
+
this.state.value++;
|
|
423
|
+
},
|
|
424
|
+
children: "bump"
|
|
425
|
+
}), _jsx(Child, {
|
|
426
|
+
value: this.state.value
|
|
427
|
+
})]
|
|
428
|
+
}));
|
|
429
|
+
}
|
|
430
|
+
}
|
|
431
|
+
const testApp = await createTestApp(Parent, {
|
|
432
|
+
document
|
|
433
|
+
});
|
|
434
|
+
updates.length = 0;
|
|
435
|
+
testApp.container.querySelector('button').dispatchEvent(new window.Event('click'));
|
|
436
|
+
await testApp.resolved();
|
|
437
|
+
expect(testApp.container.querySelector('span').textContent).to.equal('1:0');
|
|
438
|
+
expect(updates).to.deep.equal(['child']);
|
|
439
|
+
await testApp.unmount();
|
|
440
|
+
});
|
|
441
|
+
it('rejects resolved() when an asynchronous event handler fails', async () => {
|
|
442
|
+
const window = new Window();
|
|
443
|
+
const document = window.document;
|
|
444
|
+
class BrokenEventRoot extends TungstenSimpleComponent {
|
|
445
|
+
constructor(...args) {
|
|
446
|
+
super(...args);
|
|
447
|
+
_defineProperty(this, "content", () => _jsx("button", {
|
|
448
|
+
onClick: async () => {
|
|
449
|
+
await Promise.resolve();
|
|
450
|
+
throw new Error('event failed');
|
|
451
|
+
},
|
|
452
|
+
children: "break"
|
|
453
|
+
}));
|
|
454
|
+
}
|
|
455
|
+
}
|
|
456
|
+
const testApp = await createTestApp(BrokenEventRoot, {
|
|
457
|
+
document
|
|
458
|
+
});
|
|
459
|
+
testApp.container.querySelector('button').dispatchEvent(new window.Event('click'));
|
|
460
|
+
let error;
|
|
461
|
+
try {
|
|
462
|
+
await testApp.resolved();
|
|
463
|
+
} catch (caught) {
|
|
464
|
+
error = caught;
|
|
465
|
+
}
|
|
466
|
+
expect(error).to.be.instanceOf(Error);
|
|
467
|
+
expect(error.message).to.contain('BrokenEventRoot click event handler');
|
|
468
|
+
await testApp.unmount();
|
|
469
|
+
});
|
|
470
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ensureTestEnvLoaded.d.ts","sourceRoot":"","sources":["../../src/testing/ensureTestEnvLoaded.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,mBAAmB,sBAAsB,CAAA;AAEtD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAIrE;AAaD,wBAAgB,mBAAmB,IAAI,OAAO,CAAC,IAAI,CAAC,CAYnD"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { getUserConfig } from "../getUserConfig.js";
|
|
2
|
+
import { loadEnvsDev } from "../Servers/loadEnvsDev.js";
|
|
3
|
+
// Set this in the test script or a runner hook to have component tests load app env.
|
|
4
|
+
export const testEnvVariableName = 'TUNGSTEN_TEST_ENV';
|
|
5
|
+
export function testEnvIsRequested(value) {
|
|
6
|
+
if (value === undefined) return false;
|
|
7
|
+
const normalized = value.trim().toLowerCase();
|
|
8
|
+
return normalized !== '' && normalized !== '0' && normalized !== 'false';
|
|
9
|
+
}
|
|
10
|
+
let loadPromise;
|
|
11
|
+
// Populate global.tungstenPublicEnv / global.tungstenPrivateEnv for DOM component tests,
|
|
12
|
+
// exactly once per process. Compiled client component code reads these as bare globals, so
|
|
13
|
+
// they must exist before any component runs under the test runner.
|
|
14
|
+
//
|
|
15
|
+
// Opt-in, via TUNGSTEN_TEST_ENV. An app that sets it gets its envs loaded with the .env.test*
|
|
16
|
+
// files preferred over the base ones, and a missing or invalid env schemas file is then a hard
|
|
17
|
+
// error — an app that asked for env and did not get it must not run its tests regardless.
|
|
18
|
+
// Without the variable nothing is loaded, which is what a package with no env schemas of its
|
|
19
|
+
// own (the framework itself, or a component library) needs.
|
|
20
|
+
export function ensureTestEnvLoaded() {
|
|
21
|
+
if (loadPromise === undefined) {
|
|
22
|
+
loadPromise = (async () => {
|
|
23
|
+
if (!testEnvIsRequested(process.env[testEnvVariableName])) return;
|
|
24
|
+
const config = await getUserConfig('silent');
|
|
25
|
+
// iteration 0: schemas are stable within a test run.
|
|
26
|
+
// _firstLoad = false: suppress the CLI boot output.
|
|
27
|
+
// useTestEnvFiles = true: prefer .env.test* files.
|
|
28
|
+
await loadEnvsDev(config, 0, process.env, false, true);
|
|
29
|
+
})();
|
|
30
|
+
}
|
|
31
|
+
return loadPromise;
|
|
32
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ensureTestEnvLoaded.sxyt.d.ts","sourceRoot":"","sources":["../../src/testing/ensureTestEnvLoaded.sxyt.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { expect } from 'chai';
|
|
2
|
+
import { describe } from 'sxy-test-runner';
|
|
3
|
+
import { testEnvIsRequested, testEnvVariableName } from "./ensureTestEnvLoaded.js";
|
|
4
|
+
describe('testEnvIsRequested()', ({
|
|
5
|
+
it
|
|
6
|
+
}) => {
|
|
7
|
+
it(`treats an unset ${testEnvVariableName} as no env loading`, () => {
|
|
8
|
+
expect(testEnvIsRequested(undefined)).to.equal(false);
|
|
9
|
+
});
|
|
10
|
+
it('treats blank, 0 and false as no env loading', () => {
|
|
11
|
+
for (const value of ['', ' ', '0', 'false', 'FALSE', ' False ']) {
|
|
12
|
+
expect(testEnvIsRequested(value), value).to.equal(false);
|
|
13
|
+
}
|
|
14
|
+
});
|
|
15
|
+
it('treats any other value as a request to load env', () => {
|
|
16
|
+
for (const value of ['1', 'true', 'yes', 'test']) {
|
|
17
|
+
expect(testEnvIsRequested(value), value).to.equal(true);
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
});
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import type { TungstenBaseComponent, TungstenBaseComponentType } from '../Components.jsx';
|
|
2
|
+
export { ensureTestEnvLoaded, testEnvVariableName } from './ensureTestEnvLoaded.js';
|
|
3
|
+
import type { TrueStore } from '../Store/makeStore.js';
|
|
4
|
+
export type ComponentProps<ComponentType extends TungstenBaseComponentType<any, any>> = InstanceType<ComponentType>['props'];
|
|
5
|
+
export type TestStoreRegistration<Schema extends object> = {
|
|
6
|
+
getStore: (stores: TrueStore<unknown>[]) => TrueStore<Schema>;
|
|
7
|
+
};
|
|
8
|
+
export type TestStore<Schema extends object> = TrueStore<Schema>;
|
|
9
|
+
export type TestStoreOverride<Schema extends object = object> = {
|
|
10
|
+
registration: TestStoreRegistration<Schema>;
|
|
11
|
+
initialize: (store: TrueStore<Schema>) => void | Promise<void>;
|
|
12
|
+
};
|
|
13
|
+
export declare function testStore<Schema extends object>(registration: TestStoreRegistration<Schema>, initialize: (store: TestStore<Schema>) => void | Promise<void>): TestStoreOverride<Schema>;
|
|
14
|
+
export type TestAppOptions<Props extends object> = {
|
|
15
|
+
document?: Document;
|
|
16
|
+
props?: Props;
|
|
17
|
+
container?: HTMLElement;
|
|
18
|
+
location?: string;
|
|
19
|
+
routeParams?: Record<string, string>;
|
|
20
|
+
routeData?: unknown;
|
|
21
|
+
globalData?: Record<string, unknown>;
|
|
22
|
+
stores?: readonly TestStoreOverride<any>[];
|
|
23
|
+
};
|
|
24
|
+
export type TestApp<Component extends TungstenBaseComponent> = {
|
|
25
|
+
readonly document: Document;
|
|
26
|
+
readonly container: HTMLElement;
|
|
27
|
+
readonly component: Component;
|
|
28
|
+
resolved(): Promise<void>;
|
|
29
|
+
setProps(props: Component['props']): Promise<void>;
|
|
30
|
+
unmount(): Promise<void>;
|
|
31
|
+
};
|
|
32
|
+
type CreateTestAppArgs<Props extends object> = object extends Props ? [options?: TestAppOptions<Props>] : keyof Props extends never ? [options?: TestAppOptions<Props>] : [options: TestAppOptions<Props> & {
|
|
33
|
+
props: Props;
|
|
34
|
+
}];
|
|
35
|
+
export declare function createTestApp<ComponentType extends TungstenBaseComponentType<any, any>>(RootComponent: ComponentType, ...args: CreateTestAppArgs<ComponentProps<ComponentType>>): Promise<TestApp<InstanceType<ComponentType>>>;
|
|
36
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/testing/index.ts"],"names":[],"mappings":"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"}
|