diff --git a/test/core/linker/query_integration_test.dart b/test/core/linker/query_integration_test.dart
index 0e7c711a71..cd208fb353 100644
--- a/test/core/linker/query_integration_test.dart
+++ b/test/core/linker/query_integration_test.dart
@@ -1,1137 +1,898 @@
-@TestOn('browser && !js')
+@TestOn('browser')
+
 import 'package:angular2/angular2.dart';
-import "package:angular2/src/testing/internal.dart";
+import 'package:angular_test/angular_test.dart';
 import 'package:test/test.dart';
 
 void main() {
-  group("Query API", () {
-    group("querying by directive type", () {
-      test(
-          "should contain all direct child directives in the light dom (constructor)",
-          () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template = "<div text=\"1\"></div>" +
-              "<needs-query text=\"2\"><div text=\"3\">" +
-              "<div text=\"too-deep\"></div>" +
-              "</div></needs-query>" +
-              "<div text=\"4\"></div>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            view.detectChanges();
-            expect(asNativeElements(view.debugElement.children),
-                hasTextContent("2|3|"));
-            completer.done();
-          });
-        });
-      });
-      test("should contain all direct child directives in the content dom",
-          () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template =
-              "<needs-content-children #q><div text=\"foo\"></div></needs-content-children>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            view.detectChanges();
-            var q = view.debugElement.children[0].getLocal("q");
-            view.detectChanges();
-            expect(q.textDirChildren.length, 1);
-            expect(q.numberOfChildrenAfterContentInit, 1);
-            completer.done();
-          });
-        });
-      });
-      test("should contain the first content child", () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template =
-              "<needs-content-child #q><div *ngIf=\"shouldShow\" text=\"foo\"></div></needs-content-child>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            view.debugElement.componentInstance.shouldShow = true;
-            view.detectChanges();
-            NeedsContentChild q = view.debugElement.children[0].getLocal("q");
-            expect(q.log, [
-              ["setter", "foo"],
-              ["init", "foo"],
-              ["check", "foo"]
-            ]);
-            view.debugElement.componentInstance.shouldShow = false;
-            view.detectChanges();
-            expect(q.log, [
-              ["setter", "foo"],
-              ["init", "foo"],
-              ["check", "foo"],
-              ["setter", null],
-              ["check", null]
-            ]);
-            completer.done();
-          });
-        });
-      });
-      test("should contain the first view child", () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template = "<needs-view-child #q></needs-view-child>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            view.detectChanges();
-            NeedsViewChild q = view.debugElement.children[0].getLocal("q");
-            expect(q.log, [
-              ["setter", "foo"],
-              ["init", "foo"],
-              ["check", "foo"]
-            ]);
-            q.shouldShow = false;
-            view.detectChanges();
-            expect(q.log, [
-              ["setter", "foo"],
-              ["init", "foo"],
-              ["check", "foo"],
-              ["setter", null],
-              ["check", null]
-            ]);
-            completer.done();
-          });
-        });
-      });
-      test(
-          "should set static view and content children already after the constructor call",
-          () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template =
-              "<needs-static-content-view-child #q><div text=\"contentFoo\"></div></needs-static-content-view-child>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            NeedsStaticContentAndViewChild q =
-                view.debugElement.children[0].getLocal("q");
-            expect(q.contentChild.text, isNull);
-            expect(q.viewChild.text, isNull);
-            view.detectChanges();
-            expect(q.contentChild.text, "contentFoo");
-            expect(q.viewChild.text, "viewFoo");
-            completer.done();
-          });
-        });
-      });
-      test("should contain the first view child accross embedded views",
-          () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template = "<needs-view-child #q></needs-view-child>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .overrideTemplate(NeedsViewChild,
-                  "<div *ngIf=\"true\"><div *ngIf=\"shouldShow\" text=\"foo\"></div></div><div *ngIf=\"shouldShow2\" text=\"bar\"></div>")
-              .createAsync(MyComp)
-              .then((view) {
-            view.detectChanges();
-            NeedsViewChild q = view.debugElement.children[0].getLocal("q");
-            expect(q.log, [
-              ["setter", "foo"],
-              ["init", "foo"],
-              ["check", "foo"]
-            ]);
-            q.shouldShow = false;
-            q.shouldShow2 = true;
-            q.log = [];
-            view.detectChanges();
-            expect(q.log, [
-              ["setter", "bar"],
-              ["check", "bar"]
-            ]);
-            q.shouldShow = false;
-            q.shouldShow2 = false;
-            q.log = [];
-            view.detectChanges();
-            expect(q.log, [
-              ["setter", null],
-              ["check", null]
-            ]);
-            completer.done();
-          });
-        });
-      });
-      test(
-          "should contain all directives in the light dom when descendants flag is used",
-          () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template = "<div text=\"1\"></div>" +
-              "<needs-query-desc text=\"2\"><div text=\"3\">" +
-              "<div text=\"4\"></div>" +
-              "</div></needs-query-desc>" +
-              "<div text=\"5\"></div>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            view.detectChanges();
-            expect(asNativeElements(view.debugElement.children),
-                hasTextContent("2|3|4|"));
-            completer.done();
-          });
-        });
-      });
-      test("should contain all directives in the light dom", () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template = "<div text=\"1\"></div>" +
-              "<needs-query text=\"2\"><div text=\"3\"></div></needs-query>" +
-              "<div text=\"4\"></div>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            view.detectChanges();
-            expect(asNativeElements(view.debugElement.children),
-                hasTextContent("2|3|"));
-            completer.done();
-          });
-        });
-      });
-      test("should reflect dynamically inserted directives", () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template = "<div text=\"1\"></div>" +
-              "<needs-query text=\"2\"><div *ngIf=\"shouldShow\" [text]=\"'3'\"></div></needs-query>" +
-              "<div text=\"4\"></div>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            view.detectChanges();
-            expect(asNativeElements(view.debugElement.children),
-                hasTextContent("2|"));
-            view.debugElement.componentInstance.shouldShow = true;
-            view.detectChanges();
-            expect(asNativeElements(view.debugElement.children),
-                hasTextContent("2|3|"));
-            completer.done();
-          });
-        });
-      });
-      test("should be cleanly destroyed when a query crosses view boundaries",
-          () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template = "<div text=\"1\"></div>" +
-              "<needs-query text=\"2\"><div *ngIf=\"shouldShow\" [text]=\"'3'\"></div></needs-query>" +
-              "<div text=\"4\"></div>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((fixture) {
-            fixture.debugElement.componentInstance.shouldShow = true;
-            fixture.detectChanges();
-            fixture.destroy();
-            completer.done();
-          });
-        });
-      });
-      test("should reflect moved directives", () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template = "<div text=\"1\"></div>" +
-              "<needs-query text=\"2\"><div *ngFor=\"let  i of list\" [text]=\"i\"></div></needs-query>" +
-              "<div text=\"4\"></div>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            view.detectChanges();
-            expect(asNativeElements(view.debugElement.children),
-                hasTextContent("2|1d|2d|3d|"));
-            view.debugElement.componentInstance.list = ["3d", "2d"];
-            view.detectChanges();
-            expect(asNativeElements(view.debugElement.children),
-                hasTextContent("2|3d|2d|"));
-            completer.done();
-          });
-        });
-      });
+  tearDown(disposeAnyRunningTest);
+
+  group('query for Directive', () {
+    test('should contain all direct content children', () async {
+      final testBed = new NgTestBed<TestsContentChildrenComponent>();
+      final testFixture = await testBed.create();
+      expect(testFixture.text.trim(), '2|3|5');
     });
-    group("query for TemplateRef", () {
-      test("should find TemplateRefs in the light and shadow dom", () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template =
-              "<needs-tpl><template let-x=\"light\"></template></needs-tpl>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            view.detectChanges();
-            NeedsTpl needsTpl = view.debugElement.children[0].inject(NeedsTpl);
-            expect(
-                needsTpl.vc
-                    .createEmbeddedView(needsTpl.query.first)
-                    .hasLocal("light"),
-                isTrue);
-            expect(
-                needsTpl.vc
-                    .createEmbeddedView(needsTpl.viewQuery.first)
-                    .hasLocal("shadow"),
-                isTrue);
-            completer.done();
-          });
-        });
-      });
-      test("should find named TemplateRefs", () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template =
-              "<needs-named-tpl><template let-x=\"light\" #tpl></template></needs-named-tpl>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            view.detectChanges();
-            NeedsNamedTpl needsTpl =
-                view.debugElement.children[0].inject(NeedsNamedTpl);
-            expect(
-                needsTpl.vc
-                    .createEmbeddedView(needsTpl.contentTpl)
-                    .hasLocal("light"),
-                isTrue);
-            expect(
-                needsTpl.vc
-                    .createEmbeddedView(needsTpl.viewTpl)
-                    .hasLocal("shadow"),
-                isTrue);
-            completer.done();
-          });
-        });
-      });
+
+    test('should contain all content children', () async {
+      final testBed = new NgTestBed<TestsContentChildrenDescendantsComponent>();
+      final testFixture = await testBed.create();
+      expect(testFixture.text.trim(), '2|3|4|5');
     });
