Unidad de servicio MatDialog Test Angular 6 Error

Este equipo especializado pasados ciertos días de trabajo y recopilación de de información, hallamos los datos necesarios, nuestro deseo es que te resulte útil en tu proyecto.

Solución:

Pruebas mat-dialogs puede ser complicado. Tiendo a usar un objeto espía para el retorno de un diálogo abierto (dialogRefSpyObj a continuación) para poder realizar un seguimiento y controlar las pruebas más fácilmente. En su caso, podría tener un aspecto similar al siguiente:

describe('ModalService', () => 
    let modalService: ModalService;
    let dialogSpy: jasmine.Spy;
    let dialogRefSpyObj = jasmine.createSpyObj( afterClosed : of(), close: null );
    dialogRefSpyObj.componentInstance =  body: '' ; // attach componentInstance to the spy object...

    beforeEach(() => 
        TestBed.configureTestingModule(
            imports: [MatDialogModule],
            providers: [ModalService]
        );
        modalService = TestBed.get(ModalService);
    );

    beforeEach(() => 
        dialogSpy = spyOn(TestBed.get(MatDialog), 'open').and.returnValue(dialogRefSpyObj);
    );

    it('open modal ', () => 
        modalService.open(TestComponent, '300px');
        expect(dialogSpy).toHaveBeenCalled();

        // You can also do things with this like:
        expect(dialogSpy).toHaveBeenCalledWith(TestComponent,  maxWidth: '100vw' );

        // and ...
        expect(dialogRefSpyObj.afterClosed).toHaveBeenCalled();
    );
);

Tengo una mejor solución que todavía funciona en 2019.

header.component.ts

import  BeforeLogOutComponent  from '@app-global/components/before-log-out/before-log-out.component';


  /**
   * The method triggers before the logout.
   * Opens the dialog and warns the user before log Out.
   */
  public beforeLogOut(): void 
    this._dialog.open(BeforeLogOutComponent,  width: '400px', disableClose: false, panelClass: 'dialog_before_log_out' )
    .afterClosed()
    .subscribe((res) => 
      if (res && res.action === true)  this.loggedOut(); 
    , err => 
      console.error(err);
    );
  

header.component.spec.ts

import  async, ComponentFixture, TestBed  from '@angular/core/testing';
import  MatDialog  from '@angular/material';
import  Observable, of  from 'rxjs';



<<-- Create a MatDialog mock class -->>
export class MatDialogMock 
  // When the component calls this.dialog.open(...) we'll return an object
  // with an afterClosed method that allows to subscribe to the dialog result observable.
  open() 
    return 
      afterClosed: () => of(action: true)
    ;
  




describe('HeaderComponent', () => 

  let component: HeaderComponent;
  let fixture: ComponentFixture;

  beforeEach(async(() => 

    TestBed.configureTestingModule(
      imports: [
        MaterialModule, RouterTestingModule, HttpModule, BrowserAnimationsModule,
        HttpClientModule, FlexLayoutModule,
      ],
      declarations: [
        HeaderComponent,
      ],
      providers: [
         provide: MatDialog, useClass: MatDialogMock  <<-- look this
      ]
    )
    .compileComponents();
  ));



  beforeEach(async() => 
    fixture = TestBed.createComponent(HeaderComponent);
    component = fixture.componentInstance;


    component.ngOnInit();
    component.ngAfterViewInit();
    await fixture.whenStable();
    fixture.detectChanges();
  );


  fit('should create', () => 
    expect(component).toBeTruthy();
  );


  // I test the dialog here.
  fit('should open the dialog', () => 
    component.beforeLogOut();
  );

No tengo la respuesta exacta para su caso pero también hice algunas pruebas en MatDialog. Puedo mostrarte lo que hice. Tal vez mire el inject() parte:

(Eliminé algunas cosas por claridad y confidencialidad)

describe('MyDialogComponent', () => 
  let dialog: MatDialog;
  let overlayContainer: OverlayContainer;
  let component: MyDialogComponent;
  let fixture: ComponentFixture;
  const mockDialogRef = 
    close: jasmine.createSpy('close')
  ;

  beforeEach(async(() => 
    TestBed.configureTestingModule(
      imports: [
        BrowserAnimationsModule,
        ReactiveFormsModule,
        AngularMaterialModule,
      ],
      providers: [
         provide: MatDialogRef, useValue: mockDialogRef ,
        
          provide: MAT_DIALOG_DATA,
          useValue: 
            title: 'myTitle',
          
        
      ],
      declarations: [MyDialogComponent],
    );

    TestBed.overrideModule(BrowserDynamicTestingModule, 
      set: 
        entryComponents: [MyDialogComponent]
      
    );

    TestBed.compileComponents();
  ));

  beforeEach(inject([MatDialog, OverlayContainer],
    (d: MatDialog, oc: OverlayContainer) => 
      dialog = d;
      overlayContainer = oc;
    )
  );

  afterEach(() => 
    overlayContainer.ngOnDestroy();
  );

  beforeEach(() => 
    fixture = TestBed.createComponent(MyDialogComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  );

  it('should create', () => 
    expect(component).toBeTruthy();
  );


  it('onCancel should close the dialog', () => 
    component.onCancel();
    expect(mockDialogRef.close).toHaveBeenCalled();
  );

);

Calificaciones y comentarios

Tienes la opción de corroborar nuestra publicación fijando un comentario o valorándolo te damos la bienvenida.

---

---

Utiliza Nuestro Buscador