如何為方法編寫單元測試用例 [Angular]

Question

我是 Angular 的初學者。 我正在努力學習 Typescript，現在我被告知要用 Jasmine 和 Karma 為我創建的每個component和service編寫單元測試用例。 我看過很多教程來學習Angular 中的單元測試。 我是一名實習生，昨天我提出了一個拉取請求，我的技術負責人給出了以下評論。

這是我寫的代碼。

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;
      }
    );
  }
}

這是我寫的規范文件：

filter-bar.component.spec.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
                }
            }
        })
    }
}

幾個月前，我還看到我的一些后輩在單元測試中苦苦掙扎。 所以，我寫了一系列文章，也可以幫助你。

試一試，如果有幫助，請告訴我。 這是你如何玩存根和間諜