TypeScript DOM.supportsDOMEvents方法代码示例

  describe('dom adapter', () => {
    it('should not coalesque text nodes', () => {
      var el1 = el('<div>a</div>');
      var el2 = el('<div>b</div>');
      DOM.appendChild(el2, DOM.firstChild(el1));
      expect(DOM.childNodes(el2).length).toBe(2);

      var el2Clone = DOM.clone(el2);
      expect(DOM.childNodes(el2Clone).length).toBe(2);
    });

    it('should clone correctly', () => {
      var el1 = el('<div x="y">a<span>b</span></div>');
      var clone = DOM.clone(el1);

      expect(clone).not.toBe(el1);
      DOM.setAttribute(clone, 'test', '1');
      expect(stringifyElement(clone)).toEqual('<div test="1" x="y">a<span>b</span></div>');
      expect(DOM.getAttribute(el1, 'test')).toBeFalsy();

      var cNodes = DOM.childNodes(clone);
      var firstChild = cNodes[0];
      var secondChild = cNodes[1];
      expect(DOM.parentElement(firstChild)).toBe(clone);
      expect(DOM.nextSibling(firstChild)).toBe(secondChild);
      expect(DOM.isTextNode(firstChild)).toBe(true);

      expect(DOM.parentElement(secondChild)).toBe(clone);
      expect(DOM.nextSibling(secondChild)).toBeFalsy();
      expect(DOM.isElementNode(secondChild)).toBe(true);

    });

    if (DOM.supportsDOMEvents()) {
      describe('getBaseHref', () => {
        beforeEach(() => DOM.resetBaseElement());

        it('should return null if base element is absent',
           () => { expect(DOM.getBaseHref()).toBeNull(); });

        it('should return the value of the base element', () => {
          var baseEl = DOM.createElement('base');
          DOM.setAttribute(baseEl, 'href', '/drop/bass/connon/');
          var headEl = DOM.defaultDoc().head;
          DOM.appendChild(headEl, baseEl);

          var baseHref = DOM.getBaseHref();
          DOM.removeChild(headEl, baseEl);
          DOM.resetBaseElement();

          expect(baseHref).toEqual('/drop/bass/connon/');
        });

        it('should return a relative url', () => {
          var baseEl = DOM.createElement('base');
          DOM.setAttribute(baseEl, 'href', 'base');
          var headEl = DOM.defaultDoc().head;
          DOM.appendChild(headEl, baseEl);

          var baseHref = DOM.getBaseHref();
          DOM.removeChild(headEl, baseEl);
          DOM.resetBaseElement();

          expect(baseHref).toEqual('/base');
        });
      });
    }


  });