-    group("read a different token", () {
-      test("should contain all content children", () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template =
-              "<needs-content-children-read #q text=\"ca\"><div #q text=\"cb\"></div></needs-content-children-read>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            view.detectChanges();
-            NeedsContentChildrenWithRead comp = view.debugElement.children[0]
-                .inject(NeedsContentChildrenWithRead);
-            expect(
-                comp.textDirChildren.map((textDirective) => textDirective.text),
-                ["ca", "cb"]);
-            completer.done();
-          });
-        });
-      });
-      test("should contain the first content child", () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template =
-              "<needs-content-child-read><div #q text=\"ca\"></div></needs-content-child-read>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            view.detectChanges();
-            NeedsContentChildWithRead comp =
-                view.debugElement.children[0].inject(NeedsContentChildWithRead);
-            expect(comp.textDirChild.text, "ca");
-            completer.done();
-          });
-        });
-      });
-      test("should contain the first view child", () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template = "<needs-view-child-read></needs-view-child-read>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            view.detectChanges();
-            NeedsViewChildWithRead comp =
-                view.debugElement.children[0].inject(NeedsViewChildWithRead);
-            expect(comp.textDirChild.text, "va");
-            completer.done();
-          });
-        });
-      });
-      test("should contain all child directives in the view", () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template =
-              "<needs-view-children-read></needs-view-children-read>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            view.detectChanges();
-            NeedsViewChildrenWithRead comp =
-                view.debugElement.children[0].inject(NeedsViewChildrenWithRead);
-            expect(
-                comp.textDirChildren.map((textDirective) => textDirective.text),
-                ["va", "vb"]);
-            completer.done();
-          });
-        });
-      });
-      test("should support reading a ViewContainer", () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template =
-              "<needs-viewcontainer-read><template>hello</template></needs-viewcontainer-read>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            view.detectChanges();
-            NeedsViewContainerWithRead comp = view.debugElement.children[0]
-                .inject(NeedsViewContainerWithRead);
-            comp.createView();
-            expect(view.debugElement.children[0].nativeElement,
-                hasTextContent("hello"));
-            completer.done();
-          });
-        });
-      });
+
+    test('should contain first content child', () async {
+      final testBed = new NgTestBed<TestsContentChildComponent>();
+      final testFixture = await testBed.create();
+      expect(testFixture.text.trim(), '2');
     });
-    group("changes", () {
-      test("should notify query on change", () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template = "<needs-query #q>" +
-              "<div text=\"1\"></div>" +
-              "<div *ngIf=\"shouldShow\" text=\"2\"></div>" +
-              "</needs-query>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            var q = view.debugElement.children[0].getLocal("q");
-            view.detectChanges();
-            q.query.changes.listen((_) {
-              expect(q.query.first.text, "1");
-              expect(q.query.last.text, "2");
-              completer.done();
-            });
-            view.debugElement.componentInstance.shouldShow = true;
-            view.detectChanges();
-          });
-        });
-      });
-      test(
-          "should correctly clean-up when destroyed together with the directives it is querying",
-          () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template =
-              "<needs-query #q *ngIf=\"shouldShow\"><div text=\"foo\"></div></needs-query>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            view.debugElement.componentInstance.shouldShow = true;
-            view.detectChanges();
-            NeedsQuery q = view.debugElement.children[0].getLocal("q");
-            expect(q.query.length, 1);
-            view.debugElement.componentInstance.shouldShow = false;
-            view.detectChanges();
-            view.debugElement.componentInstance.shouldShow = true;
-            view.detectChanges();
-            NeedsQuery q2 = view.debugElement.children[0].getLocal("q");
-            expect(q2.query.length, 1);
-            completer.done();
-          });
-        });
-      });
+
+    test('should contain all view children', () async {
+      final testBed = new NgTestBed<TestsViewChildrenComponent>();
+      final testFixture = await testBed.create();
+      expect(testFixture.text.trim(), 'a|b|c');
     });
