Тест IF в подписке с использованием кармы и жасмина

Question

Я выполняю модульное тестирование в Angular 6, но у меня возникают проблемы с тестированием этой IF ветви.Я использую его для наблюдения за размером экрана и для определения количества отображаемых столбцов.Я борюсь с тем, как проверить внутри подписки, которая находится в ngOnInit().

Это

 this.watcher = this.media.subscribe((change: MediaChange) =>....

покрытие кода показывает, что оно не входит в if и else этих услуг.Это было лучшее, что я мог сделать.Служба Media Change постоянно смотрит на размер экрана, чтобы решить, сколько столбцов будет отображаться в таблице

  ngOnInit() {
        this.watcher = this.media.subscribe((change: MediaChange) => {
          this.activeMediaQuery = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : '';
          this.changeMqAlias = change.mqAlias;

          if (this.changeMqAlias == this.changeSize.XS) {

            this.displayedColumns = ['job', 'name', 'totalValue'];
          } else {
            this.displayedColumns = ['internalId', 'DateOfPublication', 'alias', 'job', 'name', 'totalValue'];
          }
          return change.mqAlias;
        });
      }

Тест файла

it('should create', () => {
                fixture.whenStable().then(() => {
                  
                  expect(component).toBeTruthy();
                });
              });

              it('should create which 3 columns in mat table', () => {
                fixture.whenStable().then(() => {
                  component.changeMqAlias = 'xs';
                  expect(component).toBeTruthy();
                });
              });
             
            });

Answer 1

Есть разные способы подойти к этому.Ключом к тестированию внутри подписки является то, что вы должны смоделировать сервис ObservableMedia так, чтобы он возвращал наблюдаемое.Затем вы можете изменить значения component.changeMqAlias на разные значения и увидеть, что ваше «если» разрешается правильно обоими способами.

Я настроил Stackblitz , чтобы показать вам один подход к тестированиюфункция как дано.Вот describe из этого Stackblitz:

describe('app testing', () => {
    let component: MyComponent;
    let fixture: ComponentFixture<MyComponent>;
    const mockFlex = of({ // create an Observable that returns a desired result
        mqAlias: 'xs',
        mediaQuery: 'test mQ'
    });

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [ MatTableModule /* Other imports needed */ ],
            declarations: [ MyComponent ],
            providers: [
                { provide: ObservableMedia, useValue: mockFlex }
            ]
        }).compileComponents();
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.debugElement.componentInstance;
    }));

    it('should create', () => {
        expect(component).toBeTruthy();
    });
    it('should have 3 columns in mat table when changeMqAlias === "xs"', () => {
        component.changeMqAlias = 'xs';
        fixture.detectChanges();
        expect(component.displayedColumns).toEqual(['job', 'name', 'totalValue']);
    });
        it('should have 6 columns in mat table when changeMqAlias !== "xs"', () => {
        component.changeMqAlias = 'xl';
        fixture.detectChanges();
        expect(component.displayedColumns.length).toEqual(6);
    });

});

Некоторые замечания по этому поводу:

• Вы никогда не указывали имя вашего компонента, поэтому я просто назвал его MyComponent.
• Ключом к выполнению этой работы является насмешка над зависимостью ObservableMedia, внедренной в конструктор вашего компонента.Обратите внимание на настройку mockFlex, а также на то, что она заменена в массиве провайдеров на TestBed для ObservableMedia.
• Также обратите внимание, что fixture.detectChanges() не вызывается, пока не будет установлено ПОСЛЕ changeMqAlias.Причина этого в том, что fixture.detectChanges() вызовет ngOnInit(), и вам необходимо заранее установить эту переменную, чтобы контролировать путь через оператор IF.Подробности в официальной документации .
• Не стесняйтесь перевести этот Stackblitz на свой аккаунт и поэкспериментировать с ним.Если в будущем у вас возникнут дополнительные вопросы, то создание Stackblitz, показывающего реальную проблему, поможет другим чрезвычайно быстро проанализировать вашу проблему и предложить решения.

Поскольку вы довольно новичок в StackOverflow, я также упомянучто если этот ответ поможет вам, пожалуйста, проголосуйте за него и пометьте его как решение вашей проблемы.:)

Удачного кодирования.