1

我正在开发一个 Angular 4 应用程序，编写单元案例，我面临以下问题。

组件.ts 

 ngOnInit() {
    this.service.getData().subscribe(res => {
      console.log(res);
      this.data= JSON.parse(res._body);
      this.addFormControls();
    },
      error => {
        console.log(error);
      });
  }

组件.spec.ts

 describe('component', () => {

      let userRolesService: LayoutService;
      const modulesData = {
        'moduleName':'Info'
      }
      class MockUserRolesService {
        public getModulesData() {
            return modulesData;
        }
      }
      beforeEach(async(() => {
        TestBed.configureTestingModule({
          providers:[ {provide: LayoutService, useClass: MockUserRolesService } ]
        })
        .compileComponents();
      }));

      beforeEach(() => {
        userRolesService = TestBed.get(LayoutService);

      });
      afterEach(() => {
        userRolesService = null;
       component = null;
     });


        it('should fetch module data', () => {

        userRolesService.getData().subscribe(
          result => {
          expect(result).toBeTruthy();
          }
      );
      });
    });

更新了模拟服务文件的代码。你能帮我一个人让它工作吗？使用模拟服务和测试床框架。你能请人帮帮我吗…………………………………………………………………………………… ..................................................... ..................................................... ..................................................... ..................................................... ..................................................... ...................................................

4

2 回答 2

7

我不知道你试图模拟什么，但这不是你模拟服务的方式。

我将使用 theuseValue而不是useClass，但您可以根据需要进行调整。

您的测试正在测试对 observable 的订阅，然后您返回……什么都没有。

class MockUserRolesService {
  public getModulesData() {
    return modulesData;
  }
}

你正在测试getData，我在你的模拟中看不到它。

以下是模拟服务的方式。

const serviceMock = {
  provide: LayoutService,
  useValue: {
    getData: Observable.of(/* any value you want */)
  }
};

TestBed.configureTestingModule({
  providers:[ {provide: LayoutService, useValue: serviceMock } ]
})

编辑在单元测试中，您测试您的功能（组件、服务）是否按预期工作。让我们以您的ngOnInit功能为例：

this.service.getData().subscribe(res => {
  console.log(res);
  this.data= JSON.parse(res._body);
  this.addFormControls();
}

鉴于您编写它的方式，您的测试应涵盖以下情况：

  • 我的组件是否调用getData该服务？
  • 成功后，我的组件是否存储服务返回的数据？
  • 控制台是否显示数据？
  • 方法addFormControls被调用了吗？

如果你想测试它，你应该创建这个模拟：

useValue: {
  getData: Observable.of({
    '_body': 'my data'
  })
}

现在，您必须进行测试。由于您有一个异步调用（使用 Observable），那么您应该订阅该调用，然后调用。这是它是如何完成的。

it('should call the getData function of the service and store the data', () => {
  // Spy on your service to see if it has been called, and let him process
  spyOn(component['service'], 'getData').and.callThrough();
  // Array notation avoid scope issues (if your variable is protected or private)
  component['service'].getData().subscribe(response => {
    expect(component['service'].getData).toHaveBeenCalled();
    // Since you store the data in the data variable, check if it's equal to your mock value
    expect(component.data).toEqual('my data');
  });
});

如果要测试所有情况：

it('should call the getData function of the service and store the data', () => {
  spyOn(component['service'], 'getData').and.callThrough();
  spyOn(component, 'addFormControls');
  spyOn(console, 'log');
  component['service'].getData().subscribe(response => {
    expect(component['service'].getData).toHaveBeenCalled();
    expect(component.data).toEqual('my data');
    expect(console.log).toHaveBeenCalledWith(response);
    expect(component.addFormControls).toHaveBeenCalled();
  });
});
于 2018-03-19T12:20:10.097 回答
0

我遇到了类似的问题，但在地图内

undefined 不是评估 aux.uniorgs 的构造函数

所以这：

this.auxList.map(aux => aux.uniorgs)

必须改为：

this.auxList.map(aux => aux['uniorgs'])
于 2020-11-11T17:22:10.033 回答