Question

我正在为一个角度2 RC应用程序编写一些测试，并且我对可观察量的测试存在一些问题。我模拟了将它的类型设置为可观察的方法，但是当被测试的单元尝试订阅模拟的observable时，我收到错误'Cannot read property 'subscribe' of undefined'

我正在测试我的DashboardComponent，它会注入model3DService并调用model3DService.get3DModels()这是一个可以执行http请求并返回3D模型对象数组的可观察对象。

以下是一些示例代码：

信息中心组件

import { Model3DService } from '../../services/model3D/model3D.service';
import { ProjectService } from '../../services/project/project.service';

@Component({
  selector: 'cmg-dashboard',
  styles: [require('./css/dashboard.scss')],
  template: require('./dashboard.html')
})
export class DashboardComponent implements OnInit {
  constructor(
    private projectService: ProjectService,
    private model3DService: Model3DService
  ) { }

  ngOnInit (): void {
    this.model3DService.get3DModels().subscribe((res: any[]) => {
      this.findProjects(res);
      this.models = res;
      this.projectService.isProjectSelected = true;
      this.createProject(res[0]);
    });
  }
}

Model3DService

@Injectable()
export class Model3DService {
 private models: any[] = [];

 public get3DModels (): Observable<any> {
    return this.http.get('../../../json/3DModel.json')
    .map(( res: Response ) => {
      this.models = res.json();
      return this.models;
    });
  }
}

现在好了，我们正在接受测试，这是我写的测试。

信息中心组件规范

class MockModel3DService {
  public get3DModels(): Observable<any> {
    return;
  }
}

describe('Dashboard Component', () => {
  beforeEachProviders(() => {
    return [
      DashboardComponent,
      provide(ProjectService, {
        useClass: MockProjectService
      }),
      provide(Model3DService, {
        useClass: MockModel3DService
      })
    ];
  });

  describe('ngOnInit', () => {
    it('should call model3DService.get3DModels on init', (inject([DashboardComponent], (dashboardComponent: DashboardComponent, model3DService: MockModel3DService) => {
      dashboardComponent.ngOnInit();
      expect(model3DService.get3DModels).toHaveBeenCalled();
    })));
  });
});

Answer 1

这个概念类似于测试AngularJS $q的承诺。 Stubbed方法返回一个可观察的模拟。该方法可以返回一个主题，而不是inherits Observable，但也具有可观察者和观察者的属性。

可以为新主题提供现场模拟值，需要预先定义模拟承诺（主题与延迟共享此属性，请参阅the relevant question）。

RxJS 4名受试者采用hasObservers方法避免了subscribe间谍。 RxJS 5对象错过了该方法，但他们暴露了observers属性。

很可能它应该是那样的

let subject: Subject;

class MockModel3DService {
  public get3DModels(): Observable<any> {
    return subject;
  }
}

...
// beforeEach(...)
subject = new Subject;
...

// it(...)
const models = ['mocked'];
dashboardComponent.ngOnInit();

expect(subject.observers.length).toBe(1);

subject.next(models);
expect(model3DService.get3DModels).toHaveBeenCalled();
expect(dashboardComponent.models).toBe(models);
...

Answer 2

您的MockModel3DServic.get3DModels不返回可观察值。

import { of } from 'rxjs';

class MockModel3DService { 
  public get3DModels(): Observable<any> {
   return of(yourResponse)
 }
}

Angular 2 RC如何对一个可观察单元进行单元测试

2 个答案: