From 82f30e09f02b82cdff34c257d2a19e79d00f7110 Mon Sep 17 00:00:00 2001 From: Victor Berchet Date: Thu, 8 Sep 2016 20:37:20 -0700 Subject: [PATCH] refactor(common): cleanup directive tests --- .../common/test/directives/ng_for_spec.ts | 332 ++++++++---------- .../common/test/directives/ng_if_spec.ts | 172 +++++---- .../common/test/directives/ng_plural_spec.ts | 101 +++--- .../common/test/directives/ng_style_spec.ts | 94 ++--- .../common/test/directives/ng_switch_spec.ts | 144 ++++---- .../directives/ng_template_outlet_spec.ts | 141 ++++---- .../test/directives/non_bindable_spec.ts | 29 +- 7 files changed, 475 insertions(+), 538 deletions(-) diff --git a/modules/@angular/common/test/directives/ng_for_spec.ts b/modules/@angular/common/test/directives/ng_for_spec.ts index 8064f5952f..b5c209b8c9 100644 --- a/modules/@angular/common/test/directives/ng_for_spec.ts +++ b/modules/@angular/common/test/directives/ng_for_spec.ts @@ -8,150 +8,135 @@ import {CommonModule} from '@angular/common'; import {Component, ContentChild, TemplateRef} from '@angular/core'; -import {TestBed, async} from '@angular/core/testing'; +import {ComponentFixture, TestBed, async} from '@angular/core/testing'; import {By} from '@angular/platform-browser/src/dom/debug/by'; import {expect} from '@angular/platform-browser/testing/matchers'; -import {ListWrapper} from '../../src/facade/collection'; - let thisArg: any; export function main() { describe('ngFor', () => { - const TEMPLATE = - '
{{item.toString()}};
'; + let fixture: ComponentFixture; + + function getComponent(): TestComponent { return fixture.componentInstance; } + + function detectChangesAndExpectText(text: string): void { + fixture.detectChanges(); + expect(fixture.nativeElement).toHaveText(text); + } + + afterEach(() => { fixture = null; }); beforeEach(() => { - TestBed.configureTestingModule( - {declarations: [TestComponent, ComponentUsingTestComponent], imports: [CommonModule]}); + TestBed.configureTestingModule({ + declarations: [ + TestComponent, + ComponentUsingTestComponent, + ], + imports: [CommonModule], + }); }); it('should reflect initial elements', async(() => { - TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('1;2;'); + fixture = createTestComponent(); + + detectChangesAndExpectText('1;2;'); })); it('should reflect added elements', async(() => { - TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent(); fixture.detectChanges(); - - (fixture.debugElement.componentInstance.items).push(3); - fixture.detectChanges(); - - expect(fixture.debugElement.nativeElement).toHaveText('1;2;3;'); + getComponent().items.push(3); + detectChangesAndExpectText('1;2;3;'); })); it('should reflect removed elements', async(() => { - TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent(); fixture.detectChanges(); - - ListWrapper.removeAt(fixture.debugElement.componentInstance.items, 1); - fixture.detectChanges(); - - expect(fixture.debugElement.nativeElement).toHaveText('1;'); + getComponent().items.splice(1, 1); + detectChangesAndExpectText('1;'); })); it('should reflect moved elements', async(() => { - TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent(); fixture.detectChanges(); - - ListWrapper.removeAt(fixture.debugElement.componentInstance.items, 0); - (fixture.debugElement.componentInstance.items).push(1); - fixture.detectChanges(); - - expect(fixture.debugElement.nativeElement).toHaveText('2;1;'); + getComponent().items.splice(0, 1); + getComponent().items.push(1); + detectChangesAndExpectText('2;1;'); })); it('should reflect a mix of all changes (additions/removals/moves)', async(() => { - TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.debugElement.componentInstance.items = [0, 1, 2, 3, 4, 5]; + fixture = createTestComponent(); + + getComponent().items = [0, 1, 2, 3, 4, 5]; fixture.detectChanges(); - fixture.debugElement.componentInstance.items = [6, 2, 7, 0, 4, 8]; - fixture.detectChanges(); + getComponent().items = [6, 2, 7, 0, 4, 8]; - expect(fixture.debugElement.nativeElement).toHaveText('6;2;7;0;4;8;'); + detectChangesAndExpectText('6;2;7;0;4;8;'); })); it('should iterate over an array of objects', async(() => { const template = '
  • {{item["name"]}};
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent(template); // INIT - fixture.debugElement.componentInstance.items = [{'name': 'misko'}, {'name': 'shyam'}]; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('misko;shyam;'); + getComponent().items = [{'name': 'misko'}, {'name': 'shyam'}]; + detectChangesAndExpectText('misko;shyam;'); // GROW - (fixture.debugElement.componentInstance.items).push({'name': 'adam'}); - fixture.detectChanges(); - - expect(fixture.debugElement.nativeElement).toHaveText('misko;shyam;adam;'); + getComponent().items.push({'name': 'adam'}); + detectChangesAndExpectText('misko;shyam;adam;'); // SHRINK - ListWrapper.removeAt(fixture.debugElement.componentInstance.items, 2); - ListWrapper.removeAt(fixture.debugElement.componentInstance.items, 0); - fixture.detectChanges(); - - expect(fixture.debugElement.nativeElement).toHaveText('shyam;'); + getComponent().items.splice(2, 1); + getComponent().items.splice(0, 1); + detectChangesAndExpectText('shyam;'); })); it('should gracefully handle nulls', async(() => { const template = '
  • {{item}};
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText(''); + fixture = createTestComponent(template); + + detectChangesAndExpectText(''); })); it('should gracefully handle ref changing to null and back', async(() => { - TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('1;2;'); + fixture = createTestComponent(); - fixture.debugElement.componentInstance.items = null; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText(''); + detectChangesAndExpectText('1;2;'); - fixture.debugElement.componentInstance.items = [1, 2, 3]; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('1;2;3;'); + getComponent().items = null; + detectChangesAndExpectText(''); + + getComponent().items = [1, 2, 3]; + detectChangesAndExpectText('1;2;3;'); })); it('should throw on non-iterable ref and suggest using an array', async(() => { - TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.debugElement.componentInstance.items = 'whaaa'; + fixture = createTestComponent(); + + getComponent().items = 'whaaa'; expect(() => fixture.detectChanges()) .toThrowError( /Cannot find a differ supporting object 'whaaa' of type 'string'. NgFor only supports binding to Iterables such as Arrays/); })); it('should throw on ref changing to string', async(() => { - TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('1;2;'); + fixture = createTestComponent(); - fixture.debugElement.componentInstance.items = 'whaaa'; + detectChangesAndExpectText('1;2;'); + + getComponent().items = 'whaaa'; expect(() => fixture.detectChanges()).toThrowError(); })); it('should works with duplicates', async(() => { - TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}}); - let fixture = TestBed.createComponent(TestComponent); - var a = new Foo(); - fixture.debugElement.componentInstance.items = [a, a]; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('foo;foo;'); + fixture = createTestComponent(); + + const a = new Foo(); + getComponent().items = [a, a]; + detectChangesAndExpectText('foo;foo;'); })); it('should repeat over nested arrays', async(() => { @@ -162,18 +147,13 @@ export function main() { '|' + '' + ''; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent(template); - fixture.debugElement.componentInstance.items = [['a', 'b'], ['c']]; - fixture.detectChanges(); - fixture.detectChanges(); - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('a-2;b-2;|c-1;|'); + getComponent().items = [['a', 'b'], ['c']]; + detectChangesAndExpectText('a-2;b-2;|c-1;|'); - fixture.debugElement.componentInstance.items = [['e'], ['f', 'g']]; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('e-1;|f-2;g-2;|'); + getComponent().items = [['e'], ['f', 'g']]; + detectChangesAndExpectText('e-1;|f-2;g-2;|'); })); it('should repeat over nested arrays with no intermediate element', async(() => { @@ -181,16 +161,13 @@ export function main() { '
' + '{{subitem}}-{{item.length}};' + '
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent(template); - fixture.debugElement.componentInstance.items = [['a', 'b'], ['c']]; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('a-2;b-2;c-1;'); + getComponent().items = [['a', 'b'], ['c']]; + detectChangesAndExpectText('a-2;b-2;c-1;'); - fixture.debugElement.componentInstance.items = [['e'], ['f', 'g']]; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('e-1;f-2;g-2;'); + getComponent().items = [['e'], ['f', 'g']]; + detectChangesAndExpectText('e-1;f-2;g-2;'); })); it('should repeat over nested ngIf that are the last node in the ngFor temlate', async(() => { @@ -198,97 +175,77 @@ export function main() { `
`; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent(template); - const el = fixture.debugElement.nativeElement; const items = [1]; - fixture.debugElement.componentInstance.items = items; - fixture.detectChanges(); - expect(el).toHaveText('0|even|'); + getComponent().items = items; + detectChangesAndExpectText('0|even|'); items.push(1); - fixture.detectChanges(); - expect(el).toHaveText('0|even|1|'); + detectChangesAndExpectText('0|even|1|'); items.push(1); - fixture.detectChanges(); - expect(el).toHaveText('0|even|1|2|even|'); + detectChangesAndExpectText('0|even|1|2|even|'); })); it('should display indices correctly', async(() => { const template = '
{{i.toString()}}
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent(template); - fixture.debugElement.componentInstance.items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('0123456789'); + getComponent().items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; + detectChangesAndExpectText('0123456789'); - fixture.debugElement.componentInstance.items = [1, 2, 6, 7, 4, 3, 5, 8, 9, 0]; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('0123456789'); + getComponent().items = [1, 2, 6, 7, 4, 3, 5, 8, 9, 0]; + detectChangesAndExpectText('0123456789'); })); it('should display first item correctly', async(() => { const template = '
{{isFirst.toString()}}
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent(template); - fixture.debugElement.componentInstance.items = [0, 1, 2]; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('truefalsefalse'); + getComponent().items = [0, 1, 2]; + detectChangesAndExpectText('truefalsefalse'); - fixture.debugElement.componentInstance.items = [2, 1]; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('truefalse'); + getComponent().items = [2, 1]; + detectChangesAndExpectText('truefalse'); })); it('should display last item correctly', async(() => { const template = '
{{isLast.toString()}}
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent(template); - fixture.debugElement.componentInstance.items = [0, 1, 2]; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('falsefalsetrue'); + getComponent().items = [0, 1, 2]; + detectChangesAndExpectText('falsefalsetrue'); - fixture.debugElement.componentInstance.items = [2, 1]; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('falsetrue'); + getComponent().items = [2, 1]; + detectChangesAndExpectText('falsetrue'); })); it('should display even items correctly', async(() => { const template = '
{{isEven.toString()}}
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent(template); - fixture.debugElement.componentInstance.items = [0, 1, 2]; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('truefalsetrue'); + getComponent().items = [0, 1, 2]; + detectChangesAndExpectText('truefalsetrue'); - fixture.debugElement.componentInstance.items = [2, 1]; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('truefalse'); + getComponent().items = [2, 1]; + detectChangesAndExpectText('truefalse'); })); it('should display odd items correctly', async(() => { const template = '
{{isOdd.toString()}}
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent(template); - fixture.debugElement.componentInstance.items = [0, 1, 2, 3]; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('falsetruefalsetrue'); + getComponent().items = [0, 1, 2, 3]; + detectChangesAndExpectText('falsetruefalsetrue'); - fixture.debugElement.componentInstance.items = [2, 1]; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('falsetrue'); + getComponent().items = [2, 1]; + detectChangesAndExpectText('falsetrue'); })); it('should allow to use a custom template', async(() => { @@ -298,7 +255,7 @@ export function main() { const cutTemplate = '
  • {{i}}: {{item}};
    • '; TestBed.overrideComponent(ComponentUsingTestComponent, {set: {template: cutTemplate}}); - let fixture = TestBed.createComponent(ComponentUsingTestComponent); + fixture = TestBed.createComponent(ComponentUsingTestComponent); const testComponent = fixture.debugElement.children[0]; testComponent.componentInstance.items = ['a', 'b', 'c']; @@ -313,7 +270,7 @@ export function main() { const cutTemplate = '
  • {{i}}: {{item}};
    • '; TestBed.overrideComponent(ComponentUsingTestComponent, {set: {template: cutTemplate}}); - let fixture = TestBed.createComponent(ComponentUsingTestComponent); + fixture = TestBed.createComponent(ComponentUsingTestComponent); const testComponent = fixture.debugElement.children[0]; testComponent.componentInstance.items = ['a', 'b', 'c']; @@ -328,7 +285,7 @@ export function main() { const cutTemplate = '
  • {{i}}: {{item}};
    • '; TestBed.overrideComponent(ComponentUsingTestComponent, {set: {template: cutTemplate}}); - let fixture = TestBed.createComponent(ComponentUsingTestComponent); + fixture = TestBed.createComponent(ComponentUsingTestComponent); const testComponent = fixture.debugElement.children[0]; testComponent.componentInstance.items = ['a', 'b', 'c']; @@ -340,12 +297,11 @@ export function main() { it('should set the context to the component instance', async(() => { const template = ``; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent(template); thisArg = null; fixture.detectChanges(); - expect(thisArg).toBe(fixture.debugElement.componentInstance); + expect(thisArg).toBe(getComponent()); })); it('should not replace tracked items', async(() => { @@ -353,62 +309,53 @@ export function main() { ``; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent(template); - var buildItemList = () => { - fixture.debugElement.componentInstance.items = [{'id': 'a'}]; + const buildItemList = () => { + getComponent().items = [{'id': 'a'}]; fixture.detectChanges(); return fixture.debugElement.queryAll(By.css('p'))[0]; }; - var firstP = buildItemList(); - var finalP = buildItemList(); + const firstP = buildItemList(); + const finalP = buildItemList(); expect(finalP.nativeElement).toBe(firstP.nativeElement); })); it('should update implicit local variable on view', async(() => { const template = `
    `; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent(template); - fixture.debugElement.componentInstance.items = [{'id': 'a', 'color': 'blue'}]; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('blue'); - fixture.debugElement.componentInstance.items = [{'id': 'a', 'color': 'red'}]; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('red'); + getComponent().items = [{'id': 'a', 'color': 'blue'}]; + detectChangesAndExpectText('blue'); + + getComponent().items = [{'id': 'a', 'color': 'red'}]; + detectChangesAndExpectText('red'); })); it('should move items around and keep them updated ', async(() => { const template = `
    `; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent(template); - fixture.debugElement.componentInstance.items = - [{'id': 'a', 'color': 'blue'}, {'id': 'b', 'color': 'yellow'}]; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('blueyellow'); - fixture.debugElement.componentInstance.items = - [{'id': 'b', 'color': 'orange'}, {'id': 'a', 'color': 'red'}]; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('orangered'); + getComponent().items = [{'id': 'a', 'color': 'blue'}, {'id': 'b', 'color': 'yellow'}]; + detectChangesAndExpectText('blueyellow'); + + getComponent().items = [{'id': 'b', 'color': 'orange'}, {'id': 'a', 'color': 'red'}]; + detectChangesAndExpectText('orangered'); })); it('should handle added and removed items properly when tracking by index', async(() => { const template = `
    `; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent(template); - fixture.debugElement.componentInstance.items = ['a', 'b', 'c', 'd']; + getComponent().items = ['a', 'b', 'c', 'd']; fixture.detectChanges(); - fixture.debugElement.componentInstance.items = ['e', 'f', 'g', 'h']; + getComponent().items = ['e', 'f', 'g', 'h']; fixture.detectChanges(); - fixture.debugElement.componentInstance.items = ['e', 'f', 'h']; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('efh'); + getComponent().items = ['e', 'f', 'h']; + detectChangesAndExpectText('efh'); })); }); }); @@ -421,8 +368,7 @@ class Foo { @Component({selector: 'test-cmp', template: ''}) class TestComponent { @ContentChild(TemplateRef) contentTpl: TemplateRef; - items: any; - constructor() { this.items = [1, 2]; } + items: any[] = [1, 2]; trackById(index: number, item: any): string { return item['id']; } trackByIndex(index: number, item: any): number { return index; } trackByContext(): void { thisArg = this; } @@ -430,6 +376,12 @@ class TestComponent { @Component({selector: 'outer-cmp', template: ''}) class ComponentUsingTestComponent { - items: any; - constructor() { this.items = [1, 2]; } + items: any = [1, 2]; +} + +const TEMPLATE = '
    {{item.toString()}};
    '; + +function createTestComponent(template: string = TEMPLATE): ComponentFixture { + return TestBed.overrideComponent(TestComponent, {set: {template: template}}) + .createComponent(TestComponent); } diff --git a/modules/@angular/common/test/directives/ng_if_spec.ts b/modules/@angular/common/test/directives/ng_if_spec.ts index 9df2a71dc9..39c30a6422 100644 --- a/modules/@angular/common/test/directives/ng_if_spec.ts +++ b/modules/@angular/common/test/directives/ng_if_spec.ts @@ -8,99 +8,94 @@ import {CommonModule} from '@angular/common'; import {Component} from '@angular/core'; -import {TestBed, async} from '@angular/core/testing'; +import {ComponentFixture, TestBed, async} from '@angular/core/testing'; import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter'; import {expect} from '@angular/platform-browser/testing/matchers'; export function main() { describe('ngIf directive', () => { + let fixture: ComponentFixture; + + function getComponent(): TestComponent { return fixture.componentInstance; } + + afterEach(() => { fixture = null; }); beforeEach(() => { - TestBed.configureTestingModule({declarations: [TestComponent], imports: [CommonModule]}); + TestBed.configureTestingModule({ + declarations: [TestComponent], + imports: [CommonModule], + }); }); it('should work in a template attribute', async(() => { const template = '
    hello
    '; + fixture = createTestComponent(template); - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); fixture.detectChanges(); - expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'span').length) - .toEqual(1); - expect(fixture.debugElement.nativeElement).toHaveText('hello'); + expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1); + expect(fixture.nativeElement).toHaveText('hello'); })); it('should work in a template element', async(() => { const template = '
    '; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent(template); fixture.detectChanges(); - expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'span').length) - .toEqual(1); - expect(fixture.debugElement.nativeElement).toHaveText('hello2'); + expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1); + expect(fixture.nativeElement).toHaveText('hello2'); })); it('should toggle node when condition changes', async(() => { const template = '
    hello
    '; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.debugElement.componentInstance.booleanCondition = false; + fixture = createTestComponent(template); + getComponent().booleanCondition = false; fixture.detectChanges(); - expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'span').length) - .toEqual(0); - expect(fixture.debugElement.nativeElement).toHaveText(''); + expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(0); + expect(fixture.nativeElement).toHaveText(''); - fixture.debugElement.componentInstance.booleanCondition = true; + getComponent().booleanCondition = true; fixture.detectChanges(); - expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'span').length) - .toEqual(1); - expect(fixture.debugElement.nativeElement).toHaveText('hello'); + expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1); + expect(fixture.nativeElement).toHaveText('hello'); - fixture.debugElement.componentInstance.booleanCondition = false; + getComponent().booleanCondition = false; fixture.detectChanges(); - expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'span').length) - .toEqual(0); - expect(fixture.debugElement.nativeElement).toHaveText(''); + expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(0); + expect(fixture.nativeElement).toHaveText(''); })); it('should handle nested if correctly', async(() => { const template = '
    '; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.debugElement.componentInstance.booleanCondition = false; - fixture.detectChanges(); - expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'span').length) - .toEqual(0); - expect(fixture.debugElement.nativeElement).toHaveText(''); + fixture = createTestComponent(template); - fixture.debugElement.componentInstance.booleanCondition = true; + getComponent().booleanCondition = false; fixture.detectChanges(); - expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'span').length) - .toEqual(1); - expect(fixture.debugElement.nativeElement).toHaveText('hello'); + expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(0); + expect(fixture.nativeElement).toHaveText(''); - fixture.debugElement.componentInstance.nestedBooleanCondition = false; + getComponent().booleanCondition = true; fixture.detectChanges(); - expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'span').length) - .toEqual(0); - expect(fixture.debugElement.nativeElement).toHaveText(''); + expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1); + expect(fixture.nativeElement).toHaveText('hello'); - fixture.debugElement.componentInstance.nestedBooleanCondition = true; + getComponent().nestedBooleanCondition = false; fixture.detectChanges(); - expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'span').length) - .toEqual(1); - expect(fixture.debugElement.nativeElement).toHaveText('hello'); + expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(0); + expect(fixture.nativeElement).toHaveText(''); - fixture.debugElement.componentInstance.booleanCondition = false; + getComponent().nestedBooleanCondition = true; fixture.detectChanges(); - expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'span').length) - .toEqual(0); - expect(fixture.debugElement.nativeElement).toHaveText(''); + expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1); + expect(fixture.nativeElement).toHaveText('hello'); + + getComponent().booleanCondition = false; + fixture.detectChanges(); + expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(0); + expect(fixture.nativeElement).toHaveText(''); })); it('should update several nodes with if', async(() => { @@ -110,59 +105,52 @@ export function main() { 'helloFunction' + ''; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent(template); + fixture.detectChanges(); - expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'span').length) - .toEqual(3); - expect(getDOM().getText(fixture.debugElement.nativeElement)) + expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(3); + expect(getDOM().getText(fixture.nativeElement)) .toEqual('helloNumberhelloStringhelloFunction'); - fixture.debugElement.componentInstance.numberCondition = 0; + getComponent().numberCondition = 0; fixture.detectChanges(); - expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'span').length) - .toEqual(1); - expect(fixture.debugElement.nativeElement).toHaveText('helloString'); + expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1); + expect(fixture.nativeElement).toHaveText('helloString'); - fixture.debugElement.componentInstance.numberCondition = 1; - fixture.debugElement.componentInstance.stringCondition = 'bar'; + getComponent().numberCondition = 1; + getComponent().stringCondition = 'bar'; fixture.detectChanges(); - expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'span').length) - .toEqual(1); - expect(fixture.debugElement.nativeElement).toHaveText('helloNumber'); + expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1); + expect(fixture.nativeElement).toHaveText('helloNumber'); })); it('should not add the element twice if the condition goes from true to true (JS)', async(() => { const template = '
    hello
    '; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); - expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'span').length) - .toEqual(1); - expect(fixture.debugElement.nativeElement).toHaveText('hello'); + fixture = createTestComponent(template); - fixture.debugElement.componentInstance.numberCondition = 2; fixture.detectChanges(); - expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'span').length) - .toEqual(1); - expect(fixture.debugElement.nativeElement).toHaveText('hello'); + expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1); + expect(fixture.nativeElement).toHaveText('hello'); + + getComponent().numberCondition = 2; + fixture.detectChanges(); + expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1); + expect(fixture.nativeElement).toHaveText('hello'); })); it('should not recreate the element if the condition goes from true to true (JS)', async(() => { const template = '
    hello
    '; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); - getDOM().addClass( - getDOM().querySelector(fixture.debugElement.nativeElement, 'span'), 'foo'); + fixture = createTestComponent(template); - fixture.debugElement.componentInstance.numberCondition = 2; fixture.detectChanges(); - expect(getDOM().hasClass( - getDOM().querySelector(fixture.debugElement.nativeElement, 'span'), 'foo')) + getDOM().addClass(getDOM().querySelector(fixture.nativeElement, 'span'), 'foo'); + + getComponent().numberCondition = 2; + fixture.detectChanges(); + expect(getDOM().hasClass(getDOM().querySelector(fixture.nativeElement, 'span'), 'foo')) .toBe(true); })); }); @@ -170,16 +158,14 @@ export function main() { @Component({selector: 'test-cmp', template: ''}) class TestComponent { - booleanCondition: boolean; - nestedBooleanCondition: boolean; - numberCondition: number; - stringCondition: string; - functionCondition: Function; - constructor() { - this.booleanCondition = true; - this.nestedBooleanCondition = true; - this.numberCondition = 1; - this.stringCondition = 'foo'; - this.functionCondition = function(s: any, n: any): boolean { return s == 'foo' && n == 1; }; - } + booleanCondition: boolean = true; + nestedBooleanCondition: boolean = true; + numberCondition: number = 1; + stringCondition: string = 'foo'; + functionCondition: Function = (s: any, n: any): boolean => s == 'foo' && n == 1; +} + +function createTestComponent(template: string): ComponentFixture { + return TestBed.overrideComponent(TestComponent, {set: {template: template}}) + .createComponent(TestComponent); } diff --git a/modules/@angular/common/test/directives/ng_plural_spec.ts b/modules/@angular/common/test/directives/ng_plural_spec.ts index c827b784c9..65fb9c8fde 100644 --- a/modules/@angular/common/test/directives/ng_plural_spec.ts +++ b/modules/@angular/common/test/directives/ng_plural_spec.ts @@ -8,11 +8,21 @@ import {CommonModule, NgLocalization} from '@angular/common'; import {Component, Injectable} from '@angular/core'; -import {TestBed, async} from '@angular/core/testing'; +import {ComponentFixture, TestBed, async} from '@angular/core/testing'; import {expect} from '@angular/platform-browser/testing/matchers'; export function main() { describe('switch', () => { + let fixture: ComponentFixture; + + function getComponent(): TestComponent { return fixture.componentInstance; } + + function detectChangesAndExpectText(text: string): void { + fixture.detectChanges(); + expect(fixture.nativeElement).toHaveText(text); + } + + afterEach(() => { fixture = null; }); beforeEach(() => { TestBed.configureTestingModule({ @@ -23,104 +33,95 @@ export function main() { }); it('should display the template according to the exact value', async(() => { - var template = '
    ' + + const template = '
    ' + '
      ' + '' + '' + '
    '; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.debugElement.componentInstance.switchValue = 0; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('you have no messages.'); + fixture = createTestComponent(template); - fixture.debugElement.componentInstance.switchValue = 1; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('you have one message.'); + getComponent().switchValue = 0; + detectChangesAndExpectText('you have no messages.'); + + getComponent().switchValue = 1; + detectChangesAndExpectText('you have one message.'); })); // https://github.com/angular/angular/issues/9868 // https://github.com/angular/angular/issues/9882 it('should not throw when ngPluralCase contains expressions', async(() => { - var template = '
    ' + + const template = '
    ' + '
      ' + '' + '
    '; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.debugElement.componentInstance.switchValue = 0; + fixture = createTestComponent(template); + + getComponent().switchValue = 0; expect(() => fixture.detectChanges()).not.toThrow(); })); it('should be applicable to elements', async(() => { - var template = '
    ' + + const template = '
    ' + '' + '' + '' + '
    '; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.debugElement.componentInstance.switchValue = 0; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('you have no messages.'); + fixture = createTestComponent(template); - fixture.debugElement.componentInstance.switchValue = 1; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('you have one message.'); + getComponent().switchValue = 0; + detectChangesAndExpectText('you have no messages.'); + + getComponent().switchValue = 1; + detectChangesAndExpectText('you have one message.'); })); it('should display the template according to the category', async(() => { - var template = '
    ' + + const template = '
    ' + '
      ' + '' + '' + '
    '; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.debugElement.componentInstance.switchValue = 2; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('you have a few messages.'); + fixture = createTestComponent(template); - fixture.debugElement.componentInstance.switchValue = 8; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('you have many messages.'); + getComponent().switchValue = 2; + detectChangesAndExpectText('you have a few messages.'); + + getComponent().switchValue = 8; + detectChangesAndExpectText('you have many messages.'); })); it('should default to other when no matches are found', async(() => { - var template = '
    ' + + const template = '
    ' + '
      ' + '' + '' + '
    '; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.debugElement.componentInstance.switchValue = 100; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('default message.'); + fixture = createTestComponent(template); + + getComponent().switchValue = 100; + detectChangesAndExpectText('default message.'); })); it('should prioritize value matches over category matches', async(() => { - var template = '
    ' + + const template = '
    ' + '
      ' + '' + '' + '
    '; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.debugElement.componentInstance.switchValue = 2; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('you have two messages.'); + fixture = createTestComponent(template); - fixture.debugElement.componentInstance.switchValue = 3; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('you have a few messages.'); + getComponent().switchValue = 2; + detectChangesAndExpectText('you have two messages.'); + + getComponent().switchValue = 3; + detectChangesAndExpectText('you have a few messages.'); })); }); } @@ -131,6 +132,7 @@ class TestLocalization extends NgLocalization { if (value > 1 && value < 4) { return 'few'; } + if (value >= 4 && value < 10) { return 'many'; } @@ -143,3 +145,8 @@ class TestLocalization extends NgLocalization { class TestComponent { switchValue: number = null; } + +function createTestComponent(template: string): ComponentFixture { + return TestBed.overrideComponent(TestComponent, {set: {template: template}}) + .createComponent(TestComponent); +} diff --git a/modules/@angular/common/test/directives/ng_style_spec.ts b/modules/@angular/common/test/directives/ng_style_spec.ts index 375b60dd9f..3c1329acdc 100644 --- a/modules/@angular/common/test/directives/ng_style_spec.ts +++ b/modules/@angular/common/test/directives/ng_style_spec.ts @@ -10,69 +10,70 @@ import {CommonModule} from '@angular/common'; import {Component} from '@angular/core'; import {ComponentFixture, TestBed, async} from '@angular/core/testing'; -function expectNativeEl(fixture: ComponentFixture) { - return expect(fixture.debugElement.children[0].nativeElement); -} - export function main() { - describe('binding to CSS styles', () => { + describe('NgStyle', () => { + let fixture: ComponentFixture; + + function getComponent(): TestComponent { return fixture.componentInstance; } + + function expectNativeEl(fixture: ComponentFixture): any { + return expect(fixture.debugElement.children[0].nativeElement); + } + + afterEach(() => { fixture = null; }); beforeEach(() => { TestBed.configureTestingModule({declarations: [TestComponent], imports: [CommonModule]}); }); it('should add styles specified in an object literal', async(() => { - var template = `
    `; + const template = `
    `; + fixture = createTestComponent(template); - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); fixture.detectChanges(); expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'}); })); it('should add and change styles specified in an object expression', async(() => { - var template = `
    `; + const template = `
    `; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - var expr: Map; + fixture = createTestComponent(template); + let expr: {[k: string]: string}; - fixture.debugElement.componentInstance.expr = {'max-width': '40px'}; + getComponent().expr = {'max-width': '40px'}; fixture.detectChanges(); expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'}); - expr = fixture.debugElement.componentInstance.expr; - (expr as any)['max-width'] = '30%'; + expr = getComponent().expr; + expr['max-width'] = '30%'; fixture.detectChanges(); expectNativeEl(fixture).toHaveCssStyle({'max-width': '30%'}); })); it('should add and remove styles specified using style.unit notation', async(() => { - var template = `
    `; + const template = `
    `; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent(template); - fixture.debugElement.componentInstance.expr = '40'; + getComponent().expr = '40'; fixture.detectChanges(); expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'}); - fixture.debugElement.componentInstance.expr = null; + getComponent().expr = null; fixture.detectChanges(); expectNativeEl(fixture).not.toHaveCssStyle('max-width'); })); it('should update styles using style.unit notation when unit changes', async(() => { - var template = `
    `; + const template = `
    `; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent(template); - fixture.debugElement.componentInstance.expr = {'max-width.px': '40'}; + getComponent().expr = {'max-width.px': '40'}; fixture.detectChanges(); expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'}); - fixture.debugElement.componentInstance.expr = {'max-width.em': '40'}; + getComponent().expr = {'max-width.em': '40'}; fixture.detectChanges(); expectNativeEl(fixture).toHaveCssStyle({'max-width': '40em'}); })); @@ -81,9 +82,9 @@ export function main() { it('should change styles specified in an object expression', async(() => { const template = `
    `; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.debugElement.componentInstance.expr = { + fixture = createTestComponent(template); + + getComponent().expr = { // height, width order is important here height: '10px', width: '10px' @@ -92,7 +93,7 @@ export function main() { fixture.detectChanges(); expectNativeEl(fixture).toHaveCssStyle({'height': '10px', 'width': '10px'}); - fixture.debugElement.componentInstance.expr = { + getComponent().expr = { // width, height order is important here width: '5px', height: '5px', @@ -103,29 +104,29 @@ export function main() { })); it('should remove styles when deleting a key in an object expression', async(() => { - var template = `
    `; + const template = `
    `; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.debugElement.componentInstance.expr = {'max-width': '40px'}; + fixture = createTestComponent(template); + + getComponent().expr = {'max-width': '40px'}; fixture.detectChanges(); expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'}); - delete fixture.debugElement.componentInstance.expr['max-width']; + delete getComponent().expr['max-width']; fixture.detectChanges(); expectNativeEl(fixture).not.toHaveCssStyle('max-width'); })); it('should co-operate with the style attribute', async(() => { - var template = `
    `; + const template = `
    `; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.debugElement.componentInstance.expr = {'max-width': '40px'}; + fixture = createTestComponent(template); + + getComponent().expr = {'max-width': '40px'}; fixture.detectChanges(); expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px', 'font-size': '12px'}); - delete fixture.debugElement.componentInstance.expr['max-width']; + delete getComponent().expr['max-width']; fixture.detectChanges(); expectNativeEl(fixture).not.toHaveCssStyle('max-width'); expectNativeEl(fixture).toHaveCssStyle({'font-size': '12px'}); @@ -133,15 +134,15 @@ export function main() { it('should co-operate with the style.[styleName]="expr" special-case in the compiler', async(() => { - var template = `
    `; + const template = `
    `; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.debugElement.componentInstance.expr = {'max-width': '40px'}; + fixture = createTestComponent(template); + + getComponent().expr = {'max-width': '40px'}; fixture.detectChanges(); expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px', 'font-size': '12px'}); - delete fixture.debugElement.componentInstance.expr['max-width']; + delete getComponent().expr['max-width']; fixture.detectChanges(); expectNativeEl(fixture).not.toHaveCssStyle('max-width'); expectNativeEl(fixture).toHaveCssStyle({'font-size': '12px'}); @@ -153,3 +154,8 @@ export function main() { class TestComponent { expr: any; } + +function createTestComponent(template: string): ComponentFixture { + return TestBed.overrideComponent(TestComponent, {set: {template: template}}) + .createComponent(TestComponent); +} diff --git a/modules/@angular/common/test/directives/ng_switch_spec.ts b/modules/@angular/common/test/directives/ng_switch_spec.ts index 38b1455ede..978a367f16 100644 --- a/modules/@angular/common/test/directives/ng_switch_spec.ts +++ b/modules/@angular/common/test/directives/ng_switch_spec.ts @@ -8,83 +8,86 @@ import {CommonModule} from '@angular/common'; import {Component} from '@angular/core'; -import {TestBed, async} from '@angular/core/testing'; +import {ComponentFixture, TestBed, async} from '@angular/core/testing'; import {expect} from '@angular/platform-browser/testing/matchers'; export function main() { - describe('switch', () => { + describe('NgSwitch', () => { + let fixture: ComponentFixture; + + function getComponent(): TestComponent { return fixture.componentInstance; } + + function detectChangesAndExpectText(text: string): void { + fixture.detectChanges(); + expect(fixture.nativeElement).toHaveText(text); + } + + afterEach(() => { fixture = null; }); beforeEach(() => { - TestBed.configureTestingModule({declarations: [TestComponent], imports: [CommonModule]}); + TestBed.configureTestingModule({ + declarations: [TestComponent], + imports: [CommonModule], + }); }); describe('switch value changes', () => { it('should switch amongst when values', async(() => { - var template = '
    ' + + const template = '
    ' + '
      ' + '' + '' + '
    '; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText(''); + fixture = createTestComponent(template); - fixture.debugElement.componentInstance.switchValue = 'a'; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('when a'); + detectChangesAndExpectText(''); - fixture.debugElement.componentInstance.switchValue = 'b'; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('when b'); + getComponent().switchValue = 'a'; + detectChangesAndExpectText('when a'); + + getComponent().switchValue = 'b'; + detectChangesAndExpectText('when b'); })); // TODO(robwormald): deprecate and remove it('should switch amongst when values using switchCase', async(() => { - var template = '
    ' + + const template = '
    ' + '
      ' + '' + '' + '
    '; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText(''); + fixture = createTestComponent(template); - fixture.debugElement.componentInstance.switchValue = 'a'; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('when a'); + detectChangesAndExpectText(''); - fixture.debugElement.componentInstance.switchValue = 'b'; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('when b'); + getComponent().switchValue = 'a'; + detectChangesAndExpectText('when a'); + + getComponent().switchValue = 'b'; + detectChangesAndExpectText('when b'); })); it('should switch amongst when values with fallback to default', async(() => { - var template = '
    ' + + const template = '
    ' + '
      ' + '
    • when a
      • ' + '
    • when default
      • ' + '
    '; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('when default'); + fixture = createTestComponent(template); + detectChangesAndExpectText('when default'); - fixture.debugElement.componentInstance.switchValue = 'a'; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('when a'); + getComponent().switchValue = 'a'; + detectChangesAndExpectText('when a'); - fixture.debugElement.componentInstance.switchValue = 'b'; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('when default'); + getComponent().switchValue = 'b'; + detectChangesAndExpectText('when default'); })); it('should support multiple whens with the same value', async(() => { - var template = '
    ' + + const template = '
    ' + '
      ' + '' + '' + @@ -94,53 +97,43 @@ export function main() { '' + '
    '; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('when default1;when default2;'); + fixture = createTestComponent(template); + detectChangesAndExpectText('when default1;when default2;'); - fixture.debugElement.componentInstance.switchValue = 'a'; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('when a1;when a2;'); + getComponent().switchValue = 'a'; + detectChangesAndExpectText('when a1;when a2;'); - fixture.debugElement.componentInstance.switchValue = 'b'; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('when b1;when b2;'); + getComponent().switchValue = 'b'; + detectChangesAndExpectText('when b1;when b2;'); })); }); describe('when values changes', () => { it('should switch amongst when values', async(() => { - var template = '
    ' + + const template = '
    ' + '
      ' + '' + '' + '' + '
    '; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.debugElement.componentInstance.when1 = 'a'; - fixture.debugElement.componentInstance.when2 = 'b'; - fixture.debugElement.componentInstance.switchValue = 'a'; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('when 1;'); + fixture = createTestComponent(template); + getComponent().when1 = 'a'; + getComponent().when2 = 'b'; + getComponent().switchValue = 'a'; + detectChangesAndExpectText('when 1;'); - fixture.debugElement.componentInstance.switchValue = 'b'; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('when 2;'); + getComponent().switchValue = 'b'; + detectChangesAndExpectText('when 2;'); - fixture.debugElement.componentInstance.switchValue = 'c'; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('when default;'); + getComponent().switchValue = 'c'; + detectChangesAndExpectText('when default;'); - fixture.debugElement.componentInstance.when1 = 'c'; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('when 1;'); + getComponent().when1 = 'c'; + detectChangesAndExpectText('when 1;'); - fixture.debugElement.componentInstance.when1 = 'd'; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('when default;'); + getComponent().when1 = 'd'; + detectChangesAndExpectText('when default;'); })); }); }); @@ -148,13 +141,12 @@ export function main() { @Component({selector: 'test-cmp', template: ''}) class TestComponent { - switchValue: any; - when1: any; - when2: any; - - constructor() { - this.switchValue = null; - this.when1 = null; - this.when2 = null; - } + switchValue: any = null; + when1: any = null; + when2: any = null; +} + +function createTestComponent(template: string): ComponentFixture { + return TestBed.overrideComponent(TestComponent, {set: {template: template}}) + .createComponent(TestComponent); } diff --git a/modules/@angular/common/test/directives/ng_template_outlet_spec.ts b/modules/@angular/common/test/directives/ng_template_outlet_spec.ts index a5a8f17d25..ac1a17b816 100644 --- a/modules/@angular/common/test/directives/ng_template_outlet_spec.ts +++ b/modules/@angular/common/test/directives/ng_template_outlet_spec.ts @@ -8,155 +8,140 @@ import {CommonModule} from '@angular/common'; import {Component, ContentChildren, Directive, NO_ERRORS_SCHEMA, QueryList, TemplateRef} from '@angular/core'; -import {TestBed, async} from '@angular/core/testing'; +import {ComponentFixture, TestBed, async} from '@angular/core/testing'; import {expect} from '@angular/platform-browser/testing/matchers'; export function main() { - describe('insert', () => { + describe('NgTemplateOutlet', () => { + let fixture: ComponentFixture; + + 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; }); beforeEach(() => { - TestBed.configureTestingModule( - {declarations: [TestComponent, CaptureTplRefs], imports: [CommonModule]}); + TestBed.configureTestingModule({ + declarations: [ + TestComponent, + CaptureTplRefs, + ], + imports: [CommonModule], + }); }); it('should do nothing if templateRef is null', async(() => { const template = ``; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent(template); - fixture.detectChanges(); - expect(fixture.nativeElement).toHaveText(''); + detectChangesAndExpectText(''); })); it('should insert content specified by TemplateRef', async(() => { const template = ``; - TestBed.overrideComponent(TestComponent, {set: {template: template}}) - .configureTestingModule({schemas: [NO_ERRORS_SCHEMA]}); + fixture = createTestComponent(template); - let fixture = TestBed.createComponent(TestComponent); + detectChangesAndExpectText(''); - fixture.detectChanges(); - expect(fixture.nativeElement).toHaveText(''); + const refs = fixture.debugElement.children[0].references['refs']; - var refs = fixture.debugElement.children[0].references['refs']; - - fixture.componentInstance.currentTplRef = refs.tplRefs.first; - fixture.detectChanges(); - expect(fixture.nativeElement).toHaveText('foo'); + setTplRef(refs.tplRefs.first); + detectChangesAndExpectText('foo'); })); it('should clear content if TemplateRef becomes null', async(() => { const template = ``; - TestBed.overrideComponent(TestComponent, {set: {template: template}}) - .configureTestingModule({schemas: [NO_ERRORS_SCHEMA]}); - let fixture = TestBed.createComponent(TestComponent); - + fixture = createTestComponent(template); fixture.detectChanges(); - var refs = fixture.debugElement.children[0].references['refs']; + const refs = fixture.debugElement.children[0].references['refs']; - fixture.componentInstance.currentTplRef = refs.tplRefs.first; - fixture.detectChanges(); - expect(fixture.nativeElement).toHaveText('foo'); + setTplRef(refs.tplRefs.first); + detectChangesAndExpectText('foo'); - fixture.componentInstance.currentTplRef = null; - fixture.detectChanges(); - expect(fixture.nativeElement).toHaveText(''); + setTplRef(null); + detectChangesAndExpectText(''); })); it('should swap content if TemplateRef changes', async(() => { const template = ``; - TestBed.overrideComponent(TestComponent, {set: {template: template}}) - .configureTestingModule({schemas: [NO_ERRORS_SCHEMA]}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent(template); fixture.detectChanges(); - var refs = fixture.debugElement.children[0].references['refs']; + const refs = fixture.debugElement.children[0].references['refs']; - fixture.componentInstance.currentTplRef = refs.tplRefs.first; - fixture.detectChanges(); - expect(fixture.nativeElement).toHaveText('foo'); + setTplRef(refs.tplRefs.first); + detectChangesAndExpectText('foo'); - fixture.componentInstance.currentTplRef = refs.tplRefs.last; - fixture.detectChanges(); - expect(fixture.nativeElement).toHaveText('bar'); + setTplRef(refs.tplRefs.last); + detectChangesAndExpectText('bar'); })); it('should display template if context is null', async(() => { const template = ``; - TestBed.overrideComponent(TestComponent, {set: {template: template}}) - .configureTestingModule({schemas: [NO_ERRORS_SCHEMA]}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent(template); + detectChangesAndExpectText(''); - fixture.detectChanges(); - expect(fixture.nativeElement).toHaveText(''); + const refs = fixture.debugElement.children[0].references['refs']; - var refs = fixture.debugElement.children[0].references['refs']; - - fixture.componentInstance.currentTplRef = refs.tplRefs.first; - fixture.detectChanges(); - expect(fixture.nativeElement).toHaveText('foo'); + setTplRef(refs.tplRefs.first); + detectChangesAndExpectText('foo'); })); it('should reflect initial context and changes', async(() => { const template = ``; - TestBed.overrideComponent(TestComponent, {set: {template: template}}) - .configureTestingModule({schemas: [NO_ERRORS_SCHEMA]}); - let fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); - - var refs = fixture.debugElement.children[0].references['refs']; - fixture.componentInstance.currentTplRef = refs.tplRefs.first; + fixture = createTestComponent(template); fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('bar'); + + const refs = fixture.debugElement.children[0].references['refs']; + setTplRef(refs.tplRefs.first); + + detectChangesAndExpectText('bar'); fixture.componentInstance.context.foo = 'alter-bar'; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('alter-bar'); + detectChangesAndExpectText('alter-bar'); })); it('should reflect user defined $implicit property in the context', async(() => { const template = ``; - TestBed.overrideComponent(TestComponent, {set: {template: template}}) - .configureTestingModule({schemas: [NO_ERRORS_SCHEMA]}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent(template); + fixture.detectChanges(); - var refs = fixture.debugElement.children[0].references['refs']; - fixture.componentInstance.currentTplRef = refs.tplRefs.first; + const refs = fixture.debugElement.children[0].references['refs']; + setTplRef(refs.tplRefs.first); fixture.componentInstance.context = {$implicit: fixture.componentInstance.context}; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('bar'); + detectChangesAndExpectText('bar'); })); it('should reflect context re-binding', async(() => { const template = ``; - TestBed.overrideComponent(TestComponent, {set: {template: template}}) - .configureTestingModule({schemas: [NO_ERRORS_SCHEMA]}); + fixture = createTestComponent(template); - let fixture = TestBed.createComponent(TestComponent); fixture.detectChanges(); - var refs = fixture.debugElement.children[0].references['refs']; - fixture.componentInstance.currentTplRef = refs.tplRefs.first; + const refs = fixture.debugElement.children[0].references['refs']; + setTplRef(refs.tplRefs.first); fixture.componentInstance.context = {shawshank: 'brooks'}; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('brooks'); + detectChangesAndExpectText('brooks'); fixture.componentInstance.context = {shawshank: 'was here'}; - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('was here'); + detectChangesAndExpectText('was here'); })); }); } @@ -172,3 +157,9 @@ class TestComponent { currentTplRef: TemplateRef; context: any = {foo: 'bar'}; } + +function createTestComponent(template: string): ComponentFixture { + return TestBed.overrideComponent(TestComponent, {set: {template: template}}) + .configureTestingModule({schemas: [NO_ERRORS_SCHEMA]}) + .createComponent(TestComponent); +} \ No newline at end of file diff --git a/modules/@angular/common/test/directives/non_bindable_spec.ts b/modules/@angular/common/test/directives/non_bindable_spec.ts index ba925aeef9..77da487371 100644 --- a/modules/@angular/common/test/directives/non_bindable_spec.ts +++ b/modules/@angular/common/test/directives/non_bindable_spec.ts @@ -8,7 +8,7 @@ import {Component, Directive} from '@angular/core'; import {ElementRef} from '@angular/core/src/linker/element_ref'; -import {TestBed, async} from '@angular/core/testing'; +import {ComponentFixture, TestBed, async} from '@angular/core/testing'; import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter'; import {expect} from '@angular/platform-browser/testing/matchers'; @@ -22,31 +22,29 @@ export function main() { }); it('should not interpolate children', async(() => { - var template = '
    {{text}}{{text}}
    '; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + const template = '
    {{text}}{{text}}
    '; + const fixture = createTestComponent(template); + fixture.detectChanges(); - expect(fixture.debugElement.nativeElement).toHaveText('foo{{text}}'); + expect(fixture.nativeElement).toHaveText('foo{{text}}'); })); it('should ignore directives on child nodes', async(() => { - var template = '
    {{text}}
    '; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + const template = '
    {{text}}
    '; + const fixture = createTestComponent(template); fixture.detectChanges(); // We must use getDOM().querySelector instead of fixture.query here // since the elements inside are not compiled. - var span = getDOM().querySelector(fixture.debugElement.nativeElement, '#child'); + const span = getDOM().querySelector(fixture.nativeElement, '#child'); expect(getDOM().hasClass(span, 'compiled')).toBeFalsy(); })); it('should trigger directives on the same node', async(() => { - var template = '
    {{text}}
    '; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + const template = '
    {{text}}
    '; + const fixture = createTestComponent(template); fixture.detectChanges(); - var span = getDOM().querySelector(fixture.debugElement.nativeElement, '#child'); + const span = getDOM().querySelector(fixture.nativeElement, '#child'); expect(getDOM().hasClass(span, 'compiled')).toBeTruthy(); })); }); @@ -62,3 +60,8 @@ class TestComponent { text: string; constructor() { this.text = 'foo'; } } + +function createTestComponent(template: string): ComponentFixture { + return TestBed.overrideComponent(TestComponent, {set: {template: template}}) + .createComponent(TestComponent); +}