Angular 5中单元测试模型与Jasmine的结合 [英] Unit Testing Model Binding in Angular 5 with Jasmine

问题描述

我正在尝试编写一个单元测试，测试从components方法调用返回的JSON数据是否成功绑定到打字稿模型。

I am trying to write a unit test that tests that the JSON data returned from the components method call successfully binds to a typescript model.

我的模型看起来像以下：

My model looks like the following:

export interface IPlayerAccount {
  playerId: number;
  name: string;
  phone: number;
  street: string;
  postcode: string;
  state: string;
  country: string;
}

这个IPlayerAccount数组使用方法定义填充在ngOnInit上：

This array of IPlayerAccount is populated on ngOnInit with method definition:

getPlayerAccounts(playerId: number)

这是我的Jasmine单元测试，用于测试json数据是否成功找到打字稿IPlayerAccount模型。

Here is my Jasmine Unit Test to test that the json data successfully finds to the typescript IPlayerAccount model.

 it('check that array of players successfully bind to component accounts players array', async () => {
          fixture.detectChanges();

          IPlayerAccount accounts = new IPlayerAccount();

          var account1 = new IPlayerAccount();
          account1.playerId = 1;
          account1.name = 'Ben';
          account1.phone = 12345;
          account1.street = 'Cloud Street';
          account1.postcode = 111;
          account1.state = 'VIC'
          account1.country = 'AU';

          var account2 = new IPlayerAccount();
          account2.playerId = 2;
          account2.name = 'James';
          account2.phone = 6789;
          account2.street = 'Jamming Street';
          account2.postcode = 2323;
          account2.state = 'VIC'
          account2.country = 'AU';

          component.accounts.push(account1);
          component.accounts.push(account2);

          IPlayerAccount[] returnedAccounts = component.getPlayerAccounts(1);

          // Need test methods here, such as expect. Not really sure how to simulate the method being called in Angular front-end testing
          // Is the above a good way to asynchronously test the getPlayerAccounts method of the component
        });

请注意，我还有以下用于组件的Mock。

Note that I also have the following Mock that is used for the component.

 public GetPlayerAccounts(successCallback: (data) => void, errorCallback: (data) => void, playerId: number): void {
    let data = [{ "playerId": 1, "name": "Ben", "phone":"12345" "street": "Cloud Street", "postcode": "111", "state": "VIC", "country": "AU" },{ "playerId": 2, "name": "James", "phone":"6789" "street": "Jamming Street", "postcode": "2323", "state": "VIC", "country": "AU" }];
    successCallback(data);
  }

如何将模拟中的数据与json数据进行匹配，然后将IPlayerAccount？到目前为止我的方法是否良好？解决这个单元测试的更好的替代方案吗？

How do I match the data from the mock to the json data to then the IPlayerAccount? Is my approach good so far? Any better alternatives to solving this unit test?

任何帮助都会很棒！

推荐答案

首先模拟你的玩家阵列

 const fakePlayers = [ {
                     playerId: 1,
                     name: 'Mark'
                     ...
                   },
                   {...} 
                 ]

这里是测试，让我们说getPlayerAccounts设置一个属性名称loadedPlayer，结果是

and here is the test, lets say that getPlayerAccounts set a property name loadedPlayer with it's result

beforeEach(async(() => {
  ...
  fixture = TestBed.createComponent(PlayerComponent);
  component = fixture.componentInstance;
  ...
}));

it('should get players', async(() => {
   fixture.detectChanges();
   component.players = fakePlayers;
   component.playerId = 1;
   component.ngOnInit();
   fixture.whenStable().then(() => {
   fixture.detectChanges();
    expect(component.loadedPlayer).toEqual(fakePlayers[1]);
 });
}));

这篇关于Angular 5中单元测试模型与Jasmine的结合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！