mat-slide-toggle unit test case is showing error

user_16351575 0
Viewed 540

I want to write test cases for mat slide toggle.

Test case

    it('should call change method on slide change', async () => {
        const nativeElement = fixture.nativeElement;
        const slider = nativeElement.querySelector('.slider');
        slider.dispatchEvent(new Event('change'));
        expect(component.toggleStatus).toHaveBeenCalled();
    
      });

My component.html

 <ng-container matColumnDef="active">
        <th mat-header-cell *matHeaderCellDef>Status</th>
        <td mat-cell *matCellDef="let row" (click)="isAction=true">
            <mat-slide-toggle class="slider" color="primary" [checked]="row.status" #toggle
                (change)="toggleStatus($event,row,toggle)">
            </mat-slide-toggle>
        </td>
    </ng-container>

Component.ts

 public toggleStatus(event: MatSlideToggleChange, service: ServiceModel, toggle: MatSlideToggle) {
        if (event.checked) {
          this.actionActivate(service, toggle);
        } else {
          this.actionDeactivate(service, toggle);
        }
      }

error when execute this test case is enter image description here

Can anyone help me to correct this test case

angular-test karma-jasmine angular-unit-test angular typescript
1 Answers

For this case, I would use triggerEventHandler on the DebugElement.

it('should call change method on slide change', async () => {
        const slider = fixture.debugElement.query(By.css('.slider'));
        // Edit
        console.log(fixture.nativeElement);
        debugger;
        // make sure the slider is truthy
        expect(slider).toBeTruthy();
        slider.triggerEventHandler('change', {/* mock the event here */});
        expect(component.toggleStatus).toHaveBeenCalled();
      });

If expect(slider).toBeTruthy() fails, it means that element is not painted in the DOM.

Make sure you have the following:

import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatTableModule} from '@angular/material/table';

TestBed.configureTestingModule({
  imports: [MatTableModule, MatSlideToggleModule], // import is required so Angular knows how to paint
  // the elements.
});
user_73654610
Related