如何測試可操作局部變量並返回可觀察值的Angular服務方法？

Question

假設這樣的服務：

@Injectable()
export class PageNavService {
    private _expanded = true;
    private pageNavExpanded = new Subject<any>();

    public togglePageNav(): void {
        this._expanded = !this._expanded
        this.pageNavExpanded.next(this._expanded);
    }

    public setPageNavState(expanded) {
        this._expanded = expanded;
        this.pageNavExpanded.next(this._expanded);
    }

    public getPageNavState(): Observable<any> {
        return this.pageNavExpanded.asObservable();
    }

    constructor() { }
}

如何測試togglePageNav()方法？

這是我的嘗試：

describe('PageNavService', () => {
    let service;
    let state;

    beforeEach(() => TestBed.configureTestingModule({
        providers: [PageNavService]
    }));

    beforeEach(inject([PageNavService], svc => {
        service = svc;
        service.getPageNavState().subscribe((s) => {
            state = s;
        });
    }));

    describe('togglePageNav method', () => {
        it('should reverse the navbar state', () => {
            service.togglePageNav();
            expect(state).toBeTruthy();
        });
    });
});

但是，此測試失敗：

期望假是真實的。

Answer 1

您應該調用方法getPageNavState() ，

 service.getPageNavState().subscribe((s) => {
            state = s;
 });

Answer 2

因為您的初始狀態為true ，所以測試無法成功，請讓我解釋一下。

describe('PageNavService', () => {
    let service;
    let state;

    beforeEach(() => TestBed.configureTestingModule({
        providers: [PageNavService]
    }));

    beforeEach(inject([PageNavService], svc => {
        service = svc;
        //At this moment, the state inside the service is true
        service.getPageNavState().subscribe((s) => {
            state = s;
        });
    }));

    describe('togglePageNav method', () => {
        it('should reverse the navbar state', () => {
            //Toggle will change the state from its initial state to an opposite one, making it false
            service.togglePageNav();
            //The test fails because the state is now false.
            expect(state).toBeTruthy();
        });
    });
});

您可以將初始狀態（ private _expanded ）更改為false也可以將測試更改為false ，因為這是您現在應該得到的。