angular-cn/modules/angular2/test/render/dom/dom_renderer_integration_spec.js

import {
  AsyncTestCompleter,
  beforeEach,
  ddescribe,
  describe,
  el,
  elementText,
  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 create and destroy free host views',
        inject([AsyncTestCompleter, DomTestbed], (async, tb) => {
      tb.compiler.compileHost(someComponent).then( (hostProtoViewDto) => {
        var view = new TestView(tb.renderer.createView(hostProtoViewDto.render));
        var hostElement = tb.renderer.getHostElement(view.viewRef);
        DOM.appendChild(tb.rootEl, hostElement);

        tb.renderer.detachFreeHostView(null, view.viewRef);
        expect(DOM.parentElement(hostElement)).toBeFalsy();

        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 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: '<input [value]="someProp">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: '<input with-host-actions></input>',
          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: '<template>hello</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) => {
      tb.compileAll([someComponent,
        new ViewDefinition({
          componentId: 'someComponent',
          template: '<input (change)="doSomething()">',
          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(MapWrapper.get(eventEntry[2], '$event').type).toEqual('change');
        async.done();
      });

    }));

  });
}

var someComponent = new DirectiveMetadata({
  id: 'someComponent',
  type: DirectiveMetadata.COMPONENT_TYPE,
  selector: 'some-comp'
});

var directiveWithHostActions = new DirectiveMetadata({
  id: 'withHostActions',
  type: DirectiveMetadata.DIRECTIVE_TYPE,
  selector: '[with-host-actions]',
  hostActions: MapWrapper.createFromStringMap({
    'setValue' : 'value = "val"'
  })
});