test(ivy): move common integration tests to acceptance (#30213)
PR Close #30213
This commit is contained in:
cexbrayat
Alex Rickabaugh
parent
ff29cccb77
commit
1b059e595f
|
|
@ -0,0 +1,541 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {Component, Directive} from '@angular/core';
|
||||
import {TestBed} from '@angular/core/testing';
|
||||
import {By} from '@angular/platform-browser';
|
||||
|
||||
describe('@angular/common integration', () => {
|
||||
|
||||
describe('NgForOf', () => {
|
||||
@Directive({selector: '[dir]'})
|
||||
class MyDirective {
|
||||
}
|
||||
|
||||
@Component({selector: 'app-child', template: '<div dir>comp text</div>'})
|
||||
class ChildComponent {
|
||||
}
|
||||
|
||||
@Component({selector: 'app-root', template: ''})
|
||||
class AppComponent {
|
||||
items: string[] = ['first', 'second'];
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({declarations: [AppComponent, ChildComponent, MyDirective]});
|
||||
});
|
||||
|
||||
it('should update a loop', () => {
|
||||
TestBed.overrideTemplate(
|
||||
AppComponent, '<ul><li *ngFor="let item of items">{{item}}</li></ul>');
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
|
||||
let listItems =
|
||||
Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
|
||||
expect(listItems.map(li => li.textContent)).toEqual(['first', 'second']);
|
||||
|
||||
// change detection cycle, no model changes
|
||||
fixture.detectChanges();
|
||||
listItems = Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
|
||||
expect(listItems.map(li => li.textContent)).toEqual(['first', 'second']);
|
||||
|
||||
// remove the last item
|
||||
const items = fixture.componentInstance.items;
|
||||
items.length = 1;
|
||||
fixture.detectChanges();
|
||||
|
||||
listItems = Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
|
||||
expect(listItems.map(li => li.textContent)).toEqual(['first']);
|
||||
|
||||
// change an item
|
||||
items[0] = 'one';
|
||||
fixture.detectChanges();
|
||||
listItems = Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
|
||||
expect(listItems.map(li => li.textContent)).toEqual(['one']);
|
||||
|
||||
// add an item
|
||||
items.push('two');
|
||||
fixture.detectChanges();
|
||||
listItems = Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
|
||||
expect(listItems.map(li => li.textContent)).toEqual(['one', 'two']);
|
||||
});
|
||||
|
||||
it('should support ngForOf context variables', () => {
|
||||
TestBed.overrideTemplate(
|
||||
AppComponent,
|
||||
'<ul><li *ngFor="let item of items; index as myIndex; count as myCount">{{myIndex}} of {{myCount}}: {{item}}</li></ul>');
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
|
||||
let listItems =
|
||||
Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
|
||||
expect(listItems.map(li => li.textContent)).toEqual(['0 of 2: first', '1 of 2: second']);
|
||||
|
||||
// add an item in the middle
|
||||
const items = fixture.componentInstance.items;
|
||||
items.splice(1, 0, 'middle');
|
||||
fixture.detectChanges();
|
||||
listItems = Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
|
||||
expect(listItems.map(li => li.textContent)).toEqual([
|
||||
'0 of 3: first', '1 of 3: middle', '2 of 3: second'
|
||||
]);
|
||||
});
|
||||
|
||||
it('should instantiate directives inside directives properly in an ngFor', () => {
|
||||
TestBed.overrideTemplate(AppComponent, '<app-child *ngFor="let item of items"></app-child>');
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
|
||||
const children = fixture.debugElement.queryAll(By.directive(ChildComponent));
|
||||
|
||||
// expect 2 children, each one with a directive
|
||||
expect(children.length).toBe(2);
|
||||
expect(children.map(child => child.nativeElement.innerHTML)).toEqual([
|
||||
'<div dir="">comp text</div>', '<div dir="">comp text</div>'
|
||||
]);
|
||||
let directive = children[0].query(By.directive(MyDirective));
|
||||
expect(directive).not.toBeNull();
|
||||
directive = children[1].query(By.directive(MyDirective));
|
||||
expect(directive).not.toBeNull();
|
||||
|
||||
// add an item
|
||||
const items = fixture.componentInstance.items;
|
||||
items.push('third');
|
||||
fixture.detectChanges();
|
||||
|
||||
const childrenAfterAdd = fixture.debugElement.queryAll(By.directive(ChildComponent));
|
||||
|
||||
expect(childrenAfterAdd.length).toBe(3);
|
||||
expect(childrenAfterAdd.map(child => child.nativeElement.innerHTML)).toEqual([
|
||||
'<div dir="">comp text</div>', '<div dir="">comp text</div>', '<div dir="">comp text</div>'
|
||||
]);
|
||||
directive = childrenAfterAdd[2].query(By.directive(MyDirective));
|
||||
expect(directive).not.toBeNull();
|
||||
});
|
||||
|
||||
it('should retain parent view listeners when the NgFor destroy views', () => {
|
||||
@Component({
|
||||
selector: 'app-toggle',
|
||||
template: `<button (click)="toggle()">Toggle List</button>
|
||||
<ul>
|
||||
<li *ngFor="let item of items">{{item}}</li>
|
||||
</ul>`
|
||||
})
|
||||
class ToggleComponent {
|
||||
private _data: number[] = [1, 2, 3];
|
||||
items: number[] = [];
|
||||
|
||||
toggle() {
|
||||
if (this.items.length) {
|
||||
this.items = [];
|
||||
} else {
|
||||
this.items = this._data;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [ToggleComponent]});
|
||||
const fixture = TestBed.createComponent(ToggleComponent);
|
||||
fixture.detectChanges();
|
||||
|
||||
// no elements in the list
|
||||
let listItems =
|
||||
Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
|
||||
expect(listItems.length).toBe(0);
|
||||
|
||||
// this will fill the list
|
||||
fixture.componentInstance.toggle();
|
||||
fixture.detectChanges();
|
||||
listItems = Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
|
||||
expect(listItems.length).toBe(3);
|
||||
expect(listItems.map(li => li.textContent)).toEqual(['1', '2', '3']);
|
||||
|
||||
// now toggle via the button
|
||||
const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');
|
||||
button.click();
|
||||
fixture.detectChanges();
|
||||
listItems = Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
|
||||
expect(listItems.length).toBe(0);
|
||||
|
||||
// toggle again
|
||||
button.click();
|
||||
fixture.detectChanges();
|
||||
listItems = Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
|
||||
expect(listItems.length).toBe(3);
|
||||
});
|
||||
|
||||
it('should support multiple levels of embedded templates', () => {
|
||||
@Component({
|
||||
selector: 'app-multi',
|
||||
template: `<ul>
|
||||
<li *ngFor="let row of items">
|
||||
<span *ngFor="let cell of row.data">{{cell}} - {{ row.value }} - {{ items.length }}</span>
|
||||
</li>
|
||||
</ul>`
|
||||
})
|
||||
class MultiLevelComponent {
|
||||
items: any[] = [{data: ['1', '2'], value: 'first'}, {data: ['3', '4'], value: 'second'}];
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [MultiLevelComponent]});
|
||||
const fixture = TestBed.createComponent(MultiLevelComponent);
|
||||
fixture.detectChanges();
|
||||
|
||||
// change detection cycle, no model changes
|
||||
let listItems =
|
||||
Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
|
||||
expect(listItems.length).toBe(2);
|
||||
let spanItems = Array.from(listItems[0].querySelectorAll('span'));
|
||||
expect(spanItems.map(span => span.textContent)).toEqual(['1 - first - 2', '2 - first - 2']);
|
||||
spanItems = Array.from(listItems[1].querySelectorAll('span'));
|
||||
expect(spanItems.map(span => span.textContent)).toEqual(['3 - second - 2', '4 - second - 2']);
|
||||
|
||||
// remove the last item
|
||||
const items = fixture.componentInstance.items;
|
||||
items.length = 1;
|
||||
fixture.detectChanges();
|
||||
|
||||
listItems = Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
|
||||
expect(listItems.length).toBe(1);
|
||||
spanItems = Array.from(listItems[0].querySelectorAll('span'));
|
||||
expect(spanItems.map(span => span.textContent)).toEqual(['1 - first - 1', '2 - first - 1']);
|
||||
|
||||
// change an item
|
||||
items[0].data[0] = 'one';
|
||||
fixture.detectChanges();
|
||||
|
||||
listItems = Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
|
||||
expect(listItems.length).toBe(1);
|
||||
spanItems = Array.from(listItems[0].querySelectorAll('span'));
|
||||
expect(spanItems.map(span => span.textContent)).toEqual(['one - first - 1', '2 - first - 1']);
|
||||
|
||||
// add an item
|
||||
items[1] = {data: ['three', '4'], value: 'third'};
|
||||
fixture.detectChanges();
|
||||
|
||||
listItems = Array.from((fixture.nativeElement as HTMLUListElement).querySelectorAll('li'));
|
||||
expect(listItems.length).toBe(2);
|
||||
spanItems = Array.from(listItems[0].querySelectorAll('span'));
|
||||
expect(spanItems.map(span => span.textContent)).toEqual(['one - first - 2', '2 - first - 2']);
|
||||
spanItems = Array.from(listItems[1].querySelectorAll('span'));
|
||||
expect(spanItems.map(span => span.textContent)).toEqual([
|
||||
'three - third - 2', '4 - third - 2'
|
||||
]);
|
||||
});
|
||||
|
||||
it('should support multiple levels of embedded templates with listeners', () => {
|
||||
@Component({
|
||||
selector: 'app-multi',
|
||||
template: `<div *ngFor="let row of items">
|
||||
<p *ngFor="let cell of row.data">
|
||||
<span (click)="onClick(row.value, name)"></span>
|
||||
{{ row.value }} - {{ name }}
|
||||
</p>
|
||||
</div>`
|
||||
})
|
||||
class MultiLevelWithListenerComponent {
|
||||
items: any[] = [{data: ['1'], value: 'first'}];
|
||||
name = 'app';
|
||||
events: string[] = [];
|
||||
|
||||
onClick(value: string, name: string) { this.events.push(value, name); }
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [MultiLevelWithListenerComponent]});
|
||||
const fixture = TestBed.createComponent(MultiLevelWithListenerComponent);
|
||||
fixture.detectChanges();
|
||||
|
||||
const elements = fixture.nativeElement.querySelectorAll('p');
|
||||
expect(elements.length).toBe(1);
|
||||
expect(elements[0].innerHTML).toBe('<span></span> first - app ');
|
||||
|
||||
const span: HTMLSpanElement = fixture.nativeElement.querySelector('span');
|
||||
span.click();
|
||||
expect(fixture.componentInstance.events).toEqual(['first', 'app']);
|
||||
|
||||
fixture.componentInstance.name = 'new name';
|
||||
fixture.detectChanges();
|
||||
expect(elements[0].innerHTML).toBe('<span></span> first - new name ');
|
||||
|
||||
span.click();
|
||||
expect(fixture.componentInstance.events).toEqual(['first', 'app', 'first', 'new name']);
|
||||
});
|
||||
|
||||
it('should support skipping contexts', () => {
|
||||
@Component({
|
||||
selector: 'app-multi',
|
||||
template: `<div *ngFor="let row of items">
|
||||
<div *ngFor="let cell of row">
|
||||
<span *ngFor="let span of cell.data">{{ cell.value }} - {{ name }}</span>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
class SkippingContextComponent {
|
||||
name = 'app';
|
||||
items: any[] = [
|
||||
[
|
||||
// row
|
||||
{value: 'one', data: ['1', '2']} // cell
|
||||
],
|
||||
[{value: 'two', data: ['3', '4']}]
|
||||
];
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [SkippingContextComponent]});
|
||||
const fixture = TestBed.createComponent(SkippingContextComponent);
|
||||
fixture.detectChanges();
|
||||
|
||||
const elements = fixture.nativeElement.querySelectorAll('span');
|
||||
expect(elements.length).toBe(4);
|
||||
expect(elements[0].textContent).toBe('one - app');
|
||||
expect(elements[1].textContent).toBe('one - app');
|
||||
expect(elements[2].textContent).toBe('two - app');
|
||||
expect(elements[3].textContent).toBe('two - app');
|
||||
|
||||
fixture.componentInstance.name = 'other';
|
||||
fixture.detectChanges();
|
||||
expect(elements[0].textContent).toBe('one - other');
|
||||
expect(elements[1].textContent).toBe('one - other');
|
||||
expect(elements[2].textContent).toBe('two - other');
|
||||
expect(elements[3].textContent).toBe('two - other');
|
||||
});
|
||||
|
||||
it('should support context for 9+ levels of embedded templates', () => {
|
||||
@Component({
|
||||
selector: 'app-multi',
|
||||
template: `<div *ngFor="let item0 of items">
|
||||
<span *ngFor="let item1 of item0.data">
|
||||
<span *ngFor="let item2 of item1.data">
|
||||
<span *ngFor="let item3 of item2.data">
|
||||
<span *ngFor="let item4 of item3.data">
|
||||
<span *ngFor="let item5 of item4.data">
|
||||
<span *ngFor="let item6 of item5.data">
|
||||
<span *ngFor="let item7 of item6.data">
|
||||
<span *ngFor="let item8 of item7.data">{{ item8 }}.{{ item7.value }}.{{ item6.value }}.{{ item5.value }}.{{ item4.value }}.{{ item3.value }}.{{ item2.value }}.{{ item1.value }}.{{ item0.value }}.{{ value }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>`
|
||||
})
|
||||
class NineLevelsComponent {
|
||||
value = 'App';
|
||||
items: any[] = [
|
||||
{
|
||||
// item0
|
||||
data: [{
|
||||
// item1
|
||||
data: [{
|
||||
// item2
|
||||
data: [{
|
||||
// item3
|
||||
data: [{
|
||||
// item4
|
||||
data: [{
|
||||
// item5
|
||||
data: [{
|
||||
// item6
|
||||
data: [{
|
||||
// item7
|
||||
data: [
|
||||
'1', '2' // item8
|
||||
],
|
||||
value: 'h'
|
||||
}],
|
||||
value: 'g'
|
||||
}],
|
||||
value: 'f'
|
||||
}],
|
||||
value: 'e'
|
||||
}],
|
||||
value: 'd'
|
||||
}],
|
||||
value: 'c'
|
||||
}],
|
||||
value: 'b'
|
||||
}],
|
||||
value: 'a'
|
||||
},
|
||||
{
|
||||
// item0
|
||||
data: [{
|
||||
// item1
|
||||
data: [{
|
||||
// item2
|
||||
data: [{
|
||||
// item3
|
||||
data: [{
|
||||
// item4
|
||||
data: [{
|
||||
// item5
|
||||
data: [{
|
||||
// item6
|
||||
data: [{
|
||||
// item7
|
||||
data: [
|
||||
'3', '4' // item8
|
||||
],
|
||||
value: 'H'
|
||||
}],
|
||||
value: 'G'
|
||||
}],
|
||||
value: 'F'
|
||||
}],
|
||||
value: 'E'
|
||||
}],
|
||||
value: 'D'
|
||||
}],
|
||||
value: 'C'
|
||||
}],
|
||||
value: 'B'
|
||||
}],
|
||||
value: 'A'
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [NineLevelsComponent]});
|
||||
const fixture = TestBed.createComponent(NineLevelsComponent);
|
||||
fixture.detectChanges();
|
||||
|
||||
const divItems = (fixture.nativeElement as HTMLElement).querySelectorAll('div');
|
||||
expect(divItems.length).toBe(2); // 2 outer loops
|
||||
let spanItems =
|
||||
divItems[0].querySelectorAll('span > span > span > span > span > span > span > span');
|
||||
expect(spanItems.length).toBe(2); // 2 inner elements
|
||||
expect(spanItems[0].textContent).toBe('1.h.g.f.e.d.c.b.a.App');
|
||||
expect(spanItems[1].textContent).toBe('2.h.g.f.e.d.c.b.a.App');
|
||||
spanItems =
|
||||
divItems[1].querySelectorAll('span > span > span > span > span > span > span > span');
|
||||
expect(spanItems.length).toBe(2); // 2 inner elements
|
||||
expect(spanItems[0].textContent).toBe('3.H.G.F.E.D.C.B.A.App');
|
||||
expect(spanItems[1].textContent).toBe('4.H.G.F.E.D.C.B.A.App');
|
||||
});
|
||||
});
|
||||
|
||||
describe('ngIf', () => {
|
||||
it('should support sibling ngIfs', () => {
|
||||
@Component({
|
||||
selector: 'app-multi',
|
||||
template: `
|
||||
<div *ngIf="showing">{{ valueOne }}</div>
|
||||
<div *ngIf="showing">{{ valueTwo }}</div>
|
||||
`
|
||||
})
|
||||
class SimpleConditionComponent {
|
||||
showing = true;
|
||||
valueOne = 'one';
|
||||
valueTwo = 'two';
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [SimpleConditionComponent]});
|
||||
const fixture = TestBed.createComponent(SimpleConditionComponent);
|
||||
fixture.detectChanges();
|
||||
|
||||
const elements = fixture.nativeElement.querySelectorAll('div');
|
||||
expect(elements.length).toBe(2);
|
||||
expect(elements[0].textContent).toBe('one');
|
||||
expect(elements[1].textContent).toBe('two');
|
||||
|
||||
fixture.componentInstance.valueOne = '$$one$$';
|
||||
fixture.componentInstance.valueTwo = '$$two$$';
|
||||
fixture.detectChanges();
|
||||
expect(elements[0].textContent).toBe('$$one$$');
|
||||
expect(elements[1].textContent).toBe('$$two$$');
|
||||
});
|
||||
|
||||
it('should handle nested ngIfs with no intermediate context vars', () => {
|
||||
@Component({
|
||||
selector: 'app-multi',
|
||||
template: `<div *ngIf="showing">
|
||||
<div *ngIf="outerShowing">
|
||||
<div *ngIf="innerShowing">{{ name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
class NestedConditionsComponent {
|
||||
showing = true;
|
||||
outerShowing = true;
|
||||
innerShowing = true;
|
||||
name = 'App name';
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [NestedConditionsComponent]});
|
||||
const fixture = TestBed.createComponent(NestedConditionsComponent);
|
||||
fixture.detectChanges();
|
||||
|
||||
const elements = fixture.nativeElement.querySelectorAll('div');
|
||||
expect(elements.length).toBe(3);
|
||||
expect(elements[2].textContent).toBe('App name');
|
||||
|
||||
fixture.componentInstance.name = 'Other name';
|
||||
fixture.detectChanges();
|
||||
expect(elements[2].textContent).toBe('Other name');
|
||||
});
|
||||
});
|
||||
|
||||
describe('NgTemplateOutlet', () => {
|
||||
|
||||
it('should create and remove embedded views', () => {
|
||||
@Component({
|
||||
selector: 'app-multi',
|
||||
template: `<ng-template #tpl>from tpl</ng-template>
|
||||
<ng-template [ngTemplateOutlet]="showing ? tpl : null"></ng-template>
|
||||
`
|
||||
})
|
||||
class EmbeddedViewsComponent {
|
||||
showing = false;
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [EmbeddedViewsComponent]});
|
||||
const fixture = TestBed.createComponent(EmbeddedViewsComponent);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement.textContent).not.toBe('from tpl');
|
||||
|
||||
fixture.componentInstance.showing = true;
|
||||
fixture.detectChanges();
|
||||
expect(fixture.nativeElement.textContent).toBe('from tpl');
|
||||
|
||||
fixture.componentInstance.showing = false;
|
||||
fixture.detectChanges();
|
||||
expect(fixture.nativeElement.textContent).not.toBe('from tpl');
|
||||
});
|
||||
|
||||
it('should create and remove embedded views', () => {
|
||||
@Component({
|
||||
selector: 'app-multi',
|
||||
template: `<ng-template #tpl>from tpl</ng-template>
|
||||
<ng-container [ngTemplateOutlet]="showing ? tpl : null"></ng-container>
|
||||
`
|
||||
})
|
||||
class NgContainerComponent {
|
||||
showing = false;
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [NgContainerComponent]});
|
||||
const fixture = TestBed.createComponent(NgContainerComponent);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement.textContent).not.toBe('from tpl');
|
||||
|
||||
fixture.componentInstance.showing = true;
|
||||
fixture.detectChanges();
|
||||
expect(fixture.nativeElement.textContent).toBe('from tpl');
|
||||
|
||||
fixture.componentInstance.showing = false;
|
||||
fixture.detectChanges();
|
||||
expect(fixture.nativeElement.textContent).not.toBe('from tpl');
|
||||
});
|
||||
});
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue