Question

我正在使用angular2.0作为我的应用程序

我正在尝试为注入服务的组件编写测试用例

// component.ts

import { Component, OnInit } from '@angular/core';
import { FPService } from './shared/services/forgot-password.service';
import { CookieService } from 'angular2-cookie/core';

@Component({
  // moduleId: module.id,
  selector: 'app-fp',
  templateUrl: 'fp.component.html',
  styleUrls: ['fp.component.css'],
  providers: [FPService]

})
export class FPComponent implements OnInit {

  constructor(
    private cookie: CookieService,
    private fpService: FPService
  ) { }

  ngOnInit() {

  }
  fnRequest(email) {

    var oData = { "email": email };
    this.fpService.fnFPServie(oData)
      .subscribe(
      data => {
        console.log('success', data);

      },
      error => {
        console.log('error', error);

      }
      );
  }

}

我的规格

import { FPComponent } from './forgot-password.component';


import { FPService } from './shared/services/forgot-password.service';
import { CookieService } from 'angular2-cookie/core';


class mockFPService {
    fnFPServie(data) {
        return {}
    }
}

class mockCookieService {
    getObject(name: string) {
        return true;
    }
}


let comp: FPComponent;
let fixture: ComponentFixture<FPComponent>;
describe('Component: FPComponent', () => {
    beforeEach(() => {
        TestBed.configureTestingModule({

            declarations: [FPComponent],
            providers: [

                { provide: FPService, useClass: mockFPService },
                { provide: CookieService, useClass: mockCookieService },


            ]
        });

        fixture = TestBed.createComponent(FPComponent);
        comp = fixture.componentInstance;

    });

    it('should have  method fnRequest', () => {
        expect(comp.fnRequest('adfa@fhf.fth')).toBeTruthy;
    });

    it('should sent data to fnFpService() of FpService', () => {

        comp.fnRequest('asd@gmail.com');

        **************************************************
        how do inject the Fpservice and call fnFPServie ?
       ********************************************************


    });


});

如果有人建议如何模拟注入Fpservice以测试fnRequest（）函数，那将会有所帮助

提前致谢

Answer 1

仅添加fnFPServie方法还不够。然后调用者订阅返回的observable，调用subscribe。你如何嘲笑这就是做一些像

这样的事情

class MockFPService {
  error;
  data;
  fnFPServie(data) {
    return this;
  }

  subscribe(next, err) {
    if (next && !error) {
      next(this.data)
    }
    if (err && this.error) {
      err(this.error);
    }
  }
}

在这里，您只是返回服务本身，它拥有自己的模拟subscribe方法。当一些人调用subscribe时，他们传递成功和错误回调函数，你只需调用回调传递适当的响应。

您还可以在测试期间使用数据或错误配置模拟。所以你可以分别测试两种结果。

let mockFPService: MockFPService;

beforeEach(() => {
  mockFPService = new MockFPService ();
  TestBed.configureTestingModule({
    providers: [
      { provide: MockFPService, useValue: mockFPService }
    ]
  })
}) 

it('..', () => {
  mockFPService.data = 'some data'; 
})

it('..', () => {
  mockFPService.error = 'some error';
})

服务注入angular2.0时测试组件

1 个答案: