angular - 如何使用 karma+jasmine 测试 Angular 2 中的位置

Question

Angular 2 v.2.0.0 - TS + karma + Jasmine 。

我测试了这个功能 - 单击返回上一页:

 public isClick: boolean = false;

 public backClicked(location: Location): void {
        if (!this.isClick) {
            this.isClick = true;
            this.location.back();
        }
    }

这是我的测试:

describe("NavBarComponent", () => {
    describe("function backClicked(): void", () => {
        let testNavBarComponent: NavBarComponent;
        let loc: Location;
        beforeEach(() => {
            testNavBarComponent = new NavBarComponent(null);
        });
        loc = jasmine.createSpyObj("Location", ["back"]);
        it ("It is backClicked() function test", () => {
            testNavBarComponent.backClicked(loc);
            expect(loc.back).toHaveBeenCalledTimes(1);
        });
    });
});

运行测试后，出现此错误:TypeError: Cannot read property 'back' of null。也许是 createSpyObj 或其他问题有问题？

Answer 1

在 backClicked 函数中，您调用的是 location this.location 的类实例，而不是传递给函数 location 的 location 实例。我假设您的 NavBarComponent 由于错误消息而注入(inject)了 Location(默认情况下，事物是未定义的而不是 null)。

您可以执行以下操作:

beforeEach(() => {
    // Mock the location here instead, then pass to the NavBarComponent
    loc = jasmine.createSpyObj("Location", ["back"]);
    testNavBarComponent = new NavBarComponent(loc);
});

<小时/>

或者，我很幸运地使用了 Angular 的 ReflectiveInjector类(class)。可用于在 Angular 2 中模拟测试依赖项的文档和文章完全来自于 RC 的多次迭代，所以我不能 100% 确定这被认为是最佳实践:

import { ReflectiveInjector } from '@angular/core';
import { Location } from '@angular/common';

describe("NavBarComponent", () => {
    describe("function backClicked(): void", () => {
        let testNavBarComponent: NavBarComponent;
        let loc: Location;

        beforeEach(() => {
            let injector = ReflectiveInjector.resolveAndCreate([
                LocationStrategy,
                Location
            ]);

            // Get the created object from the injector
            loc = injector.get(Location);

            // Create the spy.  Optionally: .and.callFake(implementation)
            spyOn(loc, 'back');

            // Create NavBarComponent with the spied Location
            testNavBarComponent = new NavBarComponent(loc);
        });

        it ("It is backClicked() function test", () => {
            testNavBarComponent.backClicked(loc);
            expect(loc.back).toHaveBeenCalledTimes(1);
        });
    });
});

编辑:这可以而且应该现在使用 TestBed.configureTestingModule 来完成:https://blog.thoughtram.io/angular/2016/11/28/testing-services-with-http-in-angular-2.html

使用 ReflectiveInjector，您还可以像在 app.module 中一样声明依赖项。例如，模拟Http服务:

let injector = ReflectiveInjector.resolveAndCreate([
    MockBackend
    BaseRequestOptions,
    {
        provide: Http,
        useFactory: (backend, options) => {
            return new Http(backend, options);
        },
        deps: [MockBackend, BaseRequestOptions]
    }
]);