Question

我确实为打开的对话框编写了一个单元测试用例。但是我遇到了类似TypeError的错误：无法读取undefined的属性'debugElement'。我正在使用angular 7，请任何人帮助我。我无法发布仅发布对话框方法的所有组件代码。

我的组件代码

confirmDialog(): void {
    this.dialog.open(ConfirmDialogComponent, {
      panelClass: '_small-dialog',
      disableClose: true,
      position: { top: '50px' },
      data: { name: 'Confirm Dialog', description: 'Some description' }
    });
  }

我的规范文件代码

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { MyRequestsComponent } from './my-requests.component';
import { RouterTestingModule } from '@angular/router/testing';
import { FeaturesModule } from '../features.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 


describe('MyRequestsComponent', () => {
  let myReqComponent: MyRequestsComponent;
  let fixture:ComponentFixture < MyRequestsComponent > ; 
  let input:Element;


  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        FeaturesModule,
        BrowserAnimationsModule
      ],
      declarations: [ ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    const fixture = TestBed.createComponent(MyRequestsComponent);
    myReqComponent = fixture.componentInstance;
    fixture.detectChanges();
  });


  it('should call open Dialog', () =>  {

    let button = fixture.debugElement.nativeElement.querySelector('button');
     button.click();

     fixture.whenStable().then(() => {
       expect(myReqComponent.confirmDialog).toHaveBeenCalled();
     });
    }); 
});

我的HTML代码点击按钮

<button
                    mat-icon-button
                    color="accent"
                    matTooltip="Delete"
                    matTooltipPosition="above"
                    *ngIf="element.status === 'In progress'"
                    (click)="confirmDialog()"
                  >
                    <fa-icon [icon]="faTrashAlt"></fa-icon>
                  </button>

Answer 1

您在每个异步beforeEach(async(() => {...之前进行过通话，因此您可能必须使通话异步。请尝试以下

it('should call open Dialog', async() =>  {

    let button = fixture.debugElement.nativeElement.querySelector('a');
     button.click();

     fixture.whenStable().then(() => {
       expect(myReqComponent.confirmDialog).toHaveBeenCalled();
     });
});

打开对话框的单元测试用例

1 个答案: