Unit Testing Model Binding in Angular 5 with Jasmine

Question

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

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

getPlayerAccounts(playerId: number)

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

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

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?

Any help would be great!

Answer 1

first mock your array of players

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

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