CODEWITHSUNDEEP
angularunit-testingkarma-jasmineangular-test
Joshua Foxworth
Joshua Foxworth

Reputation: 1397

Angular test error - what to provide for injection token

I am writing a test for a registration page that uses a config service with an injection token. The error that I am getting is as follows:

NullInjectorError: R3InjectorError(DynamicTestModule)[FuseConfigService -> InjectionToken fuseCustomConfig -> InjectionToken fuseCustomConfig]: 
  NullInjectorError: No provider for InjectionToken fuseCustomConfig!

I am not sure what to provide. I tried importing and providing the InjectionToken module from angular core, but that resulted in another error as it isn't actually a module.

Error: Unexpected value 'InjectionToken' imported by the module 'DynamicTestModule'. Please add an @NgModule annotation.

I tried a few other things, such as creating and providing an injection token, but could not get anything to work. I am not too familiar with injection tokens and I am having a really difficult time figuring out what the issue is and how to fix it.

Here is the test file:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RegisterComponent } from './register.component';
import { AbstractControl, FormBuilder, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/internal/operators';
import { FuseConfigService } from '@fuse/services/config.service';
import { fuseAnimations } from '@fuse/animations';
import { AuthService } from 'app/main/services/auth.service';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from "@angular/router/testing";
import { PlatformModule } from '@angular/cdk/platform';
import { Inject, Injectable, InjectionToken } from '@angular/core';


import { mockItems } from 'app/main/services/mockItems';

import { MatIconModule } from '@angular/material/icon';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatCheckboxModule } from '@angular/material/checkbox';



export const FUSE_CONFIG = new InjectionToken('fuseCustomConfig');


fdescribe('RegisterComponent', () => {
    let component: RegisterComponent;
    let fixture: ComponentFixture<RegisterComponent>;


    let MockGroup = new mockItems();







    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [ RegisterComponent ]
        })
        .compileComponents();
    }));




    beforeEach(() => {


        
        TestBed.configureTestingModule({
            imports: [ MatIconModule,
                       MatFormFieldModule,
                       MatCheckboxModule,
                       ReactiveFormsModule,
                       RouterTestingModule,
                       BrowserAnimationsModule,
                       PlatformModule,
                       InjectionToken ],
            declarations: [ RegisterComponent ],
            providers: [ { provide: FuseConfigService },
                         { provide: FormBuilder },
                         { provide: AuthService,        useValue : {} } ]

        });


        fixture = TestBed.createComponent(RegisterComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });




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



});

The relevant portion of the config service file.

import { Inject, Injectable, InjectionToken } from '@angular/core';
import { ResolveEnd, Router } from '@angular/router';
import { Platform } from '@angular/cdk/platform';
import { BehaviorSubject, Observable } from 'rxjs';
import { filter } from 'rxjs/operators';
import * as _ from 'lodash';

// Create the injection token for the custom settings
export const FUSE_CONFIG = new InjectionToken('fuseCustomConfig');

@Injectable({
    providedIn: 'root'
})
export class FuseConfigService
{
    // Private
    private _configSubject: BehaviorSubject<any>;
    private readonly _defaultConfig: any;

    /**
     * Constructor
     *
     * @param {Platform} _platform
     * @param {Router} _router
     * @param _config
     */
    constructor(
        private _platform: Platform,
        private _router: Router,
        @Inject(FUSE_CONFIG) private _config
    )
    {
        // Set the default config from the user provided config (from forRoot)
        this._defaultConfig = _config;

        // Initialize the service
        this._init();
    }

Upvotes: 3

Views: 6638

Answers (1)

Akhil
Akhil

Reputation: 1453

You will need to write like this in your spec.ts::

{ provide: FUSE_CONFIG, useFactory: 'your_factory_function' }

useValue or useFactory based on how the Injection token configured.

We write test to mock the InjectToken and dependencies not to create another one.

Upvotes: 2

Related Questions