测试 angular2 http 服务答案

【问题标题】：Test angular2 http service测试 angular2 http 服务
【发布时间】：2017-06-11 08:44:28
【问题描述】：

我开始学习angular2了。

具有以下实现的服务：

@Injectable()
export class PostsService {

    constructor(private http: Http) { }

    getAllPosts() {
        return this.http.get('/api/posts')
            .map(res => res.json())
    }

}

我正在尝试对此进行测试：

beforeEach(() => {
    TestBed.configureTestingModule({
        imports: [HttpModule],
        providers: [
            PostsService,
            { provide: XHRBackend, useClass: MockBackend }
        ]
    })
})

it('should be exposed', inject([PostsService], (service: PostsService) => {
    expect(service).toBeTruthy()
}));

it('should use HTTP calls to obtain data results', 
    inject([PostsService],
        fakeAsync((service: PostsService) => {   
            // test some mocked response data
            // test connection
            // whatever else needs to be tested


        }
)));

对于这么简单的请求，我深表歉意，但我浏览的大多数指南都已过时

【问题讨论】：

您的问题是什么？您似乎还没有真正编写测试。你读过the MockBackend docs，它给出了一个使用例子吗？
我承认，我没有......我在周末学习这个，希望我能通过编写和阅读代码来学习。现在要阅读，将回到问题
我写了一篇关于 Angular 测试的博客文章，在将数据公开给其他组件的特定方式的上下文中，您可能会发现它很有用：blog.jonrshar.pe/2017/Apr/16/async-angular-tests.html
@jonrsharpe：您的博客文章是我遇到的用于测试服务的最佳资源。与blog.jonrshar.pe/2017/Apr/09/async-angular-data.html 一起物超所值，即使我还没有完全获得 Observables
感谢您的反馈，谢谢；我很高兴你发现它很有用！

标签： angular angular2-services angular2-testing

【解决方案1】：

阅读@jonrsharpe 的博客：http://blog.jonrshar.pe/2017/Apr/16/async-angular-tests.html

/* tslint:disable:no-unused-variable */
import {
    Injectable,
    ReflectiveInjector
} from '@angular/core';

import {
    TestBed,
    fakeAsync,
    inject
} from '@angular/core/testing'

import { PostsService } from './posts.service'
import {
    BaseRequestOptions,
    ConnectionBackend,
    Http,
    Response,
    ResponseOptions,
    RequestMethod,
    RequestOptions,
    XHRBackend
} from '@angular/http'
import { MockConnection, MockBackend } from '@angular/http/testing'


describe('MockBackend PostsService', () => {

    beforeEach(() => {
        this.injector = ReflectiveInjector.resolveAndCreate([
            { provide: ConnectionBackend, useClass: MockBackend },
            { provide: RequestOptions, useClass: BaseRequestOptions },
            Http,
            PostsService
        ] )
        this.postsService = this.injector.get( PostsService )
        this.backend = this.injector.get( ConnectionBackend ) as MockBackend
    } )

    it( 'should be exposed', () => {
        expect( this.postsService ).toBeTruthy()
    } );

    it( 'should use HTTP calls to the api/posts URL', () => {
        this.backend.connections
            .subscribe( ( connection : any ) => this.lastConnection = connection )
        this.postsService.getAllPosts()
        expect( this.lastConnection ).toBeDefined()
        expect( this.lastConnection.request.url ).toBe( '/api/posts' )
        expect( this.lastConnection.request.method ).toEqual( RequestMethod.Get,
                                                            'Expected GET request' )
    } );

    it( 'should return some data', done => {
        let expectedResult = [
            {
                "userId": 1,
                "id": 1,
                "title": "sunt aut",
                "body": "quia et"
            },
            {
                "userId": 1,
                "id": 2,
                "title": "qui est",
                "body": "est rerum"
            }
        ]

        this.backend.connections.subscribe( ( connection : MockConnection ) => {
            connection.mockRespond( new Response( new ResponseOptions( {
                status: 200,
                body: expectedResult
            } ) ) )
        })

        this.postsService.getAllPosts()
            .subscribe( data => {
                expect( data ).toEqual( expectedResult )
                done()
            }
        )

    } )

} );

【讨论】：