Skip to content

Commit 8769217

Browse files
patricklxpatricklx
committed
add tests
1 parent 6281628 commit 8769217

File tree

4 files changed

+135
-25
lines changed

4 files changed

+135
-25
lines changed

‎packages/@glimmer-workspace/integration-tests/lib/setup-harness.ts

+12
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,18 @@ export async function setupQunit() {
6363
qunit.moduleDone(pause);
6464
}
6565

66+
QUnit.on('testEnd', (testEnd) => {
67+
if (testEnd.status === 'failed') {
68+
testEnd.errors.forEach((assertion) => {
69+
console.error(assertion.stack);
70+
// message: speedometer
71+
// actual: 75
72+
// expected: 88
73+
// stack: at dmc.test.js:12
74+
});
75+
}
76+
});
77+
6678
qunit.done(({ failed }) => {
6779
if (failed > 0) {
6880
console.log('[HARNESS] fail');

‎packages/@glimmer-workspace/integration-tests/test/debug-render-tree-test.ts

+76-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import type {
99
SimpleNode,
1010
} from '@glimmer/interfaces';
1111
import type { TemplateOnlyComponent } from '@glimmer/runtime';
12-
import { setComponentTemplate } from '@glimmer/manager';
12+
import { modifierCapabilities, setComponentTemplate, setModifierManager } from '@glimmer/manager';
1313
import { EMPTY_ARGS, templateOnlyComponent, TemplateOnlyComponentManager } from '@glimmer/runtime';
1414
import { assign, expect } from '@glimmer/util';
1515

@@ -69,6 +69,19 @@ class DebugRenderTreeDelegate extends JitRenderDelegate {
6969
}
7070

7171
class DebugRenderTreeTest extends RenderTest {
72+
defineModifier(name: string) {
73+
const r = setModifierManager(
74+
() => ({
75+
capabilities: modifierCapabilities('3.22'),
76+
createModifier() {},
77+
installModifier() {},
78+
updateModifier() {},
79+
destroyModifier() {},
80+
}),
81+
class DidInsertModifier {}
82+
);
83+
this.delegate.registry.register('modifier', name, r);
84+
}
7285
static suiteName = 'Application test: debug render tree';
7386

7487
declare delegate: DebugRenderTreeDelegate;
@@ -253,6 +266,67 @@ class DebugRenderTreeTest extends RenderTest {
253266
]);
254267
}
255268

269+
@test modifiers() {
270+
const didInsert = () => null;
271+
this.registerModifier(
272+
'did-insert',
273+
class {
274+
element?: SimpleElement;
275+
didInsertElement() {}
276+
didUpdate() {}
277+
willDestroyElement() {}
278+
}
279+
);
280+
this.defineModifier('did-update');
281+
282+
this.render(
283+
`<div {{on 'click' this.didInsert}} {{did-insert this.didInsert}} {{did-update this.didInsert}}></div>`,
284+
{
285+
didInsert: didInsert,
286+
}
287+
);
288+
289+
this.assertRenderTree([
290+
{
291+
type: 'html-element',
292+
name: 'div',
293+
args: { positional: [], named: {} },
294+
instance: (instance: HTMLDivElement) => instance.tagName === 'DIV',
295+
template: null,
296+
bounds: this.nodeBounds(this.element.firstChild),
297+
children: [
298+
{
299+
type: 'modifier',
300+
name: 'did-insert',
301+
args: { positional: [didInsert], named: {} },
302+
instance: (instance: any) => typeof instance.didInsertElement === 'function',
303+
template: null,
304+
bounds: this.nodeBounds(this.element.firstChild),
305+
children: [],
306+
},
307+
{
308+
type: 'modifier',
309+
name: 'did-update',
310+
args: { positional: [didInsert], named: {} },
311+
instance: (instance: any) => typeof instance.installModifier === 'function',
312+
template: null,
313+
bounds: this.nodeBounds(this.element.firstChild),
314+
children: [],
315+
},
316+
{
317+
type: 'modifier',
318+
name: 'on',
319+
args: { positional: ['click', didInsert], named: {} },
320+
instance: (instance: any) => instance === undefined,
321+
template: null,
322+
bounds: this.nodeBounds(this.element.firstChild),
323+
children: [],
324+
},
325+
],
326+
},
327+
]);
328+
}
329+
256330
@test 'getDebugCustomRenderTree works'() {
257331
let bucket1 = {};
258332
let instance1 = {};
@@ -502,7 +576,7 @@ class DebugRenderTreeTest extends RenderTest {
502576
this.assertRenderNode(actualNode, expected, `${actualNode.type}:${actualNode.name}`);
503577
});
504578
} else {
505-
this.assert.deepEqual(actual, [], path);
579+
this.assert.deepEqual(actual, expectedNodes, path);
506580
}
507581
}
508582

‎packages/@glimmer/interfaces/lib/runtime/debug-render-tree.d.ts

+7-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,13 @@ import type { SimpleElement, SimpleNode } from '@simple-dom/interface';
33
import type { Bounds } from '../dom/bounds.js';
44
import type { Arguments, CapturedArguments } from './arguments.js';
55

