fix(metadata): Allow spacing in multiple selectors (#7418)

Author: Suguru Inatomi

modules/@angular/core/src/metadata/di.ts

@@ -1,4 +1,4 @@
-import {stringify, isString, Type} from '../../src/facade/lang';
+import {stringify, isString, Type, StringWrapper} from '../../src/facade/lang';
 import {DependencyMetadata} from '../di/metadata';
 import {resolveForwardRef} from '../di/forward_ref';
 
@@ -184,7 +184,7 @@ export class QueryMetadata extends DependencyMetadata {
    * returns a list of variable bindings this is querying for.
    * Only applicable if this is a variable bindings query.
    */
-  get varBindings(): string[] { return this.selector.split(','); }
+  get varBindings(): string[] { return StringWrapper.split(this.selector, /\s*,\s*/g); }
 
   toString(): string { return `@Query(${stringify(this.selector)})`; }
 }

modules/@angular/core/test/metadata/di_spec.ts

@@ -0,0 +1,107 @@
+import {
+  AsyncTestCompleter,
+  beforeEach,
+  ddescribe,
+  describe,
+  expect,
+  iit,
+  inject,
+  it,
+  xit,
+} from '@angular/core/testing/testing_internal';
+import {  TestComponentBuilder } from '@angular/compiler/testing';
+
+import {
+  Component,
+  ViewMetadata,
+  Input,
+  Directive,
+  ViewChild,
+  ViewChildren,
+  QueryList,
+  ElementRef
+} from '@angular/core';
+
+export function main() {
+  describe('ViewChild', () => {
+    it('should support type selector',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         tcb.overrideView(ViewChildTypeSelectorComponent,
+                          new ViewMetadata(
+                              {template: `<simple [marker]="'1'"></simple><simple [marker]="'2'"></simple>`, directives: [Simple]}))
+             .createAsync(ViewChildTypeSelectorComponent)
+             .then((view) => {
+               view.detectChanges();
+               expect(view.componentInstance.child).toBeDefined();
+               expect(view.componentInstance.child.marker).toBe("1");
+               async.done();
+             });
+       }));
+    it('should support string selector',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         tcb.overrideView(
+                ViewChildStringSelectorComponent,
+                new ViewMetadata({template: `<simple #child></simple>`, directives: [Simple]}))
+             .createAsync(ViewChildStringSelectorComponent)
+             .then((view) => {
+               view.detectChanges();
+               expect(view.componentInstance.child).toBeDefined();
+               async.done();
+             });
+       }));
+  });
+  describe('ViewChildren', () => {
+    it('should support type selector',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         tcb.overrideView(ViewChildrenTypeSelectorComponent,
+                          new ViewMetadata({template: `<simple></simple><simple></simple>`, directives: [Simple]}))
+             .createAsync(ViewChildrenTypeSelectorComponent)
+             .then((view) => {
+               view.detectChanges();
+               expect(view.componentInstance.children).toBeDefined();
+               expect(view.componentInstance.children.length).toBe(2);
+               async.done();
+             });
+       }));
+    it('should support string selector',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         tcb.overrideView(
+                ViewChildrenStringSelectorComponent,
+                new ViewMetadata({template: `<simple #child1></simple><simple #child2></simple>`, directives: [Simple]}))
+             .createAsync(ViewChildrenStringSelectorComponent)
+             .then((view) => {
+               view.detectChanges();
+               expect(view.componentInstance.children).toBeDefined();
+               expect(view.componentInstance.children.length).toBe(2);
+               async.done();
+             });
+       }));
+  });
+}
+
+
+@Directive({selector: "simple"})
+class Simple {
+  @Input() marker: string;
+}
+
+@Component({selector: 'view-child-type-selector'})
+class ViewChildTypeSelectorComponent {
+  @ViewChild(Simple) child: Simple;
+}
+
+@Component({selector: 'view-child-string-selector'})
+class ViewChildStringSelectorComponent {
+  @ViewChild("child") child: ElementRef;
+}
+
+@Component({selector: 'view-children-type-selector'})
+class ViewChildrenTypeSelectorComponent {
+  @ViewChildren(Simple) children: QueryList<Simple>;
+}
+
+@Component({selector: 'view-child-string-selector'})
+class ViewChildrenStringSelectorComponent {
+  // Allow comma separated selector (with spaces).
+  @ViewChildren("child1 , child2") children: QueryList<ElementRef>;
+}