Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

263
Views
Testing btn click with Jasmine, getting "Cannot read properties of null (reading 'click')"

I'm testing the functionality of two button clicks and whether or not a modal opens as a result.

I've done several variations of testing these clicks in Jasmine, and I'm not sure how to pinpoint the cause of this error, or how to mitigate it:

TypeError: Cannot read properties of null (reading 'click')

component.spec.ts

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  fit('can promote', () => {
    // ARRANGE
    // spyOn(component, 'doPromoteMethod'); // no changes if uncommented

    const dialog = TestBed.inject(MatDialog) as jasmine.SpyObj<MatDialog>;
    const dialogRef = TestBed.inject(MatDialogRef) as jasmine.SpyObj<MatDialogRef<any>>;
    dialog.open.and.returnValue(dialogRef);
    dialogRef.afterClosed.and.returnValue(of());

    queryParams$.next({});

    // ACT
    // 1st click evt: Ellipsis menu click (opens dropdown) //
    const ellipsisBtn: HTMLButtonElement = fixture.nativeElement.parentNode.querySelector('[data-atm="actions"]');
    ellipsisBtn.click();
    fixture.detectChanges();

    // 2nd click evt: Btn click //
    const promoteBtn: HTMLButtonElement = fixture.nativeElement.parentNode.querySelector('[data-atm="promote"]');
    promoteBtn.click();
    fixture.detectChanges();

    fixture.whenStable();

    // ASSERT
    expect(dialog.open).toHaveBeenCalled;
  });

});


component.html

<ng-container matColumnDef="action">
   <th mat-header-cell *matHeaderCellDef=""></th>
     <td mat-cell *matCellDef="let promotion">
       <button mat-icon-button
           class="ellipsis-btn"
           data-atm="actions"
           [matMenuTriggerFor]="menu"
           [matMenuTriggerData]="{ 'promotion': promotion }"
           role="menubar">
           <img src="/assets/icon/ellipsis-menu.svg" />
        </button>
      </td>
</ng-container>

<mat-menu class="promotion-menu" #menu="matMenu">
  <ng-template matMenuContent let-promotion="promotion">
    <div class="promotion-menu">
      <button *ngIf="shouldAllowPromotion(promotion)" mat-menu-item data-atm="promote" (click)="doPromoteMethod(promotion)">Do promotion</button>
    </div>
  </ng-template>
</mat-menu>
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

I don't see you mocking out shouldAllowPromotion anywhere. It's likely that method is returning falsy and therefore isn't rendering the button you need.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!