TypeScript testing.TestComponentBuilder類代碼示例

describe('Component: MdlMenu', () => {

  var builder: TestComponentBuilder;

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

  it('should add the css class mdl-menu__container to the host element', ( done ) => {

    return builder
      .overrideTemplate(MdlTestIconComponent, `
          <mdl-menu>x</mdl-menu>
        `)
      .createAsync(MdlTestIconComponent).then( (fixture) => {

        fixture.detectChanges();

        let menuEl: HTMLElement = fixture.debugElement.query(By.css('.mdl-menu__container')).nativeElement;
        expect(menuEl).toBeDefined();

        done();
      });
  });

  it('should export the component instance as mdlMenu', ( done ) => {

    return builder
      .overrideTemplate(MdlTestIconComponent, `
          <mdl-menu #menu="mdlMenu">x</mdl-menu>
        `)
      .createAsync(MdlTestIconComponent).then( (fixture) => {

        fixture.detectChanges();

        let references = fixture.debugElement.query(By.directive(MdlMenuComponent)).references;

        expect(references['menu']).toBeDefined();

        done();
      });
  });

  it('should throw if toggle is called without a button', ( done ) => {

    return builder
      .overrideTemplate(MdlTestIconComponent, `
          <mdl-menu>x</mdl-menu>
        `)
      .createAsync(MdlTestIconComponent).then( (fixture) => {

        fixture.detectChanges();

        let menu = fixture.debugElement.query(By.directive(MdlMenuComponent)).componentInstance;

        expect(() => {
          menu.toggle(null, null);
        }).toThrow();

        done();
      });
  });

  it('should show the menu if the the menu button is clicked and hide if clicked again', ( done ) => {
    return builder
      .overrideTemplate(MdlTestIconComponent, `
          <mdl-button #btn="mdlButton" (click)="m1.toggle($event, btn)">button</mdl-button>
          <mdl-menu #m1="mdlMenu"><mdl-menu-item>Action</mdl-menu-item></mdl-menu>
        `)
      .createAsync(MdlTestIconComponent).then( (fixture) => {

        fixture.detectChanges();

        let buttonElement = fixture.debugElement.query(By.directive(MdlButtonComponent)).nativeElement;
        let menu = fixture.debugElement.query(By.directive(MdlMenuComponent)).componentInstance;

        buttonElement.click();
        expect(menu.isVisible).toBe(true);
        expect(menu.menuElement.classList.contains('is-animating')).toBe(true);
        expect(menu.container.classList.contains('is-visible')).toBe(true);

        buttonElement.click();
        expect(menu.isVisible).toBe(false);
        expect(menu.menuElement.classList.contains('is-animating')).toBe(true);
        expect(menu.container.classList.contains('is-visible')).toBe(false);

        expect(menu.container.style.left).not.toBe('');
        expect(menu.container.style.top).not.toBe('');
        expect(menu.container.style.right).toBe('');
        expect(menu.container.style.bottom).toBe('');

        done();

      });
  });

  it('should be possible to show a menu bottom-right aligned', ( done ) => {
    return builder
      .overrideTemplate(MdlTestIconComponent, `
          <mdl-button #btn="mdlButton" (click)="m1.toggle($event, btn)">button</mdl-button>
//.........這裏部分代碼省略.........

  describe('RuntimeCompiler', () => {
    let compiler: Compiler;
    let xhr: SpyXHR;
    let tcb: TestComponentBuilder;
    let dirResolver: MockDirectiveResolver;
    let injector: Injector;

    beforeEach(
        () => { TestBed.configureCompiler({providers: [{provide: XHR, useClass: SpyXHR}]}); });

    beforeEach(fakeAsync(inject(
        [Compiler, TestComponentBuilder, XHR, DirectiveResolver, Injector],
        (_compiler: Compiler, _tcb: TestComponentBuilder, _xhr: SpyXHR,
         _dirResolver: MockDirectiveResolver, _injector: Injector) => {
          compiler = _compiler;
          tcb = _tcb;
          xhr = _xhr;
          dirResolver = _dirResolver;
          injector = _injector;
        })));

    describe('clearCacheFor', () => {
      it('should support changing the content of a template referenced via templateUrl',
         fakeAsync(() => {
           xhr.spy('get').andCallFake(() => Promise.resolve('init'));
           let compFixture =
               tcb.overrideView(SomeComp, new ViewMetadata({templateUrl: '/myComp.html'}))
                   .createFakeAsync(SomeComp);
           expect(compFixture.nativeElement).toHaveText('init');

           xhr.spy('get').andCallFake(() => Promise.resolve('new content'));
           // Note: overrideView is calling .clearCacheFor...
           compFixture = tcb.overrideView(SomeComp, new ViewMetadata({templateUrl: '/myComp.html'}))
                             .createFakeAsync(SomeComp);
           expect(compFixture.nativeElement).toHaveText('new content');
         }));

      it('should support overwriting inline templates', () => {
        let componentFixture = tcb.createSync(SomeComp);
        expect(componentFixture.nativeElement).toHaveText('someComp');

        componentFixture = tcb.overrideTemplate(SomeComp, 'test').createSync(SomeComp);
        expect(componentFixture.nativeElement).toHaveText('test');
      });

      it('should not update existing compilation results', () => {
        dirResolver.setView(
            SomeComp,
            new ViewMetadata({template: '<child-cmp></child-cmp>', directives: [ChildComp]}));
        dirResolver.setInlineTemplate(ChildComp, 'oldChild');
        let compFactory = compiler.compileComponentSync(SomeComp);
        dirResolver.setInlineTemplate(ChildComp, 'newChild');
        compiler.compileComponentSync(SomeComp);
        let compRef = compFactory.create(injector);
        expect(compRef.location.nativeElement).toHaveText('oldChild');
      });
    });

    describe('compileComponentSync', () => {
      it('should throw when using a templateUrl that has not been compiled before', () => {
        xhr.spy('get').andCallFake(() => Promise.resolve(''));
        expect(() => tcb.createSync(SomeCompWithUrlTemplate))
            .toThrowError(
                `Can't compile synchronously as ${stringify(SomeCompWithUrlTemplate)} is still being loaded!`);
      });

      it('should throw when using a templateUrl in a nested component that has not been compiled before',
         () => {
           xhr.spy('get').andCallFake(() => Promise.resolve(''));
           let localTcb =
               tcb.overrideView(SomeComp, new ViewMetadata({template: '', directives: [ChildComp]}))
                   .overrideView(ChildComp, new ViewMetadata({templateUrl: '/someTpl.html'}));
           expect(() => localTcb.createSync(SomeComp))
               .toThrowError(
                   `Can't compile synchronously as ${stringify(ChildComp)} is still being loaded!`);
         });

      it('should allow to use templateUrl components that have been loaded before',
         fakeAsync(() => {
           xhr.spy('get').andCallFake(() => Promise.resolve('hello'));
           tcb.createFakeAsync(SomeCompWithUrlTemplate);
           let compFixture = tcb.createSync(SomeCompWithUrlTemplate);
           expect(compFixture.nativeElement).toHaveText('hello');
         }));
    });

    describe('compileModuleAsync', () => {
      it('should allow to use templateUrl components', fakeAsync(() => {
           @NgModule({
             declarations: [SomeCompWithUrlTemplate],
             entryComponents: [SomeCompWithUrlTemplate]
           })
           class SomeModule {
           }

           xhr.spy('get').andCallFake(() => Promise.resolve('hello'));
           let ngModuleFactory: NgModuleFactory<any>;
           compiler.compileModuleAsync(SomeModule).then((f) => ngModuleFactory = f);
           tick();
           expect(ngModuleFactory.moduleType).toBe(SomeModule);
//.........這裏部分代碼省略.........

 async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
     tcb.createAsync(AppComponent).then(fixture => {
         expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent');
     });
 })));    

 return inject([TestComponentBuilder], (tb: TestComponentBuilder) => {
     tb.createAsync(component).then(fixture => {
       result(fixture);
     })
   })

 function createInjector(tcb: TestComponentBuilder, proviers: any[]): Promise<Injector> {
   return tcb.overrideProviders(MyComp1, [proviers])
       .createAsync(MyComp1)
       .then((fixture) => fixture.componentInstance.injector);
 }

 beforeEach(async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
   tcb.createAsync(CurrentUserComponent).then((_fixture_) => fixture = _fixture_);
 })));

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

