如何使用业力+茉莉花在角度2中测试位置 [英] How to test Location in angular 2 with karma+jasmine

问题描述

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

Angular 2 v.2.0.0 - TS + karma + jasmine.

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

I test this function - back on click to previously page:

 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或其他问题?

After i run the test, i've got this error: TypeError: Cannot read property 'back' of null. Maybe problem with createSpyObj, or somethig else?

推荐答案

在backClicked函数中，您正在调用位置this.location的类实例，而不是传递给函数location的location实例.我假设您的NavBarComponent由于错误消息而注入了位置信息(默认情况下，这些内容是未定义的，而不是null).

In the backClicked function, you're calling the class instance of location this.location rather than the instance of location passed to the function location. I'm assuming that your NavBarComponent has Location injected due to the error message (by default, things are undefined rather than null).

您可以执行以下操作:

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％地确定这被认为是最佳实践:

---

Alternatively, I've had good luck using Angular's ReflectiveInjector class. The documentation and articles available for mocking dependencies for tests in Angular 2 is all over the board from having so many iterations of the RC, so I'm not 100% sure this is considered a best practice:

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完成 :

Edit: This can and should be accomplished using the TestBed.configureTestingModule now: https://blog.thoughtram.io/angular/2016/11/28/testing-services-with-http-in-angular-2.html

使用ReflectiveInjector，您还可以以与在app.module中相同的方式声明依赖项.例如，模拟Http服务:

Using the ReflectiveInjector, you can also declare your dependencies in the same way you do in app.module. For example, mocking the Http service:

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

这篇关于如何使用业力+茉莉花在角度2中测试位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！