1

我已经编写了第一个测试来测试服务类：

服务等级：

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http'
import {IComment} from "../../models/comments";
import {Observable} from "rxjs/observable";
import { mergeMap } from 'rxjs/operators';

@Injectable()
export class CommentsDataService {

  public _url:string = "../../../../assets/json/comments.json";
  constructor(private http: HttpClient) {  }

  /**
   * Return Sample json for
   * Comment listing.
   * @returns {json)
   */
  getComments():Observable<IComment>
  {
    return this.http.get<IComment>(this._url)
  }

  /**
   *
   * @param commentObj
   */

  saveComment(commentObj){

    console.log(commentObj);

  }

}

规格文件：

import { async, ComponentFixture, TestBed,fakeAsync, tick, inject } from '@angular/core/testing';
import { HttpClientModule, HttpClient, HttpEvent, HttpEventType} from '@angular/common/http';
import { Component,DebugElement} from  "@angular/core";
import 'reflect-metadata';

import {By} from "@angular/platform-browser";
import { FormsModule } from '@angular/forms';
import {of} from 'rxjs/observable/of';
import { ListCommentsComponent } from './list-comments.component';
import {CommentsDataService} from '../../services/comments/comments-data.service'
// import {BaseRequestOptions, RequestOptions,Http, ResponseOptions} from '@angular/http';
// import {MockBackend} from "@angular/http/testing";
import {HttpClientTestingModule,HttpTestingController} from '@angular/common/http/testing';

import { Observable } from 'rxjs/Observable';

describe('ListCommentsComponent', () => {



  let component: ListCommentsComponent;
  let fixture: ComponentFixture<ListCommentsComponent>;
  let debugElement:DebugElement;
  let htmlElement:HTMLElement;
  let addCommentBtn:DebugElement;
  let httpMock: HttpTestingController;
  let commentService:CommentsDataService;
  // let service: CommentsDataService;
  // let backend: MockBackend;


  beforeEach(async(() => {


    TestBed.configureTestingModule({

      imports: [ FormsModule, HttpClientModule, HttpClientTestingModule],

      declarations: [ ListCommentsComponent  ],

      providers: [
        CommentsDataService
        // MockBackend,
        // BaseRequestOptions,
        // {
        //   provide: Http,
        //   useFactory: (backend, options) => new Http(backend, options),
        //   deps: [MockBackend, BaseRequestOptions]
        // }
      ]
      // providers:[HttpClientModule, HttpClient]


    })
      .compileComponents();
    httpMock = TestBed.get(HttpTestingController);
    commentService = TestBed.get(CommentsDataService);

    /*
        // Get the MockBackend
        backend = TestBed.get(MockBackend);

        // Returns a service with the MockBackend so we can test with dummy responses
        service = TestBed.get(CommentsDataService);
    */


  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ListCommentsComponent);
    component = fixture.componentInstance;

    fixture.detectChanges();


  });


  fit('should have a defined component', () => {
    expect(component).toBeDefined();
  });


  fit(
    'should return comments',() => {

      const mockComments = [
        {
          "id": "123",
          "root_id": "234",
          "target_id": "2",
          "object": "Nice!",
          "actor": "user:123",
          "time_stamp": "2 min ago",
          "profile_image": "/../../assets/images/no-user.png",
          "first_name": "john",
          "comment": [
            {
              "id": "124",
              "root_id": "234",
              "target_id": "3",
              "object": "Well!!",
              "actor": "user:123",
              "time_stamp": "2 min ago",
              "first_name": "john",
              "profile_image": "/../../assets/images/no-user.png"
            },
            {
              "id": "125",
              "root_id": "234",
              "target_id": "3",
              "object": "Great!",
              "actor": "user:125",
              "time_stamp": "2 min ago",
              "first_name": "john",
              "profile_image": "/../../assets/images/no-user.png"
            }
          ]
        },

      ];

      commentService.getComments().subscribe((comments) => {

        expect(comments).toBe('json');
        expect(comments).toContain('comments');


      });

      const mockReq = httpMock.expectOne(commentService._url);

      // expect(mockReq.cancelled).toBeFalsy();
      expect(mockReq.request.method).toEqual('GET');
      mockReq.flush(mockComments);

      httpMock.verify();

    }
  );

});

我收到错误，我在互联网上没有找到任何解决方案，因为我不熟悉httpClientTestingModule 的实际工作方式以及这些代码行意味着我无法调试或理解错误，因此无能为力。