describe('chartist component', function(): void {
  let builder: TestComponentBuilder;

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

  it('should initialize the correct chart only once', async(() => {
    builder.createAsync(ChartistComponent).then((fixture: ComponentFixture<ChartistComponent>) => {
      const instance: ChartistComponent = fixture.componentInstance;
      const chartType: ChartType = 'Bar';

      spyOn(Chartist, chartType).and.callThrough();

      instance.data = data[chartType];
      instance.type = chartType;

      instance.renderChart().then(function(): void {
        expect(Chartist.Bar).toHaveBeenCalledTimes(1);
      });
    });
  }));

  it('should return the correct chart instance', async(() => {
    builder.createAsync(ChartistComponent).then((fixture: ComponentFixture<ChartistComponent>) => {
      const instance: ChartistComponent = fixture.componentInstance;
      const chartType: ChartType = 'Bar';

      instance.data = data[chartType];
      instance.type = chartType;

      instance.renderChart().then(function(chart: any): void {
        expect(chart instanceof Chartist.Bar).toBe(true);
      });
    });
  }));

  it('should bind events if there are events', async(() => {
    builder.createAsync(ChartistComponent).then((fixture: ComponentFixture<ChartistComponent>) => {
      const instance: ChartistComponent = fixture.componentInstance;
      const chartType: ChartType = 'Bar';

      spyOn(instance, 'bindEvents').and.callThrough();

      instance.data = data[chartType];
      instance.type = chartType;
      instance.events = {
        draw(): boolean {
          return false;
        }
      };

      fixture.detectChanges();

      instance.ngOnInit().then(function(): void {
        expect(instance.bindEvents).toHaveBeenCalled();
      });
    });
  }));

  it('should re-render the chart if the chart type changes', async(() => {
    builder.createAsync(ChartistComponent).then((fixture: ComponentFixture<ChartistComponent>) => {
      const instance: ChartistComponent = fixture.componentInstance;
      const changes: any = {
        type: 'Bar'
      };

      instance.type = 'Line';

      spyOn(instance, 'renderChart').and.callThrough();

      instance.update(changes);

      expect(instance.renderChart).toHaveBeenCalled();
    });
  }));

  it('should update the chart if the data changes', async(() => {
    builder.createAsync(ChartistComponent).then((fixture: ComponentFixture<ChartistComponent>) => {
      const instance: ChartistComponent = fixture.componentInstance;
      const changes: any = {
        data: {
          labels: [],
          series: []
        }
      };

      instance.data = data['Bar'];
      instance.type = 'Bar';

      fixture.detectChanges();

      instance.renderChart().then(function(): void {
        instance.data = data['Line'];
        instance.type = 'Line';

        spyOn(instance.chart, 'update').and.callThrough();
        spyOn(instance, 'renderChart').and.callThrough();

        fixture.detectChanges();
//.........這裏部分代碼省略.........

 return async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
   if (html) {
     tcb = tcb.overrideTemplate(TestComponent, html);
   }
   return tcb.createAsync(TestComponent).then(fn);
 }));