如何使用 karma+jasmine 测试角度 2 中的位置

Question

Angular 2 v.2.0.0 - TS + 业力 + 茉莉花。

我测试了这个功能 - 点击返回上一页：

 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 由于错误消息而注入了位置（默认情况下，事物是未定义的而不是空的）。

您可以执行以下操作：

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

或者，我很幸运地使用了 Angular 的ReflectiveInjector类。可用于模拟 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]
    }
]);