Topic: 'NullInjectorError: No Provider for PositioningService' in Angular tests

karatesaul free asked 4 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)

Arkadiusz Idzikowski staff commented 4 years ago

Please try to change MDBBootstrapModule to MDBBootstrapModule.forRoot(). You can also import only TooltipModule.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 free commented 4 years ago

Thank you! That worked.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • 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: Yes
  • Provided link: No