mat-slide-toggle 单元测试用例显示错误

Question

我想为 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();
    
      });

我的组件.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);
        }
      }

执行此测试用例时的错误是 enter image description here

谁能帮我纠正这个测试用例

Answer 1

对于这种情况，我会在DebugElement 上使用triggerEventHandler。

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();
      });

如果expect(slider).toBeTruthy() 失败，则表示该元素未在 DOM 中绘制。

确保您具备以下条件：

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.
});