由：undefined不是角度2业力测试中的构造函数

Question

我见过同样的问题但对我没有帮助

我是角度2业力测试的新手。我试图测试一个有标题，输入框和按钮的简单组件。

我从angular.io学习了业力测试的基础知识，并试图测试输入框中包含的值是否正确。但是得到了错误＆＃34; null不是一个对象＆＃34;当我试图在测试中获取输入元素时。

为了解决这个错误，我把它放在fixture.whenStable（）中，但是现在有了错误＆＃34; undefined不是构造函数＆＃34; 。我不知道为什么会这样。下面是我的组件，spec.ts，html文件。

感谢。

在banner.component.html

中

  <h1 id="titleId" class="titleClass">{{title}}</h1>
  <input id="inputId" type="text" *ngIf="name!==undefined" [(ngModel)]="name"/>
  <button id="btnId" type="button" >Click Me!</button>

在banner.component.ts

中

   @Component({


  selector: "app-banner",


  templateUrl: "./banner.component.html",


  providers: [AbcService],
})
export class BannerComponent {

  private abData: abData;
  private name: string;
  title = "Test Karma";
  user = {
    userName: "Nokia",
    size: 45,
  }

  constructor( @Inject(AbcService) private abcService: AbcService) {

  }

  ngAfterViewInit(): void {
      this.setAlternative();
  }

  setAlternative() {
    this.abcService.getAlternativeDetails(10752)
      .subscribe(abData=> {
        this.abData= abData;
        this.name = this.abData.name;
      });
  }

}

在banner.component.spec.ts

中

class AlternativeDetailsServiceSpy {
    getAlternativeDetails = jasmine.createSpy("getAlternativeDetails").and.callFake(() =>
        Promise.resolve(true).then(() => Object.assign({}, {})));
}

describe("BannerComponent", () => {

    let comp: BannerComponent;
    let fixture: ComponentFixture<BannerComponent>;
    let de;
    let el;
    let input;
    let inputEl;
    let spy: AlternativeDetailsServiceSpy;

    // async beforeEach
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [FormsModule],
            declarations: [BannerComponent], // declare the test component
            providers: [{ provide: AbcService, useValue: {} }]
        }).overrideComponent(BannerComponent, {
            set: {
                providers: [
                    { provide: AbcService, useClass: AbcServiceSpy }
                ]
            }
        }).compileComponents();  // compile template and css
    }));


    // synchronous beforeEach
    beforeEach(() => {
        let hdsSpy: AbcServiceSpy ;

        fixture = TestBed.createComponent(BannerComponent);
        comp = fixture.componentInstance; // BannerComponent test instance
        hdsSpy = fixture.debugElement.injector.get(AbcService);
        // query for the title <h1> by CSS element selector
        de = fixture.debugElement.query(By.css("#btnId"));
        el = de.nativeElement;

        // input = fixture.debugElement.query(By.css("#inputId"));
        // inputEl = input.nativeElement;

    });

    it("should check the object of bannercomponent is created", () => {
        expect(comp instanceof BannerComponent).toBe(true);
    });

    it("should be having empty value", () => {
        fixture.detectChanges();
        comp.ngAfterViewInit();
        fixture.whenStable().then(() => {
            input = fixture.debugElement.query(By.css("#inputId"));
            inputEl = input.nativeElement;
        });
    });


});