Access ng zorro elements (nz-tree) for angular testing (Jasmine and Karma)

Question

I want to access the the data in the $event and also to verify if treeClick method is called on click.

This is the error after running the test file "Expected spy treeClick to have been called once. It was called 0 times."

template file

<div  class="inbox-tree">
    <nz-tree  [nzData]="nodes" nzShowIcon="true" (nzClick)="treeClick($event)">
    </nz-tree>
</div>

spec.ts

import { async, ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { WorkbenchComponent } from './workbench.component';
import { RouterTestingModule } from '@angular/router/testing';
import { NgZorroAntdModule } from 'app/ng-zorro.module';
import { TaskListFilter } from 'app/BaseFramework/shared/custom-pipes/taskListFilter';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { By } from '@angular/platform-browser';
describe('WorkbenchComponent', () => {
  let component: WorkbenchComponent;
  let fixture: ComponentFixture<WorkbenchComponent>;
  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ WorkbenchComponent,TaskListFilter ],
      providers:[{}],
      imports:[RouterTestingModule,NgZorroAntdModule,BrowserAnimationsModule]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(WorkbenchComponent);
    component = fixture.componentInstance;    
    fixture.detectChanges();
  });
  
  it('should create', () => {
    expect(component).toBeTruthy();
  });

  

  it('should check if workQueue is working',()=>{  <---- this is the test case
    const nzTree = fixture.debugElement.query(By.css('.inbox-tree'));
   
    spyOn(component, 'treeClick');

    nzTree.triggerEventHandler('click', {});
    fixture.detectChanges();
    expect(component.treeClick).toHaveBeenCalledTimes(1);
  })
});

Is there any fix for this ?

Answer 1

It seems like you're grabbing the parent div and giving the click event to it but it should most likely be given to nz-tree.

Try the following:

it('should check if workQueue is working',()=>{  <---- this is the test case
    // !! Change css selector here to nz-tree
    const nzTree = fixture.debugElement.query(By.css('nz-tree'));
   
    spyOn(component, 'treeClick');

    // !! Change event handler from click to nzClick
    nzTree.triggerEventHandler('nzClick', {/* mock the $event here */ });
    fixture.detectChanges();
    expect(component.treeClick).toHaveBeenCalledTimes(1);
  });