Topic: 'NullInjectorError: No Provider for PositioningService' in Angular tests
karatesaul asked 5 years ago
I have created a component, dxLabeledValue
that uses the MDB Tooltip to display help text if provided to the component. The component functions perfectly in an actual environment, but the tests fail when I supply the text that gets passed to the mdbTooltip directive.
Expected behavior
The test module should compile when given the same imports as the actual module.
Actual behavior
The test fails with NullInjectorError: No provider for PositioningService!
Resources (screenshots, code snippets etc.)
dx-labeled-value.module.ts
:
@NgModule({
declarations: [DxLabeledValueComponent],
imports: [
CommonModule,
DxButtonModule,
DxIconModule,
MDBBootstrapModule
],
exports: [DxLabeledValueComponent],
entryComponents: [DxLabeledValueComponent]
})
export class DxLabeledValueModule { }
Relevant snippet from dx-labeled-value.component.ts
:
@Input() help: string;
Relevant snippet from dx-labeled-value.component.html
:
<dx-icon
class="sid-dx-labeled-value-help dx-labeled-value-help"
*ngIf="help"
icon="help"
[mdbTooltip]="help">
</dx-icon>
Test module setup in dx-labeled-value.component.spec.ts
:
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [DxLabeledValueComponent],
imports: [DxButtonModule, DxIconModule, MDBBootstrapModule],
})
.compileComponents();
}));
And the test that breaks:
it('shows the help icon if help is given', () => {
component.help = 'This is a help tooltip';
fixture.detectChanges();
expect(elem.querySelector('.sid-dx-labeled-value-help')).not.toBeNull();
});
And here's the full error:
HeadlessChrome 71.0.3542 (Mac OS X 10.14.6) DxLabeledValueComponent (integration) shows the help icon if help is given FAILED
NullInjectorError: StaticInjectorError(DynamicTestModule)[TooltipDirective -> PositioningService]:
StaticInjectorError(Platform: core)[TooltipDirective -> PositioningService]:
NullInjectorError: No provider for PositioningService!
error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'TooltipDirective', Function ], ngDebugContext: DebugContext_({ view: Object({ def: Object({ factory: Function, nodeFlags: 51101697, rootNodeFlags: 50331649, nodeMatchedQueries: 0, flags: 0, nodes: [ Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 50331649, childFlags: 770048, directChildFlags: 770048, childMatchedQueries: 0, matchedQueries: Object({ }), matchedQueryIds: 0, references: Object({ }), ngContentIndex: null, childCount: 2, bindings: [ ], bindingFlags: 0, outputs: [ ], element: Object({ ns: '', name: 'dx-icon', attrs: [ Array, Array ], template: null, componentProvider: Object({ nodeIndex: 1, parent: <circular reference: Object>, renderParent: <circular reference: Object>, bindingIndex: 0, outputIndex: 0, checkIndex: 1, flags: 114688, childFlags: 0, directChildFlags: 0, childMatchedQueries: 0, matchedQueries: Object, matchedQueryIds: 0, references: Object, n ...
at <Jasmine>
at NullInjector.push.../../node_modules/@angular/core/fesm5/core.js.NullInjector.get (http://localhost:9876/_karma_webpack_/webpack:/Users/swiner/app/appliance/dx-gui/node_modules/@angular/core/fesm5/core.js:1225:1)
at resolveToken (http://localhost:9876/_karma_webpack_/webpack:/Users/swiner/app/appliance/dx-gui/node_modules/@angular/core/fesm5/core.js:1463:1)
at tryResolveToken (http://localhost:9876/_karma_webpack_/webpack:/Users/swiner/app/appliance/dx-gui/node_modules/@angular/core/fesm5/core.js:1407:1)
at StaticInjector.push.../../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:9876/_karma_webpack_/webpack:/Users/swiner/app/appliance/dx-gui/node_modules/@angular/core/fesm5/core.js:1311:1)
at resolveToken (http://localhost:9876/_karma_webpack_/webpack:/Users/swiner/app/appliance/dx-gui/node_modules/@angular/core/fesm5/core.js:1463:1)
at tryResolveToken (http://localhost:9876/_karma_webpack_/webpack:/Users/swiner/app/appliance/dx-gui/node_modules/@angular/core/fesm5/core.js:1407:1)
at StaticInjector.push.../../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:9876/_karma_webpack_/webpack:/Users/swiner/app/appliance/dx-gui/node_modules/@angular/core/fesm5/core.js:1311:1)
at resolveNgModuleDep (http://localhost:9876/_karma_webpack_/webpack:/Users/swiner/app/appliance/dx-gui/node_modules/@angular/core/fesm5/core.js:18460:1)
at NgModuleRef_.push.../../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (http://localhost:9876/_karma_webpack_/webpack:/Users/swiner/app/appliance/dx-gui/node_modules/@angular/core/fesm5/core.js:19149:1)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.4.0
- Device: Macbook Pro 2019
- Browser: Headless Chrome
- OS: Mac 10.14.6
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 5 years ago
Please try to change
MDBBootstrapModule
toMDBBootstrapModule.forRoot()
. You can also import onlyTooltipModule.forRoot()
, because the MDBBootstrapModule contains all MDB Angular free modules and you may not need all of them in this case.Here is the list of all modules: https://mdbootstrap.com/docs/angular/getting-started/modules/
karatesaul commented 5 years ago
Thank you! That worked.