Question

我一直在尝试模拟一些在我的Angular应用程序中返回observable的服务调用，但我根本无法创建一个有效的observable，它会在我的代码中触发map()或create(): Observable<any> { return this.http .post('/api/stuff', { id: 123 }) .catch(this.handleError) .map(this.extractData); }之类的调用。例如：

我的服务：

let authHttpMock = mock(AuthHttp);
when(authHttpMock.post('/api/stuff', { id: 123 })).thenReturn(Observable.create(observer => {
  observer.error(new Error('500!'));
}));

const myService = new MyService(instance(authHttpMock));
myService.create({ id: 123 }).subscribe(
    result => {
    expect(result).toBeTruthy();
    }
);

我的规格：

handleError

覆盖率分析告诉我，extractData方法从未执行过。在成功观察的情况下，它也不会通过<header> <div class="header_logo"> <img class="logo" value="logo"/> </div> <div> </div> </header>方法。

可观察到哪里去了？我如何返回一个适当的可观察量来测试这样的调用？

Answer 1

在测试代码的某处，我相信您需要拥有以下代码：

AuthHttp.post('/api/stuff', {id : 123 }).subscribe(data => {});

Answer 2

有两种方法可以实现这一目标。

首先，在您的服务方法中，使用以下内容：

create(id:number):Obserable<any> {
  let url:string = 'http://localhost:3000/api/stuff';
  let data:any = {
    id: id
  };

  return this.http.post(url, JSON.stringify(data))
    .map((res:Response) => res.json());
    .catch((error:any) => this.handleError(error))
}

第二种方法是，调用如下服务：

create(id:number):Obserable<any> {
  let url:string = 'http://localhost:3000/api/stuff';
  let data:any = {
    id: id
  };

  return this.http.post(url, JSON.stringify(data))
    .map((res:Response) => res.json());
  }

当您调用服务方法时，请使用：

this._service.create(123)
  .subscribe((res:any) => {
    //do whatever with success
  },
  (error:any) => {
    this.handleError(error)
  });

您可以在服务中调用用于提取数据的方法this.extractData()而不是res.json()，但总体而言，结果相同。

希望这会有所帮助：）

Answer 3

您需要先创建mockData，以便服务可以使用它。下面有2个文件。将您的组件和服务名称替换为COMPONENT_NAME＆amp; SERVICE_NAME分别。

规范文件ts

describe('WalletComponent', () => {
  let component: WalletManagementComponent;
  let fixture: ComponentFixture<WalletManagementComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ReactiveFormsModule],
      declarations: [COMPONENT_NAME],
      schemas: [NO_ERRORS_SCHEMA],
      providers: [
        {provide: APP_BASE_HREF, useValue: '/'},
        {provide: SERVICE_NAME, useClass: serviceMockData}      
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(COMPONENT_NAME);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('Should create WalletComponent', () => {
    expect(component).toBeTruthy();
  });

 });

您需要在根目录

中创建名为testHelper（或任何名称）的目录

serviceMockData ts

import {Observable} from 'rxjs/Observable';

const result = {
  data: [
    {id: 0, name: 'Temp Data 1'},
    {id: 1, name: 'Temp Data 2'},
  ]
}; 

export class serviceMockData {
  constructor() {
  }

  getWalletAudits() {
    return Observable.of(result).map(res => res);
  }

}

Answer 4

如果您订阅了错误处理程序，该怎么办？例如。在您的规范中：

const myService = new MyService(instance(authHttpMock));
myService.create({ id: 123 }).subscribe(
  result => {
    throw new Error('Not supposed to be here.')
  },
  err => expect(err).toBeDefined(),
);

（虽然我认为不应该这样）。

这是我模拟失败的后端调用的方式：

// first, I provide mock http in TestBed.configure...
...
providers:
  {
    provide: Http,
    useFactory: (backend: ConnectionBackend, options: BaseRequestOptions) => new Http(backend, options),
    deps: [MockBackend, BaseRequestOptions]
  },
  ... // other providers, like your mockAuthHttp
]


// than in the test, I tell the mockBackend to fail.
// including other stuff here to, just to show a few more things that can be done

it('should handle errors if backend doesn\'t like us', async(() => {
  let service = TestBed.get(MyService);
  let mockBackend = TestBed.get(MockBackend);
  mockBackend.connections.subscribe((c: any) => {
    if (c.request.url.indexOf('/api/stuff') !== -1) {
      // you can check stuff here, like c.request.method or c.request._body
      const err: ResponseError = new ResponseError('Stuff not good.');
      err.status = 404;
      return c.mockError(err);
    }
    throw new Error('Wrong url called.');
  });

  myService.create('whatever').subscribe((r: any) => {
    throw new Error('Should not have been a success.');
  },
  (err: any) => {
    expect(err.message).toEqual('Stuff not good.');
  });
}));

模拟在Angular 2中返回observable的服务调用？

4 个答案: