Why am i getting NullInjectorError: R3InjectorError(DynamicTestModule)[MdbModalRef -> MdbModalRef]:?

user_8152794 0
Viewed 499

I have an angular app in which i have component called CreateComponent which opens as a modal. That component is working fine. Now i am writing unit tests for that CreateComponent

So i provided all of my dependencies like this

import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { GlobalConstants } from '@constants/global.constants';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { MockDependenciesModule } from 'app/modules/mock-dependecies/mock-dependencies.module';
import { MdbFormsModule } from 'mdb-angular-ui-kit/forms';
import { MdbModalModule, MdbModalService } from 'mdb-angular-ui-kit/modal';
import { ToastrModule, ToastrService } from 'ngx-toastr';
import { CreateComponent } from './create.component';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ CreateComponent ] ,
      imports: [
        HttpClientModule,
        ToastrModule.forRoot(),
        MdbModalModule,
        CommonModule,
        BrowserModule,
        MDBBootstrapModule.forRoot(),
        FormsModule,
        ReactiveFormsModule,
        MdbFormsModule,
        MockDependenciesModule,
      ],
      providers: [ToastrService, MdbModalService]
    })
    .compileComponents();
  });

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

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

But when i run the test so it is givine me an error like this

NullInjectorError: R3InjectorError(DynamicTestModule)[MdbModalRef -> MdbModalRef]:
   NullInjectorError: No provider for MdbModalRef!

So every time my test fails. What's wrong here?

Note: I am using mdb bootstrap

karma-jasmine angular
1 Answers

I have to make some assumptions about your code, as you have not posted the component.ts code, but it seems that you have declared an MdbModalRef as a constructor parameter.

MdbModalRefs are not meant to be injected directly. Instead, you should obtain one using an MdbModalService, like so

Parent TS:

export class CreateComponent {
    modalRef: MdbModalRef<any>;
    constructor(private modalService: MdbModalService) {}
    // ...
    showModal(modal: TemplateRef<any>) {
        this.modalRef = modalService.open(modal);
    }

    closeModal() {
        this.modalRef.close();
    }
}

Parent HTML:

<button (click)="showModal(childModal)">Show</button>
<ng-template #childModal>
    <child-component (close)="closeModal()"></child-component>
</ng-template>

Child TS:

export class ChildComponent {
    @Output() close: EventEmitter<any>;

    closeClicked() {
        this.close.emit();
    }
}

Child HTML:

<h1>Modal</h1>
<p>Modal content</p>
<button (click)="closeClicked()">Close</button>

Here, the child component is defining an event called close, and the parent component closes the modal when it receives the event.

Of course, your code will look a bit different based on the scenario

user_179077580
Related