单元测试 Angular 2 服务

Question

我是 Angular 整个单元测试场景的新手，所以如果大家能指出我的方向会很棒。我试图创建一个假服务并将数据传回，我可以运行一些简单的测试。

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

服务器错误 在 webpack:///~/rxjs/Subscriber.js:194:0

我不认为这是我的 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);

        }
    );

});

});

当我想使用假的时，测试似乎仍然得到了我认为的真正服务

Answer 1

测试替身的目的

我知道在 JavaScript 和 Angular 中进行单元测试的痛苦，我花了几次尝试才将其理解。

所以我希望下面的解释有助于理清困惑：

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

在你的情况下是SearchService。

Mock 是一种假对象。

这些假对象有很多不同的名称和用途 - 模拟、间谍、存根等。

但 Gerard Meszaros 创造并解释为 here 的通用名称是 Test Doubles。

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

用 test doubles 替换对象的 collaborators 是为了测试 Object 如何与它们交互。

这个想法是“记录”这种互动，它是通过间谍完成的（在 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 以及如何完成单元测试的信息。

希望对你有帮助。