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

marleen.kaiser@amotiq.de priority asked 2 weeks 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);
  }
}

Rafał Seifert staff answered 1 week ago


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?



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

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 5.2.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No