Question

我在模拟服务时遇到麻烦，该服务会在组件的单元测试文件中返回错误。我的应用程序是用Angular 6和TypeScript编写的，而单元测试是用Jasmine编写的。

在我的组件中，我在ngOnInit中调用一个方法，在此方法中，我对导入的服务调用了一个方法，如果失败，则将我的名为isLoading的组件的布尔属性设置为false 。这是我组件的一些最小化代码，以使我理解要测试的代码。

export class CylindersListComponent implements OnInit, OnDestroy {

public isLoading: boolean = true;

  public ngOnInit(): void {
      // do stuff ... I have removed some code here
      this.loadCylinderList();
  }

  public loadCylinderList() {
    this.cylindersService.getCylinderList().subscribe((res: any) => {
      this.cylinders = res;
      // do stuff ... I have removed lots of code here
      this.isLoading = false;
    }, (error: any) => {
      this.isLoading = false;
      throw new Error(error);
    });
  }
}

我希望模拟正在调用的loadCylinderList方法，并且cylindersService.getCylinderList返回错误。因此，一旦完成，我希望断言（或确保）isLoading属性为false。现在，我已经像这样设置了单元测试，但是这似乎不起作用（或更可能是我未正确实施测试）。我再次将代码最小化或将...放在返回数据的位置。

describe('CylindersListComponent', () => {
let fixture: ComponentFixture<CylindersListComponent>;
let instance: CylindersListComponent;

const spyCylinderService = jasmine.createSpyObj<CylindersService>(
'CylindersService', ['getCylinderList', 'getListPaged']);

spyCylinderService.getListPaged.and.returnValue(observedData); // observedData is set earler in the file 


beforeEach(async(() => {
    // inject the spies. We use override component because the service is injected
    // in component not in the module. (deeper level)
    TestBed.overrideComponent(CylindersListComponent, {
      set: {
        providers: [
          {provide: CylindersService, useValue: spyCylinderService}
        ],
        template: '<input #filter>'
      }
    })
    // prepare CylinderComponent for the tests
    // Allows overriding default providers, directives, pipes
      .configureTestingModule({
        imports: [...],
        declarations: [
          CylindersListComponent
        ],
        schemas: [CUSTOM_ELEMENTS_SCHEMA]
      })
      .compileComponents().then(() => {
      // arrange
      fixture = TestBed.createComponent(CylindersListComponent);
      instance = fixture.componentInstance;
      spyCylinderService.getCylinderList.and.returnValue({...});
    });
}));

it('should be false after error while loading data', () => {
    // arrange
    spyCylinderService.getCylinderList.and.throwError('error');
    instance.isLoading = true;
    spyOn(instance, 'loadCylinderList' as any).and.callThrough();

    // act
    fixture.detectChanges();
    expect(instance.isLoading).toBe(false);
});

这听起来像是一个非常开放的问题，对不起，但是我的test / spyOn方法在做什么。我确定我的测试/错误失败，因为我的实现引发/模拟错误是不正确的：spyCylinderService.getCylinderList.and.throwError('error');

如果有人能看到我在做什么错，我将非常感激。如果有帮助，来自测试控制台的错误如下：

HeadlessChrome 0.0.0 (Mac OS X 10.12.6) CylindersListComponent isLoading should be false after error while loading data FAILED
    Error: error
    error properties: Object({ ngDebugContext: DebugContext_({ view: Object({ def: Object({ factory: Function, nodeFlags: 33800449, rootNodeFlags: 33554433, nodeMatchedQueries: 0, flags: 0, nodes: [ Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 33554433, childFlags: 246016, directChildFlags: 246016, childMatchedQueries: 0, matchedQueries: Object({  }), matchedQueryIds: 0, references: Object({  }), ngContentIndex: null, childCount: 4, bindings: [  ], bindingFlags: 0, outputs: [  ], element: Object({ ns: '', name: 'cylinders', attrs: [  ], template: null, componentProvider: Object({ nodeIndex: 4, parent: <circular reference: Object>, renderParent: <circular reference: Object>, bindingIndex: 0, outputIndex: 0, checkIndex: 4, flags: 245760, childFlags: 0, directChildFlags: 0, childMatchedQueries: 0, matchedQueries: Object, matchedQueryIds: 0, references: Object, ngContentIndex: -1, childCount: 0, bindings: Array, bindingFlags: 0, outputs: Array,  ...
        at <Jasmine>

更新：我确定我是如何提出错误的，好像我应该在发现错误的组件中放置console.log一样，没有任何内容写入控制台。

Answer 1

原因可能是isLoading是异步更新的。因此，您应该等待所有变更检测和更新结束。

it('should be false after error while loading data', async(() => {
    // arrange
    spyCylinderService.getCylinderList.and.returnValue(Observable.throw('error'));
    instance.isLoading = true;
    spyOn(instance, 'loadCylinderList' as any).and.callThrough();

    // act
    fixture.detectChanges();
    fixture.whenStable()
      .then(() =>{
            expect(instance.isLoading).toBe(false);
       });    
}));

Angular / Jasmine单元测试中的spyService和throwError（）问题；

1 个答案: