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

Posted 2023-03-16

【中文标题】mat-slide-toggle 单元测试用例显示错误

【英文标题】：mat-slide-toggle unit test case is showing error

【发布时间】：2021-11-27 15:25:49

【问题描述】：

我想为 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

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

【参考方案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.
);

【讨论】：

当我给出你提到的测试用例时，测试仍然失败。常量滑块 = fixture.debugElement.query(By.css('.slider'));它显示空值。如何纠正它。 --@AliF50

使用 console.log 和调试器查看我的编辑。如果在 chrome 打开并运行测试时按 F12，它应该暂停。然后，您可以检查 DOM 以查看发生了什么。我在想 .slider 元素当时不存在于 DOM 中。

你是对的。 DOM 中不存在元素。 。我们如何测试滑块切换？ - AliF50

我不确定。我在想可能是 ngIf 阻止了元素的显示，或者您在导入数组中缺少一个 imprtt。