单元测试Angular 2服务

时间:2017-01-18 22:32:27

标签: angular unit-testing karma-jasmine

我是Angular对整个单元测试场景的新手,所以如果有人能指出我的方向会很棒..我试图创建一个虚假服务并传回数据,我可以运行一些简单的测试.. < / p>

当我去运行测试时,似乎失败了

服务器错误   在webpack:///~/rxjs/Subscriber.js:194:0&lt; - config / karma-test-shim.js:20301

我不认为这是我的webpack配置..这是我的代码[...]

import { SearchModule } from './search.module';
import { SearchService } from './search.services';
import { HttpModule }    from '@angular/http'; 
import { inject, TestBed } from '@angular/core/testing';  
import { Observable } from 'rxjs/Observable';
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';

class SearchServiceMock {

search() {

    return Observable.of(
        [
            {
            "title": "title_1",
            "artist": "artist_1",
            "release": "06/02/2016",
            "slug": "slug-1"
        },
        {
            "title": "title_2",
            "artist": "artist_1",
            "release": " 27/01/2017",
            "slug": "slug-2"
        },
        {
            "title": "title_3",
            "artist": "artist_3",
            "release": "17/02/2017",
            "slug": "slug-3"
        }
        ]
    )

}

}

describe('Service: TracksServices', () => {

let searchService: SearchService;

beforeEach(() => TestBed.configureTestingModule({
    imports: [ SearchModule, HttpModule ],
        providers: [
        { provide: SearchService, useClass: SearchServiceMock },
    ]
}));

beforeEach(inject([SearchService], (s: any) => {
    searchService = s;
}));

it('Search results 3', () => {

    searchService.search('track 1', 1, 4).subscribe(
        (x:any) => {     

            // expect(x).toContain(track);
            expect(x.length).toEqual(3);

        }
    );

});

});

当我想使用虚假的

时,测试似乎仍然可以获得真正的服务

1 个答案:

答案 0 :(得分:4)

测试双打的目的

我知道进入单元测试的痛苦,在JavaScript和Angular中,我花了几次尝试来绕过它。

所以我希望以下解释有助于解决这个问题:

您正在测试的对象称为“受测试的对象”

在您的情况下,它是SearchService

Mock 是一种虚假对象。

这些假物品有很多不同的名称和用途 - 模拟,间谍,存根等。

但是Gerard Meszaros创造的一般名称并解释here测试双打

正在测试的对象通常依赖于其他对象。 这些依赖项也称为协作者

使用测试双打替换对象的协作者是为了测试对象如何与它们进行交互。

这个想法是“记录”这种互动,并且是通过间谍完成的(在Jasmine中 - jasmine.createSpy())。

单元测试Angular 2服务

测试http调用的一种方法 -

您没有义务使用TestBed来测试服务,因为它的DOM功能,它对测试可重用组件更有用。

您可以使用与Angular的Http对象相同的方法创建一个虚假对象,但替换为间谍。

然后创建一个new SearchService(httpSpy)实例。 这将为您提供服务的副本,您可以对其进行测试。

然后调用正在测试的 REAL 服务的方法,并调查结果的相关间谍。

测试http调用的另一种方法 您可以使用MockBackend类并将Http服务配置为使用伪造的后端,例如in this doc

关于您获得的错误

如果没有在测试代码中看到真实服务的示例,那么很难说。

更多理论材料(视频中)

如果您不熟悉测试,可以在我的(免费)理论课程中了解有关JavaScript Unit Testing and TDD 的更多信息 Test Doubles 以及如何进行单元测试

希望它有所帮助。