TypeError：未定义不是构造函数（评估“ this.service.getDat（）。subscribe”）

Question

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

component.ts

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

组件规格

 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();
          }
      );
      });
    });

更新了模拟服务文件的代码。能否请我帮一个忙。使用过的Mock服务和测试平台框架。您能不能请一个人帮我........................................... ................................................... ................................................... ................................................... ................................................... ................................................... ...................................................

Answer 1

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

我将使用useValue而不是useClass，但是如果需要，您可以对其进行调整。

您的测试正在测试对可观察对象的订阅，并且您返回...没什么。

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();
  });
});