时间戳

首页 > 解决方案 > 如何在订阅Angular7单元测试用例中对代码进行单元测试

angular - 如何在订阅Angular7单元测试用例中对代码进行单元测试

问题描述

我想对所有代码进行单元测试并获得覆盖率，但我无法获得订阅内存在的代码的覆盖率我能够监视服务和功能，但在订阅内我无法进行单元测试并获得代码覆盖率。以下是 Angular 7 代码。

LoadListData(type) {
    this.itemListEnvName = [];
    if (type === 'EnvirnmentList') {
      this.environmentBookingService.getBookedEnv()
        .subscribe(
          (environmentBookingsData: EbEnvironmentBooking[]) => {
            if (environmentBookingsData.length > 0) {
              this.itemListEnvNameList = environmentBookingsData;
              this.itemListEnvName = [];
              this.itemListEnvNameList.forEach(element => {
                const obj = {};
                obj['id'] = element['environmentId'];
                obj['itemName'] = element['environmentName'];
                this.itemListEnvName.push(obj);
                this.generateCheckDisable = false;
              });
            } else {
              this.generateCheckDisable = true;
            }
          },
          (error) => {
            this.showMessage('No Response From Delivery DB API');
          }
        );
    } else {

      this.showMessage('No Response From Delivery DB API');
    }


  }

单元测试用例中的代码就像

 it('should call getBookedEnv service ', function () {
    const service = TestBed.get(EnvironmentBookingService); // get your service
    spyOn(service, 'getBookedEnv').and.callThrough(); // create spy
    component.LoadListData('EnvirnmentList');
    expect(service.getBookedEnv).toHaveBeenCalledWith();

  });

如何在订阅中对代码进行单元测试，即

if (environmentBookingsData.length > 0) {
              this.itemListEnvNameList = environmentBookingsData;
              this.itemListEnvName = [];
              this.itemListEnvNameList.forEach(element => {
                const obj = {};
                obj['id'] = element['environmentId'];
                obj['itemName'] = element['environmentName'];
                this.itemListEnvName.push(obj);
                this.generateCheckDisable = false;
              });
            } else {
              this.generateCheckDisable = true;
            }

标签： angularunit-testingobservablekarma-jasminesubscriber

解决方案

您需要模拟该服务并让它返回一个 Observable。我在StackBlitz中整理了一个简单的示例，以展示使用您的代码处理此问题的一种方法。

StackBlitz 中的注意事项：

  • 我用 spyObject 模拟了服务，所以以后不需要监视服务。
  • 在这个 spyObject 中，我将内部函数的返回值设置为getBookedEnv()Observable - 这允许执行订阅中的代码。
  • 对于任何实际测试，您应该将当前返回的空对象替换getBookedEnv()为一些合理模拟的数据。
  • 注意提供者数组以及我用间谍对象替换服务的位置。

这是 StackBlitz 的描述：

describe('BannerComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;
  const envBookingServiceSpy = jasmine.createSpyObj('EnvironmentBookingService', {
    getBookedEnv: of({/* mock environmentBookingsData here */})
  });


  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ MyComponent ],
      providers: [
        { provide: EnvironmentBookingService, useValue: envBookingServiceSpy },
      ]
    })
    .compileComponents();
  }));

  beforeEach(async(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
  }));

  it('should call getBookedEnv service ', function () {
    const service = TestBed.get(EnvironmentBookingService); // get your service
    // spyOn(service, 'getBookedEnv').and.callThrough(); // create spy
    component.LoadListData('EnvirnmentList');
    expect(service.getBookedEnv).toHaveBeenCalledWith();
  });
});

我希望这可以帮助您了解如何在您的方法的订阅中开始测试。

推荐阅读