Skip to content

Commit b5e4663

Browse files
GoodDayForSurfGoodDayForSurf
authored
add to test @for (ng syntax) (DevExpress#29623)
1 parent 9dd3890 commit b5e4663

File tree

1 file changed

+131
-107
lines changed

1 file changed

+131
-107
lines changed

‎packages/devextreme-angular/tests/src/ui/list.spec.ts‎

Lines changed: 131 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -228,134 +228,158 @@ describe('DxList', () => {
228228
expect(instance.element().querySelectorAll('.dx-item.dx-state-disabled').length).toBe(1);
229229
});
230230

231-
it('should be able to accept items as an *ngFor components list', () => {
232-
TestBed.overrideComponent(TestContainerComponent, {
233-
set: {
234-
template: `
235-
<dx-list>
236-
<dxi-item *ngFor="let item of items">{{item}}</dxi-item>
237-
</dx-list>
238-
`,
239-
},
231+
[
232+
{ name: '*ngFor', tpl: '<dxi-item *ngFor="let item of items">{{item}}</dxi-item>' },
233+
{
234+
name: '@for', tpl: `@for (item of items; track item) {
235+
<dxi-item>{{item}}</dxi-item>
236+
}`,
237+
},
238+
].forEach(({ name, tpl }) => {
239+
it(`should be able to accept items as an ${name} components list`, () => {
240+
TestBed.overrideComponent(TestContainerComponent, {
241+
set: {
242+
template: `<dx-list>${tpl}</dx-list>`,
243+
},
244+
});
245+
246+
const fixture = TestBed.createComponent(TestContainerComponent);
247+
248+
fixture.detectChanges();
249+
250+
const testComponent = fixture.componentInstance; const
251+
{ instance } = testComponent.innerWidget;
252+
253+
expect(instance?.option('items')?.length).toBe(1);
254+
expect(instance.element().querySelectorAll('.dx-item-content').length).toBe(1);
255+
expect(instance.element().querySelectorAll('.dx-item-content')[0].textContent).toBe('1');
256+
257+
testComponent.items.push(2);
258+
259+
fixture.detectChanges();
260+
261+
expect(instance?.option('items')?.length).toBe(2);
262+
expect(instance.element().querySelectorAll('.dx-item-content').length).toBe(2);
263+
expect(instance.element().querySelectorAll('.dx-item-content')[0].textContent).toBe('1');
264+
expect(instance.element().querySelectorAll('.dx-item-content')[1].textContent).toBe('2');
240265
});
241-
const fixture = TestBed.createComponent(TestContainerComponent);
242-
fixture.detectChanges();
243-
244-
const testComponent = fixture.componentInstance;
245-
const { instance } = testComponent.innerWidget;
246-
247-
expect(instance?.option('items')?.length).toBe(1);
248-
expect(instance.element().querySelectorAll('.dx-item-content').length).toBe(1);
249-
expect(instance.element().querySelectorAll('.dx-item-content')[0].textContent).toBe('1');
250-
251-
testComponent.items.push(2);
252-
fixture.detectChanges();
253266

254-
expect(instance?.option('items')?.length).toBe(2);
255-
expect(instance.element().querySelectorAll('.dx-item-content').length).toBe(2);
256-
expect(instance.element().querySelectorAll('.dx-item-content')[0].textContent).toBe('1');
257-
expect(instance.element().querySelectorAll('.dx-item-content')[1].textContent).toBe('2');
267+
it(`should be able to clear items rendered with ${name}`, () => {
268+
TestBed.overrideComponent(TestContainerComponent, {
269+
set: {
270+
template: `<dx-list>
271+
${tpl}
272+
</dx-list>`,
273+
},
274+
});
275+
const fixture = TestBed.createComponent(TestContainerComponent);
276+
fixture.detectChanges();
277+
278+
const testComponent = fixture.componentInstance;
279+
const { instance } = testComponent.innerWidget;
280+
281+
expect(instance?.option('items')?.length).toBe(1);
282+
expect(instance.element().querySelectorAll('.dx-item-content').length).toBe(1);
283+
expect(instance.element().querySelectorAll('.dx-item-content')[0].textContent).toBe('1');
284+
285+
testComponent.items.pop();
286+
expect(testComponent.items.length).toBe(0);
287+
fixture.detectChanges();
288+
289+
expect(instance?.option('items')?.length).toBe(0);
290+
expect(instance.element().querySelectorAll('.dx-item-content').length).toBe(0);
291+
});
258292
});
259293

260-
it('should be able to replace items by ng-for', () => {
261-
TestBed.overrideComponent(TestContainerComponent, {
262-
set: {
263-
template: `
264-
<dx-list>
265-
<dxi-item *ngFor="let item of items" [badge]="10">{{item}}</dxi-item>
266-
</dx-list>
267-
`,
268-
},
294+
[
295+
{ name: '*ngFor', tpl: '<dxi-item *ngFor="let item of items" [badge]="10">{{item}}</dxi-item>' },
296+
{
297+
name: '@for', tpl: `@for (item of items; track item) {
298+
<dxi-item [badge]="10">{{item}}</dxi-item>
299+
}`,
300+
},
301+
].forEach(({ name, tpl }) => {
302+
it(`should be able to replace items by ${name}`, () => {
303+
TestBed.overrideComponent(TestContainerComponent, {
304+
set: {
305+
template: `<dx-list>${tpl}</dx-list>`,
306+
},
307+
});
308+
const fixture = TestBed.createComponent(TestContainerComponent);
309+
const testComponent = fixture.componentInstance;
310+
311+
testComponent.items = [1, 2];
312+
fixture.detectChanges();
313+
314+
const { instance } = testComponent.innerWidget;
315+
316+
testComponent.items = [3, 4];
317+
fixture.detectChanges();
318+
319+
expect(instance?.option('items')?.length).toBe(2);
320+
expect(instance.element().querySelectorAll('.dx-item-content').length).toBe(2);
321+
expect(instance.element().querySelectorAll('.dx-item-content')[0].textContent).toBe('3');
322+
expect(instance.element().querySelectorAll('.dx-item-content')[1].textContent).toBe('4');
269323
});
270-
const fixture = TestBed.createComponent(TestContainerComponent);
271-
const testComponent = fixture.componentInstance;
272-
273-
testComponent.items = [1, 2];
274-
fixture.detectChanges();
324+
});
275325

276-
const { instance } = testComponent.innerWidget;
326+
[
327+
{ name: '*ngFor', tpl: '<dxi-item *ngFor="let item of complexItems">{{item.text}}</dxi-item>' },
328+
{
329+
name: '@for', tpl: `@for (item of complexItems; track item.text) {
330+
<dxi-item>{{item.text}}</dxi-item>
331+
}`,
332+
},
333+
].forEach(({ name, tpl }) => {
334+
it(`should respond to items changes rendered with ${name}`, () => {
335+
TestBed.overrideComponent(TestContainerComponent, {
336+
set: {
337+
template: `<dx-list>${tpl}</dx-list>`,
338+
},
339+
});
277340

278-
testComponent.items = [3, 4];
279-
fixture.detectChanges();
341+
const fixture = TestBed.createComponent(TestContainerComponent);
280342

281-
expect(instance?.option('items')?.length).toBe(2);
282-
expect(instance.element().querySelectorAll('.dx-item-content').length).toBe(2);
283-
expect(instance.element().querySelectorAll('.dx-item-content')[0].textContent).toBe('3');
284-
expect(instance.element().querySelectorAll('.dx-item-content')[1].textContent).toBe('4');
285-
});
343+
fixture.detectChanges();
286344

287-
it('should be able to clear items rendered with *ngFor', () => {
288-
TestBed.overrideComponent(TestContainerComponent, {
289-
set: {
290-
template: `
291-
<dx-list>
292-
<dxi-item *ngFor="let item of items">{{item}}</dxi-item>
293-
</dx-list>
294-
`,
295-
},
296-
});
297-
const fixture = TestBed.createComponent(TestContainerComponent);
298-
fixture.detectChanges();
345+
const testComponent = fixture.componentInstance;
346+
const { instance } = testComponent.innerWidget;
299347

300-
const testComponent = fixture.componentInstance;
301-
const { instance } = testComponent.innerWidget;
348+
expect(instance?.option('items')?.length).toBe(1);
349+
expect(instance.element().querySelectorAll('.dx-item-content').length).toBe(1);
350+
expect(instance.element().querySelectorAll('.dx-item-content')[0].textContent).toBe('Item 1');
302351

303-
expect(instance?.option('items')?.length).toBe(1);
304-
expect(instance.element().querySelectorAll('.dx-item-content').length).toBe(1);
305-
expect(instance.element().querySelectorAll('.dx-item-content')[0].textContent).toBe('1');
352+
const optionSpy = spyOn(instance, 'option').and.callThrough();
306353

307-
testComponent.items.pop();
308-
expect(testComponent.items.length).toBe(0);
309-
fixture.detectChanges();
354+
fixture.detectChanges();
310355

311-
expect(instance?.option('items')?.length).toBe(0);
312-
expect(instance.element().querySelectorAll('.dx-item-content').length).toBe(0);
313-
});
356+
expect(instance.option).not.toHaveBeenCalled;
314357

315-
it('should respond to items changes rendered with ngFor', () => {
316-
TestBed.overrideComponent(TestContainerComponent, {
317-
set: {
318-
template: `
319-
<dx-list>
320-
<dxi-item *ngFor="let item of complexItems">{{item.text}}</dxi-item>
321-
</dx-list>
322-
`,
323-
},
324-
});
325-
const fixture = TestBed.createComponent(TestContainerComponent);
326-
fixture.detectChanges();
358+
testComponent.complexItems.push({ text: 'Item 2' });
327359

328-
const testComponent = fixture.componentInstance;
329-
const { instance } = testComponent.innerWidget;
360+
fixture.detectChanges();
330361

331-
expect(instance?.option('items')?.length).toBe(1);
332-
expect(instance.element().querySelectorAll('.dx-item-content').length).toBe(1);
333-
expect(instance.element().querySelectorAll('.dx-item-content')[0].textContent).toBe('Item 1');
362+
expect(instance.option).toHaveBeenCalled;
363+
expect(instance?.option('items')?.length).toBe(2);
364+
expect(instance.element().querySelectorAll('.dx-item-content').length).toBe(2);
365+
expect(instance.element().querySelectorAll('.dx-item-content')[0].textContent).toBe('Item 1');
366+
expect(instance.element().querySelectorAll('.dx-item-content')[1].textContent).toBe('Item 2');
334367

335-
const optionSpy = spyOn(instance, 'option').and.callThrough();
336-
fixture.detectChanges();
337-
expect(instance.option).not.toHaveBeenCalled;
368+
optionSpy.calls.reset();
338369

339-
testComponent.complexItems.push({ text: 'Item 2' });
340-
fixture.detectChanges();
370+
testComponent.complexItems[0].text = 'Changed';
341371

342-
expect(instance.option).toHaveBeenCalled;
343-
expect(instance?.option('items')?.length).toBe(2);
344-
expect(instance.element().querySelectorAll('.dx-item-content').length).toBe(2);
345-
expect(instance.element().querySelectorAll('.dx-item-content')[0].textContent).toBe('Item 1');
346-
expect(instance.element().querySelectorAll('.dx-item-content')[1].textContent).toBe('Item 2');
372+
fixture.detectChanges();
347373

348-
optionSpy.calls.reset();
349-
testComponent.complexItems[0].text = 'Changed';
350-
fixture.detectChanges();
374+
expect(optionSpy).toHaveBeenCalledTimes(1);
375+
expect(optionSpy.calls.allArgs().length).toBe(1);
376+
expect(instance?.option('items')?.length).toBe(2);
377+
expect(instance.element().querySelectorAll('.dx-item-content').length).toBe(2);
378+
expect(instance.element().querySelectorAll('.dx-item-content')[0].textContent).toBe('Changed');
379+
expect(instance.element().querySelectorAll('.dx-item-content')[1].textContent).toBe('Item 2');
351380

352-
expect(optionSpy).toHaveBeenCalledTimes(1);
353-
expect(optionSpy.calls.allArgs().length).toBe(1);
354-
expect(instance?.option('items')?.length).toBe(2);
355-
expect(instance.element().querySelectorAll('.dx-item-content').length).toBe(2);
356-
expect(instance.element().querySelectorAll('.dx-item-content')[0].textContent).toBe('Changed');
357-
expect(instance.element().querySelectorAll('.dx-item-content')[1].textContent).toBe('Item 2');
358-
optionSpy.calls.reset();
381+
optionSpy.calls.reset();
382+
});
359383
});
360384

361385
it('should be able to set option "template" for each item', () => {

0 commit comments

Comments
 (0)