Angular 测试给出错误 - 失败：无法读取未定义的 属性 'className'

Question

下面是我的spec.ts。它运行良好，所有测试用例均通过。不知何故 3 次 2 次测试失败并显示错误 Failed: Cannot read property 'className' of undefined。我从未在文件中的任何地方使用过 className。但是，我正在使用 Syncfusion 库进行对话。我不明白哪里出了问题。偶尔，它也会给我这个错误。 Error: Timeout - Async function did not complete within 5000ms (set by jasmine.DEFAULT_TIMEOUT_INTERVAL)。我试过用doneFn也增加间隔。它仍然给出这个错误。

*sync.spec.ts

describe("SettingDialogComponent", () => {
  let component: SettingDialogComponent;
  let fixture: ComponentFixture < SettingDialogComponent > ;
  const elementId = "1234567890";
  const parentId = "0987654321";
  const relearnCommand = "Re-learning";
  let service: Service;
  const element = new Element(elementId, [new Data("limit", "2.00")], "", parentId, [], [], "");
  let heroDe: DebugElement;
  let heroEl: HTMLElement;

  beforeEach(
    waitForAsync(async() => {
      await TestBed.configureTestingModule({
          declarations: [DialogComponent, SettingDialogComponent],
          imports: [
            DialogModule,
            FormsModule,
            HttpClientModule,
            ReactiveFormsModule,
            TranslateModule,
            TranslateModule.forRoot({
              loader: {
                provide: TranslateLoader,
                useClass: TestTranslateLoader,
              },
            }),
          ],
          providers: [{
              provide: Service,
              useValue: {
                getElement: (): Observable < Element > => {
                  return of(element);
                },
                some: () => of (true),
                update: () => of (true),
                runCommand: () => of (true),
              },
            },
            HttpClient,
            TranslateService,
          ],
        })
        .compileComponents()
        .then(() => {
          fixture = TestBed.createComponent(SettingDialogComponent);
          component = fixture.componentInstance;
          component.elementId = elementId;
          service = fixture.debugElement.injector.get(AssetService);
          spyOn(service, "update").and.callThrough();
          spyOn(service, "getElement").withArgs(component.elementId).and.returnValue( of (element));
          spyOn(service, "runCommand").and.callThrough();
        });
    }),
  );

  it(
    "when show open modal",
    waitForAsync(async() => {
      fixture.detectChanges();
      await fixture.whenStable();

      component.show(); //opens syncfusion dialog
      fixture.detectChanges();

      const shownDialog = fixture.debugElement.queryAll(By.css(".e-popup-open"));
      expect(shownDialog).not.toBeNull();

      component.hide(); //hides syncfusion dialog
    }),
  );

});

无论我在哪里使用 fixture.debugElement.query(By.css(""));，都会显示此错误。它说 debugElement 的值为 null。

*我的sync.ts文件

@ViewChild("editor") public deviceEditor: DialogComponent;

public show(): void {
    this.thresholdSettings.reset();
    this.Service.getElement(this.elementId).subscribe((result) => {
      this.element = result;
      this.limit = getMetadataValue(this.element.data, "limit");
    });
    this.deviceEditor.show();
  }

<ejs-dialog #deviceEditor
            id="dialog"
            isModal="true"
            class="device-threshold-dialog">
</ejs-dialog>

错误堆栈跟踪：

TypeError: Cannot read property 'className' of undefined at removeClass (http://localhost:9877/karma_webpack/webpack:/node_modules/@syncfusion/ej2-base/dist/es6/ej2-base.es2015.js:5019:1) at DialogComponent.destroy (http://localhost:9877/karma_webpack/webpack:/node_modules/@syncfusion/ej2-popups/dist/es6/ej2-popups.es2015.js:3072:20) at http://localhost:9877/karma_webpack/webpack:/node_modules/@syncfusion/ej2-angular-base/src/component-base.js:149:1 at timer (http://localhost:9877/karma_webpack/webpack:/node_modules/zone.js/fesm2015/zone.js:2561:1) at ZoneDelegate.invokeTask (http://localhost:9877/karma_webpack/webpack:/node_modules/zone.js/fesm2015/zone.js:406:1) at AsyncTestZoneSpec.onInvokeTask (http://localhost:9877/karma_webpack/webpack:/node_modules/zone.js/fesm2015/zone-testing.js:1180:1) at ProxyZoneSpec.onInvokeTask (http://localhost:9877/karma_webpack/webpack:/node_modules/zone.js/fesm2015/zone-testing.js:315:1) at ZoneDelegate.invokeTask (http://localhost:9877/karma_webpack/webpack:/node_modules/zone.js/fesm2015/zone.js:405:1) at Zone.runTask (http://localhost:9877/karma_webpack/webpack:/node_modules/zone.js/fesm2015/zone.js:178:1) at invokeTask (http://localhost:9877/karma_webpack/webpack:/node_modules/zone.js/fesm2015/zone.js:487:1)

Answer 1

我们最终验证了您报告的查询，但我们无法使用您共享的代码片段制作可运行的示例。

我们注意到您在对话框组件中使用了错误的 属性。我们建议您将对话框渲染部分中的 class 更改为 cssClass，如果问题已解决，请尝试一下

代码片段：

  <ejs-dialog #deviceEditor 
        id="dialog" 
        isModal="true" 
        cssClass="device-threshold-dialog"> 
  </ejs-dialog> 

样本：https://stackblitz.com/edit/angular-s1dxxw?file=app.component.html

Answer 2

我在包括 component.toBeTruthy(); 在内的每个测试用例中使用 await fixture.whenRenderingDone() 而不是 await fixture.whenStable() 来解决这个问题。希望这可能有所帮助。