单元测试Angular 2 Service

Question

我刚开始使用Angular进行整个单元测试，所以如果伙计们能指出我的方向，那将是很棒的..我试图创建一个假服务并将数据传递回去，以便我可以进行一些简单的测试。

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

Webpack上的服务器错误：///~/rxjs/Subscriber.js：194：0 <-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);

        }
    );

});

});

我想使用假冒产品时，测试似乎仍能获得真正的服务

Answer 1

测试双打的目的

我知道在JavaScript和Angular中进行单元测试的痛苦，这花了我一些力气。

因此，我希望以下解释有助于解决混淆问题：

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

您的情况是SearchService 。

模拟是伪造物品的一种。

这些伪造的物品有很多不同的名称和用途-嘲笑，间谍，存根等。

但总的名称由Gerard梅萨罗斯创造，并解释这里是测试双打 。

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

用测试倍数替换对象的协作者是为了测试对象如何与它们交互。

这个想法是“记录”该交互，并且它是由间谍完成的（在Jasmine- jasmine.createSpy() ）。

Angular 2服务的单元测试

测试http调用的一种方法-

您没有义务使用TestBed来测试服务，由于它具有DOM功能，它对于测试可重用组件更有用。

您可以创建一个伪造的对象，该伪造的对象具有与Angular的Http对象相同的方法，但被间谍代替。

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

然后在被测试的REAL服务上调用方法，并调查相关间谍以获取结果。

测试HTTP调用的另一种方法您可以使用MockBackend类并将Http服务配置为使用伪造的后端，如本文档所示

关于您遇到的错误

很难说，在测试代码中看到了带有真实服务的示例。

更多理论资料（视频）

如果您不熟悉测试，可以在我的关于JavaScript单元测试和TDD的 （免费）理论课程中了解有关“ 测试双打”以及如何完成单元测试的更多信息。

希望能帮助到你。