使用 jasmine/karma、spyOn 进行 Angular 组件测试答案

【问题标题】：Angular component testing with jasmine/karma, spyOn使用 jasmine/karma、spyOn 进行 Angular 组件测试
【发布时间】：2020-04-10 18:48:39
【问题描述】：

我尝试测试我的组件，我知道该组件工作正常，但我的测试给出了错误消息我编写了这个 jasmine/karma 测试，它抛出了一条我无法通过的错误消息。

这是我要测试的代码：

    export class AddressListComponent implements OnInit {

      paginate: PaginateInterface = new Paginate(Address);
      addresses: AddressInterface[] = [];

      constructor(
        private addressService: AddressService,
        private addressTypeService: AddressTypeService,
        private countryService: CountryService,
        private settlementService: SettlementService,
        private serviceNatureOfTheSite: NatureOfTheSitesService,
        private router: Router,
      ) {
      }

      ngOnInit() {
        if (!this.isBind ) {
          this.addressService.getAll().subscribe( (resolve: PaginateInterface) => {
            this.paginate = resolve;
            this.addresses = this.paginate.data;
          },
          error => {
            throw(error);
          });
        }
      }
    }

这是测试：

    describe('AddressListComponent', () => {
      const httpClient = new HttpClient(null);
      let injector: Injector;
      let component: AddressListComponent;
      let service: AddressService;
      let settlementService: SettlementService;
      let countryService: CountryService;
      let addressTypeService: AddressTypeService;
      let natureOfTheSiteService: NatureOfTheSitesService;
      const datas = [
        {name: 'test 1'},
        {name: 'test 2'},
        {name: 'test 3'},
      ];
      const paginateData = new Paginate(Address, {
        data: datas,
      });

      beforeEach(() => {
        settlementService = new SettlementService(httpClient, injector);
        countryService = new CountryService(httpClient, injector);
        addressTypeService = new AddressTypeService(httpClient, injector);
        natureOfTheSiteService = new NatureOfTheSitesService(httpClient, injector);
        service = new AddressService(httpClient, injector, settlementService, countryService, addressTypeService, natureOfTheSiteService);
      });

      it('should set address property with the items returned from server', () => {
        spyOn(service, 'getAll').and.returnValue(of(paginateData));

        component = new AddressListComponent(service, addressTypeService, countryService, settlementService, natureOfTheSiteService, null);

        expect(component.addresses.length).toBe(datas.length);
      });
    });

并且这个错误信息被控制台抛出：

    Chrome 79.0.3945 (Windows 10.0.0) AddressListComponent should set address property with the items returned from server FAILED
            Expected 0 to be 3.
                at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/src/app/components/address/address-list/address-list.component.spec.ts:49:40)
    Chrome 79.0.3945 (Windows 10.0.0): Executed 1 of 2 (1 FAILED) (0 secs / 0.137 secs)
    Chrome 79.0.3945 (Windows 10.0.0) AddressListComponent should set address property with the items returned from server FAILED
            Expected 0 to be 3.
                at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/src/app/components/address/address-list/adChrome 79.0.3945 (Windows 10.0.0): Executed 2 of 2 (1 FAILED) (0.146 secs / 0.138 secs)
    TOTAL: 1 FAILED, 1 SUCCESS
    TOTAL: 1 FAILED, 1 SUCCESS

知道我的测试出了什么问题吗？（我知道代码工作正常，但测试失败）

【问题讨论】：

我强烈推荐阅读angular.io/guide/testing。 ngOnInit 从未被调用，但您的测试方法存在其他问题。
请给我建议或代码我如何正确测试这个@jonrsharpe
我建议你更仔细地阅读文档，但最重要的是这个 TestBed 部分。 angular.io/guide/testing#testing-services-with-the-testbed

标签： javascript angular typescript testing jasmine

【解决方案1】：

似乎您需要在测试用例中显式调用 ngOnInit() 才能初始化组件：

 it('should set address property with the items returned from server', () => {
    spyOn(service, 'getAll').and.returnValue(of(paginateData));

    component = new AddressListComponent(service, addressTypeService, countryService, settlementService, natureOfTheSiteService, null);
    component.ngOnInit();
    expect(component.addresses.length).toBe(datas.length);
  });

如果您使用 TestBed 来创建您的组件及其依赖项，正如官方文档 https://angular.io/guide/testing#component-class-testing 中提到的那样，您可以调用 detectChanges 方法来初始化组件（它调用 ngOnInit）

【讨论】：