From 9aeb8c53575855bd96d54581057654cbd5c3f281 Mon Sep 17 00:00:00 2001
From: Victor Berchet <victor@suumit.com>
Date: Fri, 6 Jan 2017 14:18:17 -0800
Subject: [PATCH] refactor(test): `<template>`/`<ng-container>`/*-directives

- remove outer `<div>` in tests,
- use `<ng-container>` instead of `<template>` where possible,
- use *... instead of template (tag or attr) where possible.

Fixes #13816
---
 .../common/test/directives/ng_for_spec.ts     | 123 +++++++-----------
 .../common/test/directives/ng_if_spec.ts      |  98 ++++++--------
 .../common/test/directives/ng_plural_spec.ts  |  30 ++---
 .../common/test/directives/ng_style_spec.ts   |   5 +-
 .../common/test/directives/ng_switch_spec.ts  |  72 +++++-----
 .../directives/ng_template_outlet_spec.ts     |  74 +++--------
 .../direct_rendering_integration_spec.ts      |   2 +-
 .../linker/view_injector_integration_spec.ts  |   2 +-
 .../worker/renderer_integration_spec.ts       |   6 +-
 9 files changed, 154 insertions(+), 258 deletions(-)

diff --git a/modules/@angular/common/test/directives/ng_for_spec.ts b/modules/@angular/common/test/directives/ng_for_spec.ts
index 284bc27320..43cd3fd62f 100644
--- a/modules/@angular/common/test/directives/ng_for_spec.ts
+++ b/modules/@angular/common/test/directives/ng_for_spec.ts
@@ -7,7 +7,7 @@
  */
 
 import {CommonModule} from '@angular/common';
-import {Component, ContentChild, TemplateRef} from '@angular/core';
+import {Component} from '@angular/core';
 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';
