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

Question

我尝试测试我的组件，我知道该组件工作正常，但我的测试给出了错误消息

这是我要测试的代码：

    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

知道我的测试有什么问题吗？ （我知道代码运行良好，但测试失败）

Answer 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 )