refactor(core): Remove linker test references to TestComponentBuilder (#10869)
Removed TestComponentBuilder references from projection_integration_spec.ts
This commit is contained in:
Chuck Jazdzewski
Kara
parent
40e160c22c
commit
4829fbb95c
|
|
@ -9,188 +9,126 @@
|
|||
import {Component, Directive, ElementRef, TemplateRef, ViewContainerRef, ViewEncapsulation, forwardRef} from '@angular/core';
|
||||
import {getAllDebugNodes} from '@angular/core/src/debug/debug_node';
|
||||
import {ViewMetadata} from '@angular/core/src/metadata/view';
|
||||
import {ComponentFixture} from '@angular/core/testing';
|
||||
import {AsyncTestCompleter, TestComponentBuilder, beforeEach, beforeEachProviders, ddescribe, describe, iit, inject, it, xdescribe, xit} from '@angular/core/testing/testing_internal';
|
||||
import {ComponentFixture, TestBed, async} from '@angular/core/testing';
|
||||
import {beforeEach, beforeEachProviders, ddescribe, describe, iit, inject, it, xdescribe, xit} from '@angular/core/testing/testing_internal';
|
||||
import {By} from '@angular/platform-browser/src/dom/debug/by';
|
||||
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
|
||||
import {expect} from '@angular/platform-browser/testing/matchers';
|
||||
|
||||
export function main() {
|
||||
describe('projection', () => {
|
||||
it('should support simple components',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
tcb.overrideView(MainComp, new ViewMetadata({
|
||||
template: '<simple>' +
|
||||
'<div>A</div>' +
|
||||
'</simple>',
|
||||
directives: [Simple]
|
||||
}))
|
||||
.createAsync(MainComp)
|
||||
.then((main) => {
|
||||
expect(main.debugElement.nativeElement).toHaveText('SIMPLE(A)');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
beforeEach(() => TestBed.configureTestingModule({declarations: [MainComp, OtherComp, Simple]}));
|
||||
|
||||
it('should support simple components with text interpolation as direct children',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
tcb.overrideView(MainComp, new ViewMetadata({
|
||||
template: '{{\'START(\'}}<simple>' +
|
||||
it('should support simple components', () => {
|
||||
const template = '<simple><div>A</div></simple>';
|
||||
TestBed.overrideComponent(MainComp, {set: {template}});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
expect(main.debugElement.nativeElement).toHaveText('SIMPLE(A)');
|
||||
});
|
||||
|
||||
it('should support simple components with text interpolation as direct children', () => {
|
||||
const template = '{{\'START(\'}}<simple>' +
|
||||
'{{text}}' +
|
||||
'</simple>{{\')END\'}}',
|
||||
directives: [Simple]
|
||||
}))
|
||||
.createAsync(MainComp)
|
||||
.then((main) => {
|
||||
'</simple>{{\')END\'}}';
|
||||
TestBed.overrideComponent(MainComp, {set: {template}});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
main.debugElement.componentInstance.text = 'A';
|
||||
main.detectChanges();
|
||||
expect(main.debugElement.nativeElement).toHaveText('START(SIMPLE(A))END');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should support projecting text interpolation to a non bound element',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
tcb.overrideView(
|
||||
Simple,
|
||||
new ViewMetadata(
|
||||
{template: 'SIMPLE(<div><ng-content></ng-content></div>)', directives: []}))
|
||||
.overrideView(
|
||||
MainComp, new ViewMetadata(
|
||||
{template: '<simple>{{text}}</simple>', directives: [Simple]}))
|
||||
.createAsync(MainComp)
|
||||
.then((main) => {
|
||||
it('should support projecting text interpolation to a non bound element', () => {
|
||||
TestBed.overrideComponent(
|
||||
Simple, {set: {template: 'SIMPLE(<div><ng-content></ng-content></div>)'}});
|
||||
TestBed.overrideComponent(MainComp, {set: {template: '<simple>{{text}}</simple>'}});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
main.debugElement.componentInstance.text = 'A';
|
||||
main.detectChanges();
|
||||
expect(main.debugElement.nativeElement).toHaveText('SIMPLE(A)');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
|
||||
it('should support projecting text interpolation to a non bound element with other bound elements after it',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
tcb.overrideView(
|
||||
Simple, new ViewMetadata({
|
||||
template:
|
||||
'SIMPLE(<div><ng-content></ng-content></div><div [tabIndex]="0">EL</div>)',
|
||||
directives: []
|
||||
}))
|
||||
.overrideView(
|
||||
MainComp, new ViewMetadata(
|
||||
{template: '<simple>{{text}}</simple>', directives: [Simple]}))
|
||||
.createAsync(MainComp)
|
||||
.then((main) => {
|
||||
() => {
|
||||
TestBed.overrideComponent(Simple, {
|
||||
set: {
|
||||
template: 'SIMPLE(<div><ng-content></ng-content></div><div [tabIndex]="0">EL</div>)'
|
||||
}
|
||||
});
|
||||
TestBed.overrideComponent(MainComp, {set: {template: '<simple>{{text}}</simple>'}});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
main.debugElement.componentInstance.text = 'A';
|
||||
main.detectChanges();
|
||||
expect(main.debugElement.nativeElement).toHaveText('SIMPLE(AEL)');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should project content components',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
tcb.overrideView(Simple, new ViewMetadata({
|
||||
template: 'SIMPLE({{0}}|<ng-content></ng-content>|{{2}})',
|
||||
directives: []
|
||||
}))
|
||||
.overrideView(OtherComp, new ViewMetadata({template: '{{1}}', directives: []}))
|
||||
.overrideView(MainComp, new ViewMetadata({
|
||||
template: '<simple><other></other></simple>',
|
||||
directives: [Simple, OtherComp]
|
||||
}))
|
||||
.createAsync(MainComp)
|
||||
.then((main) => {
|
||||
it('should project content components', () => {
|
||||
TestBed.overrideComponent(
|
||||
Simple, {set: {template: 'SIMPLE({{0}}|<ng-content></ng-content>|{{2}})'}});
|
||||
TestBed.overrideComponent(OtherComp, {set: {template: '{{1}}'}});
|
||||
TestBed.overrideComponent(MainComp, {set: {template: '<simple><other></other></simple>'}});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
main.detectChanges();
|
||||
expect(main.debugElement.nativeElement).toHaveText('SIMPLE(0|1|2)');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should not show the light dom even if there is no content tag',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
tcb.overrideView(
|
||||
MainComp, new ViewMetadata({template: '<empty>A</empty>', directives: [Empty]}))
|
||||
.createAsync(MainComp)
|
||||
.then((main) => {
|
||||
it('should not show the light dom even if there is no content tag', () => {
|
||||
TestBed.configureTestingModule({declarations: [Empty]});
|
||||
TestBed.overrideComponent(MainComp, {set: {template: '<empty>A</empty>'}});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
expect(main.debugElement.nativeElement).toHaveText('');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should support multiple content tags',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
tcb.overrideView(MainComp, new ViewMetadata({
|
||||
it('should support multiple content tags', () => {
|
||||
TestBed.configureTestingModule({declarations: [MultipleContentTagsComponent]});
|
||||
TestBed.overrideComponent(MainComp, {
|
||||
set: {
|
||||
template: '<multiple-content-tags>' +
|
||||
'<div>B</div>' +
|
||||
'<div>C</div>' +
|
||||
'<div class="left">A</div>' +
|
||||
'</multiple-content-tags>',
|
||||
directives: [MultipleContentTagsComponent]
|
||||
}))
|
||||
.createAsync(MainComp)
|
||||
.then((main) => {
|
||||
'</multiple-content-tags>'
|
||||
}
|
||||
});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
expect(main.debugElement.nativeElement).toHaveText('(A, BC)');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should redistribute only direct children',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
tcb.overrideView(MainComp, new ViewMetadata({
|
||||
it('should redistribute only direct children', () => {
|
||||
TestBed.configureTestingModule({declarations: [MultipleContentTagsComponent]});
|
||||
TestBed.overrideComponent(MainComp, {
|
||||
set: {
|
||||
template: '<multiple-content-tags>' +
|
||||
'<div>B<div class="left">A</div></div>' +
|
||||
'<div>C</div>' +
|
||||
'</multiple-content-tags>',
|
||||
directives: [MultipleContentTagsComponent]
|
||||
}))
|
||||
.createAsync(MainComp)
|
||||
.then((main) => {
|
||||
'</multiple-content-tags>'
|
||||
}
|
||||
});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
expect(main.debugElement.nativeElement).toHaveText('(, BAC)');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should redistribute direct child viewcontainers when the light dom changes',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
tcb.overrideView(
|
||||
MainComp, new ViewMetadata({
|
||||
it('should redistribute direct child viewcontainers when the light dom changes', () => {
|
||||
TestBed.configureTestingModule(
|
||||
{declarations: [MultipleContentTagsComponent, ManualViewportDirective]});
|
||||
TestBed.overrideComponent(MainComp, {
|
||||
set: {
|
||||
template: '<multiple-content-tags>' +
|
||||
'<template manual class="left"><div>A1</div></template>' +
|
||||
'<div>B</div>' +
|
||||
'</multiple-content-tags>',
|
||||
directives: [MultipleContentTagsComponent, ManualViewportDirective]
|
||||
}))
|
||||
.createAsync(MainComp)
|
||||
.then((main) => {
|
||||
'</multiple-content-tags>'
|
||||
}
|
||||
});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
var viewportDirectives =
|
||||
main.debugElement.children[0]
|
||||
var viewportDirectives = main.debugElement.children[0]
|
||||
.childNodes.filter(By.directive(ManualViewportDirective))
|
||||
.map(de => de.injector.get(ManualViewportDirective));
|
||||
|
||||
|
|
@ -201,76 +139,66 @@ export function main() {
|
|||
viewportDirectives.forEach(d => d.hide());
|
||||
|
||||
expect(main.debugElement.nativeElement).toHaveText('(, B)');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should support nested components',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
tcb.overrideView(MainComp, new ViewMetadata({
|
||||
it('should support nested components', () => {
|
||||
TestBed.configureTestingModule({declarations: [OuterWithIndirectNestedComponent]});
|
||||
TestBed.overrideComponent(MainComp, {
|
||||
set: {
|
||||
template: '<outer-with-indirect-nested>' +
|
||||
'<div>A</div>' +
|
||||
'<div>B</div>' +
|
||||
'</outer-with-indirect-nested>',
|
||||
directives: [OuterWithIndirectNestedComponent]
|
||||
}))
|
||||
.createAsync(MainComp)
|
||||
.then((main) => {
|
||||
'</outer-with-indirect-nested>'
|
||||
}
|
||||
});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
expect(main.debugElement.nativeElement).toHaveText('OUTER(SIMPLE(AB))');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should support nesting with content being direct child of a nested component',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
tcb.overrideView(MainComp, new ViewMetadata({
|
||||
it('should support nesting with content being direct child of a nested component', () => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations:
|
||||
[InnerComponent, InnerInnerComponent, OuterComponent, ManualViewportDirective]
|
||||
});
|
||||
TestBed.overrideComponent(MainComp, {
|
||||
set: {
|
||||
template: '<outer>' +
|
||||
'<template manual class="left"><div>A</div></template>' +
|
||||
'<div>B</div>' +
|
||||
'<div>C</div>' +
|
||||
'</outer>',
|
||||
directives: [OuterComponent, ManualViewportDirective],
|
||||
}))
|
||||
.createAsync(MainComp)
|
||||
.then((main) => {
|
||||
'</outer>'
|
||||
}
|
||||
});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
var viewportDirective =
|
||||
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0]
|
||||
.injector.get(ManualViewportDirective);
|
||||
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
|
||||
ManualViewportDirective);
|
||||
|
||||
expect(main.debugElement.nativeElement)
|
||||
.toHaveText('OUTER(INNER(INNERINNER(,BC)))');
|
||||
expect(main.debugElement.nativeElement).toHaveText('OUTER(INNER(INNERINNER(,BC)))');
|
||||
viewportDirective.show();
|
||||
|
||||
expect(main.debugElement.nativeElement)
|
||||
.toHaveText('OUTER(INNER(INNERINNER(A,BC)))');
|
||||
async.done();
|
||||
expect(main.debugElement.nativeElement).toHaveText('OUTER(INNER(INNERINNER(A,BC)))');
|
||||
});
|
||||
}));
|
||||
|
||||
it('should redistribute when the shadow dom changes',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
tcb.overrideView(MainComp, new ViewMetadata({
|
||||
it('should redistribute when the shadow dom changes', () => {
|
||||
TestBed.configureTestingModule(
|
||||
{declarations: [ConditionalContentComponent, ManualViewportDirective]});
|
||||
TestBed.overrideComponent(MainComp, {
|
||||
set: {
|
||||
template: '<conditional-content>' +
|
||||
'<div class="left">A</div>' +
|
||||
'<div>B</div>' +
|
||||
'<div>C</div>' +
|
||||
'</conditional-content>',
|
||||
directives: [ConditionalContentComponent]
|
||||
}))
|
||||
.createAsync(MainComp)
|
||||
.then((main) => {
|
||||
'</conditional-content>'
|
||||
}
|
||||
});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
var viewportDirective =
|
||||
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0]
|
||||
.injector.get(ManualViewportDirective);
|
||||
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
|
||||
ManualViewportDirective);
|
||||
|
||||
expect(main.debugElement.nativeElement).toHaveText('(, BC)');
|
||||
|
||||
|
|
@ -280,69 +208,48 @@ export function main() {
|
|||
viewportDirective.hide();
|
||||
|
||||
expect(main.debugElement.nativeElement).toHaveText('(, BC)');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
// GH-2095 - https://github.com/angular/angular/issues/2095
|
||||
// important as we are removing the ng-content element during compilation,
|
||||
// which could skrew up text node indices.
|
||||
it('should support text nodes after content tags',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
|
||||
tcb.overrideView(
|
||||
MainComp,
|
||||
new ViewMetadata(
|
||||
{template: '<simple stringProp="text"></simple>', directives: [Simple]}))
|
||||
.overrideTemplate(Simple, '<ng-content></ng-content><p>P,</p>{{stringProp}}')
|
||||
.createAsync(MainComp)
|
||||
.then((main: ComponentFixture<any>) => {
|
||||
it('should support text nodes after content tags', () => {
|
||||
TestBed.overrideComponent(MainComp, {set: {template: '<simple stringProp="text"></simple>'}});
|
||||
TestBed.overrideComponent(
|
||||
Simple, {set: {template: '<ng-content></ng-content><p>P,</p>{{stringProp}}'}});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
main.detectChanges();
|
||||
|
||||
expect(main.debugElement.nativeElement).toHaveText('P,text');
|
||||
async.done();
|
||||
});
|
||||
|
||||
}));
|
||||
|
||||
// important as we are moving style tags around during compilation,
|
||||
// which could skrew up text node indices.
|
||||
it('should support text nodes after style tags',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
|
||||
tcb.overrideView(
|
||||
MainComp,
|
||||
new ViewMetadata(
|
||||
{template: '<simple stringProp="text"></simple>', directives: [Simple]}))
|
||||
.overrideTemplate(Simple, '<style></style><p>P,</p>{{stringProp}}')
|
||||
.createAsync(MainComp)
|
||||
.then((main: ComponentFixture<any>) => {
|
||||
it('should support text nodes after style tags', () => {
|
||||
TestBed.overrideComponent(MainComp, {set: {template: '<simple stringProp="text"></simple>'}});
|
||||
TestBed.overrideComponent(
|
||||
Simple, {set: {template: '<style></style><p>P,</p>{{stringProp}}'}});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
main.detectChanges();
|
||||
expect(main.debugElement.nativeElement).toHaveText('P,text');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should support moving non projected light dom around',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
tcb.overrideView(MainComp, new ViewMetadata({
|
||||
it('should support moving non projected light dom around', () => {
|
||||
TestBed.configureTestingModule(
|
||||
{declarations: [Empty, ProjectDirective, ManualViewportDirective]});
|
||||
TestBed.overrideComponent(MainComp, {
|
||||
set: {
|
||||
template: '<empty>' +
|
||||
' <template manual><div>A</div></template>' +
|
||||
'</empty>' +
|
||||
'START(<div project></div>)END',
|
||||
directives: [Empty, ProjectDirective, ManualViewportDirective],
|
||||
}))
|
||||
.createAsync(MainComp)
|
||||
.then((main) => {
|
||||
var sourceDirective: any /** TODO #9100 */;
|
||||
'START(<div project></div>)END'
|
||||
}
|
||||
});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
var sourceDirective: any;
|
||||
|
||||
// We can't use the child nodes to get a hold of this because it's not in the dom
|
||||
// at
|
||||
|
|
@ -354,68 +261,58 @@ export function main() {
|
|||
});
|
||||
|
||||
var projectDirective: ProjectDirective =
|
||||
main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0]
|
||||
.injector.get(ProjectDirective);
|
||||
main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].injector.get(
|
||||
ProjectDirective);
|
||||
|
||||
expect(main.debugElement.nativeElement).toHaveText('START()END');
|
||||
|
||||
projectDirective.show(sourceDirective.templateRef);
|
||||
expect(main.debugElement.nativeElement).toHaveText('START(A)END');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should support moving projected light dom around',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
tcb.overrideView(
|
||||
MainComp, new ViewMetadata({
|
||||
it('should support moving projected light dom around', () => {
|
||||
TestBed.configureTestingModule(
|
||||
{declarations: [Empty, ProjectDirective, ManualViewportDirective]});
|
||||
TestBed.overrideComponent(MainComp, {
|
||||
set: {
|
||||
template: '<simple><template manual><div>A</div></template></simple>' +
|
||||
'START(<div project></div>)END',
|
||||
directives: [Simple, ProjectDirective, ManualViewportDirective],
|
||||
}))
|
||||
.createAsync(MainComp)
|
||||
.then((main) => {
|
||||
'START(<div project></div>)END'
|
||||
}
|
||||
});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
var sourceDirective: ManualViewportDirective =
|
||||
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0]
|
||||
.injector.get(ManualViewportDirective);
|
||||
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
|
||||
ManualViewportDirective);
|
||||
var projectDirective: ProjectDirective =
|
||||
main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0]
|
||||
.injector.get(ProjectDirective);
|
||||
main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].injector.get(
|
||||
ProjectDirective);
|
||||
expect(main.debugElement.nativeElement).toHaveText('SIMPLE()START()END');
|
||||
|
||||
projectDirective.show(sourceDirective.templateRef);
|
||||
expect(main.debugElement.nativeElement).toHaveText('SIMPLE()START(A)END');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should support moving ng-content around',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
tcb.overrideView(
|
||||
MainComp, new ViewMetadata({
|
||||
it('should support moving ng-content around', () => {
|
||||
TestBed.configureTestingModule(
|
||||
{declarations: [ConditionalContentComponent, ProjectDirective, ManualViewportDirective]});
|
||||
TestBed.overrideComponent(MainComp, {
|
||||
set: {
|
||||
template: '<conditional-content>' +
|
||||
'<div class="left">A</div>' +
|
||||
'<div>B</div>' +
|
||||
'</conditional-content>' +
|
||||
'START(<div project></div>)END',
|
||||
directives: [
|
||||
ConditionalContentComponent, ProjectDirective, ManualViewportDirective
|
||||
]
|
||||
}))
|
||||
.createAsync(MainComp)
|
||||
.then((main) => {
|
||||
'START(<div project></div>)END'
|
||||
}
|
||||
});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
var sourceDirective: ManualViewportDirective =
|
||||
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0]
|
||||
.injector.get(ManualViewportDirective);
|
||||
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
|
||||
ManualViewportDirective);
|
||||
var projectDirective: ProjectDirective =
|
||||
main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0]
|
||||
.injector.get(ProjectDirective);
|
||||
main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].injector.get(
|
||||
ProjectDirective);
|
||||
expect(main.debugElement.nativeElement).toHaveText('(, B)START()END');
|
||||
|
||||
projectDirective.show(sourceDirective.templateRef);
|
||||
|
|
@ -425,51 +322,35 @@ export function main() {
|
|||
// times...
|
||||
projectDirective.show(sourceDirective.templateRef);
|
||||
expect(main.debugElement.nativeElement).toHaveText('(, B)START(A)END');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
|
||||
// Note: This does not use a ng-content element, but
|
||||
// is still important as we are merging proto views independent of
|
||||
// the presence of ng-content elements!
|
||||
it('should still allow to implement a recursive trees',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
tcb.overrideView(
|
||||
MainComp, new ViewMetadata({template: '<tree></tree>', directives: [Tree]}))
|
||||
.createAsync(MainComp)
|
||||
.then((main) => {
|
||||
it('should still allow to implement a recursive trees', () => {
|
||||
TestBed.configureTestingModule({declarations: [Tree, ManualViewportDirective]});
|
||||
TestBed.overrideComponent(MainComp, {set: {template: '<tree></tree>'}});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
main.detectChanges();
|
||||
var manualDirective: ManualViewportDirective =
|
||||
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0]
|
||||
.injector.get(ManualViewportDirective);
|
||||
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
|
||||
ManualViewportDirective);
|
||||
expect(main.debugElement.nativeElement).toHaveText('TREE(0:)');
|
||||
manualDirective.show();
|
||||
main.detectChanges();
|
||||
expect(main.debugElement.nativeElement).toHaveText('TREE(0:TREE(1:))');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
// Note: This does not use a ng-content element, but
|
||||
// is still important as we are merging proto views independent of
|
||||
// the presence of ng-content elements!
|
||||
it('should still allow to implement a recursive trees via multiple components',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
tcb.overrideView(
|
||||
MainComp, new ViewMetadata({template: '<tree></tree>', directives: [Tree]}))
|
||||
.overrideView(
|
||||
Tree, new ViewMetadata({
|
||||
template: 'TREE({{depth}}:<tree2 *manual [depth]="depth+1"></tree2>)',
|
||||
directives: [Tree2, ManualViewportDirective]
|
||||
}))
|
||||
.createAsync(MainComp)
|
||||
.then((main) => {
|
||||
it('should still allow to implement a recursive trees via multiple components', () => {
|
||||
TestBed.configureTestingModule({declarations: [Tree, Tree2, ManualViewportDirective]});
|
||||
TestBed.overrideComponent(MainComp, {set: {template: '<tree></tree>'}});
|
||||
TestBed.overrideComponent(
|
||||
Tree, {set: {template: 'TREE({{depth}}:<tree2 *manual [depth]="depth+1"></tree2>)'}});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
main.detectChanges();
|
||||
|
||||
|
|
@ -483,51 +364,43 @@ export function main() {
|
|||
expect(main.debugElement.nativeElement).toHaveText('TREE(0:TREE2(1:))');
|
||||
|
||||
var tree2 = main.debugElement.query(By.directive(Tree2));
|
||||
manualDirective =
|
||||
tree2.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
|
||||
manualDirective = tree2.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
|
||||
ManualViewportDirective);
|
||||
manualDirective.show();
|
||||
main.detectChanges();
|
||||
expect(main.debugElement.nativeElement).toHaveText('TREE(0:TREE2(1:TREE(2:)))');
|
||||
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
if (getDOM().supportsNativeShadowDOM()) {
|
||||
it('should support native content projection and isolate styles per component',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
tcb.overrideView(MainComp, new ViewMetadata({
|
||||
it('should support native content projection and isolate styles per component', () => {
|
||||
TestBed.configureTestingModule({declarations: [SimpleNative1, SimpleNative2]});
|
||||
TestBed.overrideComponent(MainComp, {
|
||||
set: {
|
||||
template: '<simple-native1><div>A</div></simple-native1>' +
|
||||
'<simple-native2><div>B</div></simple-native2>',
|
||||
directives: [SimpleNative1, SimpleNative2]
|
||||
}))
|
||||
.createAsync(MainComp)
|
||||
.then((main) => {
|
||||
'<simple-native2><div>B</div></simple-native2>'
|
||||
}
|
||||
});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
var childNodes = getDOM().childNodes(main.debugElement.nativeElement);
|
||||
expect(childNodes[0]).toHaveText('div {color: red}SIMPLE1(A)');
|
||||
expect(childNodes[1]).toHaveText('div {color: blue}SIMPLE2(B)');
|
||||
main.destroy();
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
}
|
||||
|
||||
if (getDOM().supportsDOMEvents()) {
|
||||
it('should support non emulated styles',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
tcb.overrideView(MainComp, new ViewMetadata({
|
||||
it('should support non emulated styles', () => {
|
||||
TestBed.configureTestingModule({declarations: [OtherComp]});
|
||||
TestBed.overrideComponent(MainComp, {
|
||||
set: {
|
||||
template: '<div class="redStyle"></div>',
|
||||
styles: ['.redStyle { color: red}'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
directives: [OtherComp]
|
||||
}))
|
||||
.createAsync(MainComp)
|
||||
.then((main) => {
|
||||
}
|
||||
});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
var mainEl = main.debugElement.nativeElement;
|
||||
var div1 = getDOM().firstChild(mainEl);
|
||||
var div2 = getDOM().createElement('div');
|
||||
|
|
@ -535,42 +408,35 @@ export function main() {
|
|||
getDOM().appendChild(mainEl, div2);
|
||||
expect(getDOM().getComputedStyle(div1).color).toEqual('rgb(255, 0, 0)');
|
||||
expect(getDOM().getComputedStyle(div2).color).toEqual('rgb(255, 0, 0)');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should support emulated style encapsulation',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
tcb.overrideView(MainComp, new ViewMetadata({
|
||||
it('should support emulated style encapsulation', () => {
|
||||
TestBed.configureTestingModule({declarations: [OtherComp]});
|
||||
TestBed.overrideComponent(MainComp, {
|
||||
set: {
|
||||
template: '<div></div>',
|
||||
styles: ['div { color: red}'],
|
||||
encapsulation: ViewEncapsulation.Emulated
|
||||
}))
|
||||
.createAsync(MainComp)
|
||||
.then((main) => {
|
||||
encapsulation: ViewEncapsulation.Emulated,
|
||||
}
|
||||
});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
var mainEl = main.debugElement.nativeElement;
|
||||
var div1 = getDOM().firstChild(mainEl);
|
||||
var div2 = getDOM().createElement('div');
|
||||
getDOM().appendChild(mainEl, div2);
|
||||
expect(getDOM().getComputedStyle(div1).color).toEqual('rgb(255, 0, 0)');
|
||||
expect(getDOM().getComputedStyle(div2).color).toEqual('rgb(0, 0, 0)');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
}
|
||||
|
||||
it('should support nested conditionals that contain ng-contents',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
tcb.overrideView(MainComp, new ViewMetadata({
|
||||
template: `<conditional-text>a</conditional-text>`,
|
||||
directives: [ConditionalTextComponent]
|
||||
}))
|
||||
.createAsync(MainComp)
|
||||
.then((main) => {
|
||||
it('should support nested conditionals that contain ng-contents', () => {
|
||||
TestBed.configureTestingModule(
|
||||
{declarations: [ConditionalTextComponent, ManualViewportDirective]});
|
||||
TestBed.overrideComponent(
|
||||
MainComp, {set: {template: `<conditional-text>a</conditional-text>`}});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
expect(main.debugElement.nativeElement).toHaveText('MAIN()');
|
||||
|
||||
var viewportElement =
|
||||
|
|
@ -578,75 +444,56 @@ export function main() {
|
|||
viewportElement.injector.get(ManualViewportDirective).show();
|
||||
expect(main.debugElement.nativeElement).toHaveText('MAIN(FIRST())');
|
||||
|
||||
viewportElement =
|
||||
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[1];
|
||||
viewportElement = main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[1];
|
||||
viewportElement.injector.get(ManualViewportDirective).show();
|
||||
expect(main.debugElement.nativeElement).toHaveText('MAIN(FIRST(SECOND(a)))');
|
||||
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should allow to switch the order of nested components via ng-content',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
tcb.overrideView(MainComp, new ViewMetadata({
|
||||
template: `<cmp-a><cmp-b></cmp-b></cmp-a>`,
|
||||
directives: [CmpA, CmpB],
|
||||
}))
|
||||
.createAsync(MainComp)
|
||||
.then((main) => {
|
||||
it('should allow to switch the order of nested components via ng-content', () => {
|
||||
TestBed.configureTestingModule({declarations: [CmpA, CmpB]});
|
||||
TestBed.overrideComponent(MainComp, {set: {template: `<cmp-a><cmp-b></cmp-b></cmp-a>`}});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
main.detectChanges();
|
||||
expect(getDOM().getInnerHTML(main.debugElement.nativeElement))
|
||||
.toEqual(
|
||||
'<cmp-a><cmp-b><cmp-d><d>cmp-d</d></cmp-d></cmp-b>' +
|
||||
'<cmp-c><c>cmp-c</c></cmp-c></cmp-a>');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should create nested components in the right order',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
tcb.overrideView(MainComp, new ViewMetadata({
|
||||
template: `<cmp-a1></cmp-a1><cmp-a2></cmp-a2>`,
|
||||
directives: [CmpA1, CmpA2],
|
||||
}))
|
||||
.createAsync(MainComp)
|
||||
.then((main) => {
|
||||
it('should create nested components in the right order', () => {
|
||||
TestBed.configureTestingModule(
|
||||
{declarations: [CmpA1, CmpA2, CmpB11, CmpB12, CmpB21, CmpB22]});
|
||||
TestBed.overrideComponent(MainComp, {set: {template: `<cmp-a1></cmp-a1><cmp-a2></cmp-a2>`}});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
main.detectChanges();
|
||||
expect(getDOM().getInnerHTML(main.debugElement.nativeElement))
|
||||
.toEqual(
|
||||
'<cmp-a1>a1<cmp-b11>b11</cmp-b11><cmp-b12>b12</cmp-b12></cmp-a1>' +
|
||||
'<cmp-a2>a2<cmp-b21>b21</cmp-b21><cmp-b22>b22</cmp-b22></cmp-a2>');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should project filled view containers into a view container',
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter],
|
||||
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
|
||||
tcb.overrideView(
|
||||
MainComp, new ViewMetadata({
|
||||
it('should project filled view containers into a view container', () => {
|
||||
TestBed.configureTestingModule(
|
||||
{declarations: [ConditionalContentComponent, ManualViewportDirective]});
|
||||
TestBed.overrideComponent(MainComp, {
|
||||
set: {
|
||||
template: '<conditional-content>' +
|
||||
'<div class="left">A</div>' +
|
||||
'<template manual class="left">B</template>' +
|
||||
'<div class="left">C</div>' +
|
||||
'<div>D</div>' +
|
||||
'</conditional-content>',
|
||||
directives: [ConditionalContentComponent, ManualViewportDirective]
|
||||
}))
|
||||
.createAsync(MainComp)
|
||||
.then((main) => {
|
||||
var conditionalComp =
|
||||
main.debugElement.query(By.directive(ConditionalContentComponent));
|
||||
'</conditional-content>'
|
||||
}
|
||||
});
|
||||
const main = TestBed.createComponent(MainComp);
|
||||
|
||||
var conditionalComp = main.debugElement.query(By.directive(ConditionalContentComponent));
|
||||
|
||||
var viewViewportDir =
|
||||
conditionalComp.queryAllNodes(By.directive(ManualViewportDirective))[0]
|
||||
.injector.get(ManualViewportDirective);
|
||||
conditionalComp.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
|
||||
ManualViewportDirective);
|
||||
|
||||
expect(main.debugElement.nativeElement).toHaveText('(, D)');
|
||||
expect(main.debugElement.nativeElement).toHaveText('(, D)');
|
||||
|
|
@ -656,8 +503,8 @@ export function main() {
|
|||
expect(main.debugElement.nativeElement).toHaveText('(AC, D)');
|
||||
|
||||
var contentViewportDir =
|
||||
conditionalComp.queryAllNodes(By.directive(ManualViewportDirective))[1]
|
||||
.injector.get(ManualViewportDirective);
|
||||
conditionalComp.queryAllNodes(By.directive(ManualViewportDirective))[1].injector.get(
|
||||
ManualViewportDirective);
|
||||
|
||||
contentViewportDir.show();
|
||||
|
||||
|
|
@ -667,20 +514,16 @@ export function main() {
|
|||
// the content viewport's views
|
||||
viewViewportDir.hide();
|
||||
expect(main.debugElement.nativeElement).toHaveText('(, D)');
|
||||
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
@Component({selector: 'main', template: '', directives: []})
|
||||
@Component({selector: 'main', template: ''})
|
||||
class MainComp {
|
||||
text: string = '';
|
||||
}
|
||||
|
||||
@Component({selector: 'other', template: '', directives: []})
|
||||
@Component({selector: 'other', template: ''})
|
||||
class OtherComp {
|
||||
text: string = '';
|
||||
}
|
||||
|
|
@ -689,7 +532,6 @@ class OtherComp {
|
|||
selector: 'simple',
|
||||
inputs: ['stringProp'],
|
||||
template: 'SIMPLE(<ng-content></ng-content>)',
|
||||
directives: []
|
||||
})
|
||||
class Simple {
|
||||
stringProp: string = '';
|
||||
|
|
@ -698,7 +540,6 @@ class Simple {
|
|||
@Component({
|
||||
selector: 'simple-native1',
|
||||
template: 'SIMPLE1(<content></content>)',
|
||||
directives: [],
|
||||
encapsulation: ViewEncapsulation.Native,
|
||||
styles: ['div {color: red}']
|
||||
})
|
||||
|
|
@ -708,7 +549,6 @@ class SimpleNative1 {
|
|||
@Component({
|
||||
selector: 'simple-native2',
|
||||
template: 'SIMPLE2(<content></content>)',
|
||||
directives: [],
|
||||
encapsulation: ViewEncapsulation.Native,
|
||||
styles: ['div {color: blue}']
|
||||
})
|
||||
|
|
@ -722,7 +562,6 @@ class Empty {
|
|||
@Component({
|
||||
selector: 'multiple-content-tags',
|
||||
template: '(<ng-content SELECT=".left"></ng-content>, <ng-content></ng-content>)',
|
||||
directives: []
|
||||
})
|
||||
class MultipleContentTagsComponent {
|
||||
}
|
||||
|
|
@ -744,7 +583,6 @@ class ProjectDirective {
|
|||
@Component({
|
||||
selector: 'outer-with-indirect-nested',
|
||||
template: 'OUTER(<simple><div><ng-content></ng-content></div></simple>)',
|
||||
directives: [Simple]
|
||||
})
|
||||
class OuterWithIndirectNestedComponent {
|
||||
}
|
||||
|
|
@ -753,7 +591,6 @@ class OuterWithIndirectNestedComponent {
|
|||
selector: 'outer',
|
||||
template:
|
||||
'OUTER(<inner><ng-content select=".left" class="left"></ng-content><ng-content></ng-content></inner>)',
|
||||
directives: [forwardRef(() => InnerComponent)]
|
||||
})
|
||||
class OuterComponent {
|
||||
}
|
||||
|
|
@ -762,7 +599,6 @@ class OuterComponent {
|
|||
selector: 'inner',
|
||||
template:
|
||||
'INNER(<innerinner><ng-content select=".left" class="left"></ng-content><ng-content></ng-content></innerinner>)',
|
||||
directives: [forwardRef(() => InnerInnerComponent)]
|
||||
})
|
||||
class InnerComponent {
|
||||
}
|
||||
|
|
@ -770,7 +606,6 @@ class InnerComponent {
|
|||
@Component({
|
||||
selector: 'innerinner',
|
||||
template: 'INNERINNER(<ng-content select=".left"></ng-content>,<ng-content></ng-content>)',
|
||||
directives: []
|
||||
})
|
||||
class InnerInnerComponent {
|
||||
}
|
||||
|
|
@ -779,7 +614,6 @@ class InnerInnerComponent {
|
|||
selector: 'conditional-content',
|
||||
template:
|
||||
'<div>(<div *manual><ng-content select=".left"></ng-content></div>, <ng-content></ng-content>)</div>',
|
||||
directives: [ManualViewportDirective]
|
||||
})
|
||||
class ConditionalContentComponent {
|
||||
}
|
||||
|
|
@ -788,7 +622,6 @@ class ConditionalContentComponent {
|
|||
selector: 'conditional-text',
|
||||
template:
|
||||
'MAIN(<template manual>FIRST(<template manual>SECOND(<ng-content></ng-content>)</template>)</template>)',
|
||||
directives: [ManualViewportDirective]
|
||||
})
|
||||
class ConditionalTextComponent {
|
||||
}
|
||||
|
|
@ -796,7 +629,6 @@ class ConditionalTextComponent {
|
|||
@Component({
|
||||
selector: 'tab',
|
||||
template: '<div><div *manual>TAB(<ng-content></ng-content>)</div></div>',
|
||||
directives: [ManualViewportDirective]
|
||||
})
|
||||
class Tab {
|
||||
}
|
||||
|
|
@ -805,7 +637,6 @@ class Tab {
|
|||
selector: 'tree2',
|
||||
inputs: ['depth'],
|
||||
template: 'TREE2({{depth}}:<tree *manual [depth]="depth+1"></tree>)',
|
||||
directives: [ManualViewportDirective, forwardRef(() => Tree)]
|
||||
})
|
||||
class Tree2 {
|
||||
depth = 0;
|
||||
|
|
@ -815,7 +646,6 @@ class Tree2 {
|
|||
selector: 'tree',
|
||||
inputs: ['depth'],
|
||||
template: 'TREE({{depth}}:<tree *manual [depth]="depth+1"></tree>)',
|
||||
directives: [ManualViewportDirective, Tree, forwardRef(() => Tree)]
|
||||
})
|
||||
class Tree {
|
||||
depth = 0;
|
||||
|
|
@ -870,7 +700,6 @@ class CmpB22 {
|
|||
@Component({
|
||||
selector: 'cmp-a1',
|
||||
template: `{{'a1'}}<cmp-b11></cmp-b11><cmp-b12></cmp-b12>`,
|
||||
directives: [CmpB11, CmpB12]
|
||||
})
|
||||
class CmpA1 {
|
||||
}
|
||||
|
|
@ -878,7 +707,6 @@ class CmpA1 {
|
|||
@Component({
|
||||
selector: 'cmp-a2',
|
||||
template: `{{'a2'}}<cmp-b21></cmp-b21><cmp-b22></cmp-b22>`,
|
||||
directives: [CmpB21, CmpB22]
|
||||
})
|
||||
class CmpA2 {
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue