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);
}
}
Rafał Seifert answered 7 months 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?
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?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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