-    group("querying by var binding", () {
-      test(
-          "should contain all the child directives in the light dom with the given var binding",
-          () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template = "<needs-query-by-ref-binding #q>" +
-              "<div *ngFor=\"let item of list\" [text]=\"item\" #textLabel=\"textDir\"></div>" +
-              "</needs-query-by-ref-binding>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            var q = view.debugElement.children[0].getLocal("q");
-            view.debugElement.componentInstance.list = ["1d", "2d"];
-            view.detectChanges();
-            expect(q.query.first.text, "1d");
-            expect(q.query.last.text, "2d");
-            completer.done();
-          });
-        });
-      });
-      test("should support querying by multiple var bindings", () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template = "<needs-query-by-ref-bindings #q>" +
-              "<div text=\"one\" #textLabel1=\"textDir\"></div>" +
-              "<div text=\"two\" #textLabel2=\"textDir\"></div>" +
-              "</needs-query-by-ref-bindings>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            var q = view.debugElement.children[0].getLocal("q");
-            view.detectChanges();
-            expect(q.query.first.text, "one");
-            expect(q.query.last.text, "two");
-            completer.done();
-          });
-        });
-      });
-      test("should support dynamically inserted directives", () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template = "<needs-query-by-ref-binding #q>" +
-              "<div *ngFor=\"let item of list\" [text]=\"item\" #textLabel=\"textDir\"></div>" +
-              "</needs-query-by-ref-binding>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            var q = view.debugElement.children[0].getLocal("q");
-            view.debugElement.componentInstance.list = ["1d", "2d"];
-            view.detectChanges();
-            view.debugElement.componentInstance.list = ["2d", "1d"];
-            view.detectChanges();
-            expect(q.query.last.text, "1d");
-            completer.done();
-          });
-        });
-      });
-      test(
-          "should contain all the elements in the light dom with the given var binding",
-          () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template = "<needs-query-by-ref-binding #q>" +
-              "<div template=\"ngFor: let item of list\">" +
-              "<div #textLabel>{{item}}</div>" +
-              "</div>" +
-              "</needs-query-by-ref-binding>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            var q = view.debugElement.children[0].getLocal("q");
-            view.debugElement.componentInstance.list = ["1d", "2d"];
-            view.detectChanges();
-            expect(q.query.first.nativeElement, hasTextContent("1d"));
-            expect(q.query.last.nativeElement, hasTextContent("2d"));
-            completer.done();
-          });
-        });
-      });
-      test(
-          "should contain all the elements in the light dom even if they get projected",
-          () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template = "<needs-query-and-project #q>" +
-              "<div text=\"hello\"></div><div text=\"world\"></div>" +
-              "</needs-query-and-project>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            view.detectChanges();
-            expect(asNativeElements(view.debugElement.children),
-                hasTextContent("hello|world|"));
-            completer.done();
-          });
-        });
-      });
-      test("should support querying the view by using a view query", () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template =
-              "<needs-view-query-by-ref-binding #q></needs-view-query-by-ref-binding>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            NeedsViewQueryByLabel q =
-                view.debugElement.children[0].getLocal("q");
-            view.detectChanges();
-            expect(q.query.first.nativeElement, hasTextContent("text"));
-            completer.done();
-          });
-        });
-      });
-      test("should contain all child directives in the view dom", () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template = "<needs-view-children #q></needs-view-children>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            view.detectChanges();
-            var q = view.debugElement.children[0].getLocal("q");
-            view.detectChanges();
-            expect(q.textDirChildren.length, 1);
-            expect(q.numberOfChildrenAfterViewInit, 1);
-            completer.done();
-          });
-        });
-      });
+
+    test('should contain first view child', () async {
+      final testBed = new NgTestBed<TestsViewChildComponent>();
+      final testFixture = await testBed.create();
+      expect(testFixture.text.trim(), 'a');
     });
