Question

我有一个简单的服务

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class TodoService {
    constructor(private http: Http) { }

    getTestData(): Observable<[{}]> {
        return this.http
            .get('https://jsonplaceholder.typicode.com/posts/1')
            .map(res => res.json())
    }
}

和一个简单的组件

import { Component, OnInit} from '@angular/core';
import { TodoService } from './todo.service';

@Component({
    selector: 'todo-component',
    templateUrl: './todo-component.html',
    styleUrls: ['./todo.css']
})

export class TodoComponent implements OnInit {
    testList: Object; 

    constructor(private todoService: TodoService) { }

    ngOnInit() { 
        this.todoService
            .getTestData()
            .subscribe((testList)  => {
                this.testList = testList
            });

    }
}

我试图测试这个

import { TestBed, async } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import { Observable } from 'rxjs/Observable';

import { TodoComponent } from '../todo.component';
import { TodoService } from '../../todo/todo.service';

let todoService,
    fixture,
    comp,
    todoList = [],
    TodoServiceStub = { 
    getTestData: function() {
        return {
            userId: 1,
            id: 1,
            title: 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
            body: `quia et suscipit
                    suscipit recusandae consequuntur expedita et cum
                    reprehenderit molestiae ut ut quas totam
                    nostrum rerum est autem sunt rem eveniet architecto`
        }
    }
},
testDataFromService = { "someKey": "some Val"};

describe('Todo Component', () => {

    beforeEach(async(() => {

       TestBed.configureTestingModule({
           declarations: [ TodoComponent ],
            imports: [
                BrowserModule,
                FormsModule,
                HttpModule
            ],
            providers: [
                {
                    provide: TodoService, useValue: TodoServiceStub
                },
            ],
        })
        .compileComponents()
        .then(() => {
            fixture = TestBed.createComponent(TodoComponent);
            comp = fixture.debugElement.componentInstance;

      todoService = fixture.debugElement.injector.get(TodoService);
            spyOn(todoService, 'getTestData').and.returnValue({ 
            subscribe: () => {} });
        });
    }));

    it('should get data from the http call', async(() => {
        comp.ngOnInit();

        expect(comp.testList).toBe(testDataFromService);
    }))
});

得到：

Expected undefined to be Object({ someKey: 'some Val' }).

试图按照文档但是comp.testList不会被填充..如果我尝试调试这个似乎服务调用正在进行但是在测试中我无法达到解决价值..什么我在这里做错了吗？

Answer 1

你缺少两件事。

你没有正确地模仿你的服务。它应该返回Observable而不是原始数据。使用Observable.of创建包含现有数据的observable。它也应该返回一个数组而不是单个对象，因为这是您在实际服务中定义的。如果您没有使用某些rxjs运算符的常规导入文件，请务必导入运算符Observable.of。
在初始化之后，您必须让Observable返回数据，然后才能检查其在组件中的存在。请使用fakeAsync和tick。

更新的代码：

import { TestBed, async, tick, fakeAsync } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';

// if you have not already you should import the Observable.of operator for this test to work
import { Observable } from 'rxjs/Observable';

import { TodoComponent } from '../todo.component';
import { TodoService } from '../../todo/todo.service';

let todoService,
    fixture,
    comp,
    todoList = [],
    TodoServiceStub = { 
    getTestData: function() {
        // return an Observable like you do in your actual service and return an array
        return Observable.of([{
            userId: 1,
            id: 1,
            title: 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
            body: `quia et suscipit
                    suscipit recusandae consequuntur expedita et cum
                    reprehenderit molestiae ut ut quas totam
                    nostrum rerum est autem sunt rem eveniet architecto`
        }]);
    }
},
testDataFromService = { "someKey": "some Val"};

describe('Todo Component', () => {

    beforeEach(() => {

       TestBed.configureTestingModule({
           declarations: [ TodoComponent ],
            imports: [
                BrowserModule,
                FormsModule,
                HttpModule
            ],
            providers: [
                {
                    provide: TodoService, useValue: TodoServiceStub
                },
            ],
        })
        .compileComponents()
        .then(() => {
            fixture = TestBed.createComponent(TodoComponent);
            comp = fixture.debugElement.componentInstance;
    }));

    it('should get data from the http call', fakeAsync(() => {
        comp.ngOnInit();

        tick();

        expect(comp.testList).toBe(testDataFromService);
    }))
});

如何测试可观察的Angular 2？

1 个答案: