Angular Unit Test when we called Modal with @viewChild

Question

I am very new in karma jasmine test case. please help me out.

Typescript

import { Component, OnInit, ViewChild } from '@angular/core';
@Component({
  selector: 'app-label',
  templateUrl: './app-label.component.html',
})
export class LabelRenderer implements OnInit {
  moreInfoItems;
  @ViewChild('moreInfoModal') moreInfoModal;
  constructor() { }
  ngOnInit(): void { }
  showModal(labelMenu) {
    this.moreInfoItems = labelMenu?.content;
    this.moreInfoModal.open();
  }
}



HTML 
<div
  #moreInfoModal
  [closeButton]="true"
>
    <h2>More Information</h2>
  <div class="modal-content">
    <ul
      data-size="large"
    >
      <li *ngFor="let item of moreInfoItems">
        <div class="_text-bold _text-underline">{{item.heading}}</div>{{item.description}}
      </li>
    </ul>
  </div>
</div>

I want to write unit test case for same but facing issue. Below code I tried for same.

it('should validate showModal method', () => {
    component.moreInfoItems = {
      content: [
        {
          "heading": "",
          "description": ""
        }
      ]
    };
    spyOn(component.moreInfoModal, 'open').and.returnValue({});
    component.moreInfoModal.open();
    expect(component.moreInfoModal.open).toHaveBeenCalledTimes(1);

    spyOn(component, 'showModal').and.callThrough();
    component.showModal(component.moreInfoItems);
    expect(component.moreInfoItems).toHaveBeenCalled();
  });

I saw some solution on stack overflow but most of the solutions I see with modal component. so request to help me out.

Thanks in advance.

Angular Unit Test when we called Modal with @viewChild

0 Answers0