2016-06-23 12:47:54 -04:00
|
|
|
/**
|
|
|
|
* @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
|
|
|
|
*/
|
|
|
|
|
2016-08-19 15:51:01 -04:00
|
|
|
import {CommonModule} from '@angular/common';
|
2016-08-23 13:52:40 -04:00
|
|
|
import {Component, ContentChildren, Directive, NO_ERRORS_SCHEMA, QueryList, TemplateRef} from '@angular/core';
|
2016-09-08 23:37:20 -04:00
|
|
|
import {ComponentFixture, TestBed, async} from '@angular/core/testing';
|
2016-08-02 18:53:34 -04:00
|
|
|
import {expect} from '@angular/platform-browser/testing/matchers';
|
2016-04-11 11:47:28 -04:00
|
|
|
|
|
|
|
export function main() {
|
2016-09-08 23:37:20 -04:00
|
|
|
describe('NgTemplateOutlet', () => {
|
|
|
|
let fixture: ComponentFixture<any>;
|
|
|
|
|
|
|
|
function setTplRef(value: any): void { fixture.componentInstance.currentTplRef = value; }
|
|
|
|
|
|
|
|
function detectChangesAndExpectText(text: string): void {
|
|
|
|
fixture.detectChanges();
|
|
|
|
expect(fixture.debugElement.nativeElement).toHaveText(text);
|
|
|
|
}
|
|
|
|
|
|
|
|
afterEach(() => { fixture = null; });
|
2016-08-15 16:52:57 -04:00
|
|
|
|
|
|
|
beforeEach(() => {
|
2016-09-08 23:37:20 -04:00
|
|
|
TestBed.configureTestingModule({
|
|
|
|
declarations: [
|
|
|
|
TestComponent,
|
|
|
|
CaptureTplRefs,
|
|
|
|
],
|
|
|
|
imports: [CommonModule],
|
|
|
|
});
|
2016-08-15 16:52:57 -04:00
|
|
|
});
|
|
|
|
|
2017-01-06 17:18:17 -05:00
|
|
|
it('should do nothing if templateRef is `null`', async(() => {
|
|
|
|
const template = `<ng-container [ngTemplateOutlet]="null"></ng-container>`;
|
2016-09-08 23:37:20 -04:00
|
|
|
fixture = createTestComponent(template);
|
|
|
|
detectChangesAndExpectText('');
|
2016-08-15 16:52:57 -04:00
|
|
|
}));
|
|
|
|
|
|
|
|
it('should insert content specified by TemplateRef', async(() => {
|
2017-01-06 17:18:17 -05:00
|
|
|
const template = `<template #tpl>foo</template>` +
|
|
|
|
`<ng-container [ngTemplateOutlet]="tpl"></ng-container>`;
|
2016-09-08 23:37:20 -04:00
|
|
|
fixture = createTestComponent(template);
|
|
|
|
detectChangesAndExpectText('foo');
|
2016-08-15 16:52:57 -04:00
|
|
|
}));
|
|
|
|
|
2017-01-06 17:18:17 -05:00
|
|
|
it('should clear content if TemplateRef becomes `null`', async(() => {
|
|
|
|
const template = `<tpl-refs #refs="tplRefs"><template>foo</template></tpl-refs>` +
|
|
|
|
`<ng-container [ngTemplateOutlet]="currentTplRef"></ng-container>`;
|
2016-09-08 23:37:20 -04:00
|
|
|
fixture = createTestComponent(template);
|
2016-08-15 16:52:57 -04:00
|
|
|
fixture.detectChanges();
|
2016-09-08 23:37:20 -04:00
|
|
|
const refs = fixture.debugElement.children[0].references['refs'];
|
2016-08-15 16:52:57 -04:00
|
|
|
|
2016-09-08 23:37:20 -04:00
|
|
|
setTplRef(refs.tplRefs.first);
|
|
|
|
detectChangesAndExpectText('foo');
|
2016-08-15 16:52:57 -04:00
|
|
|
|
2016-09-08 23:37:20 -04:00
|
|
|
setTplRef(null);
|
|
|
|
detectChangesAndExpectText('');
|
2016-08-15 16:52:57 -04:00
|
|
|
}));
|
|
|
|
|
|
|
|
it('should swap content if TemplateRef changes', async(() => {
|
2016-08-23 13:52:40 -04:00
|
|
|
const template =
|
2017-01-06 17:18:17 -05:00
|
|
|
`<tpl-refs #refs="tplRefs"><template>foo</template><template>bar</template></tpl-refs>` +
|
|
|
|
`<ng-container [ngTemplateOutlet]="currentTplRef"></ng-container>`;
|
2016-09-08 23:37:20 -04:00
|
|
|
fixture = createTestComponent(template);
|
2016-08-15 16:52:57 -04:00
|
|
|
|
|
|
|
fixture.detectChanges();
|
2016-09-08 23:37:20 -04:00
|
|
|
const refs = fixture.debugElement.children[0].references['refs'];
|
2016-08-15 16:52:57 -04:00
|
|
|
|
2016-09-08 23:37:20 -04:00
|
|
|
setTplRef(refs.tplRefs.first);
|
|
|
|
detectChangesAndExpectText('foo');
|
2016-08-15 16:52:57 -04:00
|
|
|
|
2016-09-08 23:37:20 -04:00
|
|
|
setTplRef(refs.tplRefs.last);
|
|
|
|
detectChangesAndExpectText('bar');
|
2016-08-15 16:52:57 -04:00
|
|
|
}));
|
|
|
|
|
2017-01-06 17:18:17 -05:00
|
|
|
it('should display template if context is `null`', async(() => {
|
|
|
|
const template = `<template #tpl>foo</template>` +
|
|
|
|
`<ng-container *ngTemplateOutlet="tpl; context: null"></ng-container>`;
|
2016-09-08 23:37:20 -04:00
|
|
|
fixture = createTestComponent(template);
|
|
|
|
detectChangesAndExpectText('foo');
|
2016-08-15 16:52:57 -04:00
|
|
|
}));
|
|
|
|
|
|
|
|
it('should reflect initial context and changes', async(() => {
|
2017-01-06 17:18:17 -05:00
|
|
|
const template = `<template let-foo="foo" #tpl>{{foo}}</template>` +
|
|
|
|
`<ng-container *ngTemplateOutlet="tpl; context: context"></ng-container>`;
|
2016-09-08 23:37:20 -04:00
|
|
|
fixture = createTestComponent(template);
|
|
|
|
|
2016-08-15 16:52:57 -04:00
|
|
|
fixture.detectChanges();
|
2016-09-08 23:37:20 -04:00
|
|
|
detectChangesAndExpectText('bar');
|
2016-08-15 16:52:57 -04:00
|
|
|
|
|
|
|
fixture.componentInstance.context.foo = 'alter-bar';
|
2016-09-08 23:37:20 -04:00
|
|
|
detectChangesAndExpectText('alter-bar');
|
2016-08-15 16:52:57 -04:00
|
|
|
}));
|
|
|
|
|
2017-01-06 17:18:17 -05:00
|
|
|
it('should reflect user defined `$implicit` property in the context', async(() => {
|
|
|
|
const template = `<template let-ctx #tpl>{{ctx.foo}}</template>` +
|
|
|
|
`<ng-container *ngTemplateOutlet="tpl; context: context"></ng-container>`;
|
2016-09-08 23:37:20 -04:00
|
|
|
fixture = createTestComponent(template);
|
2017-01-06 17:18:17 -05:00
|
|
|
fixture.componentInstance.context = {$implicit: {foo: 'bra'}};
|
|
|
|
detectChangesAndExpectText('bra');
|
2016-08-15 16:52:57 -04:00
|
|
|
}));
|
|
|
|
|
|
|
|
it('should reflect context re-binding', async(() => {
|
2017-01-06 17:18:17 -05:00
|
|
|
const template = `<template let-shawshank="shawshank" #tpl>{{shawshank}}</template>` +
|
|
|
|
`<ng-container *ngTemplateOutlet="tpl; context: context"></ng-container>`;
|
2016-09-08 23:37:20 -04:00
|
|
|
fixture = createTestComponent(template);
|
2016-08-23 13:52:40 -04:00
|
|
|
|
2016-08-15 16:52:57 -04:00
|
|
|
fixture.componentInstance.context = {shawshank: 'brooks'};
|
2016-09-08 23:37:20 -04:00
|
|
|
detectChangesAndExpectText('brooks');
|
2016-08-15 16:52:57 -04:00
|
|
|
|
|
|
|
fixture.componentInstance.context = {shawshank: 'was here'};
|
2016-09-08 23:37:20 -04:00
|
|
|
detectChangesAndExpectText('was here');
|
2016-08-15 16:52:57 -04:00
|
|
|
}));
|
2016-04-11 11:47:28 -04:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
@Directive({selector: 'tpl-refs', exportAs: 'tplRefs'})
|
|
|
|
class CaptureTplRefs {
|
2016-04-28 17:00:31 -04:00
|
|
|
@ContentChildren(TemplateRef) tplRefs: QueryList<TemplateRef<any>>;
|
2016-04-11 11:47:28 -04:00
|
|
|
}
|
|
|
|
|
2016-08-19 15:51:01 -04:00
|
|
|
@Component({selector: 'test-cmp', template: ''})
|
2016-04-11 11:47:28 -04:00
|
|
|
class TestComponent {
|
2016-04-28 17:00:31 -04:00
|
|
|
currentTplRef: TemplateRef<any>;
|
2016-06-10 13:35:36 -04:00
|
|
|
context: any = {foo: 'bar'};
|
2016-04-11 11:47:28 -04:00
|
|
|
}
|
2016-09-08 23:37:20 -04:00
|
|
|
|
|
|
|
function createTestComponent(template: string): ComponentFixture<TestComponent> {
|
|
|
|
return TestBed.overrideComponent(TestComponent, {set: {template: template}})
|
|
|
|
.configureTestingModule({schemas: [NO_ERRORS_SCHEMA]})
|
|
|
|
.createComponent(TestComponent);
|
2016-12-12 00:42:20 -05:00
|
|
|
}
|