Running this unit test in Angular 21 always fails with the following error:
× should toggle showSettings when settings button is clicked (440231 ms) ● DrawerComponent › should launch settings modal when button is clicked expect(jest.fn()).toHaveBeenCalled() Expected number of calls: >= 1 Received number of calls: 0 it('should launch the Settings modal when button is clicked', () => { const settingSpy = jest.spyOn(component as any, 'showSettings'); const buttons = fixture.debugElement.queryAll(By.directive(ButtonComponent)); buttons[4].triggerEventHandler('click', null); fixture.detectChanges(); expect(settingSpy).toHaveBeenCalled(); });Note: The buttons array (of type DebugElement[]) returns 7 instances of ButtonComponent.
The "Settings" button I'm interested in is actually in index position 4, yet my click event still doesn't work. i.e. The expected num of calls should be "1".
Here's a snippet of the component's template (fyi: is part of our custom UI library) :
<div class="menu-settings"> <div class="divider"></div> <div class="app-controls"> <my-button icon="settings" (buttonClick)="showSettings()" > </my-button> <my-button icon="info" (buttonClick)="showAboutModal()" ></my-button> </div> </div>In the DOM, expands to this HTML:
<my-button _ngcontent-ng-c1665131262="" icon="info" variant="flat" iconposition="end"> <button class="my-button my-button--basic my-button--medium my-button--flat my-button--icon my-button--icon-end tpcn-typography-button" id="null" type="button"> <div class="my-button-surface"></div> <div class="my-button-state my-button-hover"></div> <div class="my-button-state my-button-pressed"></div> <div class="my-button-state my-button-selected"></div> <div class="my-button-state my-button-focus"></div> <div class="my-button-content"><!--container--><!--container--><!--container--><!--container--><tpcn-icon class="my-button-icon" _nghost-ng-c2485891322=""> <div _ngcontent-ng-c2485891322="" svgicon="" class="tpcn-icon"><svg fill="currentColor" viewBox="0 0 24 24"> <path fill="none" d="M0 0h24v24H0V0z"></path> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm0-8c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"> </path> </svg></div><!--container--><!--container--> </tpcn-icon><!--container--> </div> </button> </my-button>Questions:
- How do I make this work ?
- How can I look up my settings button in that array, via settingsButtons.find() ?
** UPDATE** This ended up working for us. We ended up using the .app-controls class which wrapped our custom buttons.
it('should toggle showSettings when settings button is clicked', () => { const settingSpy = jest.spyOn(component as any, 'showSettings'); const buttons = fixture.debugElement.queryAll(By.css('.app-controls button')); buttons[0].triggerEventHandler('click', null); fixture.detectChanges(); expect(settingSpy).toHaveBeenCalled(); });
my-button, html and ts code