commentService.getComments().subscribe((comments) => {

        expect(comments).toBe('json');
        expect(comments).toContain('comments');


      });

      const mockReq = httpMock.expectOne(commentService._url);

      // expect(mockReq.cancelled).toBeFalsy();
      expect(mockReq.request.method).toEqual('GET');
      mockReq.flush(mockComments);

      httpMock.verify();

错误：

错误：应为条件“匹配 URL：../../../../assets/json/comments.json”提供一个匹配请求，但找到 2 个请求。

我在服务文件中向其发出请求的 Comments.json 文件：

[{ "id":"123",
  "root_id":"234",
  "target_id": "2",
  "object":"Nice!",
  "actor":"user:123",
  "time_stamp": "2 min ago",
  "profile_image":"/../../assets/images/no-user.png",
  "first_name" : "john",
  "comment":[
    {
      "id": "124",
      "root_id":"234",
      "target_id":"3",
      "object":"Well!!",
      "actor":"user:123",
      "time_stamp": "2 min ago",
      "first_name" : "john",
      "profile_image":"/../../assets/images/no-user.png"
    },
    {
      "id": "125",
      "root_id":"234",
      "target_id":"3",
      "object":"Great!",
      "actor":"user:125",
      "time_stamp":"2 min ago",
      "first_name" : "john",
      "profile_image":"/../../assets/images/no-user.png"
    }
  ]
},
  {
    "id":"126",
    "root_id":"234",
    "target_id": "2",
    "object":"Super.",
    "actor":"user:124",
    "time_stamp": "2 min ago",
    "first_name" : "Jill",
    "profile_image":"/../../assets/images/no-user.png",
    "comment":[
      {
        "id": "234",
        "root_id":"234",
        "target_id":"",
        "object":"Cool.",
        "actor":"user:123",
        "first_name" : "john",
        "profile_image":"/../../assets/images/no-user.png"

      },
      {
        "id": "236",
        "root_id":"234",
        "target_id":"3",
        "object":"hiii.",
        "actor":"user:123",
        "first_name" : "jack",
        "profile_image":"/../../assets/images/no-user.png"

      }
    ]
  },  {
  "id":"345",
  "root_id":"234",
  "target_id": "12",
  "object":"Interesting.",
  "actor":"user:124",
  "time_stamp": "2 min ago",
  "first_name" : "john",
  "profile_image":"/../../assets/images/no-user.png"
},  {
  "id":"444",
  "root_id":"234",
  "target_id": "12",
  "actor":"user:125",
  "object":"Cool.",
  "time_stamp": "2 min ago",
  "first_name" : "Simon",
  "profile_image":"/../../assets/images/no-user.png"
},
  {
    "id":"567",
    "root_id":"234",
    "target_id": "12",
    "object":"Last Comment..",
    "actor":"user:125",
    "time_stamp": "2 min ago",
    "first_name" : "jack",
    "profile_image":"/../../assets/images/no-user.png"
  }
]
4

1 回答 1

2

如果我的回答不如上一个完整，我很抱歉，但我正在打电话。如果您需要更多解释，请在星期一通知我，我将有一台电脑来帮助您。

我可以在这里看到您正在测试一个组件。

在单元测试中，您应该测试您正在使用的功能。由于 http 调用是由您的服务进行的，因此您应该在服务测试中测试它们是否正确，而不是在您的组件中。

这意味着在您的组件中，您只测试是否调用了服务的正确方法。这是通过使用茉莉间谍来完成的。

这也意味着您可以模拟您的服务。如果你模拟你的服务，你就不必模拟它的依赖，因为你将提供一个没有依赖的简单对象。

要模拟服务，您需要将您在组件中使用的所有属性提供给模拟。据我所知，您只使用getComments，所以让我们模拟一下：

const serviceMock = {
  provide: YourServiceName, 
  useValue: {
    getComments: () => Observable.of(null)
  }  
};

这是模拟的格式。它必须遵守一些条件：

  • 如前所述，它必须包含所有使用的属性。
  • 这些属性必须具有相同的签名。这里，getComments是一个函数，它返回一个可观察的注释（null 是每种类型），就像在您的服务中一样。

现在，您可以将此模拟放入您的测试床：

providers: [serviceMock]

获取服务实例的逻辑与我在上一个问题中解释的相同。

现在，您可以编写一个测试来检查组件是否正确调用服务！你只需要做一个间谍，调用你的组件函数，然后期待。

spyOn(serviceInstance, 'getComments').and.callThrough(); // use returnValue(Observable.of(commentsMock)) instead of callThrough() if you want to test your logic made on the value returned by the function
component.functionCall();
expect(serviceInstance.getComments).toHaveBeenCalled();

瞧！

于 2018-04-21T11:38:22.317 回答