6-
export type RenderNodeType = 'outlet' | 'engine' | 'route-template' | 'component';
6+
export type RenderNodeType =
7+
| 'outlet'
8+
| 'engine'
9+
| 'route-template'
10+
| 'component'
11+
| 'html-element'
12+
| 'modifier';
713

814
export interface RenderNode {
915
type: RenderNodeType;

‎packages/@glimmer/runtime/lib/vm/element-builder.ts

+40-22
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import type {
2020
UpdatableBlock,
2121
} from '@glimmer/interfaces';
2222
import { destroy, registerDestructor } from '@glimmer/destroyable';
23+
import { createUnboundRef, REFERENCE } from '@glimmer/reference';
2324
import { assert, expect, Stack } from '@glimmer/util';
2425

2526
import type { DynamicAttribute } from './attributes/dynamic';
@@ -83,6 +84,7 @@ export class NewElementBuilder implements ElementBuilder {
8384
[CURSOR_STACK] = new Stack<Cursor>();
8485
private modifierStack = new Stack<Nullable<ModifierInstance[]>>();
8586
private blockStack = new Stack<LiveBlock>();
87+
private htmlElementsState: { shouldAddHtmlElement?: boolean }[];
8688

8789
static forInitialRender(env: Environment, cursor: CursorImpl) {
8890
return new this(env, cursor.element, cursor.nextSibling).initialize();
@@ -196,8 +198,8 @@ export class NewElementBuilder implements ElementBuilder {
196198
this.constructing = null;
197199
this.operations = null;
198200

199-
this.pushModifiers(modifiers);
200201
this.pushElement(element, null);
202+
this.pushModifiers(modifiers);
201203
this.didOpenElement(element);
202204
}
203205

@@ -207,12 +209,13 @@ export class NewElementBuilder implements ElementBuilder {
207209

208210
closeElement(): Nullable<ModifierInstance[]> {
209211
const htmlState = this.htmlElementsState.pop();
210-
if (htmlState.shouldAddHtmlElement) {
212+
if (htmlState?.shouldAddHtmlElement) {
213+
const element = this.element;
211214
this.env.debugRenderTree?.didRender(htmlState, {
212-
parentElement: () => element.parentElement,
213-
firstNode: () => element,
214-
lastNode: () => element,
215-
});
215+
parentElement: () => (element as any).parentElement,
216+
firstNode: () => element,
217+
lastNode: () => element,
218+
});
216219
}
217220
this.willCloseElement();
218221
this.popElement();
@@ -257,35 +260,50 @@ export class NewElementBuilder implements ElementBuilder {
257260
private pushModifiers(modifiers: Nullable<ModifierInstance[]>): void {
258261
this.modifierStack.push(modifiers);
259262
if (this.env.debugRenderTree) {
260-
modifiers = modifiers || []
261-
const htmlState = {};
263+
modifiers = modifiers || [];
264+
const htmlState = {
265+
shouldAddHtmlElement:
266+
modifiers.length || (globalThis as any).ENV_DEBUG_RENDER_TREE_ALL_ELEMENTS,
267+
};
262268
this.htmlElementsState.push(htmlState);
263-
const shouldAddHtmlElement = modifiers.length || globalThis.ENV_DEBUG_RENDER_TREE_ALL_ELEMENTS
264-
htmlState.shouldAddHtmlElement = shouldAddHtmlElement;
265-
if (shouldAddHtmlElement) {
269+
if (htmlState.shouldAddHtmlElement) {
266270
this.env.debugRenderTree?.create(htmlState, {
267271
type: 'html-element',
268-
name: this.element.localName,
272+
name: this.element.tagName.toLowerCase(),
269273
args: {
270-
named: this.element.attrs,
271-
positional: []
272-
},
273-
instance: delegate
274+
named: {},
275+
positional: [],
276+
} as any,
277+
instance: this.element,
274278
});
275279
}
276280
for (const modifier of modifiers) {
277281
const state = {};
278-
const name = modifier.definition.resolvedName;
279-
const delegate = modifier.manager.componentManagerDelegates.get(this.env.owner);
280-
const element = modifier.state.element;
282+
const name = modifier.definition.resolvedName || 'unknown-modifier';
283+
const instance = (modifier.state as any).instance || (modifier.state as any).delegate;
284+
const element = this.element;
285+
const args: any = {
286+
positional: [],
287+
named: {},
288+
};
289+
for (const value of (modifier.state as any).args.positional) {
290+
if (value && value[REFERENCE]) {
291+
args.positional.push(value);
292+
} else {
293+
args.positional.push(createUnboundRef(value, false));
294+
}
295+
}
296+
for (const [key, value] of Object.entries((modifier.state as any)?.args.named)) {
297+
args.named[key] = createUnboundRef(value, false);
298+
}
281299
this.env.debugRenderTree?.create(state, {
282300
type: 'modifier',
283301
name,
284-
args: modifier.state.args,
285-
instance: delegate
302+
args: args,
303+
instance,
286304
});
287305
this.env.debugRenderTree?.didRender(state, {
288-
parentElement: () => element.parentElement,
306+
parentElement: () => (element as any).parentElement,
289307
firstNode: () => element,
290308
lastNode: () => element,
291309
});

0 commit comments

Comments
 (0)