import { AsyncTestCompleter, beforeEach, ddescribe, describe, el, expect, iit, inject, it, xit, beforeEachBindings, SpyObject, } from 'angular2/test_lib'; import {MapWrapper} from 'angular2/src/facade/collection'; import {DOM} from 'angular2/src/dom/dom_adapter'; import {DomTestbed, TestView} from './dom_testbed'; import {ViewDefinition, DirectiveMetadata, RenderViewRef} from 'angular2/src/render/api'; export function main() { describe('DomRenderer integration', () => { beforeEachBindings(() => [DomTestbed]); it('should create and destroy root host views while using the given elements in place', inject([AsyncTestCompleter, DomTestbed], (async, tb) => { tb.compiler.compileHost(someComponent) .then((hostProtoViewDto) => { var view = new TestView(tb.renderer.createRootHostView(hostProtoViewDto.render, '#root')); expect(view.rawView.rootNodes[0]).toEqual(tb.rootEl); tb.renderer.destroyView(view.viewRef); // destroying a root view should not disconnect it! expect(tb.rootEl.parentNode).toBeTruthy(); async.done(); }); })); it('should attach and detach component views', inject([AsyncTestCompleter, DomTestbed], (async, tb) => { tb.compileAll([ someComponent, new ViewDefinition({componentId: 'someComponent', template: 'hello', directives: []}) ]) .then((protoViewDtos) => { var rootView = tb.createRootView(protoViewDtos[0]); var cmpView = tb.createComponentView(rootView.viewRef, 0, protoViewDtos[1]); expect(tb.rootEl).toHaveText('hello'); tb.destroyComponentView(rootView.viewRef, 0, cmpView.viewRef); expect(tb.rootEl).toHaveText(''); async.done(); }); })); it('should not create LightDom instances if the host element is empty', inject([AsyncTestCompleter, DomTestbed], (async, tb) => { tb.compileAll([ someComponent, new ViewDefinition({ componentId: 'someComponent', template: ' \n ', directives: [someComponent] }) ]) .then((protoViewDtos) => { var rootView = tb.createRootView(protoViewDtos[0]); var cmpView = tb.createComponentView(rootView.viewRef, 0, protoViewDtos[1]); expect(cmpView.rawView.proto.elementBinders[0].componentId).toBe('someComponent'); expect(cmpView.rawView.boundElements[0].lightDom).toBe(null); async.done(); }); })); it('should update text nodes', inject([AsyncTestCompleter, DomTestbed], (async, tb) => { tb.compileAll([ someComponent, new ViewDefinition({componentId: 'someComponent', template: '{{a}}', directives: []}) ]) .then((protoViewDtos) => { var rootView = tb.createRootView(protoViewDtos[0]); var cmpView = tb.createComponentView(rootView.viewRef, 0, protoViewDtos[1]); tb.renderer.setText(cmpView.viewRef, 0, 'hello'); expect(tb.rootEl).toHaveText('hello'); async.done(); }); })); it('should update element properties', inject([AsyncTestCompleter, DomTestbed], (async, tb) => { tb.compileAll([ someComponent, new ViewDefinition({ componentId: 'someComponent', template: 'asdf', directives: [] }) ]) .then((protoViewDtos) => { var rootView = tb.createRootView(protoViewDtos[0]); var cmpView = tb.createComponentView(rootView.viewRef, 0, protoViewDtos[1]); tb.renderer.setElementProperty(cmpView.viewRef, 0, 'value', 'hello'); expect(DOM.childNodes(tb.rootEl)[0].value).toEqual('hello'); async.done(); }); })); it('should call actions on the element', inject([AsyncTestCompleter, DomTestbed], (async, tb) => { tb.compileAll([ someComponent, new ViewDefinition({ componentId: 'someComponent', template: '', directives: [directiveWithHostActions] }) ]) .then((protoViewDtos) => { var views = tb.createRootViews(protoViewDtos); var componentView = views[1]; tb.renderer.callAction(componentView.viewRef, 0, 'value = "val"', null); expect(DOM.getValue(DOM.childNodes(tb.rootEl)[0])).toEqual('val'); async.done(); }); })); it('should add and remove views to and from containers', inject([AsyncTestCompleter, DomTestbed], (async, tb) => { tb.compileAll([ someComponent, new ViewDefinition({ componentId: 'someComponent', template: '', directives: [] }) ]) .then((protoViewDtos) => { var rootView = tb.createRootView(protoViewDtos[0]); var cmpView = tb.createComponentView(rootView.viewRef, 0, protoViewDtos[1]); var childProto = protoViewDtos[1].elementBinders[0].nestedProtoView; expect(tb.rootEl).toHaveText(''); var childView = tb.createViewInContainer(cmpView.viewRef, 0, 0, childProto); expect(tb.rootEl).toHaveText('hello'); tb.destroyViewInContainer(cmpView.viewRef, 0, 0, childView.viewRef); expect(tb.rootEl).toHaveText(''); async.done(); }); })); it('should handle events', inject([AsyncTestCompleter, DomTestbed], (async, tb: DomTestbed) => { tb.compileAll([ someComponent, new ViewDefinition({ componentId: 'someComponent', template: '', directives: [] }) ]) .then((protoViewDtos) => { var rootView = tb.createRootView(protoViewDtos[0]); var cmpView = tb.createComponentView(rootView.viewRef, 0, protoViewDtos[1]); tb.triggerEvent(cmpView.viewRef, 0, 'change'); var eventEntry = cmpView.events[0]; // bound element index expect(eventEntry[0]).toEqual(0); // event type expect(eventEntry[1]).toEqual('change'); // actual event expect((>eventEntry[2]).get('$event').type).toEqual('change'); async.done(); }); })); }); } var someComponent = DirectiveMetadata.create( {id: 'someComponent', type: DirectiveMetadata.COMPONENT_TYPE, selector: 'some-comp'}); var directiveWithHostActions = DirectiveMetadata.create({ id: 'withHostActions', type: DirectiveMetadata.DIRECTIVE_TYPE, selector: '[with-host-actions]', host: MapWrapper.createFromStringMap({'@setValue': 'value = "val"'}) });