diff --git a/modules/@angular/core/src/metadata/di.ts b/modules/@angular/core/src/metadata/di.ts index d22733e163..c1638a8888 100644 --- a/modules/@angular/core/src/metadata/di.ts +++ b/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)})`; } } diff --git a/modules/@angular/core/test/metadata/di_spec.ts b/modules/@angular/core/test/metadata/di_spec.ts new file mode 100644 index 0000000000..7c45f36723 --- /dev/null +++ b/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: ``, 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: ``, 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: ``, 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: ``, 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; +} + +@Component({selector: 'view-child-string-selector'}) +class ViewChildrenStringSelectorComponent { + // Allow comma separated selector (with spaces). + @ViewChildren("child1 , child2") children: QueryList; +}