如何在构造函数中测试 MatDialog.open

Question

我有一个在构造函数对话框中使用的组件，如下所示：

  dialog = inject( MatDialog );

  constructor () {

    this.dialog.open( WelcomeComponent , {
      width:'350px',
      height:'350px'
    } );

而且我不知道如何测试

open

是否被调用。我面临的问题是组件是在

jest.spyOn

对象之前创建的，这会导致尝试时调用 0 次：

  it( 'open welcome dialog', () => {
    const openDialogSpy = jest.spyOn( TestBed.inject(MatDialog), 'open' );
    expect( openDialogSpy ).toHaveBeenCalled();
    //I know this code leads to nothing but it's just an example
  }) 

编辑：

这是我迄今为止的测试：

import { ElementRef } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { MediaService } from './services/media.service';
import { WelcomeComponent } from './welcome/welcome.component';

describe('AppComponent', () => {

  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports:[AppComponent, NoopAnimationsModule, MatDialogModule ],
      providers:[
        { provide:ElementRef, useValue:{}},
        { provide:MediaService, useValue:{}},
        { provide:MatDialog },
      ]
    }).compileComponents();
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it( 'open welcome dialog', () => {

    const dialogSpy = jest.spyOn(component.dialog, 'open')
    component.dialog.open( WelcomeComponent , {
      width:'350px',
      height:'350px'
    } );
    expect( dialogSpy ).toHaveBeenCalledTimes(1);

  })

});

Answer 1

• 您应该使用 useClass 而不是提供 MatDialog 服务 只需在提供者数组中声明它即可。
• MatDialog 模块应该在导入数组中导入，而不是在 TestBed.configureTestingModule 对象。
• 您应该使用 TestBed.inject(MatDialog) 来获取实例 MatDialog 在您的测试中。

我希望这能解决你的问题

import { ElementRef } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { MediaService } from './services/media.service';
import { WelcomeComponent } from './welcome/welcome.component';

describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [NoopAnimationsModule, MatDialogModule],
      declarations: [AppComponent], // Declare the component being tested
      providers: [
        { provide: ElementRef, useValue: {} },
        { provide: MediaService, useValue: {} },
        MatDialog // Provide MatDialog using useClass
      ]
    }).compileComponents();
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should open welcome dialog', () => {
    const dialog = TestBed.inject(MatDialog); // Get MatDialog instance using TestBed.inject
    const dialogSpy = jest.spyOn(dialog, 'open');

    component.openWelcomeDialog();

    expect(dialogSpy).toHaveBeenCalledTimes(1);
    expect(dialogSpy).toHaveBeenCalledWith(WelcomeComponent, {
      width: '350px',
      height: '350px'
    });
  });
});

我的建议是创建一个单独的函数来打开对话框并将其放置在 ngOnInit 或 ngAfterViewInit 中。

  constructor () {
       openDialog()
    }

 openDialog(){
    this.dialog.open( WelcomeComponent , {
      width:'350px',
      height:'350px'
    } );
 }

Answer 2

连接

createComponent

 后，您可以尝试重新初始化 

jest spyOn

吗

it( 'open welcome dialog', () => {
    const dialogSpy = jest.spyOn(component.dialog, 'open')
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    expect( dialogSpy ).toHaveBeenCalledTimes(1);

})