import { AsyncTestCompleter, beforeEach, ddescribe, xdescribe, describe, dispatchEvent, expect, iit, inject, beforeEachProviders, it, xit, TestComponentBuilder } from 'angular2/testing_internal'; import {CONST_EXPR} from 'angular2/src/facade/lang'; import {Injectable, provide} from 'angular2/core'; import {NgIf} from 'angular2/common'; import {Directive, Component, ViewMetadata} from 'angular2/src/core/metadata'; @Component( {selector: 'child-comp', template: `Original {{childBinding}}`, directives: []}) @Injectable() class ChildComp { childBinding: string; constructor() { this.childBinding = 'Child'; } } @Component({selector: 'child-comp', template: `Mock`}) @Injectable() class MockChildComp { } @Component({ selector: 'parent-comp', template: `Parent()`, directives: [ChildComp] }) @Injectable() class ParentComp { } @Component({ selector: 'my-if-comp', template: `MyIf(More)`, directives: [NgIf] }) @Injectable() class MyIfComp { showMore: boolean = false; } @Component({selector: 'child-child-comp', template: `ChildChild`}) @Injectable() class ChildChildComp { } @Component({ selector: 'child-comp', template: `Original {{childBinding}}()`, directives: [ChildChildComp] }) @Injectable() class ChildWithChildComp { childBinding: string; constructor() { this.childBinding = 'Child'; } } @Component({selector: 'child-child-comp', template: `ChildChild Mock`}) @Injectable() class MockChildChildComp { } class FancyService { value: string = 'real value'; } class MockFancyService extends FancyService { value: string = 'mocked out value'; } @Component({ selector: 'my-service-comp', bindings: [FancyService], template: `injected value: {{fancyService.value}}` }) class TestBindingsComp { constructor(private fancyService: FancyService) {} } @Component({ selector: 'my-service-comp', viewProviders: [FancyService], template: `injected value: {{fancyService.value}}` }) class TestViewBindingsComp { constructor(private fancyService: FancyService) {} } @Component({selector: 'li1', template: `One`}) class ListDir1 { } @Component({selector: 'li1', template: `Alternate One`}) class ListDir1Alt { } @Component({selector: 'li2', template: `Two`}) class ListDir2 { } const LIST_CHILDREN = CONST_EXPR([ListDir1, ListDir2]); @Component( {selector: 'directive-list-comp', template: `()()`, directives: [LIST_CHILDREN]}) class DirectiveListComp { } export function main() { describe('test component builder', function() { it('should instantiate a component with valid DOM', inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { tcb.createAsync(ChildComp).then((componentFixture) => { componentFixture.detectChanges(); expect(componentFixture.nativeElement).toHaveText('Original Child'); async.done(); }); })); it('should allow changing members of the component', inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { tcb.createAsync(MyIfComp).then((componentFixture) => { componentFixture.detectChanges(); expect(componentFixture.nativeElement).toHaveText('MyIf()'); componentFixture.componentInstance.showMore = true; componentFixture.detectChanges(); expect(componentFixture.nativeElement).toHaveText('MyIf(More)'); async.done(); }); })); it('should override a template', inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { tcb.overrideTemplate(MockChildComp, 'Mock') .createAsync(MockChildComp) .then((componentFixture) => { componentFixture.detectChanges(); expect(componentFixture.nativeElement).toHaveText('Mock'); async.done(); }); })); it('should override a view', inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { tcb.overrideView(ChildComp, new ViewMetadata({template: 'Modified {{childBinding}}'})) .createAsync(ChildComp) .then((componentFixture) => { componentFixture.detectChanges(); expect(componentFixture.nativeElement).toHaveText('Modified Child'); async.done(); }); })); it('should override component dependencies', inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { tcb.overrideDirective(ParentComp, ChildComp, MockChildComp) .createAsync(ParentComp) .then((componentFixture) => { componentFixture.detectChanges(); expect(componentFixture.nativeElement).toHaveText('Parent(Mock)'); async.done(); }); })); it('should override items from a list', inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { tcb.overrideDirective(DirectiveListComp, ListDir1, ListDir1Alt) .createAsync(DirectiveListComp) .then((componentFixture) => { componentFixture.detectChanges(); expect(componentFixture.nativeElement).toHaveText('(Alternate One)(Two)'); async.done(); }); })); it("should override child component's dependencies", inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { tcb.overrideDirective(ParentComp, ChildComp, ChildWithChildComp) .overrideDirective(ChildWithChildComp, ChildChildComp, MockChildChildComp) .createAsync(ParentComp) .then((componentFixture) => { componentFixture.detectChanges(); expect(componentFixture.nativeElement) .toHaveText('Parent(Original Child(ChildChild Mock))'); async.done(); }); })); it('should override a provider', inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { tcb.overrideProviders(TestBindingsComp, [provide(FancyService, {useClass: MockFancyService})]) .createAsync(TestBindingsComp) .then((componentFixture) => { componentFixture.detectChanges(); expect(componentFixture.nativeElement) .toHaveText('injected value: mocked out value'); async.done(); }); })); it('should override a viewBinding', inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { tcb.overrideViewProviders(TestViewBindingsComp, [provide(FancyService, {useClass: MockFancyService})]) .createAsync(TestViewBindingsComp) .then((componentFixture) => { componentFixture.detectChanges(); expect(componentFixture.nativeElement) .toHaveText('injected value: mocked out value'); async.done(); }); })); }); }