Как написать тестовый блок для метода [Angular]

Question

Я новичок в Angular. Я изо всех сил стараюсь выучить Typescript, и теперь мне сказали писать кейсы для Jasmine и Karma для каждого component и service, которые я создаю. Я просмотрел много уроков, чтобы выучить Модульное тестирование в Angular. Я стажер, вчера я поднял запрос Pull, по которому мой технический руководитель дал следующий комментарий.

Вот код, который я написал.

filter-bar.component.ts

import { Component, OnInit, ViewChild, OnDestroy, Input, ChangeDetectorRef } from '@angular/core';
import './filter-bar.component.scss';
import { SisenseService } from '../services/sinsense.service';
import { SisenseConfigService } from '../services/sinsense-config.service';
import { Dashboard, Widget } from 'src/app/shared/models/sisenseConfig';
...

@Component({
    selector: 'app-filter-bar',
    templateUrl: './filter-bar.component.html'
})
export class FilterBarComponent implements OnInit, OnDestroy {
  selectedMembersCount: number;
  dataUnavailable: boolean;

  constructor(
    public sisenseService: SisenseService,
    public sisenseConfigService: SisenseConfigService
  ) {}

  ngOnInit() {
    this.getDataFromWidget();
  }

  getDataFromWidget() {
    this.sisenseService.getWidgetData(
    this.sisenseConfigService.getDashboardId(Dashboard.POPULATION),
    this.sisenseConfigService.getWidgetInfo(Dashboard.POPULATION, Widget.UNIQUE_LIVES).id,
      widgetData => {
        this.selectedMembersCount = widgetData.queryResult.value.data;
        this.changeDetector.detectChanges();
      },
      () => {
        this.dataUnavailable = true;
      }
    );
  }
}

И это файл spe c, который я написал:

filter-bar.component.spe c .ts

import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FilterBarComponent } from './filter-bar.component';
import { SisenseFilterService } from '../services/sinsense-filter.service';
import { PopUpService } from '@wuitk6/angular/components/popup/popup.service';
import { SisenseService } from '../services/sinsense.service';
import { SisenseConfigService } from '../services/sinsense-config.service';

describe('FilterPanelComponent', () => {
    let component: FilterBarComponent;
    let fixture: ComponentFixture<FilterBarComponent>;

    mockSisenseConfigService.getWidgetInfo.and.returnValue({ id: 'demo_ID' });

        fixture = TestBed.createComponent(FilterBarComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });
});

А вот услуга, (я не знаю, кто написал этот код):

sisense-config.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/do';
...
import { ErrorService } from './error.service';

// This is to avoid compile errors in typescript.
// The real variable will be added when sisense.js is loaded
declare var Sisense: any;

@Injectable({
    providedIn: 'root'
})
export class SisenseConfigService {
  constructor(private http: HttpClient, private errorService: ErrorService) {}

  getDashboardId(dashboardName: string): string {
    ...
  }

  getWidgetInfo(dashboardName: string, widgetName: string): ISisenseWidget {
   ...
   return widgetInfo;
  }
}

Я написал тестовый файл, но она не в порядке с ним. Пожалуйста, помогите мне, что именно просит мой технический руководитель. Не стесняйтесь просить больше деталей кода.

Answer 1

Это поможет вам

describe('FilterPanelComponent', () => {
    let component: FilterBarComponent;
    let fixture: ComponentFixture<FilterBarComponent>;
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [
                FilterBarComponent
            ],
            imports: [],
            providers: [
                {
                    provide: SisenseService,
                    useClass: SisenseServiceStub
                },
                SisenseConfigService
            ]
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(FilterBarComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should call getDataFromWidget() on init method',()=>{
        spyOn(component,'getDataFromWidget').and.callThrough();
        component.ngOnInit();
        expect(component.getDataFromWidget).toHaveBeenCalled()
    })

    it('getDataFromWidget should set selected member count',()=>{
        component.selectedMembersCount = 0;
        component.getDataFromWidget();
        expect(component.selectedMembersCount).toEqual(1);
        fixture.detectChanges();
        const htmlEle  = fixture.debugElement.nativeElement.querySelector('#some-count'); // For class try query(By.css('.some-count')).nativeElement;
        expect(htmlEle.innerHTML).toBe(1);        
    })
});

// this is the stub she is talking about
export class SisenseServiceStub{
    getWidgetData(){
        return of({
            queryResult : {
                value : {
                    data : 1
                }
            }
        })
    }
}

Несколько месяцев назад я также видел, как некоторые из моих юниоров боролись с юнит-тестами. Итак, я написал серию статей, которые также могут вам помочь .

Попробуйте и дайте мне знать, если это помогло. Вот как вы играете с окурками и шпионами