How to mock array data with object for unit testing in Angular 8

Question

I would like to write a unit test to test if the expectedData is showing as expected. The HTML code is working and it displays everything correctly.

HTML code:

<div class="col-6 p-0 LHS" *ngIf="data && data.type === 'App'">
  <div *ngFor="let d of data">
    <div class="row">
      <div class="col-auto">Item1:</div>
      <div class="appItem1">{{d.item1}}</div>
    </div>
  </div>
</div>

TS file:

  data = [{item1: "Item 1", item2: "Item 2"}, type: "App", display: true]; // sample input data
  expectedData;

  getExpectedData() {
    if (this.data && this.data.item) {
      switch (this.data.type) {
        case ("File"):
           this.expectedData = $('.fileItem1')[0].innerHTML;  
          break;
        case ("App"):
          this.expectedData = $('.appItem1')[0].innerHTML;              
          break;
      }
    }
  }

My test case:

it('should verify expected data', () => {
    const mockdata= [{item1: "Item 1"}];
    mockdata.type= 'App'; // getting error because this can't be pushed to array
    mockdata.display= true; // getting error because this can't be pushed to array
    component.data = mockdata;
    fixture.detectChanges();
    component.getExpectedData();
    expect(component.expectedData).toBe("Item 1");
  });

However, in my test case, it doesn't seem to be working to mock the data to that type of data, are there any possible way to test the getExpectedData()?

Thanks

So what is the problem? You dont know how to push object into an array ? — Antoniossss
– Antoniossss, Commented Jan 6, 2021 at 17:30
@Antoniossss The problem is I'm not able to mock that data to test that method. It's an array but with the json data which is confusing, so I couldn't create the test data. — suchip
– suchip, Commented Jan 6, 2021 at 17:38
your code shows its not an array but an object. See this this.data.type?? This is how you access object's properties, not array elements. — Antoniossss
– Antoniossss, Commented Jan 6, 2021 at 17:49
Mocking is not a problem as it will work just as you try to do it. The problem here is broken data model. — Antoniossss
– Antoniossss, Commented Jan 6, 2021 at 17:54

Antoniossss · Accepted Answer · 2021-01-06 18:08:57Z

1

I have no idea why you have a mutated array, but so be it. The one of the answers is to use

//@ts-ignore

const mockdata= [{item1: "Item 1"}];
//@ts-ignore
mockdata.type= 'App'; 
//@ts-ignore
mockdata.display= true; 
component.data = mockdata;

https://stackblitz.com/edit/typescript-ae5pvs?file=index.ts

answered Jan 6, 2021 at 18:08

Antoniossss

32.7k7 gold badges67 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to mock array data with object for unit testing in Angular 8

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related