Невозможно протестировать динамический контент с помощью инструмента тестирования Karma-jasmine в проекте angular 6

Question

Нужна помощь для написания тестовых случаев для динамического контента в Angular 6 и используя пакеты кармы.

spec.ts:

Я написал тестовый пример для проверки просмотров статьи. До выполняя функцию, она проходит, но после получения данных она не проходя Как написать контрольные примеры для динамического контента.

describe('SingleArticleVideoComponent', () => {
    let originalTimeout;
  let debugTest: DebugElement[];
  let el: HTMLElement;
  let component: SingleArticleVideoComponent;
  let fixture: ComponentFixture<SingleArticleVideoComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ SingleArticleVideoComponent,
          PollsComponent,
          AdBannerComponent],
        imports: [
            RouterTestingModule,
            NavModule,
        FooterModule,
            VgCoreModule,
            VgControlsModule,
            VgOverlayPlayModule,
            VgBufferingModule,
        FormsModule,
        ReactiveFormsModule,
        MatFormFieldModule,
        MatRadioModule,
        MatDialogModule,
            HttpModule,
            HttpClientModule,
            BrowserAnimationsModule,
            BrowserModule
        ],
        providers: [
            ArticleService,
            AdService,
            UserServiceService
        ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(SingleArticleVideoComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
      originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
      jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
  });
    afterEach(function() {
        jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
        fixture = TestBed.createComponent(SingleArticleVideoComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });
    it('views should be more than 100', async(() => {
        expect(component.anchor).toEqual('before');
        expect(component.anchor).toEqual('after');
    }));
  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

component.ts:

Это дает правильный результат, когда я использую нг подачи , но это не так работает для тестирования, используя ng test .

ngOnInit() {
     this.get_single_video('emcure-csi-tv-dr-pk-dep-ACE-inhibitor-or-ARNI-what-should-be-used-in-heart-failure-with-reduced-ejection-fraction', this.category);
}
get_single_video(slug, category) {
    console.log('get one video calling');
    this.anchor ='before';
    this.service.get_single_video(slug, category).subscribe(
      data => {
        if(data['success'])
        {
            this.anchor='after';
          this.load_data = true;
            if(data['data']['guest3'].length > 0 || data['data']['guest4'].length > 0){
                this.gus = true;
            }
        }
});

component.html:

Представления дают ноль, когда я его утешаю. Представления отображаются нормально если я запускаю его, используя ng serve , но не для ng test .

<li class="views"><code>{{single_article['anchor']}}</code><br>Views</li>

user-service.service.ts:

Я могу видеть data.json () в функции карты, но не могу получить внутри функции подписки в файле component.ts, как я уже говорил выше.

import 'rxjs/Rx';
get_single_video(slug, catagory) {
    console.log('in article service single video');
    const final_url = this.api_url + '/' + slug + '?key=' + this.api_key;
    console.log(final_url);
    return this._http.get(final_url)
      .map(data => {
        data.json();
        // the console.log(...) line prevents your code from working
        // either remove it or add the line below (return ...)
        console.log(' I CAN SEE DATA HERE: ', data.json());
        return data.json();
      }).catch(error => observableThrowError(error.json()));
  }

Answer 1

Вы НЕ тестируете вызовы API и их данные в модульном тесте. Возвращаясь к компоненту, перевод строки fixture.detectChanges(); из beforeEach в it обеспечит вам контроль над потоком данных. Вы можете добавить поддельный сервис,

providers: [{ provide: UserServiceService, useValue: userServiceSpy }]

Убедитесь, что у вас есть get_single_video в userServiceSpy сервисном шпионе, который возвращает Observable введенные данные.

В методе beforeEach инициализируйте компонент, передав в него проверенную службу. например,

videoComponent = new SingleArticleVideoComponent(userServiceSpy)

Вы можете использовать этот видеокомпонент для тестовых случаев.

Answer 2

Обычно вы НЕ хотите, чтобы ваши модульные тесты делали http-вызовы бэкэнду, а скорее имитировали эту функциональность. Фактически, в тесте компонента вы даже хотите смоделировать функциональность вашего сервиса (поэтому тестирование модуля компонента может пройти, даже если сервис испорчен). См. Принятый ответ на следующий вопрос для хорошего объяснения разницы между «ng test» и «ng e2e»: question .

Предполагая, что вы хотите провести модульное тестирование и только компонент на этом этапе, тогда я бы настроил шпиона для проверки вашего сервисного вызова и возврата различных значений, чтобы вы могли проверять логику метода компонента get_single_video. , Я настроил STACKBLITZ , чтобы продемонстрировать это, используя ваш собственный код из вашего вопроса. Я установил минимальное количество кода, чтобы показать, что я имею в виду. ( MCVE )

Следует отметить одну вещь - я вытащил fixture.detectChanges() из beforeEach () и поместил его в функцию 'it'. Это связано с тем, что fixture.detectChanges() вызывает ngOnInit (), и необходимо установить возвращаемое значение из вашего вызова службы ДО НАЧАЛА вызова ngOnInit (), чтобы вы могли контролировать путь через свою логику.

Из этого стекаблиц, вот описание, которое я настроил для проверки двух путей. Вы должны быть в состоянии расширить это, чтобы получить полное покрытие вашей функции.

describe('SingleArticleVideoComponent', () => {
    let component: SingleArticleVideoComponent;
    let fixture: ComponentFixture<SingleArticleVideoComponent>;
    let userServiceSpy = jasmine.createSpyObj('UserServiceService', ['get_single_video']);

    beforeEach(async(() => {
        TestBed.configureTestingModule({
          declarations: [ SingleArticleVideoComponent],
            providers: [
                { provide: UserServiceService, useValue: userServiceSpy }
            ]
        })
        .compileComponents();
    }));
    beforeEach(() => {
        fixture = TestBed.createComponent(SingleArticleVideoComponent);
        component = fixture.componentInstance;
    });

    it('should change anchor to "after" if get_single_video() has success set', () => {
        userServiceSpy.get_single_video.and.returnValue(of({success: 'yes', data: {guest3: ['1']}}));
        fixture.detectChanges();
        expect(component.anchor).toEqual('after');
    });
    it('should not change anchor if get_single_video() does not have success set', () => {
        userServiceSpy.get_single_video.and.returnValue(of({})); // Observable of an empty object
        fixture.detectChanges();
        expect(component.anchor).toEqual('before');
    });
});