Skip to content

Commit a853060

Browse files
wjhsfwjhsf
authored
test(wtr): convert test to async/await (#5510)
* test(wtr): convert test to async/await * Update packages/@lwc/integration-not-karma/test/component/dynamic-imports/index.spec.js
1 parent 8fdac07 commit a853060

File tree

1 file changed

+142
-144
lines changed
  • packages/@lwc/integration-not-karma/test/component/dynamic-imports

1 file changed

+142
-144
lines changed

‎packages/@lwc/integration-not-karma/test/component/dynamic-imports/index.spec.js‎

Lines changed: 142 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,19 @@ beforeEach(() => {
1717
clearRegister();
1818
});
1919

20-
function waitForMacroTask(fn) {
21-
// waiting for the macro-task first, then micro-task
22-
return new Promise((resolve) => {
23-
setTimeout(() => {
24-
resolve();
25-
});
26-
}).then(() => fn());
20+
async function microTask() {
21+
await Promise.resolve();
22+
}
23+
24+
/** Actually waits a macro-task and then a micro-task, for reasons unspecified. */
25+
async function macroTask() {
26+
await new Promise((resolve) => setTimeout(resolve, 0));
27+
await microTask();
2728
}
2829

2930
// TODO [#3331]: remove lwc:dynamic portion of these tests in 246
3031

31-
it('should call the loader using lwc:dynamic', () => {
32+
it('should call the loader using lwc:dynamic', async () => {
3233
// note, using `x-` prefix instead of `x/` because these are
3334
// handled by `registerForLoad`
3435
registerForLoad('x-ctor', DynamicCtor);
@@ -37,57 +38,58 @@ it('should call the loader using lwc:dynamic', () => {
3738
const elm = createElement('x-dynamic', { is: LwcDynamicContainer });
3839
document.body.appendChild(elm);
3940

40-
return Promise.resolve().then(() => {
41-
const child = elm.shadowRoot.querySelector('x-ctor');
42-
expect(child).toBeNull();
43-
// first rendered with ctor set to undefined (nothing)
44-
elm.enableCtor();
45-
return waitForMacroTask(() => {
46-
// second rendered with ctor set to x-ctor
47-
const ctorElm = elm.shadowRoot.querySelector('x-ctor');
48-
expect(ctorElm).not.toBeNull();
49-
const span = ctorElm.shadowRoot.querySelector('span');
50-
expect(span).not.toBeNull();
51-
expect(span.textContent).toBe('ctor_html');
52-
elm.enableAlter();
53-
return waitForMacroTask(() => {
54-
// third rendered with ctor set to x-alter
55-
const alterElm = elm.shadowRoot.querySelector('x-ctor');
56-
expect(alterElm).not.toBeNull();
57-
const span = alterElm.shadowRoot.querySelector('span');
58-
expect(span).not.toBeNull();
59-
expect(span.textContent).toBe('alter_html');
60-
elm.disableAll();
61-
return waitForMacroTask(() => {
62-
// third rendered with ctor set to null (nothing)
63-
const child = elm.shadowRoot.querySelector('x-ctor');
64-
expect(child).toBeNull();
65-
});
66-
});
67-
});
68-
});
41+
const child = elm.shadowRoot.querySelector('x-ctor');
42+
expect(child).toBeNull();
43+
// first rendered with ctor set to undefined (nothing)
44+
elm.enableCtor();
45+
46+
await macroTask();
47+
48+
// second rendered with ctor set to x-ctor
49+
const ctorElm = elm.shadowRoot.querySelector('x-ctor');
50+
expect(ctorElm).not.toBeNull();
51+
const ctorElmSpan = ctorElm.shadowRoot.querySelector('span');
52+
expect(ctorElmSpan).not.toBeNull();
53+
expect(ctorElmSpan.textContent).toBe('ctor_html');
54+
elm.enableAlter();
55+
56+
await macroTask();
57+
58+
// third rendered with ctor set to x-alter
59+
const alterElm = elm.shadowRoot.querySelector('x-ctor');
60+
expect(alterElm).not.toBeNull();
61+
const afterElmSpan = alterElm.shadowRoot.querySelector('span');
62+
expect(afterElmSpan).not.toBeNull();
63+
expect(afterElmSpan.textContent).toBe('alter_html');
64+
elm.disableAll();
65+
66+
await macroTask();
67+
68+
// third rendered with ctor set to null (nothing)
69+
expect(elm.shadowRoot.querySelector('x-ctor')).toBeNull();
6970
});
7071

71-
it('should not reuse DOM elements using lwc:dynamic', () => {
72+
it('should not reuse DOM elements using lwc:dynamic', async () => {
7273
registerForLoad('x-ctor', DynamicCtor);
7374
registerForLoad('x-alter', AlterCtor);
7475

7576
const elm = createElement('x-dynamic', { is: LwcDynamicContainer });
7677
elm.enableCtor();
7778
document.body.appendChild(elm);
7879

79-
return waitForMacroTask(() => {
80-
const childElm = elm.shadowRoot.querySelector('x-ctor');
81-
expect(childElm).not.toBeNull();
82-
elm.enableAlter();
83-
return waitForMacroTask(() => {
84-
const alterElm = elm.shadowRoot.querySelector('x-ctor');
85-
expect(alterElm).not.toBe(childElm);
86-
});
87-
});
80+
await macroTask();
81+
82+
const childElm = elm.shadowRoot.querySelector('x-ctor');
83+
expect(childElm).not.toBeNull();
84+
elm.enableAlter();
85+
86+
await macroTask();
87+
88+
const alterElm = elm.shadowRoot.querySelector('x-ctor');
89+
expect(alterElm).not.toBe(childElm);
8890
});
8991

90-
it('should not cache DOM elements using lwc:dynamic', () => {
92+
it('should not cache DOM elements using lwc:dynamic', async () => {
9193
registerForLoad('x-ctor', DynamicCtor);
9294
registerForLoad('x-alter', AlterCtor);
9395

@@ -96,18 +98,20 @@ it('should not cache DOM elements using lwc:dynamic', () => {
9698
document.body.appendChild(elm);
9799

98100
// from ctor to alter back to ctor, new elements should be created
99-
return waitForMacroTask(() => {
100-
const childElm = elm.shadowRoot.querySelector('x-ctor');
101-
expect(childElm).not.toBeNull();
102-
elm.enableAlter();
103-
return waitForMacroTask(() => {
104-
elm.enableCtor();
105-
return waitForMacroTask(() => {
106-
const secondCtorElm = elm.shadowRoot.querySelector('x-ctor');
107-
expect(secondCtorElm).not.toBe(childElm);
108-
});
109-
});
110-
});
101+
await macroTask();
102+
103+
const childElm = elm.shadowRoot.querySelector('x-ctor');
104+
expect(childElm).not.toBeNull();
105+
elm.enableAlter();
106+
107+
await macroTask();
108+
109+
elm.enableCtor();
110+
111+
await macroTask();
112+
113+
const secondCtorElm = elm.shadowRoot.querySelector('x-ctor');
114+
expect(secondCtorElm).not.toBe(childElm);
111115
});
112116

113117
describe('slotted content using lwc:dynamic', () => {
@@ -119,7 +123,7 @@ describe('slotted content using lwc:dynamic', () => {
119123
consoleSpy.reset();
120124
});
121125

122-
it('reallocate slotted content after changing constructor', () => {
126+
it('reallocate slotted content after changing constructor', async () => {
123127
const elm = createElement('x-dynamic-slotted', { is: LwcDynamicSlotted });
124128
elm.ctor = ContainerFoo;
125129

@@ -137,26 +141,22 @@ describe('slotted content using lwc:dynamic', () => {
137141
// Swap construstor and check if nodes have been reallocated.
138142
elm.ctor = ContainerBar;
139143

140-
return Promise.resolve().then(() => {
141-
expect(
142-
elm.shadowRoot.querySelector('[data-id="slot-default"]').assignedSlot
143-
).toBeDefined();
144-
expect(elm.shadowRoot.querySelector('[data-id="slot-bar"]').assignedSlot).toBeDefined();
145-
146-
if (process.env.NATIVE_SHADOW) {
147-
// `slot-foo` is not rendered in synthetic shadow
148-
expect(elm.shadowRoot.querySelector('[data-id="slot-foo"]').assignedSlot).toBe(
149-
null
150-
);
151-
}
152-
expect(consoleSpy.calls.error.length).toEqual(0);
153-
});
144+
await microTask();
145+
146+
expect(elm.shadowRoot.querySelector('[data-id="slot-default"]').assignedSlot).toBeDefined();
147+
expect(elm.shadowRoot.querySelector('[data-id="slot-bar"]').assignedSlot).toBeDefined();
148+
149+
if (process.env.NATIVE_SHADOW) {
150+
// `slot-foo` is not rendered in synthetic shadow
151+
expect(elm.shadowRoot.querySelector('[data-id="slot-foo"]').assignedSlot).toBe(null);
152+
}
153+
expect(consoleSpy.calls.error.length).toEqual(0);
154154
});
155155
});
156156

157157
// Using <lwc:component lwc:is={}>
158158

159-
it('should call the loader', () => {
159+
it('should call the loader', async () => {
160160
// note, using `x-` prefix instead of `x/` because these are
161161
// handled by `registerForLoad`
162162
registerForLoad('x-ctor', DynamicCtor);
@@ -165,77 +165,79 @@ it('should call the loader', () => {
165165
const elm = createElement('x-dynamic', { is: DynamicContainer });
166166
document.body.appendChild(elm);
167167

168-
return Promise.resolve().then(() => {
169-
const child = elm.shadowRoot.querySelector('x-ctor');
170-
expect(child).toBeNull();
171-
// first rendered with ctor set to undefined (nothing)
172-
elm.enableCtor();
173-
return waitForMacroTask(() => {
174-
// second rendered with ctor set to x-ctor
175-
const ctorElm = elm.shadowRoot.querySelector('x-ctor');
176-
expect(ctorElm).not.toBeNull();
177-
const span = ctorElm.shadowRoot.querySelector('span');
178-
expect(span).not.toBeNull();
179-
expect(span.textContent).toBe('ctor_html');
180-
elm.enableAlter();
181-
return waitForMacroTask(() => {
182-
// third rendered with ctor set to x-alter
183-
const alterElm = elm.shadowRoot.querySelector('x-alter');
184-
expect(alterElm).not.toBeNull();
185-
const span = alterElm.shadowRoot.querySelector('span');
186-
expect(span).not.toBeNull();
187-
expect(span.textContent).toBe('alter_html');
188-
elm.disableAll();
189-
return waitForMacroTask(() => {
190-
// third rendered with ctor set to null (nothing)
191-
const child = elm.shadowRoot.querySelector('x-ctor');
192-
expect(child).toBeNull();
193-
});
194-
});
195-
});
196-
});
168+
await microTask();
169+
170+
const child = elm.shadowRoot.querySelector('x-ctor');
171+
expect(child).toBeNull();
172+
// first rendered with ctor set to undefined (nothing)
173+
elm.enableCtor();
174+
175+
await macroTask();
176+
177+
// second rendered with ctor set to x-ctor
178+
const ctorElm = elm.shadowRoot.querySelector('x-ctor');
179+
expect(ctorElm).not.toBeNull();
180+
const ctorElmSpan = ctorElm.shadowRoot.querySelector('span');
181+
expect(ctorElmSpan).not.toBeNull();
182+
expect(ctorElmSpan.textContent).toBe('ctor_html');
183+
elm.enableAlter();
184+
185+
await macroTask();
186+
187+
// third rendered with ctor set to x-alter
188+
const alterElm = elm.shadowRoot.querySelector('x-alter');
189+
expect(alterElm).not.toBeNull();
190+
const afterElmSpan = alterElm.shadowRoot.querySelector('span');
191+
expect(afterElmSpan).not.toBeNull();
192+
expect(afterElmSpan.textContent).toBe('alter_html');
193+
elm.disableAll();
194+
195+
await macroTask();
196+
197+
// third rendered with ctor set to null (nothing)
198+
expect(elm.shadowRoot.querySelector('x-ctor')).toBeNull();
197199
});
198200

199-
it('should not reuse DOM elements', () => {
201+
it('should not reuse DOM elements', async () => {
200202
registerForLoad('x-ctor', DynamicCtor);
201203
registerForLoad('x-alter', AlterCtor);
202204

203205
const elm = createElement('x-dynamic', { is: DynamicContainer });
204206
elm.enableCtor();
205207
document.body.appendChild(elm);
206208

207-
return waitForMacroTask(() => {
208-
const childElm = elm.shadowRoot.querySelector('x-ctor');
209-
expect(childElm).not.toBeNull();
210-
elm.enableAlter();
211-
return waitForMacroTask(() => {
212-
const alterElm = elm.shadowRoot.querySelector('x-alter');
213-
expect(alterElm).not.toBe(childElm);
214-
});
215-
});
209+
await macroTask();
210+
const childElm = elm.shadowRoot.querySelector('x-ctor');
211+
expect(childElm).not.toBeNull();
212+
elm.enableAlter();
213+
await macroTask();
214+
const alterElm = elm.shadowRoot.querySelector('x-alter');
215+
expect(alterElm).not.toBe(childElm);
216216
});
217217

218-
it('should not cache DOM elements', () => {
218+
it('should not cache DOM elements', async () => {
219219
registerForLoad('x-ctor', DynamicCtor);
220220
registerForLoad('x-alter', AlterCtor);
221221

222222
const elm = createElement('x-dynamic', { is: DynamicContainer });
223223
elm.enableCtor();
224224
document.body.appendChild(elm);
225-
226225
// from ctor to alter back to ctor, new elements should be created
227-
return waitForMacroTask(() => {
228-
const childElm = elm.shadowRoot.querySelector('x-ctor');
229-
expect(childElm).not.toBeNull();
230-
elm.enableAlter();
231-
return waitForMacroTask(() => {
232-
elm.enableCtor();
233-
return waitForMacroTask(() => {
234-
const secondCtorElm = elm.shadowRoot.querySelector('x-ctor');
235-
expect(secondCtorElm).not.toBe(childElm);
236-
});
237-
});
238-
});
226+
227+
await macroTask();
228+
229+
const childElm = elm.shadowRoot.querySelector('x-ctor');
230+
expect(childElm).not.toBeNull();
231+
elm.enableAlter();
232+
233+
await macroTask();
234+
235+
elm.enableCtor();
236+
237+
await macroTask();
238+
239+
const secondCtorElm = elm.shadowRoot.querySelector('x-ctor');
240+
expect(secondCtorElm).not.toBe(childElm);
239241
});
240242

241243
describe('slotted content', () => {
@@ -247,7 +249,7 @@ describe('slotted content', () => {
247249
consoleSpy.reset();
248250
});
249251

250-
it('reallocate slotted content after changing constructor', () => {
252+
it('reallocate slotted content after changing constructor', async () => {
251253
const elm = createElement('x-dynamic-slotted', { is: DynamicSlotted });
252254
elm.ctor = ContainerFoo;
253255

@@ -265,19 +267,15 @@ describe('slotted content', () => {
265267
// Swap constructor and check if nodes have been reallocated.
266268
elm.ctor = ContainerBar;
267269

268-
return Promise.resolve().then(() => {
269-
expect(
270-
elm.shadowRoot.querySelector('[data-id="slot-default"]').assignedSlot
271-
).toBeDefined();
272-
expect(elm.shadowRoot.querySelector('[data-id="slot-bar"]').assignedSlot).toBeDefined();
273-
274-
if (process.env.NATIVE_SHADOW) {
275-
// `slot-foo` is not rendered in synthetic shadow
276-
expect(elm.shadowRoot.querySelector('[data-id="slot-foo"]').assignedSlot).toBe(
277-
null
278-
);
279-
}
280-
expect(consoleSpy.calls.error.length).toEqual(0);
281-
});
270+
await microTask();
271+
272+
expect(elm.shadowRoot.querySelector('[data-id="slot-default"]').assignedSlot).toBeDefined();
273+
expect(elm.shadowRoot.querySelector('[data-id="slot-bar"]').assignedSlot).toBeDefined();
274+
275+
if (process.env.NATIVE_SHADOW) {
276+
// `slot-foo` is not rendered in synthetic shadow
277+
expect(elm.shadowRoot.querySelector('[data-id="slot-foo"]').assignedSlot).toBe(null);
278+
}
279+
expect(consoleSpy.calls.error.length).toEqual(0);
282280
});
283281
});

0 commit comments

Comments
 (0)