使用angular中的單元測試，脫離後臺獨立開發（二）

在前文中，咱們展現了在單元測試中，如何注入依賴，並改寫依賴中特定方法中的返回值。從而達到脫離後臺，獨立開發前臺的目的。

本文中，咱們繼續這一話題，以指望可以進一步簡化咱們的單元測試。

面臨問題

有些服務，咱們可能須要在多個組件中調用。若是按上文的方法，那麼就須要在多個組件的單元測試中，重複去定義模擬返回的數據。顯然，若是是這樣，咱們便製造了重複的輪子。

解決方案

寫一個專門用來測試的服務，使其可以在全部的單元測試中應用，而不在生產環境中應用。運用的知識固然是重寫了。
仍然以CollegeService爲例。爲了解決單元測試請求真實後臺的問題，咱們：

• 先定義別一個CollegeTestService，使其繼承CollegeService，這樣其便有了CollegeService的全部的方法，並且能夠任意的去重寫CollegeService中的方法。
• 在單元測試時，將CollegeTestService注入，以替換CollegeService

編碼

CollegeTestService 用於測試的服務類

import {Injectable} from '@angular/core';
import {Observable, of} from 'rxjs';
import {College} from '../entity/college';
import {CollegeService} from './college.service';
import {Page} from '../entity/page';

@Injectable({
    providedIn: 'root'
})
export class CollegeTestService extends CollegeService {
    /**
     *獲取分頁數據
     */
    getCollegeByPage(page: number, size: number): Observable<Page<College>> {
        // 初始化變量
        const dataPage = new Page<College>();
        dataPage.content = new Array<College>(
            College.instance()
        );

        // 定義觀察者
        const observable = of(dataPage);

        return observable;
    }
}

單元測試

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

import {CollegeIndexComponent} from './college-index.component';
import {NzGridModule, NzDividerModule, NzTableModule, NzFormModule} from 'ng-zorro-antd';
import {HttpClientModule} from '@angular/common/http';
import {RouterTestingModule} from '@angular/router/testing';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {CollegeService} from '../../../../../service/college.service';
import {CollegeTestService} from '../../../../../service/college-test.service';

/**
 * 對測試的描述：CollegeIndexComponent
 */
describe('CollegeIndexComponent', () => {
    // 定義兩個變量
    let component: CollegeIndexComponent;
    let fixture: ComponentFixture<CollegeIndexComponent>;

    beforeEach(async(() => {
        // TestBed工做臺
        // TestBed.configureTestingModule 配置要測試的模塊
        // 這貼近於現實生活。現實生活中，咱們測試一塊電錶是否正確.
        // 1. 須要一個專門用於測試的工做臺
        // 2. 須要對這個測試的工做進行配置，以讓其符合測試電錶的基礎工做
        TestBed.configureTestingModule({
            // 聲明要上工做臺的組件
            declarations: [CollegeIndexComponent],
            // 配置測試的依賴，沒有這些模塊，測試就進行不了。
            // 好比咱們測試電錶是否準確，須要有交流電，須要有電流表，須要有電壓表等
            imports: [NzGridModule,
                HttpClientModule,
                NzDividerModule,
                NzTableModule,
                RouterTestingModule,
                ReactiveFormsModule,
                FormsModule,
                NzFormModule],
            // 定義providers ** 這是重點 **
            providers: [
                {
                    provide: CollegeService,
                    useClass: CollegeTestService
                } // 使用 CollegeTestService 來替換 CollegeService ** 這是重點 **
            ]
        }).compileComponents(); // 配置完後，開始編譯要測試組件
    }));

    /**
     *  每次測試前，均執行一遍
     *  inject([], () => {}) 單元測試中的方法
     *  CollegeService 要注入的服務
     *  collegeService爲服務起的別名，類型爲CollegeService，其對應注入的第一個參數
     */
    beforeEach(inject([CollegeService], (collegeService: CollegeService) => {
        // 打印，查看究竟是哪一個 service 被注入了
        console.log(collegeService);

        // fix = 固定。用工做臺建立一個供測試的組件。
        // 因爲其想要被測試，就必然還須要其它的一些腳手架。
        // 咱們把腳手架與被測試的組件組成的聯合體稱爲：ComponentFixture 被固定的組件
        fixture = TestBed.createComponent(CollegeIndexComponent);

        // 實例化要測試的組件
        component = fixture.componentInstance;

        // 檢測變化
        fixture.detectChanges();
    }));

    /**
     * 測試方法的描述信息：should create
     */
    it('should create', () => {
        // 期待 組件 被成功建立
        expect(component).toBeTruthy();
    });
});

測試：

而後：在其它的測試中，若是你還須要這個CollegeService，使用以上方法將測試用的CollegeTestService注入就行了。

TODO

是時候來啓用接口了，你說呢？