Question

我正在制作一个角度4应用程序，编写单元案例，我正面临下面的问题。

component.ts

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

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

更新了模拟服务文件的代码。请你帮助我一些工作。二手模拟服务和测试床框架。你能不能请一位帮我........................................... .................................................. .................................................. .................................................. .................................................. .................................................. .............................................

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

Answer 2

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

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

所以这个：

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

必须更改为：

this.auxList.map(aux => aux['uniorgs'])

TypeError：undefined不是构造函数（评估＆＃39; this.service.getDat（）。subscribe＆＃39;）

2 个答案: