How to implement Modal / ModalRef in Angular Unit Tests


Topic: How to implement Modal / ModalRef in Angular Unit Tests

marleen.kaiser@amotiq.de pro premium priority asked 7 months ago

*Expected behavior*Being able to do unit tests with components that use the MdbModal / MdbModalRef

*Actual behavior*Receiving an error:NullInjectorError: R3InjectorError(DynamicTestModule)[MdbModalRef -> MdbModalRef]: NullInjectorError: No provider for MdbModalRef!

I have tried importing different Modules, like MdbModalModule or setting MdbModalRef in providers, but nothing has worked.

What is the standard way to implement the MdbModal in Unit Tests?

Resources (screenshots, code snippets etc.)

Test File:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TranslateModule } from '@ngx-translate/core';
import { MdbModalModule, MdbModalRef } from 'mdb-angular-ui-kit/modal';


import { AcceptChangesDialogComponent } from './accept-changes-dialog.component';

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

  beforeEach(async(() => {
TestBed.configureTestingModule({
  imports: [MdbModalModule, MdbModalRef, TranslateModule.forRoot()],
  declarations: [AcceptChangesDialogComponent],
}).compileComponents();
  }));

  beforeEach(() => {
fixture = TestBed.createComponent(AcceptChangesDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
  });

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

Component:

import { Component } from '@angular/core';
    import { MdbModalRef } from 'mdb-angular-ui-kit/modal';

@Component({
  selector: 'accept-changes-dialog',
  templateUrl: './accept-changes-dialog.component.html'
})
export class AcceptChangesDialogComponent {
  public header: string | undefined;
  public icon = 'save';
  public content: string | undefined;
  public action = false;

      constructor(public modalRef: MdbModalRef<AcceptChangesDialogComponent>) {
      }

  public cancel(): void {
    this.action = false;
    this.modalRef.close(this.action);
  }

  public accept(): void {
    this.action = true;
    this.modalRef.close(this.action);
  }
}

I could not recreate your exact error. We are preparing mock component and module inside spec file like so:

@Component({
  template: ` <div class="modal-header"></div> `,
  providers: [MdbModalService],
})
class BasicModalComponent {
  constructor(public modal: MdbModalService) {}
}

@NgModule({
  declarations: [BasicModalComponent],
  imports: [BrowserModule],
})
class TestModalModule {}

And then we import this mocked module:

TestBed.configureTestingModule({
      imports: [MdbModalModule, TestModalModule],

Could you please try to implement such approach and let me know if that works for you?


Shandu pro premium priority commented 4 months ago

Your example doesn't have ModalRef, where the actual problem lies


Rafał Seifert commented 4 months ago

Could you provide some sample code of component you want to test?


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 5.2.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No