“Error: Can't resolve all parameters for Alert” when compiling a testbed

Question

I'm working on getting an initial set of tests for an Angular app running, and I'm having trouble with one of the dependencies. See the code for the test spec:

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { RouterModule, Routes } from '@angular/router';
import { Alert } from './models/alert.model';
import { AlertsService } from './services/alerts.service';


describe('AppComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent, NavbarComponent
      ],
      imports: [
        RouterModule,
      ],
      providers: [
        Alert, AlertsService
      ]
    });
    TestBed.compileComponents(); //This appears to be what throws the error
  });

  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));

  it(`should have as title 'app works!'`, async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('app works!');
  }));

});

While there's lots of discussion of how to fix services (and routing in particular) on SO, I haven't found anything for very simple classes, like the Alert file that follows:

export class Alert {    
    public static id: number = 0;
    public message: string;
    public id: number;
    public type: string;
    public dismissible: boolean;
    public dismissOnTimeout: number;

    constructor(config: any) {
        this.message = config.message;
        this.id = Alert.id && Alert.id++;
        this.type = config.type || 'info';
        this.dismissible = true;
        this.dismissOnTimeout = settings.alertDismissOnTimeout;        
    }        
}

This 'model' file doesn't have any methods and exists solely as a convenient definition of an alert that you can instantiate with "new Alert(alert)". It is used by the AlertsService, which appears to so far be working, and the HTML for the appComponent references AlertsService and some methods that instantiate Alert objects. So far, so good, but when I try to compile the AppComponent, I get the error in the title. I've tried use a stub of the Alert class simplified down to its absolute minimum (basically an empty constructor function), and that returns the same error, too.

My (possibly incorrect) understanding is that I somehow have to get parameters to pass into the alert object for the test suite to work properly. I'm fairly certain this isn't a problem with circular dependencies due to the way the rest of the code is structured, and the actual application runs without issue. The questions here are whether or not I need to pass in some sort of mock parameters, and if not, what can I do to get this spec to compile correctly?

Answer 1

I was able to fix my problem by importing NO_ERRORS_SCHEMA from @angular/core and providing it as a schema in the configureTestingModule() block. Since the purpose of this test isn't to handle the alerts or much more than "Hello World" type initialization, actually injecting most of the alert-related code turned out to be unnecessary, and by paring things away I was able to get this version to compile:

import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
// We need NO_ERRORS_SCHEMA to ignore subcomponents we aren't actually testing, like the alert modules.
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { AlertsService } from './services/alerts.service';
import { AboutComponent } from './about/about.component';
import * as ng2Bootstrap from 'ng2-bootstrap';

describe('AppComponent', () => {
  beforeEach(() => {

    TestBed.configureTestingModule({
      declarations: [
        AppComponent, AboutComponent
      ],
      imports: [
        ng2Bootstrap.Ng2BootstrapModule
      ],
      providers: [
        AlertsService,
      ],
      schemas: [NO_ERRORS_SCHEMA]
    });
    TestBed.compileComponents();
  });

  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));

  it(`should have 'Application content' as its title`, async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('Application content');
  }));

});