//.........这里部分代码省略.........
       var view = createNestedView(pv);
       expect(view.nodes[0].shadowRoot.childNodes[0].childNodes[0].nodeValue).toEqual('hello shadow dom');
     });
     it('should emulate shadow dom (Emulated Strategy)', () => {
       var subpv = new ProtoView(el('<span>hello shadow dom</span>'), new DynamicProtoChangeDetector(null, null), null);
       var pv = new ProtoView(el('<cmp class="ng-binding"></cmp>'), new DynamicProtoChangeDetector(null, null), new EmulatedScopedShadowDomStrategy(null, null, null));
       var binder = pv.bindElement(null, 0, new ProtoElementInjector(null, 0, [SomeComponent], true));
       binder.componentDirective = readDirectiveBinding(SomeComponent);
       binder.nestedProtoView = subpv;
       var view = createNestedView(pv);
       expect(view.nodes[0].childNodes[0].childNodes[0].nodeValue).toEqual('hello shadow dom');
     });
   });
   describe('with template views', () => {
     function createViewWithViewport() {
       var templateProtoView = new ProtoView(el('<div id="1"></div>'), new DynamicProtoChangeDetector(null, null), null);
       var pv = new ProtoView(el('<someTmpl class="ng-binding"></someTmpl>'), new DynamicProtoChangeDetector(null, null), new NativeShadowDomStrategy(null));
       var binder = pv.bindElement(null, 0, new ProtoElementInjector(null, 0, [SomeViewport]));
       binder.viewportDirective = someViewportDirective;
       binder.nestedProtoView = templateProtoView;
       return createView(pv);
     }
     it('should create a ViewContainer for the Viewport directive', () => {
       var view = createViewWithViewport();
       var tmplComp = view.rootElementInjectors[0].get(SomeViewport);
       expect(tmplComp.viewContainer).not.toBe(null);
     });
     it('dehydration should dehydrate viewcontainers', () => {
       var view = createViewWithViewport();
       var tmplComp = view.rootElementInjectors[0].get(SomeViewport);
       expect(tmplComp.viewContainer.hydrated()).toBe(false);
     });
   });
   if (DOM.supportsDOMEvents()) {
     describe('event handlers', () => {
       var view,
           ctx,
           called,
           receivedEvent,
           dispatchedEvent;
       function createViewAndContext(protoView) {
         view = createView(protoView, new EventManager([new DomEventsPlugin()], new FakeVmTurnZone()));
         ctx = view.context;
         called = 0;
         receivedEvent = null;
         ctx.callMe = (event) => {
           called += 1;
           receivedEvent = event;
         };
       }
       function dispatchClick(el) {
         dispatchedEvent = DOM.createMouseEvent('click');
         DOM.dispatchEvent(el, dispatchedEvent);
       }
       function createProtoView() {
         var pv = new ProtoView(el('<div class="ng-binding"><div></div></div>'), new DynamicProtoChangeDetector(null, null), null);
         pv.bindElement(null, 0, new TestProtoElementInjector(null, 0, []));
         pv.bindEvent('click', parser.parseBinding('callMe($event)', null));
         return pv;
       }
       it('should fire on non-bubbling native events', () => {
         createViewAndContext(createProtoView());
         dispatchClick(view.nodes[0]);
         expect(called).toEqual(1);
         expect(receivedEvent).toBe(dispatchedEvent);
       });

export function main() {
  if (DOM.supportsDOMEvents()) {
    describe("integration tests", () => {
      it("should initialize DOM elements with the given form object", inject([TestBed, AsyncTestCompleter], (tb, async) => {
        var ctx = new MyComp(new ControlGroup({"login": new Control("loginValue")}));
        var t = `<div [control-group]="form">
                <input type="text" control="login">
              </div>`;
        tb.createView(MyComp, {
          context: ctx,
          html: t
        }).then((view) => {
          view.detectChanges();
          var input = view.querySelector("input");
          expect(input.value).toEqual("loginValue");
          async.done();
        });
      }));
      it("should update the control group values on DOM change", inject([TestBed, AsyncTestCompleter], (tb, async) => {
        var form = new ControlGroup({"login": new Control("oldValue")});
        var ctx = new MyComp(form);
        var t = `<div [control-group]="form">
                  <input type="text" control="login">
                </div>`;
        tb.createView(MyComp, {
          context: ctx,
          html: t
        }).then((view) => {
          view.detectChanges();
          var input = view.querySelector("input");
          input.value = "updatedValue";
          dispatchEvent(input, "change");
          expect(form.value).toEqual({"login": "updatedValue"});
          async.done();
        });
      }));
      it("should work with single controls", inject([TestBed, AsyncTestCompleter], (tb, async) => {
        var control = new Control("loginValue");
        var ctx = new MyComp(control);
        var t = `<div><input type="text" [control]="form"></div>`;
        tb.createView(MyComp, {
          context: ctx,
          html: t
        }).then((view) => {
          view.detectChanges();
          var input = view.querySelector("input");
          expect(input.value).toEqual("loginValue");
          input.value = "updatedValue";
          dispatchEvent(input, "change");
          expect(control.value).toEqual("updatedValue");
          async.done();
        });
      }));
      it("should update DOM elements when rebinding the control group", inject([TestBed, AsyncTestCompleter], (tb, async) => {
        var form = new ControlGroup({"login": new Control("oldValue")});
        var ctx = new MyComp(form);
        var t = `<div [control-group]="form">
                <input type="text" control="login">
              </div>`;
        tb.createView(MyComp, {
          context: ctx,
          html: t
        }).then((view) => {
          view.detectChanges();
          ctx.form = new ControlGroup({"login": new Control("newValue")});
          view.detectChanges();
          var input = view.querySelector("input");
          expect(input.value).toEqual("newValue");
          async.done();
        });
      }));
      it("should update DOM element when rebinding the control name", inject([TestBed, AsyncTestCompleter], (tb, async) => {
        var ctx = new MyComp(new ControlGroup({
          "one": new Control("one"),
          "two": new Control("two")
        }), "one");
        var t = `<div [control-group]="form">
                <input type="text" [control]="name">
              </div>`;
        tb.createView(MyComp, {
          context: ctx,
          html: t
        }).then((view) => {
          view.detectChanges();
          var input = view.querySelector("input");
          expect(input.value).toEqual("one");
          ctx.name = "two";
          view.detectChanges();
          expect(input.value).toEqual("two");
          async.done();
        });
      }));
      describe("different control types", () => {
        it("should support <input type=text>", inject([TestBed, AsyncTestCompleter], (tb, async) => {
          var ctx = new MyComp(new ControlGroup({"text": new Control("old")}));
          var t = `<div [control-group]="form">
                    <input type="text" control="text">
                  </div>`;
          tb.createView(MyComp, {
            context: ctx,
//.........这里部分代码省略.........