如何使用 AngularFireDatabase 和 Jasmine Spy/Mock 测试 Angular 服务

Question

I am trying to test my data service, and I can do it using the real services (AngularFireDatabase) but I am unable to get the mocked version working for testing.

My DataStorage class is used to combine local storage, remote storage and other functionality. This allows our application to easy change the service we integrate to.

As such, we have some basic structures that are extended, such as the IDataRecord, which will always have a Key_ field as this is a requirement of our data model.

Part of DataStorage class:

@Injectable()
export class DataStorage<T extends IDataRecord> {

    constructor(private AfDb_:AngularFireDatabase) { }

    public Exists(Id:string):Subject<boolean> {
        const Status$:Subject<boolean> = new Subject<boolean>();
        this.AfDb_.object<T>(`${Id}`).valueChanges()
            .subscribe( (OneRecord:T) => {
                if (OneRecord !== undefined && OneRecord !== null) {
                    if (OneRecord.Key_ !== undefined && OneRecord.Key_ !== null && OneRecord.Key_.length > 0) {
                        Status$.next(true);
                    } else {
                        Status$.next(false);
                    }
                } else {
                    Status$.next(false);
               }
            })
        ;
        return Status$;
    }

The following test snippet works with the real AngularFireDatabase.

describe('DataStorage Service - Using AngularFire', () => {
    let ServiceUnderTest:DataStorage<IDataRecord>;
    let DependentService:AngularFireDatabase;

    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [
                AngularFireModule.initializeApp(environment.Firebase)
            ],
            providers: [
                AngularFireDatabase,
                DataStorage,
            ]
        });
        DependentService = TestBed.inject(AngularFireDatabase);
        ServiceUnderTest = TestBed.inject(DataStorage);
    });

    afterEach(() => {
        DependentService = null;
        ServiceUnderTest = null;
    });

    it('should be created', () => {
        expect(ServiceUnderTest).toBeTruthy('Service was created');
    });

    it('should confirm a record exists in storage', ( (done) => {
            const FileCheck$:Subject<boolean> = ServiceUnderTest.Exists('/Good');    // This exists in Firebase
        FileCheck$.subscribe( (Result:boolean) => {
            expect(Result).toBeTrue();
            done();
        });
    }));
});     

The real test passes, as the data exists in Firebase.

I am trying now to mock out AngularFire parts, so that I do not need the real connection for the testing to pass. I want to change the dependent service (AngularFire) so that this could be moved to another online service more easily if needed.

Failed test snipped:

// Create the fake record to be returned - Presence of Key_ with data means the record was found
const GoodDataRecord:ITestInterface = { Key_: 'Fake', Name: 'Fake Record' } ;
const TestData:Observable<ITestInterface> = of<ITestInterface>(GoodDataRecord);

const ValueChangesStub = {
    valueChanges: jasmine.createSpy('valueChanges').and.returnValue(TestData)
}
const AfDbObjectStub = {
    object: jasmine.createSpy('object').and.returnValue(ValueChangesStub)
}

describe('DataStorage Service - Mocked AngularFire', () => {
    let ServiceUnderTest:DataStorage<ITestInterface>;
    let DependentService:AngularFireDatabase;

    beforeEach( () => {
        TestBed.configureTestingModule({
            providers: [
                DataStorage,
                { provide: AngularFireDatabase, useValue: AfDbObjectStub }
            ]
        });
        // Inject both the service-to-test and its (spy) dependency
        DependentService = TestBed.inject(AngularFireDatabase);
        ServiceUnderTest = TestBed.inject(DataStorage);
    });

    it('should be created', () => {
        expect(ServiceUnderTest).toBeTruthy('Service was created');
    });

    it ('should return stubbed value from a spy', ( () => {
        let Status:boolean;
        const FileCheck$:Subject<boolean> = ServiceUnderTest.Exists('UsingStub');
        FileCheck$.subscribe( (Result:boolean) => {
            Status = Result;
        });
        expect(Status).toBeTrue();
    }));
});

This test always fails. Expected undefined to be true.

Adding a console.log() in the FileCheck$ subscribe block does not write out anything. This is not getting executed. However, if I add a console.log in the DataStorage class, I do see the fake data being returned.

    this.AfDb_.object<T>(`${BasePath}/${Id}`).valueChanges()
        .subscribe( (OneRecord:T) => {
            console.log(OneRecord.Key_);

This will show the 'Good' for the real test, as well as 'Fake' for the failed test.

As per @Alif50:

it ('should return stubbed value from a spy', ( done => {
    const FileCheck$:Subject<boolean> = ServiceUnderTest.Exists('Fake');
    FileCheck$.subscribe( (Result:boolean) => {
        expect(Result).toBeTrue();
        done();
    });
}));

This now introduces a different error: Error: Timeout - Async function did not complete within 5000ms (set by jasmine.DEFAULT_TIMEOUT_INTERVAL)

Answer 1

Try changing the 2nd test to this:

it ('should return stubbed value from a spy', done => {
        let Status:boolean;
        const FileCheck$:Subject<boolean> = ServiceUnderTest.Exists('UsingStub');
        FileCheck$.subscribe( (Result:boolean) => {
            Status = Result;
            expect(Status).toBeTrue();
            done(); // call done to let the test know you are done
        });
    });

The way you have it presented, the assertion ( expect(Status).toBeTrue() ) occurs before the subscribe block runs because .subscribe is asynchronous.