-    group("querying in the view", () {
-      test(
-          "should contain all the elements in the view with that have the given directive",
-          () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template =
-              "<needs-view-query #q><div text=\"ignoreme\"></div></needs-view-query>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            NeedsViewQuery q = view.debugElement.children[0].getLocal("q");
-            view.detectChanges();
-            expect(
-                q.query.map((TextDirective d) => d.text), ["1", "2", "3", "4"]);
-            completer.done();
-          });
-        });
-      });
-      test("should not include directive present on the host element",
-          () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template =
-              "<needs-view-query #q text=\"self\"></needs-view-query>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            NeedsViewQuery q = view.debugElement.children[0].getLocal("q");
-            view.detectChanges();
-            expect(
-                q.query.map((TextDirective d) => d.text), ["1", "2", "3", "4"]);
-            completer.done();
-          });
-        });
-      });
-      test("should reflect changes in the component", () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template = "<needs-view-query-if #q></needs-view-query-if>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            NeedsViewQueryIf q = view.debugElement.children[0].getLocal("q");
-            view.detectChanges();
-            expect(q.query, hasLength(0));
-            q.show = true;
-            view.detectChanges();
-            expect(q.query, hasLength(1));
-            expect(q.query.first.text, "1");
-            completer.done();
-          });
-        });
-      });
-      test("should not be affected by other changes in the component",
-          () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template =
-              "<needs-view-query-nested-if #q></needs-view-query-nested-if>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            NeedsViewQueryNestedIf q =
-                view.debugElement.children[0].getLocal("q");
-            view.detectChanges();
-            expect(q.query.length, 1);
-            expect(q.query.first.text, "1");
-            q.show = false;
-            view.detectChanges();
-            expect(q.query.length, 1);
-            expect(q.query.first.text, "1");
-            completer.done();
-          });
-        });
-      });
-      test(
-          "should maintain directives in pre-order depth-first DOM order after dynamic insertion",
-          () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template = "<needs-view-query-order #q></needs-view-query-order>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            NeedsViewQueryOrder q = view.debugElement.children[0].getLocal("q");
-            view.detectChanges();
-            expect(
-                q.query.map((TextDirective d) => d.text), ["1", "2", "3", "4"]);
-            q.list = ["-3", "2"];
-            view.detectChanges();
-            expect(q.query.map((TextDirective d) => d.text),
-                ["1", "-3", "2", "4"]);
-            completer.done();
-          });
-        });
-      });
-      test(
-          "should maintain directives in pre-order depth-first DOM order after dynamic insertion",
-          () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template =
-              "<needs-view-query-order-with-p #q></needs-view-query-order-with-p>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            NeedsViewQueryOrderWithParent q =
-                view.debugElement.children[0].getLocal("q");
-            view.detectChanges();
-            expect(
-                q.query.map((TextDirective d) => d.text), ["1", "2", "3", "4"]);
-            q.list = ["-3", "2"];
-            view.detectChanges();
-            expect(q.query.map((TextDirective d) => d.text),
-                ["1", "-3", "2", "4"]);
-            completer.done();
-          });
-        });
+
+    test('should contain all direct content children in embedded view',
+        () async {
+      final testBed = new NgTestBed<TestsEmbeddedContentChildrenComponent>();
+      final testFixture = await testBed.create();
+      expect(testFixture.text.trim(), '1');
+      await testFixture.update((component) => component.showContent = true);
+      expect(testFixture.text.trim(), '1|2|4');
+    });
+
+    test('should contain all content children in embedded view', () async {
+      final testBed =
+          new NgTestBed<TestsEmbeddedContentChildrenDescendantsComponent>();
+      final testFixture = await testBed.create();
+      expect(testFixture.text.trim(), '1');
+      await testFixture.update((component) => component.showContent = true);
+      expect(testFixture.text.trim(), '1|2|3|4');
+    });
+
+    test('should contain first content child in embedded view', () async {
+      final testBed = new NgTestBed<TestsEmbeddedContentChildComponent>();
+      final testFixture = await testBed.create();
+      expect(testFixture.text.trim(), isEmpty);
+      await testFixture.update((component) => component.showContent = true);
+      expect(testFixture.text.trim(), '1');
+    });
+
+    test('should contain all view children in embedded view', () async {
+      final testBed = new NgTestBed<TestsEmbeddedViewChildrenComponent>();
+      final testFixture = await testBed.create();
+      expect(testFixture.text.trim(), isEmpty);
+      await testFixture.update((component) => component.showView = true);
+      expect(testFixture.text.trim(), 'a|b|c');
+    });
+
+    test('should contain first view child in embedded view', () async {
+      final testBed = new NgTestBed<TestsEmbeddedViewChildComponent>();
+      final testFixture = await testBed.create();
+      expect(testFixture.text.trim(), 'c');
+      await testFixture.update((component) => component.showView = true);
+      expect(testFixture.text.trim(), 'a');
+    });
+
+    test('should handle moved directives', () async {
+      final testBed = new NgTestBed<MovesDirectiveComponent>();
+      final testFixture = await testBed.create();
+      expect(testFixture.text.trim(), '1|2|3');
+      await testFixture.update((component) => component.list = ['3', '2']);
+      expect(testFixture.text.trim(), '3|2');
+    });
+
+    test('should support transclusion', () async {
+      final testBed = new NgTestBed<TestsTranscludedContentChildrenComponent>();
+      final testFixture = await testBed.create();
+      expect(testFixture.text.trim(), '2|7');
+    });
+
+    test('should not be affected by unrelated changes', () async {
+      final testBed = new NgTestBed<UnrelatedChangesComponent>();
+      final testFixture = await testBed.create();
+      expect(testFixture.text.trim(), '1');
+      await testFixture.update((component) {
+        component.showInertDirective = false;
       });
-      test("should handle long ngFor cycles", () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template = "<needs-view-query-order #q></needs-view-query-order>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            NeedsViewQueryOrder q = view.debugElement.children[0].getLocal("q");
-            // no significance to 50, just a reasonably large cycle.
-            for (var i = 0; i < 50; i++) {
-              var newString = i.toString();
-              q.list = [newString];
-              view.detectChanges();
-              expect(q.query.map((TextDirective d) => d.text),
-                  ["1", newString, "4"]);
-            }
-            completer.done();
-          });
+      expect(testFixture.text.trim(), '1');
+    });
+
+    test('should handle long ngFor cycles', () async {
+      final testBed = new NgTestBed<LongNgForCycleComponent>();
+      final testFixture = await testBed.create();
+      // No significance to 50, just a reasonably long cycle.
+      for (var i = 0; i < 50; i++) {
+        await testFixture.update((component) {
+          component.list = ['$i', '${i + 1}'];
         });
+        expect(testFixture.text.trim(), '$i|${i + 1}');
+      }
+    });
+
+    test('should support more than three queries', () async {
+      final testBed = new NgTestBed<FourQueriesComponent>();
+      final testFixture = await testBed.create();
+      expect(testFixture.text.trim(), '1|1|1|1');
+    });
+  });
+
+  group('query for TemplateRef', () {
+    test('should find content and view children', () async {
+      final testBed = new NgTestBed<TestsTemplateRefComponent>();
+      final testFixture = await testBed.create();
+      expect(testFixture.rootElement.querySelectorAll('.embedded-from-content'),
+          hasLength(2));
+      expect(testFixture.rootElement.querySelectorAll('.embedded-from-view'),
+          hasLength(2));
+    });
+
+    test('should find named content child and named view child', () async {
+      final testBed = new NgTestBed<TestsNamedTemplateRefComponent>();
+      final testFixture = await testBed.create();
+      expect(testFixture.rootElement.querySelectorAll('.embedded-from-content'),
+          hasLength(1));
+      expect(testFixture.rootElement.querySelectorAll('.embedded-from-view'),
+          hasLength(1));
+    });
+  });
+
+  group('query for a different token via read', () {
+    test('should contain all content children', () async {
+      final testBed = new NgTestBed<TestsReadsContentChildrenComponent>();
+      final testFixture = await testBed.create();
+      expect(testFixture.text.trim(), '1|3');
+    });
+
+    test('should contain the first content child', () async {
+      final testBed = new NgTestBed<TestsReadsContentChildComponent>();
+      final testFixture = await testBed.create();
+      expect(testFixture.text.trim(), '2');
+    });
+
+    test('should contain all view children', () async {
+      final testBed = new NgTestBed<ReadsViewChildrenComponent>();
+      final testFixture = await testBed.create();
+      expect(testFixture.text.trim(), '2|3');
+    });
+
+    test('should contain the first view child', () async {
+      final testBed = new NgTestBed<ReadsViewChildComponent>();
+      final testFixture = await testBed.create();
+      expect(testFixture.text.trim(), '2');
+    });
+
+    test('should support ViewContainer', () async {
+      final testBed = new NgTestBed<TestsReadsViewContainerRefComponent>();
+      final testFixture = await testBed.create();
+      expect(testFixture.text.trim(), 'Embedded in view container!');
+    });
+  });
+
+  group('changes', () {
+    test('should update query results', () async {
+      final testBed = new NgTestBed<ChangesViewChildrenComponent>();
+      final testFixture = await testBed.create();
+      expect(testFixture.text.trim(), '1|2|3');
+      await testFixture.update((component) {
+        component.x = '3';
+        component.z = '1';
       });
-      test("should support more than three queries", () async {
-        return inject([TestComponentBuilder, AsyncTestCompleter],
-            (TestComponentBuilder tcb, AsyncTestCompleter completer) {
-          var template =
-              "<needs-four-queries #q><div text=\"1\"></div></needs-four-queries>";
-          tcb
-              .overrideTemplate(MyComp, template)
-              .createAsync(MyComp)
-              .then((view) {
-            view.detectChanges();
-            var q = view.debugElement.children[0].getLocal("q");
-            expect(q.query1, isNotNull);
-            expect(q.query2, isNotNull);
-            expect(q.query3, isNotNull);
-            expect(q.query4, isNotNull);
-            completer.done();
-          });
-        });
+      expect(testFixture.text.trim(), '3|2|1');
+    });
+
+    test('should remove destroyed directives from query results', () async {
+      final testBed = new NgTestBed<DestroysViewChildrenComponent>();
+      var component;
+      final testFixture = await testBed.create(
+          beforeChangeDetection: (instance) => component = instance);
+      expect(component.textDirectives, hasLength(1));
+      await testFixture.update((component) => component.showView = false);
+      expect(component.textDirectives, hasLength(0));
+      await testFixture.update((component) => component.showView = true);
+      expect(component.textDirectives, hasLength(1));
+    });
+  });
+
+  group('query for variable binding', () {
+    test('should contain all view children', () async {
+      final testBed = new NgTestBed<LabeledViewChildrenComponent>();
+      final testFixture = await testBed.create();
+      expect(testFixture.text.trim(), '1|2|4|8');
+    });
+
+    test('should support multiple variables', () async {
+      final testBed = new NgTestBed<MultipleLabeledViewChildrenComponent>();
+      final testFixture = await testBed.create();
+      expect(testFixture.text.trim(), '0|1');
+    });
+
+    test('should support changes', () async {
+      final testBed = new NgTestBed<LabeledViewChildrenComponent>();
+      final testFixture = await testBed.create();
+      await testFixture.update((component) {
+        component.list = ['8', '4', '2', '1'];
       });
+      expect(testFixture.text.trim(), '8|4|2|1');
+    });
+
+    test('should support element binding', () async {
+      var component;
+      final testBed = new NgTestBed<LabeledElementViewChildrenComponent>();
+      await testBed.create(beforeChangeDetection: (comp) => component = comp);
+      final divIt = component.elementRefs.iterator;
+      final itemIt = component.list.iterator;
+
+      while (divIt.moveNext()) {
+        itemIt.moveNext();
+        expect(divIt.current.nativeElement.text, itemIt.current);
+      }
+
+      expect(itemIt.moveNext(), isFalse);
     });
   });
 }
 
-@Directive(selector: "[text]", inputs: const ["text"], exportAs: "textDir")
-@Injectable()
+@Directive(
+  selector: '[text]',
+  exportAs: 'textDirective',
+)
 class TextDirective {
+  @Input()
   String text;
-  TextDirective();
 }
 
-@Component(selector: "needs-content-children", template: "")
-class NeedsContentChildren implements AfterContentInit {
-  @ContentChildren(TextDirective)
-  QueryList<TextDirective> textDirChildren;
-  num numberOfChildrenAfterContentInit;
-  @override
-  ngAfterContentInit() {
-    this.numberOfChildrenAfterContentInit = this.textDirChildren.length;
-  }
+abstract class TextDirectivesRenderer {
+  Iterable<TextDirective> get textDirectives;
+
+  String get text => textDirectives.map((dir) => dir.text).join('|');
 }
 
 @Component(
-    selector: "needs-view-children",
-    template: "<div text></div>",
-    directives: const [TextDirective])
-class NeedsViewChildren implements AfterViewInit {
-  @ViewChildren(TextDirective)
-  QueryList<TextDirective> textDirChildren;
-  num numberOfChildrenAfterViewInit;
-  @override
-  ngAfterViewInit() {
-    this.numberOfChildrenAfterViewInit = this.textDirChildren.length;
-  }
+  selector: 'content-children',
+  template: '<div>{{text}}</div>',
+)
+class ContentChildrenComponent extends TextDirectivesRenderer {
+  @ContentChildren(TextDirective)
+  QueryList<TextDirective> textDirectives;
 }
 
-@Component(selector: "needs-content-child", template: "")
-class NeedsContentChild implements AfterContentInit, AfterContentChecked {
-  TextDirective _child;
-  @ContentChild(TextDirective)
-  set child(value) {
-    this._child = value;
-    this.log.add(["setter", value != null ? value.text : null]);
-  }
-
-  get child {
-    return this._child;
-  }
-
-  var log = [];
-  @override
-  ngAfterContentInit() {
-    this.log.add(["init", child != null ? child.text : null]);
-  }
+@Component(
+  selector: 'tests-content-children',
+  template: '''
+<div text="1"></div>
+<content-children text="2">
+  <div text="3">
+    <div text="4"></div>
+  </div>
+  <div text="5"></div>
+</content-children>
+<div text="6"></div>''',
+  directives: const [
+    ContentChildrenComponent,
+    TextDirective,
+  ],
+)
+class TestsContentChildrenComponent {}
 
-  @override
-  ngAfterContentChecked() {
-    this.log.add(["check", child != null ? child.text : null]);
-  }
+@Component(
+  selector: 'content-children-descendants',
+  template: '<div>{{text}}</div>',
+)
+class ContentChildrenDescendantsComponent extends TextDirectivesRenderer {
+  @ContentChildren(TextDirective, descendants: true)
+  QueryList<TextDirective> textDirectives;
 }
 
 @Component(
-    selector: "needs-view-child",
-    template: '''
-    <div *ngIf="shouldShow" text="foo"></div>
-  ''',
-    directives: const [NgIf, TextDirective])
-class NeedsViewChild implements AfterViewInit, AfterViewChecked {
-  bool shouldShow = true;
-  bool shouldShow2 = false;
-  TextDirective _child;
-  @ViewChild(TextDirective)
-  set child(value) {
-    this._child = value;
-    this.log.add(["setter", value != null ? value.text : null]);
-  }
+  selector: 'tests-content-children-descendants',
+  template: '''
+<div text="1"></div>
+<content-children-descendants text="2">
+  <div text="3">
+    <div text="4"></div>
+  </div>
+  <div text="5"></div>
+</content-children-descendants>
+<div text="6"></div>''',
+  directives: const [
+    ContentChildrenDescendantsComponent,
+    TextDirective,
+  ],
+)
+class TestsContentChildrenDescendantsComponent {}
 
-  get child {
-    return this._child;
-  }
+@Component(
+  selector: 'content-child',
+  template: '<div>{{textDirective?.text}}</div>',
+)
+class ContentChildComponent {
+  @ContentChild(TextDirective)
+  TextDirective textDirective;
+}
 
-  var log = [];
-  @override
-  ngAfterViewInit() {
-    this.log.add(["init", child != null ? child.text : null]);
-  }
+@Component(
+  selector: 'tests-content-child',
+  template: '''
+<div text="1"></div>
+<content-child text="2">
+  <div text="3">
+    <div text="4"></div>
+  </div>
+  <div text="5"></div>
+</content-child>
+<div text="6"></div>''',
+  directives: const [
+    ContentChildComponent,
+    TextDirective,
+  ],
+)
+class TestsContentChildComponent {}
 
-  @override
-  ngAfterViewChecked() {
-    this.log.add(["check", child != null ? child.text : null]);
-  }
+@Component(
+  selector: 'view-children',
+  template: '''
+<div text="a">
+  <div text="b"></div>
+</div>
+<div>{{text}}</div>
+<div text="c"></div>''',
+  directives: const [
+    TextDirective,
+  ],
+)
+class ViewChildrenComponent extends TextDirectivesRenderer {
+  @ViewChildren(TextDirective)
+  QueryList<TextDirective> textDirectives;
 }
 
 @Component(
-    selector: "needs-static-content-view-child",
-    template: '''
-    <div text="viewFoo"></div>
-  ''',
-    directives: const [TextDirective])
-class NeedsStaticContentAndViewChild {
-  @ContentChild(TextDirective)
-  TextDirective contentChild;
+  selector: 'tests-view-children',
+  template: '''
+<div text="1"></div>
+<view-children text="2">
+  <div text="3"></div>
+</view-children>
+<div text="4"></div>''',
+  directives: const [
+    TextDirective,
+    ViewChildrenComponent,
+  ],
+)
+class TestsViewChildrenComponent {}
+
+@Component(
+  selector: 'view-child',
+  template: '''
+<div text="a">
+  <div text="b"></div>
+</div>
+<div>{{textDirective.text}}</div>
+<div text="c"></div>''',
+  directives: const [
+    TextDirective,
+  ],
+)
+class ViewChildComponent {
   @ViewChild(TextDirective)
-  TextDirective viewChild;
+  TextDirective textDirective;
 }
 
-@Directive(selector: "[dir]")
-@Injectable()
-class InertDirective {
-  InertDirective();
-}
+@Component(
+  selector: 'tests-view-children',
+  template: '''
+<div text="1"></div>
+<view-child text="2">
+  <div text="3"></div>
+</view-child>
+<div text="4"></div>''',
+  directives: const [
+    TextDirective,
+    ViewChildComponent,
+  ],
+)
+class TestsViewChildComponent {}
 
 @Component(
-    selector: "needs-query",
-    directives: const [NgFor, TextDirective],
-    template:
-        "<div text=\"ignoreme\"></div><b *ngFor=\"let  dir of query\">{{dir.text}}|</b>")
-@Injectable()
-class NeedsQuery {
-  @ContentChildren(TextDirective)
-  QueryList<TextDirective> query;
+  selector: 'tests-embedded-content-children',
+  template: '''
+<content-children text="1">
+  <template [ngIf]="showContent">
+    <div text="2">
+      <div text="3"></div>
+    </div>
+    <div text="4"></div>
+  </template>
+</content-children>''',
+  directives: const [
+    ContentChildrenComponent,
+    NgIf,
+    TextDirective,
+  ],
+)
+class TestsEmbeddedContentChildrenComponent {
+  bool showContent = false;
 }
 
-@Component(selector: "needs-four-queries", template: "")
-class NeedsFourQueries {
-  @ContentChild(TextDirective)
-  TextDirective query1;
-  @ContentChild(TextDirective)
-  TextDirective query2;
-  @ContentChild(TextDirective)
-  TextDirective query3;
-  @ContentChild(TextDirective)
-  TextDirective query4;
+@Component(
+  selector: 'tests-embedded-content-children',
+  template: '''
+<content-children-descendants text="1">
+  <template [ngIf]="showContent">
+    <div text="2">
+      <div text="3"></div>
+    </div>
+    <div text="4"></div>
+  </template>
+</content-children-descendants>''',
+  directives: const [
+    ContentChildrenDescendantsComponent,
+    NgIf,
+    TextDirective,
+  ],
+)
+class TestsEmbeddedContentChildrenDescendantsComponent {
+  bool showContent = false;
 }
 
 @Component(
-    selector: "needs-query-desc",
-    directives: const [NgFor],
-    template: "<div *ngFor=\"let  dir of query\">{{dir.text}}|</div>")
-@Injectable()
-class NeedsQueryDesc {
-  @ContentChildren(TextDirective, descendants: true)
-  QueryList<TextDirective> query;
+  selector: 'tests-embedded-content-children',
+  template: '''
+<content-child>
+  <div *ngIf="showContent" text="1">
+    <div text="2"></div>
+  </div>
+</content-child>''',
+  directives: const [
+    ContentChildComponent,
+    NgIf,
+    TextDirective,
+  ],
+)
+class TestsEmbeddedContentChildComponent {
+  bool showContent = false;
 }
 
 @Component(
-    selector: "needs-query-by-ref-binding",
-    directives: const [],
-    template: "<ng-content>")
-@Injectable()
-class NeedsQueryByLabel {
-  @ContentChildren("textLabel", descendants: true)
-  QueryList<dynamic> query;
+  selector: 'embedded-view-children',
+  template: '''
+<template [ngIf]="showView">
+  <div text="a">
+    <div text="b"></div>
+  </div>
+  <div text="c"></div>
+</template>
+<div>{{text}}</div>''',
+  directives: const [
+    NgIf,
+    TextDirective,
+  ],
+)
+class TestsEmbeddedViewChildrenComponent extends TextDirectivesRenderer {
+  bool showView = false;
+
+  @ViewChildren(TextDirective)
+  QueryList<TextDirective> textDirectives;
 }
 
 @Component(
-    selector: "needs-view-query-by-ref-binding",
-    directives: const [],
-    template: "<div #textLabel>text</div>")
-@Injectable()
-class NeedsViewQueryByLabel {
-  @ViewChildren("textLabel")
-  QueryList<dynamic> query;
+  selector: 'embedded-view-child',
+  template: '''
+<div *ngIf="showView" text="a">
+  <div text="b"></div>
+</div>
+<div text="c"></div>
+<div>{{textDirective?.text}}</div>''',
+  directives: const [
+    NgIf,
+    TextDirective,
+  ],
+)
+class TestsEmbeddedViewChildComponent {
+  bool showView = false;
+
+  @ViewChild(TextDirective)
+  TextDirective textDirective;
 }
 
 @Component(
-    selector: "needs-query-by-ref-bindings",
-    directives: const [],
-    template: "<ng-content>")
-@Injectable()
-class NeedsQueryByTwoLabels {
-  @ContentChildren("textLabel1,textLabel2", descendants: true)
-  QueryList<dynamic> query;
+  selector: 'moves-directive',
+  template: '''
+<content-children>
+  <div *ngFor="let item of list" text="{{item}}"></div>
+</content-children>''',
+  directives: const [
+    ContentChildrenComponent,
+    NgFor,
+    TextDirective,
+  ],
+)
+class MovesDirectiveComponent {
+  List<String> list = <String>['1', '2', '3'];
 }
 
 @Component(
-    selector: "needs-query-and-project",
-    directives: const [NgFor],
-    template:
-        "<div *ngFor=\"let  dir of query\">{{dir.text}}|</div><ng-content></ng-content>")
-@Injectable()
-class NeedsQueryAndProject {
+  selector: 'transcluded-content-children',
+  template: '<ng-content></ng-content><div>{{text}}</div>',
+)
+class TranscludedContentChildrenComponent extends TextDirectivesRenderer {
   @ContentChildren(TextDirective)
-  QueryList<TextDirective> query;
+  QueryList<TextDirective> textDirectives;
 }
 
 @Component(
-    selector: "needs-view-query",
-    directives: const [TextDirective],
-    template: "<div text=\"1\"><div text=\"2\"></div></div>" +
-        "<div text=\"3\"></div><div text=\"4\"></div>")
-@Injectable()
-class NeedsViewQuery {
+  selector: 'tests-transcluded-content-children',
+  template: '''
+<transcluded-content-children>
+  <div text="2"></div>
+  <div text="7"></div>
+</transcluded-content-children>''',
+  directives: const [
+    TextDirective,
+    TranscludedContentChildrenComponent,
+  ],
+)
+class TestsTranscludedContentChildrenComponent {}
+
+@Directive(selector: '[inert]')
+class InertDirective {}
+
+@Component(
+    selector: 'unrelated-changes',
+    template: '''
+<div text="1"></div>
+<div *ngIf="showInertDirective" inert></div>
+<div>{{text}}</div>
+  ''',
+    directives: const [
+      InertDirective,
+      NgIf,
+      TextDirective,
+    ])
+class UnrelatedChangesComponent extends TextDirectivesRenderer {
+  bool showInertDirective = true;
+
   @ViewChildren(TextDirective)
-  QueryList<TextDirective> query;
+  QueryList<TextDirective> textDirectives;
 }
 
 @Component(
-    selector: "needs-view-query-if",
-    directives: const [NgIf, TextDirective],
-    template: "<div *ngIf=\"show\" text=\"1\"></div>")
-@Injectable()
-class NeedsViewQueryIf {
-  bool show;
+  selector: 'long-ng-for-cycle',
+  template: '''
+<div *ngFor="let item of list" [text]="item"></div>
+<div>{{text}}</div>
+''',
+  directives: const [
+    NgFor,
+    TextDirective,
+  ],
+)
+class LongNgForCycleComponent extends TextDirectivesRenderer {
+  List<String> list = <String>[];
+
   @ViewChildren(TextDirective)
-  QueryList<TextDirective> query;
-  NeedsViewQueryIf() {
-    this.show = false;
-  }
+  QueryList<TextDirective> textDirectives;
 }
 
 @Component(
-    selector: "needs-view-query-nested-if",
-    directives: const [NgIf, InertDirective, TextDirective],
-    template: "<div text=\"1\"><div *ngIf=\"show\"><div dir></div></div></div>")
-@Injectable()
-class NeedsViewQueryNestedIf {
-  bool show;
-  @ViewChildren(TextDirective)
-  QueryList<TextDirective> query;
-  NeedsViewQueryNestedIf() {
-    this.show = true;
-  }
+  selector: 'four-queries',
+  template: '''
+<div text="1"></div>
+<div>{{q1.text}}|{{q2.text}}|{{q3.text}}|{{q4.text}}</div>''',
+  directives: const [
+    TextDirective,
+  ],
+)
+class FourQueriesComponent {
+  @ViewChild(TextDirective)
+  TextDirective q1;
+
+  @ViewChild(TextDirective)
+  TextDirective q2;
+
+  @ViewChild(TextDirective)
+  TextDirective q3;
+
+  @ViewChild(TextDirective)
+  TextDirective q4;
 }
 
 @Component(
-    selector: "needs-view-query-order",
-    directives: const [NgFor, TextDirective, InertDirective],
-    template: "<div text=\"1\"></div>" +
-        "<div *ngFor=\"let  i of list\" [text]=\"i\"></div>" +
-        "<div text=\"4\"></div>")
-@Injectable()
-class NeedsViewQueryOrder {
-  @ViewChildren(TextDirective)
-  QueryList<TextDirective> query;
-  List<String> list;
-  NeedsViewQueryOrder() {
-    this.list = ["2", "3"];
+  selector: 'template-ref',
+  template: '''
+<template>
+  <div class="embedded-from-view"></div>
+</template>
+<template>
+  <div class="embedded-from-view"></div>
+</template>
+''',
+)
+class TemplateRefComponent implements AfterViewInit {
+  final ViewContainerRef viewContainerRef;
+
+  @ContentChildren(TemplateRef)
+  QueryList<TemplateRef> contentTemplateRefs;
+
+  @ViewChildren(TemplateRef)
+  QueryList<TemplateRef> viewTemplateRefs;
+
+  TemplateRefComponent(this.viewContainerRef);
+
+  @override
+  ngAfterViewInit() {
+    createEmbeddedViewsFrom(contentTemplateRefs);
+    createEmbeddedViewsFrom(viewTemplateRefs);
+  }
+
+  void createEmbeddedViewsFrom(Iterable<TemplateRef> templateRefs) {
+    for (var templateRef in templateRefs) {
+      viewContainerRef.createEmbeddedView(templateRef);
+    }
   }
 }
 
 @Component(
-    selector: "needs-view-query-order-with-p",
-    directives: const [NgFor, TextDirective, InertDirective],
-    template: "<div dir><div text=\"1\"></div>" +
-        "<div *ngFor=\"let  i of list\" [text]=\"i\"></div>" +
-        "<div text=\"4\"></div></div>")
-@Injectable()
-class NeedsViewQueryOrderWithParent {
-  @ViewChildren(TextDirective)
-  QueryList<TextDirective> query;
-  List<String> list;
-  NeedsViewQueryOrderWithParent() {
-    this.list = ["2", "3"];
+  selector: 'tests-template-ref',
+  template: '''
+<template-ref>
+  <template>
+    <div class="embedded-from-content"></div>
+  </template>
+  <template>
+    <div class="embedded-from-content"></div>
+  </template>
+</template-ref>''',
+  directives: const [
+    TemplateRefComponent,
+  ],
+)
+class TestsTemplateRefComponent {}
+
+@Component(
+  selector: 'named-template-ref',
+  template: '''
+<template #templateName>
+  <div class="embedded-from-view"></div>
+</template>
+''',
+)
+class NamedTemplateRefComponent implements AfterViewInit {
+  final ViewContainerRef viewContainerRef;
+
+  @ContentChild('templateName')
+  TemplateRef contentTemplateRef;
+
+  @ViewChild('templateName')
+  TemplateRef viewTemplateRef;
+
+  NamedTemplateRefComponent(this.viewContainerRef);
+
+  @override
+  ngAfterViewInit() {
+    viewContainerRef.createEmbeddedView(contentTemplateRef);
+    viewContainerRef.createEmbeddedView(viewTemplateRef);
   }
 }
 
 @Component(
-    selector: "needs-tpl", template: "<template let-x=\"shadow\"></template>")
-class NeedsTpl {
-  ViewContainerRef vc;
-  @ViewChildren(TemplateRef)
-  QueryList<TemplateRef> viewQuery;
-  @ContentChildren(TemplateRef)
-  QueryList<TemplateRef> query;
-  NeedsTpl(this.vc);
-}
+  selector: 'tests-named-template-ref',
+  template: '''
+<named-template-ref>
+  <template #templateName>
+    <div class="embedded-from-content"></div>
+  </template>
+</named-template-ref>''',
+  directives: const [
+    NamedTemplateRefComponent,
+  ],
+)
+class TestsNamedTemplateRefComponent {}
 
 @Component(
-    selector: "needs-named-tpl",
-    template: "<template #tpl let-x=\"shadow\"></template>")
-class NeedsNamedTpl {
-  ViewContainerRef vc;
-  @ViewChild("tpl")
-  TemplateRef viewTpl;
-  @ContentChild("tpl")
-  TemplateRef contentTpl;
-  NeedsNamedTpl(this.vc);
+  selector: 'reads-content-children',
+  template: '<div>{{text}}</div>',
+)
+class ReadsContentChildrenComponent extends TextDirectivesRenderer {
+  @ContentChildren('hasText', read: TextDirective)
+  QueryList<TextDirective> textDirectives;
 }
 
-@Component(selector: "needs-content-children-read", template: "")
-class NeedsContentChildrenWithRead {
-  @ContentChildren("q", read: TextDirective)
-  QueryList<TextDirective> textDirChildren;
-  @ContentChildren("nonExisting", read: TextDirective)
-  QueryList<TextDirective> nonExistingVar;
-}
+@Component(
+  selector: 'tests-reads-content-children',
+  template: '''
+<reads-content-children text="1" #hasText>
+  <div text="2"></div>
+  <div text="3" #hasText></div>
+</reads-content-children>''',
+  directives: const [
+    ReadsContentChildrenComponent,
+    TextDirective,
+  ],
+)
+class TestsReadsContentChildrenComponent {}
 
-@Component(selector: "needs-content-child-read", template: "")
-class NeedsContentChildWithRead {
-  @ContentChild("q", read: TextDirective)
-  TextDirective textDirChild;
-  @ContentChild("nonExisting", read: TextDirective)
-  TextDirective nonExistingVar;
+@Component(
+  selector: 'reads-content-child',
+  template: '<div>{{textDirective.text}}</div>',
+)
+class ReadsContentChildComponent {
+  @ContentChild('hasText', read: TextDirective)
+  TextDirective textDirective;
 }
 
 @Component(
-    selector: "needs-view-children-read",
-    template: "<div #q text=\"va\"></div><div #q text=\"vb\"></div>",
-    directives: const [TextDirective])
-class NeedsViewChildrenWithRead {
-  @ViewChildren("q", read: TextDirective)
-  QueryList<TextDirective> textDirChildren;
-  @ViewChildren("nonExisting", read: TextDirective)
-  QueryList<TextDirective> nonExistingVar;
+  selector: 'tests-reads-content-child',
+  template: '''
+<reads-content-child>
+  <div text="1"></div>
+  <div text="2" #hasText></div>
+</reads-content-child>
+''',
+  directives: const [
+    ReadsContentChildComponent,
+    TextDirective,
+  ],
+)
+class TestsReadsContentChildComponent {}
+
+@Component(
+  selector: 'reads-view-children',
+  template: '''
+<div text="1"></div>
+<div text="2" #hasText></div>
+<div>{{text}}</div>
+<div text="3" #hasText></div>''',
+  directives: const [
+    TextDirective,
+  ],
+)
+class ReadsViewChildrenComponent extends TextDirectivesRenderer {
+  @ViewChildren('hasText', read: TextDirective)
+  QueryList<TextDirective> textDirectives;
 }
 
 @Component(
-    selector: "needs-view-child-read",
-    template: "<div #q text=\"va\"></div>",
-    directives: const [TextDirective])
-class NeedsViewChildWithRead {
-  @ViewChild("q", read: TextDirective)
-  TextDirective textDirChild;
-  @ViewChild("nonExisting", read: TextDirective)
-  TextDirective nonExistingVar;
+  selector: 'reads-view-child',
+  template: '''
+<div text="1"></div>
+<div text="2" #hasText></div>
+<div>{{textDirective.text}}</div>
+<div text="3" #hasText></div>''',
+  directives: const [
+    TextDirective,
+  ],
+)
+class ReadsViewChildComponent {
+  @ViewChild('hasText', read: TextDirective)
+  TextDirective textDirective;
 }
 
-@Component(selector: "needs-viewcontainer-read", template: "<div #q></div>")
-class NeedsViewContainerWithRead {
-  @ViewChild("q", read: ViewContainerRef)
-  ViewContainerRef vc;
-  @ViewChild("nonExisting", read: ViewContainerRef)
-  ViewContainerRef nonExistingVar;
+@Component(
+  selector: 'reads-view-container-ref',
+  template: '<div #hasViewContainerRef></div>',
+)
+class ReadsViewContainerRefComponent implements AfterViewInit {
   @ContentChild(TemplateRef)
-  TemplateRef template;
-  createView() {
-    this.vc.createEmbeddedView(this.template);
+  TemplateRef templateRef;
+
+  @ViewChild('hasViewContainerRef', read: ViewContainerRef)
+  ViewContainerRef viewContainerRef;
+
+  @override
+  ngAfterViewInit() {
+    viewContainerRef.createEmbeddedView(templateRef);
   }
 }
 
 @Component(
-    selector: "my-comp",
-    directives: const [
-      NeedsQuery,
-      NeedsQueryDesc,
-      NeedsQueryByLabel,
-      NeedsQueryByTwoLabels,
-      NeedsQueryAndProject,
-      NeedsViewQuery,
-      NeedsViewQueryIf,
-      NeedsViewQueryNestedIf,
-      NeedsViewQueryOrder,
-      NeedsViewQueryByLabel,
-      NeedsViewQueryOrderWithParent,
-      NeedsContentChildren,
-      NeedsViewChildren,
-      NeedsViewChild,
-      NeedsStaticContentAndViewChild,
-      NeedsContentChild,
-      NeedsTpl,
-      NeedsNamedTpl,
-      TextDirective,
-      InertDirective,
-      NgIf,
-      NgFor,
-      NeedsFourQueries,
-      NeedsContentChildrenWithRead,
-      NeedsContentChildWithRead,
-      NeedsViewChildrenWithRead,
-      NeedsViewChildWithRead,
-      NeedsViewContainerWithRead
-    ],
-    template: "")
-@Injectable()
-class MyComp {
-  bool shouldShow;
-  var list;
-  MyComp() {
-    this.shouldShow = false;
-    this.list = ["1d", "2d", "3d"];
-  }
+  selector: 'tests-reads-view-container-ref',
+  template: '''
+<reads-view-container-ref>
+  <template>Embedded in view container!</template>
+</reads-view-container-ref>''',
+  directives: const [
+    ReadsViewContainerRefComponent,
+  ],
+)
+class TestsReadsViewContainerRefComponent {}
+
+@Component(
+  selector: 'changes-view-children',
+  template: '''
+<div [text]="x"></div>
+<div [text]="y">
+  <div [text]="z"></div>
+</div>
+<div>{{text}}</div>
+''',
+  directives: const [
+    TextDirective,
+  ],
+)
+class ChangesViewChildrenComponent extends TextDirectivesRenderer {
+  String x = '1';
+  String y = '2';
+  String z = '3';
+
+  @ViewChildren(TextDirective)
+  QueryList<TextDirective> textDirectives;
+}
+
+@Component(
+  selector: 'destroys-view-children',
+  template: '''
+<template [ngIf]="showView">
+  <div text="1"></div>
+</template>''',
+  directives: const [
+    NgIf,
+    TextDirective,
+  ],
+)
+class DestroysViewChildrenComponent {
+  bool showView = true;
+
+  @ViewChildren(TextDirective)
+  QueryList<TextDirective> textDirectives;
+}
+
+@Component(
+  selector: 'labeled-view-children',
+  template: '''
+<div
+    *ngFor="let item of list"
+    [text]="item"
+    #textLabel="textDirective">
+</div>
+<div>{{text}}</div>''',
+  directives: const [
+    NgFor,
+    TextDirective,
+  ],
+)
+class LabeledViewChildrenComponent extends TextDirectivesRenderer {
+  List<String> list = <String>['1', '2', '4', '8'];
+
+  @ViewChildren('textLabel')
+  QueryList<TextDirective> textDirectives;
+}
+
+@Component(
+  selector: 'multiple-labeled-view-children',
+  template: '''
+<div text="0" #textLabel1="textDirective"></div>
+<div text="1" #textLabel2="textDirective"></div>
+<div>{{text}}</div>''',
+  directives: const [
+    NgFor,
+    TextDirective,
+  ],
+)
+class MultipleLabeledViewChildrenComponent extends TextDirectivesRenderer {
+  @ViewChildren('textLabel1,textLabel2')
+  QueryList<TextDirective> textDirectives;
+}
+
+@Component(
+  selector: 'labeled-element-view-children',
+  template: '''
+<div template="ngFor: let item of list">
+  <div #divLabel>{{item}}</div>
+</div>''',
+  directives: const [
+    NgFor,
+  ],
+)
+class LabeledElementViewChildrenComponent {
+  List<String> list = <String>['3', '1', '4'];
+
+  @ViewChildren('divLabel')
+  QueryList<dynamic> elementRefs;
 }