TypeScript testing.TestComponentBuilder类代码示例

 (tcb: TestComponentBuilder, router: Router, angulartics2: Angulartics2) => {
   return tcb.overrideTemplate(RootCmp, `<div [angulartics2On]="'click'" [angularticsEvent]="'InitiateSearch'" [angularticsCategory]="'Search'"></div>`)
     .createAsync(RootCmp)
     .then((rtc) => fixture = rtc)
     .then((_) => {
       fixture.detectChanges();
       return new Promise((resolve) => {
         expect(EventSpy).not.toHaveBeenCalled();
         angulartics2.eventTrack.subscribe((x: any) => EventSpy(x));
         compiled = fixture.debugElement.nativeElement.children[0];
         compiled.click();
         resolve();
       });
     })
     .then((_) => {
       fixture.detectChanges();
       return new Promise((resolve) => {
         setTimeout(() => {
           expect(EventSpy).toHaveBeenCalledWith({ action: 'InitiateSearch', properties: { category: 'Search', eventType: 'click' } });
           resolve();
         });
       });
     });
 }));

  describe('Sidenav', () => {
    let builder: TestComponentBuilder;
    let service: SidenavService;

    function setup(template: string = null): Promise<ITestFixture> {
      let prep = template === null ?
        builder.createAsync(TestComponent) :
        builder.overrideTemplate(TestComponent, template).createAsync(TestComponent);
      return prep.then((fixture: ComponentFixture) => {
        fixture.detectChanges();
        let debug = fixture.debugElement.query(By.css('md-sidenav'));
        let cdebug = fixture.debugElement.query(By.css('md-sidenav-container'));
        return {
          fixture: fixture,
          component: debug.componentInstance,
          debug: debug,
          cdebug: cdebug,
          container: cdebug ? cdebug.componentInstance : null
        };
      }).catch(console.error.bind(console));
    }

    beforeEach(inject([TestComponentBuilder, SidenavService], (tcb, serv) => {
      builder = tcb;
      service = serv;
    }));

    describe('md-sidenav', () => {
      it('should be created and destroyed', injectAsync([], () => {
        return setup().then((api: ITestFixture) => api.fixture.destroy());
      }));
      it('should be registered and unregistered with SidenavService', injectAsync([], () => {
        expect(service.find('test')).toBeNull();
        return setup(`<md-sidenav name="test"></md-sidenav>`).then((api: ITestFixture) => {
          expect(service.find('test')).not.toBeNull();
          api.fixture.destroy();
          expect(service.find('test')).toBeNull();
        });
      }));
      describe('name', () => {
        it('should default to "default"', injectAsync([], () => {
          return setup().then((api: ITestFixture) => {
            expect(api.component.name).toBe('default');
          });
        }));
      });

      describe('style', () => {
        it('should default to over', injectAsync([], () => {
          return setup().then((api: ITestFixture) => {
            expect(api.component.style).toBe(SidenavStyle.OVER);
          });
        }));
        it('should set to default when given an invalid value', injectAsync([], () => {
          return setup(`<md-sidenav style="gangnam"></md-sidenav>`).then((api: ITestFixture) => {
            expect(api.component.style).toBe(SidenavStyle.OVER);
          });
        }));
        it('should accept "side" for content pushing', injectAsync([], () => {
          return setup(`<md-sidenav style="side"></md-sidenav>`).then((api: ITestFixture) => {
            expect(api.component.style).toBe(SidenavStyle.SIDE);
          });
        }));
      });

      describe('align', () => {
        it('should default to "left"', injectAsync([], () => {
          return setup().then((api: ITestFixture) => {
            expect(api.component.align).toBe(SidenavAlignment.LEFT);
          });
        }));
        it('should set to default when given an invalid value', injectAsync([], () => {
          return setup(`<md-sidenav align="up"></md-sidenav>`).then((api: ITestFixture) => {
            expect(api.component.align).toBe(SidenavAlignment.LEFT);
          });
        }));
        it('should accept "side" for content pushing', injectAsync([], () => {
          return setup(`<md-sidenav align="right"></md-sidenav>`).then((api: ITestFixture) => {
            expect(api.component.align).toBe(SidenavAlignment.RIGHT);
          });
        }));

      });
    });
    describe('md-sidenav-container', () => {
      let template = `
      <md-sidenav-container>
        <md-sidenav name="menu"></md-sidenav>
        <md-sidenav name="right" align="right"></md-sidenav>
      </md-sidenav-container>`;
      it('should be created and destroyed', injectAsync([], () => {
        return setup(template).then((api: ITestFixture) => {
          api.fixture.destroy();
        });
      }));
      it('should maintain a query list of its children', injectAsync([], () => {
        return setup(template).then((api: ITestFixture) => {
          expect(api.container.children.length).toBe(2);
          api.fixture.destroy();
        });
//.........这里部分代码省略.........

 it('should ...', injectAsync([TestComponentBuilder], (tcb:TestComponentBuilder) => {
   return tcb.createAsync(PantalonesComponent).then((fixture: ComponentFixture) => {
     fixture.detectChanges();
   });
 }));

  describe('MdLiveAnnouncer', () => {
    let live: MdLiveAnnouncer;
    let builder: TestComponentBuilder;
    let liveEl: Element;

    beforeEachProviders(() => [MdLiveAnnouncer]);

    beforeEach(inject([TestComponentBuilder, MdLiveAnnouncer],
      (tcb: TestComponentBuilder, _live: MdLiveAnnouncer) => {
        builder = tcb;
        live = _live;
        liveEl = getLiveElement();
    }));

    afterEach(() => {
      // In our tests we always remove the current live element, because otherwise we would have
      // multiple live elements due multiple service instantiations.
      liveEl.parentNode.removeChild(liveEl);
    });

    it('should correctly update the announce text', fakeAsyncTest(() => {
      let appFixture: ComponentFixture = null;

      builder.createAsync(TestApp).then(fixture => {
        appFixture = fixture;
      });

      flushMicrotasks();

      let buttonElement = appFixture.debugElement
        .query(By.css('button')).nativeElement;

      buttonElement.click();

      // This flushes our 100ms timeout for the screenreaders.
      tick(100);

      expect(liveEl.textContent).toBe('Test');
    }));

    it('should correctly update the politeness attribute', fakeAsyncTest(() => {
      let appFixture: ComponentFixture = null;

      builder.createAsync(TestApp).then(fixture => {
        appFixture = fixture;
      });

      flushMicrotasks();

      live.announce('Hey Google', 'assertive');

      // This flushes our 100ms timeout for the screenreaders.
      tick(100);

      expect(liveEl.textContent).toBe('Hey Google');
      expect(liveEl.getAttribute('aria-live')).toBe('assertive');
    }));

    it('should apply the aria-live value polite by default', fakeAsyncTest(() => {
      let appFixture: ComponentFixture = null;

      builder.createAsync(TestApp).then(fixture => {
        appFixture = fixture;
      });

      flushMicrotasks();

      live.announce('Hey Google');

      // This flushes our 100ms timeout for the screenreaders.
      tick(100);

      expect(liveEl.textContent).toBe('Hey Google');
      expect(liveEl.getAttribute('aria-live')).toBe('polite');
    }));

  });

  describe('MdRadioButton', () => {
    let builder: TestComponentBuilder;

    beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
      builder = tcb;
    }));

    it('should have same name as radio group', (done: () => void) => {
      builder
        .overrideTemplate(TestApp, `
            <md-radio-group name="my_group">
              <md-radio-button></md-radio-button>
            </md-radio-group>`)
        .createAsync(TestApp)
        .then((fixture) => {
          let button = fixture.debugElement.query(By.css('md-radio-button'));

          fixture.detectChanges();
          expect(button.componentInstance.name).toBe('my_group');
        }).then(done);
    });

    it('should not allow click selection if disabled', (done: () => void) => {
      builder
        .overrideTemplate(TestApp, '<md-radio-button disabled></md-radio-button>')
        .createAsync(TestApp)
        .then((fixture) => {
          let button = fixture.debugElement.query(By.css('md-radio-button'));

          fixture.detectChanges();
          expect(button.componentInstance.checked).toBe(false);

          button.nativeElement.click();
          expect(button.componentInstance.checked).toBe(false);
        }).then(done);
    });

    it('should be disabled if radio group disabled', (done: () => void) => {
      builder
        .overrideTemplate(TestApp, `
            <md-radio-group disabled>
              <md-radio-button></md-radio-button>
            </md-radio-group>`)
        .createAsync(TestApp)
        .then((fixture) => {
          let button = fixture.debugElement.query(By.css('md-radio-button'));

          fixture.detectChanges();
          expect(button.componentInstance.disabled).toBe(true);
        }).then(done);
    });

    it('updates parent group value when selected and value changed', (done: () => void) => {
      builder
        .overrideTemplate(TestApp, `
            <md-radio-group>
              <md-radio-button value="1"></md-radio-button>
            </md-radio-group>`)
        .createAsync(TestApp)
        .then((fixture) => {
          let button = fixture.debugElement.query(By.css('md-radio-button'));
          let group = fixture.debugElement.query(By.css('md-radio-group'));

          group.componentInstance.selected = button.componentInstance;
          fixture.detectChanges();
          expect(group.componentInstance.value).toBe('1');

          button.componentInstance.value = '2';
          fixture.detectChanges();
          expect(group.componentInstance.value).toBe('2');
        }).then(done);
    });

    it('should be checked after input change event', (done: () => void) => {
      builder
        .overrideTemplate(TestApp, '<md-radio-button></md-radio-button>')
        .createAsync(TestApp)
        .then((fixture) => {
          let button = fixture.debugElement.query(By.css('md-radio-button'));
          let input = button.query(By.css('input'));

          fixture.detectChanges();
          expect(button.componentInstance.checked).toBe(false);

          let event = createEvent('change');
          input.nativeElement.dispatchEvent(event);
          expect(button.componentInstance.checked).toBe(true);
        }).then(done);
    });

    it('should emit event when checked', (done: () => void) => {
      builder
        .overrideTemplate(TestApp, '<md-radio-button></md-radio-button>')
        .createAsync(TestApp)
        .then((fixture) => {
          fakeAsync(function() {
            let button = fixture.debugElement.query(By.css('md-radio-button'));
            let changeEvent: MdRadioChange = null;
            button.componentInstance.change.subscribe((evt: MdRadioChange) => {
              changeEvent = evt;
//.........这里部分代码省略.........

const compile = (tcb: TestComponentBuilder, template: string = '') => {
  return tcb
    .overrideTemplate(TestComponent, template)
    .createAsync(TestComponent);
};

 it('should ...', async(inject([TestComponentBuilder], (tcb:TestComponentBuilder) => {
   return tcb.createAsync(ChildComponent).then((fixture: ComponentFixture) => {
     fixture.detectChanges();
   });
 })));

 it('should ...', injectAsync([TestComponentBuilder], (tcb:TestComponentBuilder) => {
   return tcb.createAsync(MouridismeText).then((fixture) => {
     fixture.detectChanges();
   });
 }));

export function compile(tcb: TestComponentBuilder): Promise<ComponentFixture> {
  return tcb.createAsync(RootCmp);
}

    it('should select uniquely', (done: () => void) => {
      builder
        .overrideTemplate(TestApp, `
            <md-radio-group>
              <md-radio-button></md-radio-button>
              <md-radio-button></md-radio-button>
            </md-radio-group>`)
        .createAsync(TestApp)
        .then((fixture) => {
          let buttons = fixture.debugElement.queryAll(By.css('md-radio-button'));
          let group = fixture.debugElement.query(By.css('md-radio-group'));

          fixture.detectChanges();
          expect(group.componentInstance.selected).toBe(null);

          group.componentInstance.selected = buttons[0].componentInstance;
          fixture.detectChanges();
          expect(isSinglySelected(buttons[0], buttons)).toBe(true);

          group.componentInstance.selected = buttons[1].componentInstance;
          fixture.detectChanges();
          expect(isSinglySelected(buttons[1], buttons)).toBe(true);
        }).then(done);
    });