如何测试操作局部变量并返回可观察对象的 Angular 服务方法？答案

【问题标题】：How can I test an Angular service method that manipulates a local variable and returns an observable?如何测试操作局部变量并返回可观察对象的 Angular 服务方法？
【发布时间】：2018-01-16 04:31:19
【问题描述】：

假设这样的服务：

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

但是，测试失败了：

预期为假为真。

【问题讨论】：

getPageNavState 是一个方法，你必须调用它（service.getPageNavState() 而不是service.getPageNavState）
谢谢你，解决了语法错误，但测试仍然失败，好像没有返回 observable。

标签： angular unit-testing angular-services

【解决方案1】：

因为你的初始状态是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，因为这是您目前应该得到的。

【讨论】：

你是对的。一旦我解决了其他人指出的语法错误，并且一旦我删除了明显在订阅之前的领先 expect() 语句，它就可以工作了。谢谢。

【解决方案2】：

你应该调用方法getPageNavState()，

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

【讨论】：

感谢您的语法修复，但测试仍然失败。就好像它没有得到可观察的一样。