Как выполнить код модульного теста внутри, чтобы подписаться на тестовый блок Angular7

Question

Я хочу провести модульное тестирование и получить покрытие для всего кода, но я не могу получить покрытие для кода, присутствующего внутри подписки. Я могу шпионить за службой и функционированием, но внутри подписки я не могу провести модульное тестирование и получить покрытие кода.Ниже приведен код 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;
            }

Answer 1

Вам нужно издеваться над сервисом и заставить его вернуть наблюдаемый. Я собрал простой пример в 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();
  });
});

Надеюсь, это поможет вам понять, как начать тестирование внутри подписки вашего метода.

Answer 2

Если вы хотите проверить код внутри subscribe, вам придется смоделировать вызов службы и затем проверить переменные компонента, которые вы изменяете внутри subscribe, например, this.itemListEnvName и this.generateCheckDisable.

Это может выглядеть так:

 it('should call getBookedEnv service ', function () {
    const service = TestBed.get(EnvironmentBookingService); // get your service
    spyOn(service, 'getBookedEnv').and.callFake(() => {
      return of([]); // or return a list of bookings in case you want to test the first part of the if statement 
    });
    component.LoadListData('EnvironmentList');
    expect(service.getBookedEnv).toHaveBeenCalledWith();

    // additional tests that verify the inside of the subscribe (change below in case the mocked service returned something)
    expect(component.itemListEnvName).equalTo([]);
    expect(component.generateCheckDisable).equalTo(false);
  });