使用 Jasmine 在 Angular 5 中进行单元测试模型绑定

2024-01-23

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

我的模型如下所示:

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

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

getPlayerAccounts(playerId: number)

这是我的 Jasmine 单元测试,用于测试 json 数据是否成功找到 typescript IPlayerAccount 模型。

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

请注意,我还有以下用于该组件的模拟。

 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?到目前为止我的方法好吗?有更好的替代方案来解决这个单元测试吗?

任何帮助都会很棒!


首先模拟你的玩家数组

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

这里是测试,假设 getPlayerAccounts 设置了一个属性名称 returnedPlayer 及其结果

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]);
 });
}));
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Jasmine 在 Angular 5 中进行单元测试模型绑定 的相关文章

随机推荐