@@ -29,10 +29,7 @@ export function main() {
 
     beforeEach(() => {
       TestBed.configureTestingModule({
-        declarations: [
-          TestComponent,
-          ComponentUsingTestComponent,
-        ],
+        declarations: [TestComponent],
         imports: [CommonModule],
       });
     });
@@ -77,7 +74,7 @@ export function main() {
        }));
 
     it('should iterate over an array of objects', async(() => {
-         const template = '<ul><li template="ngFor let item of items">{{item["name"]}};</li></ul>';
+         const template = '<ul><li *ngFor="let item of items">{{item["name"]}};</li></ul>';
          fixture = createTestComponent(template);
 
          // INIT
@@ -95,7 +92,7 @@ export function main() {
        }));
 
     it('should gracefully handle nulls', async(() => {
-         const template = '<ul><li template="ngFor let item of null">{{item}};</li></ul>';
+         const template = '<ul><li *ngFor="let item of null">{{item}};</li></ul>';
          fixture = createTestComponent(template);
 
          detectChangesAndExpectText('');
@@ -140,12 +137,8 @@ export function main() {
        }));
 
     it('should repeat over nested arrays', async(() => {
-         const template = '<div>' +
-             '<div template="ngFor let item of items">' +
-             '<div template="ngFor let subitem of item">' +
-             '{{subitem}}-{{item.length}};' +
-             '</div>|' +
-             '</div>' +
+         const template = '<div *ngFor="let item of items">' +
+             '<div *ngFor="let subitem of item">{{subitem}}-{{item.length}};</div>|' +
              '</div>';
          fixture = createTestComponent(template);
 
@@ -157,10 +150,9 @@ export function main() {
        }));
 
     it('should repeat over nested arrays with no intermediate element', async(() => {
-         const template = '<div><template ngFor let-item [ngForOf]="items">' +
-             '<div template="ngFor let subitem of item">' +
-             '{{subitem}}-{{item.length}};' +
-             '</div></template></div>';
+         const template = '<div *ngFor="let item of items">' +
+             '<div *ngFor="let subitem of item">{{subitem}}-{{item.length}};</div>' +
+             '</div>';
          fixture = createTestComponent(template);
 
          getComponent().items = [['a', 'b'], ['c']];
@@ -170,10 +162,11 @@ export function main() {
          detectChangesAndExpectText('e-1;f-2;g-2;');
        }));
 
-    it('should repeat over nested ngIf that are the last node in the ngFor temlate', async(() => {
-         const template =
-             `<div><template ngFor let-item [ngForOf]="items" let-i="index"><div>{{i}}|</div>` +
-             `<div *ngIf="i % 2 == 0">even|</div></template></div>`;
+    it('should repeat over nested ngIf that are the last node in the ngFor template', async(() => {
+         const template = `<div *ngFor="let item of items; let i=index">` +
+             `<div>{{i}}|</div>` +
+             `<div *ngIf="i % 2 == 0">even|</div>` +
+             `</div>`;
 
          fixture = createTestComponent(template);
 
@@ -189,8 +182,7 @@ export function main() {
        }));
 
     it('should display indices correctly', async(() => {
-         const template =
-             '<div><span template="ngFor: let item of items; let i=index">{{i.toString()}}</span></div>';
+         const template = '<span *ngFor ="let item of items; let i=index">{{i.toString()}}</span>';
          fixture = createTestComponent(template);
 
          getComponent().items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
@@ -202,7 +194,7 @@ export function main() {
 
     it('should display first item correctly', async(() => {
          const template =
-             '<div><span template="ngFor: let item of items; let isFirst=first">{{isFirst.toString()}}</span></div>';
+             '<span *ngFor="let item of items; let isFirst=first">{{isFirst.toString()}}</span>';
          fixture = createTestComponent(template);
 
          getComponent().items = [0, 1, 2];
@@ -214,7 +206,7 @@ export function main() {
 
     it('should display last item correctly', async(() => {
          const template =
-             '<div><span template="ngFor: let item of items; let isLast=last">{{isLast.toString()}}</span></div>';
+             '<span *ngFor="let item of items; let isLast=last">{{isLast.toString()}}</span>';
          fixture = createTestComponent(template);
 
          getComponent().items = [0, 1, 2];
@@ -226,7 +218,7 @@ export function main() {
 
     it('should display even items correctly', async(() => {
          const template =
-             '<div><span template="ngFor: let item of items; let isEven=even">{{isEven.toString()}}</span></div>';
+             '<span *ngFor="let item of items; let isEven=even">{{isEven.toString()}}</span>';
          fixture = createTestComponent(template);
 
          getComponent().items = [0, 1, 2];
@@ -238,7 +230,7 @@ export function main() {
 
     it('should display odd items correctly', async(() => {
          const template =
-             '<div><span template="ngFor: let item of items; let isOdd=odd">{{isOdd.toString()}}</span></div>';
+             '<span *ngFor="let item of items; let isOdd=odd">{{isOdd.toString()}}</span>';
          fixture = createTestComponent(template);
 
          getComponent().items = [0, 1, 2, 3];
@@ -249,55 +241,38 @@ export function main() {
        }));
 
     it('should allow to use a custom template', async(() => {
-         const tcTemplate =
-             '<ul><template ngFor [ngForOf]="items" [ngForTemplate]="contentTpl"></template></ul>';
-         TestBed.overrideComponent(TestComponent, {set: {template: tcTemplate}});
-         const cutTemplate =
-             '<test-cmp><li template="let item; let i=index">{{i}}: {{item}};</li></test-cmp>';
-         TestBed.overrideComponent(ComponentUsingTestComponent, {set: {template: cutTemplate}});
-         fixture = TestBed.createComponent(ComponentUsingTestComponent);
-
-         const testComponent = fixture.debugElement.children[0];
-         testComponent.componentInstance.items = ['a', 'b', 'c'];
+         const template =
+             '<ng-container *ngFor="let item of items; template: tpl"></ng-container>' +
+             '<template let-item let-i="index" #tpl><p>{{i}}: {{item}};</p></template>';
+         fixture = createTestComponent(template);
+         getComponent().items = ['a', 'b', 'c'];
          fixture.detectChanges();
-         expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
+         detectChangesAndExpectText('0: a;1: b;2: c;');
        }));
 
     it('should use a default template if a custom one is null', async(() => {
-         const testTemplate = `<ul><template ngFor let-item [ngForOf]="items"
-            [ngForTemplate]="contentTpl" let-i="index">{{i}}: {{item}};</template></ul>`;
-         TestBed.overrideComponent(TestComponent, {set: {template: testTemplate}});
-         const cutTemplate =
-             '<test-cmp><li template="let item; let i=index">{{i}}: {{item}};</li></test-cmp>';
-         TestBed.overrideComponent(ComponentUsingTestComponent, {set: {template: cutTemplate}});
-         fixture = TestBed.createComponent(ComponentUsingTestComponent);
-
-         const testComponent = fixture.debugElement.children[0];
-         testComponent.componentInstance.items = ['a', 'b', 'c'];
+         const template =
+             `<ul><ng-container *ngFor="let item of items; template: null; let i=index">{{i}}: {{item}};</ng-container></ul>`;
+         fixture = createTestComponent(template);
+         getComponent().items = ['a', 'b', 'c'];
          fixture.detectChanges();
-         expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
+         detectChangesAndExpectText('0: a;1: b;2: c;');
        }));
 
     it('should use a custom template when both default and a custom one are present', async(() => {
-         const testTemplate = `<ul><template ngFor let-item [ngForOf]="items"
-         [ngForTemplate]="contentTpl" let-i="index">{{i}}=> {{item}};</template></ul>`;
-         TestBed.overrideComponent(TestComponent, {set: {template: testTemplate}});
-         const cutTemplate =
-             '<test-cmp><li template="let item; let i=index">{{i}}: {{item}};</li></test-cmp>';
-         TestBed.overrideComponent(ComponentUsingTestComponent, {set: {template: cutTemplate}});
-         fixture = TestBed.createComponent(ComponentUsingTestComponent);
-
-         const testComponent = fixture.debugElement.children[0];
-         testComponent.componentInstance.items = ['a', 'b', 'c'];
+         const template =
+             '<ng-container *ngFor="let item of items; template: tpl">{{i}};</ng-container>' +
+             '<template let-item let-i="index" #tpl>{{i}}: {{item}};</template>';
+         fixture = createTestComponent(template);
+         getComponent().items = ['a', 'b', 'c'];
          fixture.detectChanges();
-         expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
+         detectChangesAndExpectText('0: a;1: b;2: c;');
        }));
 
     describe('track by', () => {
       it('should console.warn if trackBy is not a function', async(() => {
            // TODO(vicb): expect a warning message when we have a proper log service
-           const template =
-               `<template ngFor let-item [ngForOf]="items" [ngForTrackBy]="value"></template>`;
+           const template = `<p *ngFor="let item of items; trackBy: value"></p>`;
            fixture = createTestComponent(template);
            fixture.componentInstance.value = 0;
            fixture.detectChanges();
@@ -305,8 +280,7 @@ export function main() {
 
       it('should track by identity when trackBy is to `null` or `undefined`', async(() => {
            // TODO(vicb): expect no warning message when we have a proper log service
-           const template =
-               `<template ngFor let-item [ngForOf]="items" [ngForTrackBy]="value">{{ item }}</template>`;
+           const template = `<p *ngFor="let item of items; trackBy: value">{{ item }}</p>`;
            fixture = createTestComponent(template);
            fixture.componentInstance.items = ['a', 'b', 'c'];
            fixture.componentInstance.value = null;
@@ -317,7 +291,7 @@ export function main() {
 
       it('should set the context to the component instance', async(() => {
            const template =
-               `<template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackByContext.bind(this)"></template>`;
+               `<p *ngFor="let item of items; trackBy: trackByContext.bind(this)"></p>`;
            fixture = createTestComponent(template);
 
            thisArg = null;
@@ -327,9 +301,7 @@ export function main() {
 
       it('should not replace tracked items', async(() => {
            const template =
-               `<template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackById" let-i="index">
-               <p>{{items[i]}}</p>
-              </template>`;
+               `<p *ngFor="let item of items; trackBy: trackById; let i=index">{{items[i]}}</p>`;
            fixture = createTestComponent(template);
 
            const buildItemList = () => {
@@ -345,7 +317,7 @@ export function main() {
 
       it('should update implicit local variable on view', async(() => {
            const template =
-               `<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackById">{{item['color']}}</template></div>`;
+               `<div *ngFor="let item of items; trackBy: trackById">{{item['color']}}</div>`;
            fixture = createTestComponent(template);
 
            getComponent().items = [{'id': 'a', 'color': 'blue'}];
@@ -357,7 +329,7 @@ export function main() {
 
       it('should move items around and keep them updated ', async(() => {
            const template =
-               `<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackById">{{item['color']}}</template></div>`;
+               `<div *ngFor="let item of items; trackBy: trackById">{{item['color']}}</div>`;
            fixture = createTestComponent(template);
 
            getComponent().items = [{'id': 'a', 'color': 'blue'}, {'id': 'b', 'color': 'yellow'}];
@@ -368,8 +340,7 @@ export function main() {
          }));
 
       it('should handle added and removed items properly when tracking by index', async(() => {
-           const template =
-               `<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackByIndex">{{item}}</template></div>`;
+           const template = `<div *ngFor="let item of items; trackBy: trackByIndex">{{item}}</div>`;
            fixture = createTestComponent(template);
 
            getComponent().items = ['a', 'b', 'c', 'd'];
@@ -389,7 +360,6 @@ class Foo {
 
 @Component({selector: 'test-cmp', template: ''})
 class TestComponent {
-  @ContentChild(TemplateRef) contentTpl: TemplateRef<Object>;
   value: any;
   items: any[] = [1, 2];
   trackById(index: number, item: any): string { return item['id']; }
@@ -397,12 +367,7 @@ class TestComponent {
   trackByContext(): void { thisArg = this; }
 }
 
-@Component({selector: 'outer-cmp', template: ''})
-class ComponentUsingTestComponent {
-  items: any = [1, 2];
-}
-
-const TEMPLATE = '<div><span template="ngFor let item of items">{{item.toString()}};</span></div>';
+const TEMPLATE = '<div><span *ngFor="let item of items">{{item.toString()}};</span></div>';
 
 function createTestComponent(template: string = TEMPLATE): ComponentFixture<TestComponent> {
   return TestBed.overrideComponent(TestComponent, {set: {template: template}})
diff --git a/modules/@angular/common/test/directives/ng_if_spec.ts b/modules/@angular/common/test/directives/ng_if_spec.ts
index a05ecd4882..efc875e975 100644
--- a/modules/@angular/common/test/directives/ng_if_spec.ts
+++ b/modules/@angular/common/test/directives/ng_if_spec.ts
@@ -9,6 +9,7 @@
 import {CommonModule} from '@angular/common';
 import {Component} from '@angular/core';
 import {ComponentFixture, TestBed, async} from '@angular/core/testing';
+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';
 
@@ -28,138 +29,119 @@ export function main() {
     });
 
     it('should work in a template attribute', async(() => {
-         const template = '<div><span template="ngIf booleanCondition">hello</span></div>';
+         const template = '<span *ngIf="booleanCondition">hello</span>';
          fixture = createTestComponent(template);
-
          fixture.detectChanges();
-         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1);
+         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(1);
          expect(fixture.nativeElement).toHaveText('hello');
        }));
 
-    it('should work in a template element', async(() => {
-         const template =
-             '<div><template [ngIf]="booleanCondition"><span>hello2</span></template></div>';
-
+    it('should work on a template element', async(() => {
+         const template = '<template [ngIf]="booleanCondition">hello2</template>';
          fixture = createTestComponent(template);
          fixture.detectChanges();
-         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1);
          expect(fixture.nativeElement).toHaveText('hello2');
        }));
 
     it('should toggle node when condition changes', async(() => {
-         const template = '<div><span template="ngIf booleanCondition">hello</span></div>';
-
+         const template = '<span *ngIf="booleanCondition">hello</span>';
          fixture = createTestComponent(template);
          getComponent().booleanCondition = false;
          fixture.detectChanges();
-         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(0);
+         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(0);
          expect(fixture.nativeElement).toHaveText('');
 
          getComponent().booleanCondition = true;
          fixture.detectChanges();
-         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1);
+         expect(fixture.debugElement.queryAll(By.css('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.debugElement.queryAll(By.css('span')).length).toEqual(0);
          expect(fixture.nativeElement).toHaveText('');
        }));
 
     it('should handle nested if correctly', async(() => {
          const template =
-             '<div><template [ngIf]="booleanCondition"><span *ngIf="nestedBooleanCondition">hello</span></template></div>';
+             '<div *ngIf="booleanCondition"><span *ngIf="nestedBooleanCondition">hello</span></div>';
 
          fixture = createTestComponent(template);
 
          getComponent().booleanCondition = false;
          fixture.detectChanges();
-         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(0);
+         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(0);
          expect(fixture.nativeElement).toHaveText('');
 
          getComponent().booleanCondition = true;
          fixture.detectChanges();
-         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1);
+         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(1);
          expect(fixture.nativeElement).toHaveText('hello');
 
          getComponent().nestedBooleanCondition = false;
          fixture.detectChanges();
-         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(0);
+         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(0);
          expect(fixture.nativeElement).toHaveText('');
 
          getComponent().nestedBooleanCondition = true;
          fixture.detectChanges();
-         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1);
+         expect(fixture.debugElement.queryAll(By.css('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.debugElement.queryAll(By.css('span')).length).toEqual(0);
          expect(fixture.nativeElement).toHaveText('');
        }));
 
     it('should update several nodes with if', async(() => {
-         const template = '<div>' +
-             '<span template="ngIf numberCondition + 1 >= 2">helloNumber</span>' +
-             '<span template="ngIf stringCondition == \'foo\'">helloString</span>' +
-             '<span template="ngIf functionCondition(stringCondition, numberCondition)">helloFunction</span>' +
-             '</div>';
+         const template = '<span *ngIf="numberCondition + 1 >= 2">helloNumber</span>' +
+             '<span *ngIf="stringCondition == \'foo\'">helloString</span>' +
+             '<span *ngIf="functionCondition(stringCondition, numberCondition)">helloFunction</span>';
 
          fixture = createTestComponent(template);
 
          fixture.detectChanges();
-         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(3);
+         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(3);
          expect(getDOM().getText(fixture.nativeElement))
              .toEqual('helloNumberhelloStringhelloFunction');
 
          getComponent().numberCondition = 0;
          fixture.detectChanges();
-         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1);
+         expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(1);
          expect(fixture.nativeElement).toHaveText('helloString');
 
          getComponent().numberCondition = 1;
          getComponent().stringCondition = 'bar';
          fixture.detectChanges();
-         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1);
+         expect(fixture.debugElement.queryAll(By.css('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 = '<div><span template="ngIf numberCondition">hello</span></div>';
+    it('should not add the element twice if the condition goes from truthy to truthy', async(() => {
+         const template = '<span *ngIf="numberCondition">hello</span>';
 
          fixture = createTestComponent(template);
 
          fixture.detectChanges();
-         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1);
+         let els = fixture.debugElement.queryAll(By.css('span'));
+         expect(els.length).toEqual(1);
+         getDOM().addClass(els[0].nativeElement, 'marker');
          expect(fixture.nativeElement).toHaveText('hello');
 
          getComponent().numberCondition = 2;
          fixture.detectChanges();
-         expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1);
+         els = fixture.debugElement.queryAll(By.css('span'));
+         expect(els.length).toEqual(1);
+         expect(getDOM().hasClass(els[0].nativeElement, 'marker')).toBe(true);
+
          expect(fixture.nativeElement).toHaveText('hello');
        }));
 
-    it('should not recreate the element if the condition goes from true to true (JS)', async(() => {
-         const template = '<div><span template="ngIf numberCondition">hello</span></div>';
-
-         fixture = createTestComponent(template);
-
-         fixture.detectChanges();
-         getDOM().addClass(getDOM().querySelector(fixture.nativeElement, 'span'), 'foo');
-
-         getComponent().numberCondition = 2;
-         fixture.detectChanges();
-         expect(getDOM().hasClass(getDOM().querySelector(fixture.nativeElement, 'span'), 'foo'))
-             .toBe(true);
-       }));
-
     describe('else', () => {
       it('should support else', async(() => {
-           const template = '<div>' +
-               '<span *ngIf="booleanCondition; else elseBlock">TRUE</span>' +
-               '<template #elseBlock>FALSE</template>' +
-               '</div>';
+           const template = '<span *ngIf="booleanCondition; else elseBlock">TRUE</span>' +
+               '<template #elseBlock>FALSE</template>';
 
            fixture = createTestComponent(template);
 
@@ -172,11 +154,10 @@ export function main() {
          }));
 
       it('should support then and else', async(() => {
-           const template = '<div>' +
+           const template =
                '<span *ngIf="booleanCondition; then thenBlock; else elseBlock">IGNORE</span>' +
                '<template #thenBlock>THEN</template>' +
-               '<template #elseBlock>ELSE</template>' +
-               '</div>';
+               '<template #elseBlock>ELSE</template>';
 
            fixture = createTestComponent(template);
 
@@ -189,11 +170,10 @@ export function main() {
          }));
 
       it('should support dynamic else', async(() => {
-           const template = '<div>' +
+           const template =
                '<span *ngIf="booleanCondition; else nestedBooleanCondition ? b1 : b2">TRUE</span>' +
                '<template #b1>FALSE1</template>' +
-               '<template #b2>FALSE2</template>' +
-               '</div>';
+               '<template #b2>FALSE2</template>';
 
            fixture = createTestComponent(template);
 
@@ -210,10 +190,8 @@ export function main() {
          }));
 
       it('should support binding to variable', async(() => {
-           const template = '<div>' +
-               '<span *ngIf="booleanCondition; else elseBlock; let v">{{v}}</span>' +
-               '<template #elseBlock let-v>{{v}}</template>' +
-               '</div>';
+           const template = '<span *ngIf="booleanCondition; else elseBlock; let v">{{v}}</span>' +
+               '<template #elseBlock let-v>{{v}}</template>';
 
            fixture = createTestComponent(template);
 
diff --git a/modules/@angular/common/test/directives/ng_plural_spec.ts b/modules/@angular/common/test/directives/ng_plural_spec.ts
index 65fb9c8fde..3b0927b826 100644
--- a/modules/@angular/common/test/directives/ng_plural_spec.ts
+++ b/modules/@angular/common/test/directives/ng_plural_spec.ts
@@ -33,11 +33,10 @@ export function main() {
     });
 
     it('should display the template according to the exact value', async(() => {
-         const template = '<div>' +
-             '<ul [ngPlural]="switchValue">' +
+         const template = '<ul [ngPlural]="switchValue">' +
              '<template ngPluralCase="=0"><li>you have no messages.</li></template>' +
              '<template ngPluralCase="=1"><li>you have one message.</li></template>' +
-             '</ul></div>';
+             '</ul>';
 
          fixture = createTestComponent(template);
 
@@ -51,10 +50,9 @@ export function main() {
     // https://github.com/angular/angular/issues/9868
     // https://github.com/angular/angular/issues/9882
     it('should not throw when ngPluralCase contains expressions', async(() => {
-         const template = '<div>' +
-             '<ul [ngPlural]="switchValue">' +
+         const template = '<ul [ngPlural]="switchValue">' +
              '<template ngPluralCase="=0"><li>{{ switchValue }}</li></template>' +
-             '</ul></div>';
+             '</ul>';
 
          fixture = createTestComponent(template);
 
@@ -64,11 +62,10 @@ export function main() {
 
 
     it('should be applicable to <ng-container> elements', async(() => {
-         const template = '<div>' +
-             '<ng-container [ngPlural]="switchValue">' +
+         const template = '<ng-container [ngPlural]="switchValue">' +
              '<template ngPluralCase="=0">you have no messages.</template>' +
              '<template ngPluralCase="=1">you have one message.</template>' +
-             '</ng-container></div>';
+             '</ng-container>';
 
          fixture = createTestComponent(template);
 
@@ -80,11 +77,10 @@ export function main() {
        }));
 
     it('should display the template according to the category', async(() => {
-         const template = '<div>' +
-             '<ul [ngPlural]="switchValue">' +
+         const template = '<ul [ngPlural]="switchValue">' +
              '<template ngPluralCase="few"><li>you have a few messages.</li></template>' +
              '<template ngPluralCase="many"><li>you have many messages.</li></template>' +
-             '</ul></div>';
+             '</ul>';
 
          fixture = createTestComponent(template);
 
@@ -96,11 +92,10 @@ export function main() {
        }));
 
     it('should default to other when no matches are found', async(() => {
-         const template = '<div>' +
-             '<ul [ngPlural]="switchValue">' +
+         const template = '<ul [ngPlural]="switchValue">' +
              '<template ngPluralCase="few"><li>you have a few messages.</li></template>' +
              '<template ngPluralCase="other"><li>default message.</li></template>' +
-             '</ul></div>';
+             '</ul>';
 
          fixture = createTestComponent(template);
 
@@ -109,11 +104,10 @@ export function main() {
        }));
 
     it('should prioritize value matches over category matches', async(() => {
-         const template = '<div>' +
-             '<ul [ngPlural]="switchValue">' +
+         const template = '<ul [ngPlural]="switchValue">' +
              '<template ngPluralCase="few"><li>you have a few messages.</li></template>' +
              '<template ngPluralCase="=2">you have two messages.</template>' +
-             '</ul></div>';
+             '</ul>';
 
          fixture = createTestComponent(template);
 
diff --git a/modules/@angular/common/test/directives/ng_style_spec.ts b/modules/@angular/common/test/directives/ng_style_spec.ts
index 3c1329acdc..5ac554791b 100644
--- a/modules/@angular/common/test/directives/ng_style_spec.ts
+++ b/modules/@angular/common/test/directives/ng_style_spec.ts
@@ -29,22 +29,19 @@ export function main() {
     it('should add styles specified in an object literal', async(() => {
          const template = `<div [ngStyle]="{'max-width': '40px'}"></div>`;
          fixture = createTestComponent(template);
-
          fixture.detectChanges();
          expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
        }));
 
     it('should add and change styles specified in an object expression', async(() => {
          const template = `<div [ngStyle]="expr"></div>`;
-
          fixture = createTestComponent(template);
-         let expr: {[k: string]: string};
 
          getComponent().expr = {'max-width': '40px'};
          fixture.detectChanges();
          expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
 
-         expr = getComponent().expr;
+         let expr = getComponent().expr;
          expr['max-width'] = '30%';
          fixture.detectChanges();
          expectNativeEl(fixture).toHaveCssStyle({'max-width': '30%'});
diff --git a/modules/@angular/common/test/directives/ng_switch_spec.ts b/modules/@angular/common/test/directives/ng_switch_spec.ts
index 3030cc4d93..11a80a5327 100644
--- a/modules/@angular/common/test/directives/ng_switch_spec.ts
+++ b/modules/@angular/common/test/directives/ng_switch_spec.ts
@@ -33,11 +33,10 @@ export function main() {
 
     describe('switch value changes', () => {
       it('should switch amongst when values', () => {
-        const template = '<div>' +
-            '<ul [ngSwitch]="switchValue">' +
-            '<template ngSwitchCase="a"><li>when a</li></template>' +
-            '<template ngSwitchCase="b"><li>when b</li></template>' +
-            '</ul></div>';
+        const template = '<ul [ngSwitch]="switchValue">' +
+            '<li *ngSwitchCase="\'a\'">when a</li>' +
+            '<li *ngSwitchCase="\'b\'">when b</li>' +
+            '</ul>';
 
         fixture = createTestComponent(template);
 
@@ -51,11 +50,10 @@ export function main() {
       });
 
       it('should switch amongst when values with fallback to default', () => {
-        const template = '<div>' +
-            '<ul [ngSwitch]="switchValue">' +
-            '<li template="ngSwitchCase \'a\'">when a</li>' +
-            '<li template="ngSwitchDefault">when default</li>' +
-            '</ul></div>';
+        const template = '<ul [ngSwitch]="switchValue">' +
+            '<li *ngSwitchCase="\'a\'">when a</li>' +
+            '<li *ngSwitchDefault>when default</li>' +
+            '</ul>';
 
         fixture = createTestComponent(template);
         detectChangesAndExpectText('when default');
@@ -71,15 +69,14 @@ export function main() {
       });
 
       it('should support multiple whens with the same value', () => {
-        const template = '<div>' +
-            '<ul [ngSwitch]="switchValue">' +
-            '<template ngSwitchCase="a"><li>when a1;</li></template>' +
-            '<template ngSwitchCase="b"><li>when b1;</li></template>' +
-            '<template ngSwitchCase="a"><li>when a2;</li></template>' +
-            '<template ngSwitchCase="b"><li>when b2;</li></template>' +
-            '<template ngSwitchDefault><li>when default1;</li></template>' +
-            '<template ngSwitchDefault><li>when default2;</li></template>' +
-            '</ul></div>';
+        const template = '<ul [ngSwitch]="switchValue">' +
+            '<li *ngSwitchCase="\'a\'">when a1;</li>' +
+            '<li *ngSwitchCase="\'b\'">when b1;</li>' +
+            '<li *ngSwitchCase="\'a\'">when a2;</li>' +
+            '<li *ngSwitchCase="\'b\'">when b2;</li>' +
+            '<li *ngSwitchDefault>when default1;</li>' +
+            '<li *ngSwitchDefault>when default2;</li>' +
+            '</ul>';
 
         fixture = createTestComponent(template);
         detectChangesAndExpectText('when default1;when default2;');
@@ -94,12 +91,11 @@ export function main() {
 
     describe('when values changes', () => {
       it('should switch amongst when values', () => {
-        const template = '<div>' +
-            '<ul [ngSwitch]="switchValue">' +
-            '<template [ngSwitchCase]="when1"><li>when 1;</li></template>' +
-            '<template [ngSwitchCase]="when2"><li>when 2;</li></template>' +
-            '<template ngSwitchDefault><li>when default;</li></template>' +
-            '</ul></div>';
+        const template = '<ul [ngSwitch]="switchValue">' +
+            '<li *ngSwitchCase="when1">when 1;</li>' +
+            '<li *ngSwitchCase="when2">when 2;</li>' +
+            '<li *ngSwitchDefault>when default;</li>' +
+            '</ul>';
 
         fixture = createTestComponent(template);
         getComponent().when1 = 'a';
@@ -148,11 +144,10 @@ export function main() {
       });
 
       it('should create the default case if there is no other case', () => {
-        const template = '<div>' +
-            '<ul [ngSwitch]="switchValue">' +
-            '<template ngSwitchDefault><li>when default1;</li></template>' +
-            '<template ngSwitchDefault><li>when default2;</li></template>' +
-            '</ul></div>';
+        const template = '<ul [ngSwitch]="switchValue">' +
+            '<li *ngSwitchDefault>when default1;</li>' +
+            '<li *ngSwitchDefault>when default2;</li>' +
+            '</ul>';
 
         fixture = createTestComponent(template);
         detectChangesAndExpectText('when default1;when default2;');
@@ -160,15 +155,14 @@ export function main() {
       });
 
       it('should allow defaults before cases', () => {
-        const template = '<div>' +
-            '<ul [ngSwitch]="switchValue">' +
-            '<template ngSwitchDefault><li>when default1;</li></template>' +
-            '<template ngSwitchDefault><li>when default2;</li></template>' +
-            '<template ngSwitchCase="a"><li>when a1;</li></template>' +
-            '<template ngSwitchCase="b"><li>when b1;</li></template>' +
-            '<template ngSwitchCase="a"><li>when a2;</li></template>' +
-            '<template ngSwitchCase="b"><li>when b2;</li></template>' +
-            '</ul></div>';
+        const template = '<ul [ngSwitch]="switchValue">' +
+            '<li *ngSwitchDefault>when default1;</li>' +
+            '<li *ngSwitchDefault>when default2;</li>' +
+            '<li *ngSwitchCase="\'a\'">when a1;</li>' +
+            '<li *ngSwitchCase="\'b\'">when b1;</li>' +
+            '<li *ngSwitchCase="\'a\'">when a2;</li>' +
+            '<li *ngSwitchCase="\'b\'">when b2;</li>' +
+            '</ul>';
 
         fixture = createTestComponent(template);
         detectChangesAndExpectText('when default1;when default2;');
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 2197cf1d55..df0b31189a 100644
--- a/modules/@angular/common/test/directives/ng_template_outlet_spec.ts
+++ b/modules/@angular/common/test/directives/ng_template_outlet_spec.ts
@@ -34,29 +34,22 @@ export function main() {
       });
     });
 
-    it('should do nothing if templateRef is null', async(() => {
-         const template = `<template [ngTemplateOutlet]="null"></template>`;
+    it('should do nothing if templateRef is `null`', async(() => {
+         const template = `<ng-container [ngTemplateOutlet]="null"></ng-container>`;
          fixture = createTestComponent(template);
-
          detectChangesAndExpectText('');
        }));
 
     it('should insert content specified by TemplateRef', async(() => {
-         const template =
-             `<tpl-refs #refs="tplRefs"><template>foo</template></tpl-refs><template [ngTemplateOutlet]="currentTplRef"></template>`;
+         const template = `<template #tpl>foo</template>` +
+             `<ng-container [ngTemplateOutlet]="tpl"></ng-container>`;
          fixture = createTestComponent(template);
-
-         detectChangesAndExpectText('');
-
-         const refs = fixture.debugElement.children[0].references['refs'];
-
-         setTplRef(refs.tplRefs.first);
          detectChangesAndExpectText('foo');
        }));
 
-    it('should clear content if TemplateRef becomes null', async(() => {
-         const template =
-             `<tpl-refs #refs="tplRefs"><template>foo</template></tpl-refs><template [ngTemplateOutlet]="currentTplRef"></template>`;
+    it('should clear content if TemplateRef becomes `null`', async(() => {
+         const template = `<tpl-refs #refs="tplRefs"><template>foo</template></tpl-refs>` +
+             `<ng-container [ngTemplateOutlet]="currentTplRef"></ng-container>`;
          fixture = createTestComponent(template);
          fixture.detectChanges();
          const refs = fixture.debugElement.children[0].references['refs'];
@@ -70,7 +63,8 @@ export function main() {
 
     it('should swap content if TemplateRef changes', async(() => {
          const template =
-             `<tpl-refs #refs="tplRefs"><template>foo</template><template>bar</template></tpl-refs><template [ngTemplateOutlet]="currentTplRef"></template>`;
+             `<tpl-refs #refs="tplRefs"><template>foo</template><template>bar</template></tpl-refs>` +
+             `<ng-container [ngTemplateOutlet]="currentTplRef"></ng-container>`;
          fixture = createTestComponent(template);
 
          fixture.detectChanges();
@@ -83,73 +77,47 @@ export function main() {
          detectChangesAndExpectText('bar');
        }));
 
-    it('should display template if context is null', async(() => {
-         const template = `<tpl-refs #refs="tplRefs"><template>foo</template></tpl-refs>` +
-             `<ng-content *ngTemplateOutlet="currentTplRef; context: null"></ng-content>`;
+    it('should display template if context is `null`', async(() => {
+         const template = `<template #tpl>foo</template>` +
+             `<ng-container *ngTemplateOutlet="tpl; context: null"></ng-container>`;
          fixture = createTestComponent(template);
-         detectChangesAndExpectText('');
-
-         const refs = fixture.debugElement.children[0].references['refs'];
-
-         setTplRef(refs.tplRefs.first);
          detectChangesAndExpectText('foo');
        }));
 
     it('should reflect initial context and changes', async(() => {
-         const template =
-             `<tpl-refs #refs="tplRefs"><template let-foo="foo"><span>{{foo}}</span></template></tpl-refs>` +
-             `<ng-content *ngTemplateOutlet="currentTplRef; context: context"></ng-content>`;
+         const template = `<template let-foo="foo" #tpl>{{foo}}</template>` +
+             `<ng-container *ngTemplateOutlet="tpl; context: context"></ng-container>`;
          fixture = createTestComponent(template);
 
          fixture.detectChanges();
-
-         const refs = fixture.debugElement.children[0].references['refs'];
-         setTplRef(refs.tplRefs.first);
-
          detectChangesAndExpectText('bar');
 
          fixture.componentInstance.context.foo = 'alter-bar';
-
          detectChangesAndExpectText('alter-bar');
        }));
 
-    it('should reflect user defined $implicit property in the context', async(() => {
-         const template =
-             `<tpl-refs #refs="tplRefs"><template let-ctx><span>{{ctx.foo}}</span></template></tpl-refs>` +
-             `<ng-content *ngTemplateOutlet="currentTplRef; context: context"></ng-content>`;
+    it('should reflect user defined `$implicit` property in the context', async(() => {
+         const template = `<template let-ctx #tpl>{{ctx.foo}}</template>` +
+             `<ng-container *ngTemplateOutlet="tpl; context: context"></ng-container>`;
          fixture = createTestComponent(template);
-
-         fixture.detectChanges();
-
-         const refs = fixture.debugElement.children[0].references['refs'];
-         setTplRef(refs.tplRefs.first);
-
-         fixture.componentInstance.context = {$implicit: fixture.componentInstance.context};
-         detectChangesAndExpectText('bar');
+         fixture.componentInstance.context = {$implicit: {foo: 'bra'}};
+         detectChangesAndExpectText('bra');
        }));
 
     it('should reflect context re-binding', async(() => {
-         const template =
-             `<tpl-refs #refs="tplRefs"><template let-shawshank="shawshank"><span>{{shawshank}}</span></template></tpl-refs>` +
-             `<ng-content *ngTemplateOutlet="currentTplRef; context: context"></ng-content>`;
+         const template = `<template let-shawshank="shawshank" #tpl>{{shawshank}}</template>` +
+             `<ng-container *ngTemplateOutlet="tpl; context: context"></ng-container>`;
          fixture = createTestComponent(template);
 
-         fixture.detectChanges();
-
-         const refs = fixture.debugElement.children[0].references['refs'];
-         setTplRef(refs.tplRefs.first);
          fixture.componentInstance.context = {shawshank: 'brooks'};
-
          detectChangesAndExpectText('brooks');
 
          fixture.componentInstance.context = {shawshank: 'was here'};
-
          detectChangesAndExpectText('was here');
        }));
   });
 }
 
-
 @Directive({selector: 'tpl-refs', exportAs: 'tplRefs'})
 class CaptureTplRefs {
   @ContentChildren(TemplateRef) tplRefs: QueryList<TemplateRef<any>>;
diff --git a/modules/@angular/core/test/linker/direct_rendering_integration_spec.ts b/modules/@angular/core/test/linker/direct_rendering_integration_spec.ts
index 983098feed..00199d496c 100644
--- a/modules/@angular/core/test/linker/direct_rendering_integration_spec.ts
+++ b/modules/@angular/core/test/linker/direct_rendering_integration_spec.ts
@@ -138,7 +138,7 @@ export function main() {
       @Component({
         selector: 'child',
         template:
-            '(<template [ngTemplateOutlet]="templateRef" [ngOutletContext]="templateCtx"></template>)'
+            '(<ng-container [ngTemplateOutlet]="templateRef" [ngOutletContext]="templateCtx"></ng-container>)'
       })
       class Child {
         @Input()
diff --git a/modules/@angular/core/test/linker/view_injector_integration_spec.ts b/modules/@angular/core/test/linker/view_injector_integration_spec.ts
index 4b6af6281a..20a51d393d 100644
--- a/modules/@angular/core/test/linker/view_injector_integration_spec.ts
+++ b/modules/@angular/core/test/linker/view_injector_integration_spec.ts
@@ -421,7 +421,7 @@ export function main() {
         TestBed.overrideDirective(
             SimpleDirective, {set: {providers: [{provide: 'service', useValue: 'parentService'}]}});
         const el = createComponent(
-            '<div simpleDirective><template [ngIf]="true"><div *ngIf="true" needsService></div></template></div>');
+            '<div simpleDirective><ng-container *ngIf="true"><div *ngIf="true" needsService></div></ng-container></div>');
         expect(el.children[0].children[0].injector.get(NeedsService).service)
             .toEqual('parentService');
       });
diff --git a/modules/@angular/platform-webworker/test/web_workers/worker/renderer_integration_spec.ts b/modules/@angular/platform-webworker/test/web_workers/worker/renderer_integration_spec.ts
index 9908dce0b0..5dc4bb383c 100644
--- a/modules/@angular/platform-webworker/test/web_workers/worker/renderer_integration_spec.ts
+++ b/modules/@angular/platform-webworker/test/web_workers/worker/renderer_integration_spec.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, ComponentRef, Injectable, Injector} from '@angular/core';
+import {Component, ComponentRef, Injectable} from '@angular/core';
 import {DebugDomRootRenderer} from '@angular/core/src/debug/debug_renderer';
 import {RootRenderer} from '@angular/core/src/render/api';
 import {TestBed} from '@angular/core/testing';
@@ -152,7 +152,7 @@ export function main() {
     it('should update any template comment property/attributes', () => {
 
       TestBed.overrideComponent(
-          MyComp2, {set: {template: '<template [ngIf]="ctxBoolProp"></template>'}});
+          MyComp2, {set: {template: '<ng-container *ngIf="ctxBoolProp"></ng-container>'}});
       const fixture = TestBed.createComponent(MyComp2);
 
       (<MyComp2>fixture.componentInstance).ctxBoolProp = true;
@@ -163,7 +163,7 @@ export function main() {
 
     it('should add and remove fragments', () => {
       TestBed.overrideComponent(
-          MyComp2, {set: {template: '<template [ngIf]="ctxBoolProp">hello</template>'}});
+          MyComp2, {set: {template: '<ng-container *ngIf="ctxBoolProp">hello</ng-container>'}});
       const fixture = TestBed.createComponent(MyComp2);
 
       const rootEl = getRenderElement(fixture.nativeElement);