test(ivy): move pipe tests into acceptance (#30389)
Moves over the tests from `pipe_spec` into `acceptance`. Note that the two `WrappedValue` tests haven't been moved over, because impure pipes always throw "changed after checked" errors in `TestBed`. This seems to be consistent with ViewEngine. PR Close #30389
This commit is contained in:
Kristiyan Kostadinov
Alex Rickabaugh
parent
5ab809ddf9
commit
cb6dea473f
|
|
@ -6,11 +6,164 @@
|
|||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {Component, Pipe, PipeTransform} from '@angular/core';
|
||||
import {Component, Directive, Inject, Injectable, InjectionToken, Input, NgModule, OnDestroy, Pipe, PipeTransform, ViewChild} from '@angular/core';
|
||||
import {TestBed} from '@angular/core/testing';
|
||||
import {expect} from '@angular/platform-browser/testing/src/matchers';
|
||||
|
||||
describe('pipe', () => {
|
||||
@Pipe({name: 'countingPipe'})
|
||||
class CountingPipe implements PipeTransform {
|
||||
state: number = 0;
|
||||
transform(value: any) { return `${value} state:${this.state++}`; }
|
||||
}
|
||||
|
||||
@Pipe({name: 'multiArgPipe'})
|
||||
class MultiArgPipe implements PipeTransform {
|
||||
transform(value: any, arg1: any, arg2: any, arg3 = 'default') {
|
||||
return `${value} ${arg1} ${arg2} ${arg3}`;
|
||||
}
|
||||
}
|
||||
|
||||
it('should support interpolation', () => {
|
||||
@Component({
|
||||
template: '{{person.name | countingPipe}}',
|
||||
})
|
||||
class App {
|
||||
person = {name: 'bob'};
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [App, CountingPipe]});
|
||||
const fixture = TestBed.createComponent(App);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement.textContent).toBe('bob state:0');
|
||||
});
|
||||
|
||||
it('should throw if pipe is not found', () => {
|
||||
@Component({
|
||||
template: '{{1 | randomPipeName}}',
|
||||
})
|
||||
class App {
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [App]});
|
||||
|
||||
expect(() => {
|
||||
const fixture = TestBed.createComponent(App);
|
||||
fixture.detectChanges();
|
||||
}).toThrowError(/The pipe 'randomPipeName' could not be found/);
|
||||
});
|
||||
|
||||
it('should support bindings', () => {
|
||||
@Directive({selector: '[my-dir]'})
|
||||
class Dir {
|
||||
@Input()
|
||||
dirProp: string = '';
|
||||
}
|
||||
|
||||
@Pipe({name: 'double'})
|
||||
class DoublePipe implements PipeTransform {
|
||||
transform(value: any) { return `${value}${value}`; }
|
||||
}
|
||||
|
||||
@Component({
|
||||
template: `<div my-dir [dirProp]="'a'|double"></div>`,
|
||||
})
|
||||
class App {
|
||||
@ViewChild(Dir) directive !: Dir;
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [App, DoublePipe, Dir]});
|
||||
const fixture = TestBed.createComponent(App);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.componentInstance.directive.dirProp).toBe('aa');
|
||||
});
|
||||
|
||||
it('should support arguments in pipes', () => {
|
||||
@Component({
|
||||
template: `{{person.name | multiArgPipe:'one':person.address.city}}`,
|
||||
})
|
||||
class App {
|
||||
person = {name: 'value', address: {city: 'two'}};
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [App, MultiArgPipe]});
|
||||
const fixture = TestBed.createComponent(App);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement.textContent).toBe('value one two default');
|
||||
});
|
||||
|
||||
it('should support calling pipes with different number of arguments', () => {
|
||||
@Component({
|
||||
template: `{{person.name | multiArgPipe:'a':'b'}} {{0 | multiArgPipe:1:2:3}}`,
|
||||
})
|
||||
class App {
|
||||
person = {name: 'value'};
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [App, MultiArgPipe]});
|
||||
const fixture = TestBed.createComponent(App);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement.textContent).toEqual('value a b default 0 1 2 3');
|
||||
});
|
||||
|
||||
it('should do nothing when no change', () => {
|
||||
let calls: any[] = [];
|
||||
|
||||
@Pipe({name: 'identityPipe'})
|
||||
class IdentityPipe implements PipeTransform {
|
||||
transform(value: any) {
|
||||
calls.push(value);
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
template: `{{person.name | identityPipe}}`,
|
||||
})
|
||||
class App {
|
||||
person = {name: 'Megatron'};
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [App, IdentityPipe]});
|
||||
const fixture = TestBed.createComponent(App);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(calls).toEqual(['Megatron']);
|
||||
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(calls).toEqual(['Megatron']);
|
||||
});
|
||||
|
||||
it('should support duplicates by using the later entry', () => {
|
||||
@Pipe({name: 'duplicatePipe'})
|
||||
class DuplicatePipe1 implements PipeTransform {
|
||||
transform(value: any) { return `${value} from duplicate 1`; }
|
||||
}
|
||||
|
||||
@Pipe({name: 'duplicatePipe'})
|
||||
class DuplicatePipe2 implements PipeTransform {
|
||||
transform(value: any) { return `${value} from duplicate 2`; }
|
||||
}
|
||||
|
||||
@Component({
|
||||
template: '{{person.name | duplicatePipe}}',
|
||||
})
|
||||
class App {
|
||||
person = {name: 'bob'};
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [App, DuplicatePipe1, DuplicatePipe2]});
|
||||
const fixture = TestBed.createComponent(App);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement.textContent).toEqual('bob from duplicate 2');
|
||||
});
|
||||
|
||||
it('should support pipe in context of ternary operator', () => {
|
||||
@Pipe({name: 'pipe'})
|
||||
class MyPipe implements PipeTransform {
|
||||
|
|
@ -18,15 +171,14 @@ describe('pipe', () => {
|
|||
}
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
template: `{{ condition ? 'a' : 'b' | pipe }}`,
|
||||
})
|
||||
class MyApp {
|
||||
class App {
|
||||
condition = false;
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [MyApp, MyPipe]});
|
||||
const fixture = TestBed.createComponent(MyApp);
|
||||
TestBed.configureTestingModule({declarations: [App, MyPipe]});
|
||||
const fixture = TestBed.createComponent(App);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement).toHaveText('b');
|
||||
|
|
@ -35,4 +187,217 @@ describe('pipe', () => {
|
|||
fixture.detectChanges();
|
||||
expect(fixture.nativeElement).toHaveText('a');
|
||||
});
|
||||
|
||||
describe('pure', () => {
|
||||
it('should call pure pipes only if the arguments change', () => {
|
||||
@Component({
|
||||
template: '{{person.name | countingPipe}}',
|
||||
})
|
||||
class App {
|
||||
person = {name: null as string | null};
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [App, CountingPipe]});
|
||||
const fixture = TestBed.createComponent(App);
|
||||
fixture.detectChanges();
|
||||
|
||||
// change from undefined -> null
|
||||
fixture.componentInstance.person.name = null;
|
||||
fixture.detectChanges();
|
||||
expect(fixture.nativeElement.textContent).toEqual('null state:0');
|
||||
|
||||
fixture.detectChanges();
|
||||
expect(fixture.nativeElement.textContent).toEqual('null state:0');
|
||||
|
||||
// change from null -> some value
|
||||
fixture.componentInstance.person.name = 'bob';
|
||||
fixture.detectChanges();
|
||||
expect(fixture.nativeElement.textContent).toEqual('bob state:1');
|
||||
|
||||
fixture.detectChanges();
|
||||
expect(fixture.nativeElement.textContent).toEqual('bob state:1');
|
||||
|
||||
// change from some value -> some other value
|
||||
fixture.componentInstance.person.name = 'bart';
|
||||
fixture.detectChanges();
|
||||
expect(fixture.nativeElement.textContent).toEqual('bart state:2');
|
||||
|
||||
fixture.detectChanges();
|
||||
expect(fixture.nativeElement.textContent).toEqual('bart state:2');
|
||||
});
|
||||
});
|
||||
|
||||
describe('impure', () => {
|
||||
let impurePipeInstances: CountingImpurePipe[] = [];
|
||||
|
||||
@Pipe({name: 'countingImpurePipe', pure: false})
|
||||
class CountingImpurePipe implements PipeTransform {
|
||||
state: number = 0;
|
||||
transform(value: any) { return `${value} state:${this.state++}`; }
|
||||
constructor() { impurePipeInstances.push(this); }
|
||||
}
|
||||
|
||||
beforeEach(() => impurePipeInstances = []);
|
||||
afterEach(() => impurePipeInstances = []);
|
||||
|
||||
it('should call impure pipes on each change detection run', () => {
|
||||
@Component({
|
||||
template: '{{person.name | countingImpurePipe}}',
|
||||
})
|
||||
class App {
|
||||
person = {name: 'bob'};
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [App, CountingImpurePipe]});
|
||||
const fixture = TestBed.createComponent(App);
|
||||
const pipe = impurePipeInstances[0];
|
||||
|
||||
spyOn(pipe, 'transform').and.returnValue('');
|
||||
expect(pipe.transform).not.toHaveBeenCalled();
|
||||
|
||||
fixture.detectChanges();
|
||||
expect(pipe.transform).toHaveBeenCalledTimes(2);
|
||||
|
||||
fixture.detectChanges();
|
||||
expect(pipe.transform).toHaveBeenCalledTimes(4);
|
||||
});
|
||||
|
||||
it('should not cache impure pipes', () => {
|
||||
@Component({
|
||||
template: `
|
||||
<div [id]="0 | countingImpurePipe">{{1 | countingImpurePipe}}</div>
|
||||
<div [id]="2 | countingImpurePipe">{{3 | countingImpurePipe}}</div>
|
||||
`,
|
||||
})
|
||||
class App {
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [App, CountingImpurePipe]});
|
||||
TestBed.createComponent(App);
|
||||
|
||||
expect(impurePipeInstances.length).toEqual(4);
|
||||
expect(impurePipeInstances[0]).toBeAnInstanceOf(CountingImpurePipe);
|
||||
expect(impurePipeInstances[1]).toBeAnInstanceOf(CountingImpurePipe);
|
||||
expect(impurePipeInstances[1]).not.toBe(impurePipeInstances[0]);
|
||||
expect(impurePipeInstances[2]).toBeAnInstanceOf(CountingImpurePipe);
|
||||
expect(impurePipeInstances[2]).not.toBe(impurePipeInstances[0]);
|
||||
expect(impurePipeInstances[3]).toBeAnInstanceOf(CountingImpurePipe);
|
||||
expect(impurePipeInstances[3]).not.toBe(impurePipeInstances[0]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('lifecycles', () => {
|
||||
it('should call ngOnDestroy on pipes', () => {
|
||||
let destroyCalls = 0;
|
||||
|
||||
@Pipe({name: 'pipeWithOnDestroy'})
|
||||
class PipeWithOnDestroy implements PipeTransform, OnDestroy {
|
||||
ngOnDestroy() { destroyCalls++; }
|
||||
transform(value: any): any { return null; }
|
||||
}
|
||||
|
||||
@Component({
|
||||
template: '{{1 | pipeWithOnDestroy}}',
|
||||
})
|
||||
class App {
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [App, PipeWithOnDestroy]});
|
||||
const fixture = TestBed.createComponent(App);
|
||||
fixture.detectChanges();
|
||||
fixture.destroy();
|
||||
|
||||
expect(destroyCalls).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('injection mechanism', () => {
|
||||
it('should be able to handle Service injection', () => {
|
||||
@Injectable()
|
||||
class Service {
|
||||
title = 'Service Title';
|
||||
}
|
||||
|
||||
@Pipe({name: 'myConcatPipe'})
|
||||
class ConcatPipe implements PipeTransform {
|
||||
constructor(public service: Service) {}
|
||||
transform(value: string): string { return `${value} - ${this.service.title}`; }
|
||||
}
|
||||
|
||||
@Component({
|
||||
template: '{{title | myConcatPipe}}',
|
||||
})
|
||||
class App {
|
||||
title = 'MyComponent Title';
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [App, ConcatPipe], providers: [Service]});
|
||||
const fixture = TestBed.createComponent(App);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement.textContent).toBe('MyComponent Title - Service Title');
|
||||
});
|
||||
|
||||
it('should be able to handle Token injections', () => {
|
||||
class Service {
|
||||
title = 'Service Title';
|
||||
}
|
||||
|
||||
const token = new InjectionToken<Service>('service token');
|
||||
|
||||
@Pipe({name: 'myConcatPipe'})
|
||||
class ConcatPipe implements PipeTransform {
|
||||
constructor(@Inject(token) public service: Service) {}
|
||||
transform(value: string): string { return `${value} - ${this.service.title}`; }
|
||||
}
|
||||
|
||||
@Component({
|
||||
template: '{{title | myConcatPipe}}',
|
||||
})
|
||||
class App {
|
||||
title = 'MyComponent Title';
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [App, ConcatPipe],
|
||||
providers: [{provide: token, useValue: new Service()}]
|
||||
});
|
||||
const fixture = TestBed.createComponent(App);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement.textContent).toBe('MyComponent Title - Service Title');
|
||||
});
|
||||
|
||||
it('should be able to handle Module injection', () => {
|
||||
@Injectable()
|
||||
class Service {
|
||||
title = 'Service Title';
|
||||
}
|
||||
|
||||
@NgModule({providers: [Service]})
|
||||
class SomeModule {
|
||||
}
|
||||
|
||||
@Pipe({name: 'myConcatPipe'})
|
||||
class ConcatPipe implements PipeTransform {
|
||||
constructor(public service: Service) {}
|
||||
transform(value: string): string { return `${value} - ${this.service.title}`; }
|
||||
}
|
||||
|
||||
@Component({
|
||||
template: '{{title | myConcatPipe}}',
|
||||
})
|
||||
class App {
|
||||
title = 'MyComponent Title';
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [App, ConcatPipe], imports: [SomeModule]});
|
||||
const fixture = TestBed.createComponent(App);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement.textContent).toBe('MyComponent Title - Service Title');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,435 +6,24 @@
|
|||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {Directive as _Directive, InjectionToken, OnChanges, OnDestroy, Pipe as _Pipe, PipeTransform, WrappedValue, ɵNgModuleDef as NgModuleDef, ɵɵdefineComponent as defineComponent, ɵɵdefineInjectable, ɵɵdefineInjector, ɵɵdirectiveInject as directiveInject} from '@angular/core';
|
||||
import {Directive as _Directive, Pipe as _Pipe, PipeTransform, WrappedValue, ɵɵdefinePipe} from '@angular/core';
|
||||
import {expect} from '@angular/platform-browser/testing/src/matchers';
|
||||
|
||||
import {createInjector} from '../../src/di/r3_injector';
|
||||
import {ɵɵdefineDirective, ɵɵdefinePipe} from '../../src/render3/definition';
|
||||
import {ɵɵbind, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵelementEnd, ɵɵelementProperty, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵinterpolation1, ɵɵload, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
|
||||
import {RenderFlags} from '../../src/render3/interfaces/definition';
|
||||
import {ɵɵpipe, ɵɵpipeBind1, ɵɵpipeBind3, ɵɵpipeBind4, ɵɵpipeBindV} from '../../src/render3/pipe';
|
||||
import {ɵɵinterpolation1, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
|
||||
import {ɵɵpipe, ɵɵpipeBind1} from '../../src/render3/pipe';
|
||||
|
||||
import {RenderLog, getRendererFactory2, patchLoggingRenderer2} from './imported_renderer2';
|
||||
import {ComponentFixture, TemplateFixture, createComponent, getDirectiveOnNode, renderToHtml} from './render_util';
|
||||
import {TemplateFixture} from './render_util';
|
||||
|
||||
const Directive: typeof _Directive = function(...args: any[]): any {
|
||||
// In test we use @Directive for documentation only so it's safe to mock out the implementation.
|
||||
return () => undefined;
|
||||
} as any;
|
||||
const Pipe: typeof _Pipe = function(...args: any[]): any {
|
||||
// In test we use @Pipe for documentation only so it's safe to mock out the implementation.
|
||||
return () => undefined;
|
||||
} as any;
|
||||
|
||||
let log: string[] = [];
|
||||
let person: Person;
|
||||
let renderLog: RenderLog = new RenderLog();
|
||||
const rendererFactory2 = getRendererFactory2(document);
|
||||
patchLoggingRenderer2(rendererFactory2, renderLog);
|
||||
|
||||
// TODO: hasn't been moved over into acceptance, because the `WrappedValue` tests need to
|
||||
// use an impure pipe which always throws "changed after checked errors" with `TestBed`
|
||||
// both in Ivy and ViewEngine.
|
||||
describe('pipe', () => {
|
||||
beforeEach(() => {
|
||||
log = [];
|
||||
renderLog.clear();
|
||||
person = new Person();
|
||||
});
|
||||
|
||||
const pipes =
|
||||
() => [CountingPipe, MultiArgPipe, CountingImpurePipe, DuplicatePipe1, DuplicatePipe2];
|
||||
|
||||
it('should support interpolation', () => {
|
||||
function Template(rf: RenderFlags, person: Person) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵtext(0);
|
||||
ɵɵpipe(1, 'countingPipe');
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵtextBinding(0, ɵɵinterpolation1('', ɵɵpipeBind1(1, 1, person.name), ''));
|
||||
}
|
||||
}
|
||||
|
||||
person.init('bob', null);
|
||||
expect(renderToHtml(Template, person, 2, 3, null, pipes)).toEqual('bob state:0');
|
||||
});
|
||||
|
||||
it('should throw if pipe is not found', () => {
|
||||
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵtext(0);
|
||||
ɵɵpipe(1, 'randomPipeName');
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵtextBinding(0, ɵɵinterpolation1('', ɵɵpipeBind1(1, 1, ctx.value), ''));
|
||||
}
|
||||
}, 2, 3, [], pipes);
|
||||
|
||||
expect(() => {
|
||||
const fixture = new ComponentFixture(App);
|
||||
}).toThrowError(/The pipe 'randomPipeName' could not be found!/);
|
||||
});
|
||||
|
||||
it('should support bindings', () => {
|
||||
let directive: any = null;
|
||||
|
||||
@Directive({selector: '[my-dir]', inputs: ['dirProp: elprop'], exportAs: 'mydir'})
|
||||
class MyDir {
|
||||
dirProp: string;
|
||||
|
||||
constructor() { this.dirProp = ''; }
|
||||
|
||||
static ngDirectiveDef = ɵɵdefineDirective({
|
||||
type: MyDir,
|
||||
selectors: [['', 'myDir', '']],
|
||||
factory: () => new MyDir(),
|
||||
inputs: {dirProp: 'elprop'}
|
||||
});
|
||||
}
|
||||
|
||||
@Pipe({name: 'double'})
|
||||
class DoublePipe implements PipeTransform {
|
||||
transform(value: any) { return `${value}${value}`; }
|
||||
|
||||
static ngPipeDef = ɵɵdefinePipe({
|
||||
name: 'double',
|
||||
type: DoublePipe,
|
||||
factory: function DoublePipe_Factory() { return new DoublePipe(); },
|
||||
});
|
||||
}
|
||||
|
||||
function Template(rf: RenderFlags, ctx: string) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'div', ['myDir', '']);
|
||||
ɵɵpipe(1, 'double');
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵelementProperty(0, 'elprop', ɵɵbind(ɵɵpipeBind1(1, 1, ctx)));
|
||||
directive = getDirectiveOnNode(0);
|
||||
}
|
||||
}
|
||||
renderToHtml(Template, 'a', 2, 3, [MyDir], [DoublePipe]);
|
||||
expect(directive !.dirProp).toEqual('aa');
|
||||
});
|
||||
|
||||
it('should support arguments in pipes', () => {
|
||||
function Template(rf: RenderFlags, person: Person) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵtext(0);
|
||||
ɵɵpipe(1, 'multiArgPipe');
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵtextBinding(
|
||||
0,
|
||||
ɵɵinterpolation1('', ɵɵpipeBind3(1, 1, person.name, 'one', person.address !.city), ''));
|
||||
}
|
||||
}
|
||||
|
||||
person.init('value', new Address('two'));
|
||||
expect(renderToHtml(Template, person, 2, 5, null, pipes)).toEqual('value one two default');
|
||||
});
|
||||
|
||||
it('should support calling pipes with different number of arguments', () => {
|
||||
function Template(rf: RenderFlags, person: Person) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵtext(0);
|
||||
ɵɵpipe(1, 'multiArgPipe');
|
||||
ɵɵpipe(2, 'multiArgPipe');
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵtextBinding(
|
||||
0, ɵɵinterpolation1(
|
||||
'', ɵɵpipeBind4(2, 5, ɵɵpipeBindV(1, 1, [person.name, 'a', 'b']), 0, 1, 2), ''));
|
||||
}
|
||||
}
|
||||
|
||||
person.init('value', null);
|
||||
expect(renderToHtml(Template, person, 3, 10, null, pipes)).toEqual('value a b default 0 1 2');
|
||||
});
|
||||
|
||||
it('should do nothing when no change', () => {
|
||||
@Pipe({name: 'identityPipe'})
|
||||
class IdentityPipe implements PipeTransform {
|
||||
transform(value: any) { return value; }
|
||||
|
||||
static ngPipeDef = ɵɵdefinePipe({
|
||||
name: 'identityPipe',
|
||||
type: IdentityPipe,
|
||||
factory: function IdentityPipe_Factory() { return new IdentityPipe(); },
|
||||
});
|
||||
}
|
||||
|
||||
function Template(rf: RenderFlags, person: Person) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'div');
|
||||
ɵɵpipe(1, 'identityPipe');
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵelementProperty(0, 'id', ɵɵbind(ɵɵpipeBind1(1, 1, 'Megatron')));
|
||||
}
|
||||
}
|
||||
|
||||
renderToHtml(Template, person, 2, 3, null, [IdentityPipe], rendererFactory2);
|
||||
expect(renderLog.log).toEqual(['id=Megatron']);
|
||||
|
||||
renderLog.clear();
|
||||
renderToHtml(Template, person, 2, 3, null, pipes, rendererFactory2);
|
||||
expect(renderLog.log).toEqual([]);
|
||||
});
|
||||
|
||||
it('should support duplicates by using the later entry', () => {
|
||||
function Template(rf: RenderFlags, person: Person) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵtext(0);
|
||||
ɵɵpipe(1, 'duplicatePipe');
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵtextBinding(0, ɵɵinterpolation1('', ɵɵpipeBind1(1, 1, person.name), ''));
|
||||
}
|
||||
}
|
||||
|
||||
person.init('bob', null);
|
||||
expect(renderToHtml(Template, person, 2, 3, null, pipes)).toEqual('bob from duplicate 2');
|
||||
});
|
||||
|
||||
describe('pure', () => {
|
||||
it('should call pure pipes only if the arguments change', () => {
|
||||
function Template(rf: RenderFlags, person: Person) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵtext(0);
|
||||
ɵɵpipe(1, 'countingPipe');
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵtextBinding(0, ɵɵinterpolation1('', ɵɵpipeBind1(1, 1, person.name), ''));
|
||||
}
|
||||
}
|
||||
|
||||
// change from undefined -> null
|
||||
person.name = null;
|
||||
expect(renderToHtml(Template, person, 2, 3, null, pipes)).toEqual('null state:0');
|
||||
expect(renderToHtml(Template, person, 2, 3, null, pipes)).toEqual('null state:0');
|
||||
|
||||
// change from null -> some value
|
||||
person.name = 'bob';
|
||||
expect(renderToHtml(Template, person, 2, 3, null, pipes)).toEqual('bob state:1');
|
||||
expect(renderToHtml(Template, person, 2, 3, null, pipes)).toEqual('bob state:1');
|
||||
|
||||
// change from some value -> some other value
|
||||
person.name = 'bart';
|
||||
expect(renderToHtml(Template, person, 2, 3, null, pipes)).toEqual('bart state:2');
|
||||
expect(renderToHtml(Template, person, 2, 3, null, pipes)).toEqual('bart state:2');
|
||||
});
|
||||
});
|
||||
|
||||
describe('impure', () => {
|
||||
it('should call impure pipes on each change detection run', () => {
|
||||
function Template(rf: RenderFlags, person: Person) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵtext(0);
|
||||
ɵɵpipe(1, 'countingImpurePipe');
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵtextBinding(0, ɵɵinterpolation1('', ɵɵpipeBind1(1, 1, person.name), ''));
|
||||
}
|
||||
}
|
||||
|
||||
person.name = 'bob';
|
||||
expect(renderToHtml(Template, person, 2, 3, null, pipes)).toEqual('bob state:0');
|
||||
expect(renderToHtml(Template, person, 2, 3, null, pipes)).toEqual('bob state:1');
|
||||
});
|
||||
|
||||
it('should not cache impure pipes', () => {
|
||||
function Template(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'div');
|
||||
ɵɵpipe(1, 'countingImpurePipe');
|
||||
ɵɵelementEnd();
|
||||
ɵɵelementStart(2, 'div');
|
||||
ɵɵpipe(3, 'countingImpurePipe');
|
||||
ɵɵelementEnd();
|
||||
ɵɵcontainer(4);
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵelementProperty(0, 'id', ɵɵbind(ɵɵpipeBind1(1, 2, true)));
|
||||
ɵɵelementProperty(2, 'id', ɵɵbind(ɵɵpipeBind1(3, 4, true)));
|
||||
pipeInstances.push(ɵɵload<CountingImpurePipe>(1), ɵɵload(3));
|
||||
ɵɵcontainerRefreshStart(4);
|
||||
{
|
||||
for (let i of [1, 2]) {
|
||||
let rf1 = ɵɵembeddedViewStart(1, 2, 3);
|
||||
{
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'div');
|
||||
ɵɵpipe(1, 'countingImpurePipe');
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf1 & RenderFlags.Update) {
|
||||
ɵɵelementProperty(0, 'id', ɵɵbind(ɵɵpipeBind1(1, 1, true)));
|
||||
pipeInstances.push(ɵɵload<CountingImpurePipe>(1));
|
||||
}
|
||||
}
|
||||
ɵɵembeddedViewEnd();
|
||||
}
|
||||
}
|
||||
ɵɵcontainerRefreshEnd();
|
||||
}
|
||||
}
|
||||
|
||||
const pipeInstances: CountingImpurePipe[] = [];
|
||||
renderToHtml(Template, {}, 5, 6, null, pipes, rendererFactory2);
|
||||
expect(pipeInstances.length).toEqual(4);
|
||||
expect(pipeInstances[0]).toBeAnInstanceOf(CountingImpurePipe);
|
||||
expect(pipeInstances[1]).toBeAnInstanceOf(CountingImpurePipe);
|
||||
expect(pipeInstances[1]).not.toBe(pipeInstances[0]);
|
||||
expect(pipeInstances[2]).toBeAnInstanceOf(CountingImpurePipe);
|
||||
expect(pipeInstances[2]).not.toBe(pipeInstances[0]);
|
||||
expect(pipeInstances[3]).toBeAnInstanceOf(CountingImpurePipe);
|
||||
expect(pipeInstances[3]).not.toBe(pipeInstances[0]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('lifecycles', () => {
|
||||
@Pipe({name: 'pipeWithOnDestroy'})
|
||||
class PipeWithOnDestroy implements PipeTransform, OnDestroy {
|
||||
ngOnDestroy() { log.push('pipeWithOnDestroy - ngOnDestroy'); }
|
||||
|
||||
transform(value: any): any { return null; }
|
||||
|
||||
static ngPipeDef = ɵɵdefinePipe({
|
||||
name: 'pipeWithOnDestroy',
|
||||
type: PipeWithOnDestroy,
|
||||
factory: function PipeWithOnDestroy_Factory() { return new PipeWithOnDestroy(); },
|
||||
});
|
||||
}
|
||||
|
||||
it('should call ngOnDestroy on pipes', () => {
|
||||
function Template(rf: RenderFlags, person: Person) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵcontainer(0);
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵcontainerRefreshStart(0);
|
||||
{
|
||||
if (person.age > 20) {
|
||||
let rf1 = ɵɵembeddedViewStart(1, 2, 3);
|
||||
{
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
ɵɵtext(0);
|
||||
ɵɵpipe(1, 'pipeWithOnDestroy');
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵtextBinding(0, ɵɵinterpolation1('', ɵɵpipeBind1(1, 1, person.age), ''));
|
||||
}
|
||||
}
|
||||
ɵɵembeddedViewEnd();
|
||||
}
|
||||
}
|
||||
ɵɵcontainerRefreshEnd();
|
||||
}
|
||||
}
|
||||
const pipes = [PipeWithOnDestroy];
|
||||
|
||||
person.age = 25;
|
||||
renderToHtml(Template, person, 1, 0, null, pipes);
|
||||
|
||||
person.age = 15;
|
||||
renderToHtml(Template, person, 1, 0, null, pipes);
|
||||
expect(log).toEqual(['pipeWithOnDestroy - ngOnDestroy']);
|
||||
|
||||
log = [];
|
||||
person.age = 30;
|
||||
renderToHtml(Template, person, 1, 0, null, pipes);
|
||||
expect(log).toEqual([]);
|
||||
|
||||
log = [];
|
||||
person.age = 10;
|
||||
renderToHtml(Template, person, 1, 0, null, pipes);
|
||||
expect(log).toEqual(['pipeWithOnDestroy - ngOnDestroy']);
|
||||
});
|
||||
});
|
||||
|
||||
describe('injection mechanism', () => {
|
||||
class ServiceA {
|
||||
title = 'ServiceA Title';
|
||||
}
|
||||
|
||||
class ServiceB {
|
||||
title = 'ServiceB Title';
|
||||
|
||||
static ngInjectableDef =
|
||||
ɵɵdefineInjectable({providedIn: 'root', factory: () => new ServiceB()});
|
||||
}
|
||||
|
||||
class ModuleA {
|
||||
static ngInjectorDef =
|
||||
ɵɵdefineInjector({factory: () => new ModuleA(), providers: [ServiceA]});
|
||||
static ngModuleDef: NgModuleDef<any> = { bootstrap: [] } as any;
|
||||
}
|
||||
|
||||
const generatePipe = (InjectionType: any) => {
|
||||
return class MyConcatPipe implements PipeTransform {
|
||||
constructor(public obj: any) {}
|
||||
|
||||
transform(value: string): string { return `${value} - ${this.obj.title}`; }
|
||||
|
||||
static ngPipeDef = ɵɵdefinePipe({
|
||||
name: 'myConcatPipe',
|
||||
type: MyConcatPipe,
|
||||
factory: () => new MyConcatPipe(directiveInject(InjectionType)),
|
||||
pure: false
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
const generateComponent = (overrides: any) => {
|
||||
return class MyComponent {
|
||||
title = 'MyComponent Title';
|
||||
|
||||
static ngComponentDef = defineComponent({
|
||||
type: MyComponent,
|
||||
selectors: [['my-app']],
|
||||
factory: function MyComponent_Factory() { return new MyComponent(); },
|
||||
consts: 2,
|
||||
vars: 3,
|
||||
// '{{ title | myConcatPipe }}'
|
||||
template: (rf: RenderFlags, ctx: MyComponent) => {
|
||||
if (rf & 1) {
|
||||
ɵɵtext(0);
|
||||
ɵɵpipe(1, 'myConcatPipe');
|
||||
}
|
||||
if (rf & 2) {
|
||||
ɵɵtextBinding(0, ɵɵinterpolation1('', ɵɵpipeBind1(1, 1, ctx.title), ''));
|
||||
}
|
||||
},
|
||||
...overrides
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
it('should be able to handle Service injection', () => {
|
||||
const Comp = generateComponent({providers: [ServiceB], pipes: [generatePipe(ServiceB)]});
|
||||
const fixture = new ComponentFixture(Comp);
|
||||
expect(fixture.html).toEqual('MyComponent Title - ServiceB Title');
|
||||
});
|
||||
|
||||
it('should be able to handle Token injections', () => {
|
||||
const provider = new InjectionToken<ServiceA>(
|
||||
'token', {providedIn: 'root', factory: () => new ServiceB()});
|
||||
const Comp = generateComponent({providers: [provider], pipes: [generatePipe(provider)]});
|
||||
const fixture = new ComponentFixture(Comp);
|
||||
expect(fixture.html).toEqual('MyComponent Title - ServiceB Title');
|
||||
});
|
||||
|
||||
it('should be able to handle Module injection', () => {
|
||||
const injector = createInjector(ModuleA);
|
||||
const Comp = generateComponent({providers: [], pipes: [generatePipe(ServiceA)]});
|
||||
const fixture = new ComponentFixture(Comp, {injector});
|
||||
expect(fixture.html).toEqual('MyComponent Title - ServiceA Title');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('WrappedValue', () => {
|
||||
@Pipe({name: 'wrappingPipe'})
|
||||
class WrappingPipe implements PipeTransform {
|
||||
|
|
@ -477,113 +66,3 @@ describe('pipe', () => {
|
|||
});
|
||||
|
||||
});
|
||||
|
||||
@Pipe({name: 'countingPipe'})
|
||||
class CountingPipe implements PipeTransform {
|
||||
state: number = 0;
|
||||
|
||||
transform(value: any) { return `${value} state:${this.state++}`; }
|
||||
|
||||
static ngPipeDef = ɵɵdefinePipe({
|
||||
name: 'countingPipe',
|
||||
type: CountingPipe,
|
||||
factory: function CountingPipe_Factory() { return new CountingPipe(); },
|
||||
});
|
||||
}
|
||||
|
||||
@Pipe({name: 'countingImpurePipe', pure: false})
|
||||
class CountingImpurePipe implements PipeTransform {
|
||||
state: number = 0;
|
||||
|
||||
transform(value: any) { return `${value} state:${this.state++}`; }
|
||||
|
||||
static ngPipeDef = ɵɵdefinePipe({
|
||||
name: 'countingImpurePipe',
|
||||
type: CountingImpurePipe,
|
||||
factory: function CountingImpurePipe_Factory() { return new CountingImpurePipe(); },
|
||||
pure: false,
|
||||
});
|
||||
}
|
||||
|
||||
@Pipe({name: 'multiArgPipe'})
|
||||
class MultiArgPipe implements PipeTransform {
|
||||
transform(value: any, arg1: any, arg2: any, arg3 = 'default') {
|
||||
return `${value} ${arg1} ${arg2} ${arg3}`;
|
||||
}
|
||||
|
||||
static ngPipeDef = ɵɵdefinePipe({
|
||||
name: 'multiArgPipe',
|
||||
type: MultiArgPipe,
|
||||
factory: function MultiArgPipe_Factory() { return new MultiArgPipe(); },
|
||||
});
|
||||
}
|
||||
|
||||
@Pipe({name: 'duplicatePipe'})
|
||||
class DuplicatePipe1 implements PipeTransform {
|
||||
transform(value: any) { return `${value} from duplicate 1`; }
|
||||
|
||||
static ngPipeDef = ɵɵdefinePipe({
|
||||
name: 'duplicatePipe',
|
||||
type: DuplicatePipe1,
|
||||
factory: function DuplicatePipe1_Factory() { return new DuplicatePipe1(); },
|
||||
});
|
||||
}
|
||||
|
||||
@Pipe({name: 'duplicatePipe'})
|
||||
class DuplicatePipe2 implements PipeTransform {
|
||||
transform(value: any) { return `${value} from duplicate 2`; }
|
||||
|
||||
static ngPipeDef = ɵɵdefinePipe({
|
||||
name: 'duplicatePipe',
|
||||
type: DuplicatePipe2,
|
||||
factory: function DuplicatePipe2_Factory() { return new DuplicatePipe2(); },
|
||||
});
|
||||
}
|
||||
|
||||
class Person {
|
||||
// TODO(issue/24571): remove '!'.
|
||||
age !: number;
|
||||
// TODO(issue/24571): remove '!'.
|
||||
name !: string | null;
|
||||
address: Address|null = null;
|
||||
// TODO(issue/24571): remove '!'.
|
||||
phones !: number[];
|
||||
|
||||
init(name: string|null, address: Address|null = null) {
|
||||
this.name = name;
|
||||
this.address = address;
|
||||
}
|
||||
|
||||
sayHi(m: any): string { return `Hi, ${m}`; }
|
||||
|
||||
passThrough(val: any): any { return val; }
|
||||
|
||||
toString(): string {
|
||||
const address = this.address == null ? '' : ' address=' + this.address.toString();
|
||||
|
||||
return 'name=' + this.name + address;
|
||||
}
|
||||
}
|
||||
|
||||
class Address {
|
||||
cityGetterCalls: number = 0;
|
||||
zipCodeGetterCalls: number = 0;
|
||||
|
||||
constructor(public _city: string, public _zipcode: any = null) {}
|
||||
|
||||
get city() {
|
||||
this.cityGetterCalls++;
|
||||
return this._city;
|
||||
}
|
||||
|
||||
get zipcode() {
|
||||
this.zipCodeGetterCalls++;
|
||||
return this._zipcode;
|
||||
}
|
||||
|
||||
set city(v) { this._city = v; }
|
||||
|
||||
set zipcode(v) { this._zipcode = v; }
|
||||
|
||||
toString(): string { return this.city || '-'; }
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue