在角度TestBed中嘲諷Firestore集合

Question

我想爲使用Firestore的組件編寫單元測試，並且我遇到了Firebase集合嘲諷的問題。

SUT

export class TobjectsListComponent implements OnInit { 
... 
    constructor(private db: AngularFirestore) { 
     this.tobjectDatabase = new TobjectDatabase(db); 
    } 
... 
} 

export class TobjectDatabase { 
    /** Stream that emits whenever the data has been modified. */ 
    dataChange: BehaviorSubject<TObject[]> = new BehaviorSubject<TObject[]>([]); 
    get data(): TObject[] { return this.dataChange.value; } 

    constructor(private db: AngularFirestore) { 
    this.db.collection<TObject>('tobjects').valueChanges() 
     .subscribe(data => { this.dataChange.next(data); }); 
    } 
} 

TEST

class AngularFirestoreMock extends AngularFirestore { 
    public collection<TObject>(name: string, queryFn?: QueryFn): AngularFirestoreCollection<TObject> { 
    const ref = this.firestore.collection('tobjects'); 
    if (!queryFn) { queryFn = (ref) => ref; } 
    return new AngularFirestoreCollection<TObject>(ref, queryFn(ref)); 
    } 
} 

describe('TobjectListComponent',() => { 
    let component: TobjectsListComponent; 
    let fixture: ComponentFixture<TobjectsListComponent>; 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     imports: [MaterialModule], 
     declarations: [TobjectsListComponent], 
     providers: [{ "provide": AngularFirestore, "useValue": AngularFirestoreMock }], 
     schemas: [CUSTOM_ELEMENTS_SCHEMA] 
    }) 
    .compileComponents(); 
    })); 

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

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

試運行

一旦運行測試，我得到一個錯誤TypeError: this.db.collection is not a function

從堆棧跟蹤信息我可以看到，該錯誤在這一行中有一個來源，並且字符this.db.**c**ollection<TObject>('tobjects').valueChanges()
在TobjectDatabase類。

TypeError: this.db.collection is not a function 
at new TobjectDatabase (http://localhost:9876/_karma_webpack_/webpack:/C:/git/volago2/src/app/tobjects-admin/tobjects-list/tobjects-list.component.ts:82:13) 
at new TobjectsListComponent (http://localhost:9876/_karma_webpack_/webpack:/C:/git/volago2/src/app/tobjects-admin/tobjects-list/tobjects-list.component.ts:24:28) 
at createClass (http://localhost:9876/_karma_webpack_/webpack:/C:/git/volago2/node_modules/@angular/core/@angular/core.es5.js:10933:1) 
at createDirectiveInstance (http://localhost:9876/_karma_webpack_/webpack:/C:/git/volago2/node_modules/@angular/core/@angular/core.es5.js:10764:22) 
at createViewNodes (http://localhost:9876/_karma_webpack_/webpack:/C:/git/volago2/node_modules/@angular/core/@angular/core.es5.js:12212:34) 
at createRootView (http://localhost:9876/_karma_webpack_/webpack:/C:/git/volago2/node_modules/@angular/core/@angular/core.es5.js:12107:1) 
at callWithDebugContext (http://localhost:9876/_karma_webpack_/webpack:/C:/git/volago2/node_modules/@angular/core/@angular/core.es5.js:13493:26) 
at Object.debugCreateRootView [as createRootView] (http://localhost:9876/_karma_webpack_/webpack:/C:/git/volago2/node_modules/@angular/core/@angular/core.es5.js:12810:1) 
at ComponentFactory_.webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactory_.create (http://localhost:9876/_karma_webpack_/webpack:/C:/git/volago2/node_modules/@angular/core/@angular/core.es5.js:9872:26) 
at initComponent (http://localhost:9876/_karma_webpack_/webpack:/C:/git/volago2/node_modules/@angular/core/@angular/core/testing.es5.js:889:1) 

怎麼了？我怎麼能嘲笑這個收藏？

Answer 1

好吧，我終於管理了Firestore系列的嘲弄。我給不同的服務的一個例子：

SUT

import { Injectable } from '@angular/core'; 
import { AngularFirestore } from 'angularfire2/firestore'; 
import { Administrative } from '../model/administrative'; 

@Injectable() 
export class AdministrativeService { 

    administratives: Administrative[] = []; 

    constructor(private db: AngularFirestore) { 
    this.db.collection<Administrative>('administrative').valueChanges() 
    .subscribe(data => this.administratives = data); 
    } 

    getPath(uname: string): string[] { 
    let current = this.administratives.find((a: Administrative) => a.uname === uname); 
    const result: string[] = [current.name]; 

    while (current.parent) { 
     current = this.administratives.find((a: Administrative) => a.uname === current.parent); 
    result.unshift(current.name); 
    } 

    return result; 
    } 
} 

TEST

import { TestBed, inject } from '@angular/core/testing'; 
import { AdministrativeService } from './administrative.service'; 
import { AngularFirestore } from 'angularfire2/firestore'; 
import { Observable } from 'rxjs/Rx'; 
import { Administrative } from '../model/administrative'; 

const input: Administrative[][] = [[ 
    { name: 'Polska', uname: 'polska', parent: ''}, 
    { name: 'Dolnośląskie', uname: 'dolnoslaskie', parent: 'polska'}, 
    { name: 'Wrocław', uname: 'wroclaw', parent: 'dolnoslaskie'} 
]]; 

const data = Observable.from(input); 

const collectionStub = { 
    valueChanges: jasmine.createSpy('valueChanges').and.returnValue(data) 
} 

const angularFiresotreStub = { 
    collection: jasmine.createSpy('collection').and.returnValue(collectionStub) 
} 

describe('AdministrativeService',() => { 
    let service: AdministrativeService; 
    let angularFirestore: AngularFirestore; 

    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     providers: [ 
     AdministrativeService, 
     { provide: AngularFirestore, useValue: angularFiresotreStub } 
     ] 
    }); 

    service = TestBed.get(AdministrativeService); 
    angularFirestore = TestBed.get(AngularFirestore); 
    }); 

    it('should be created',() => { 
    expect(service).toBeTruthy(); 
    expect(angularFiresotreStub.collection).toHaveBeenCalledWith('administrative'); 
    }); 

    it('gets hierarchy path',() => { 
    const result = service.getPath('wroclaw'); 
    expect(result).toEqual(['Polska', 'Dolnośląskie', 'Wrocław']); 
    }); 

});