How to write tests for custom components?

Hi,

could you please provide a simple spec.ts example for custom components like ‘pink.toast.ts’. I cant figure out how to serve a provider for InjectionToken ToastConfig.

component:

import { Component, OnInit } from '@angular/core';
import { flyInOut } from './toastr.animations';
import { Toast, ToastrService, ToastPackage } from 'ngx-toastr';

@Component({
  selector: '[toastr]',
  styleUrls: ['./toastr.component.css'],
  templateUrl: './toastr.component.html',
  animations: [flyInOut],
  preserveWhitespaces: false,
})

export class ToastrComponent extends Toast implements OnInit {

  private _closeButtonClass: String;

  constructor(
    protected toastrService: ToastrService,
    public toastPackage: ToastPackage,
  ) {
    super(toastrService, toastPackage);
  }

  ngOnInit() {
    this._setButtonOrTimeOut();
    this._setLayoutsByClass();
  }

  private _setButtonOrTimeOut() {
    this.options.disableTimeOut = this.options.closeButton;
    this.options.progressBar = !this.options.closeButton;
    this.options.tapToDismiss = !this.options.closeButton;
  }

  private _setLayoutsByClass() {
    switch (this.toastClasses) {
      case 'toast-success toast':
        this._closeButtonClass = 'btn-success';
        break;
      case 'toast-warning toast':
        this._closeButtonClass = 'btn-warning';
        break;
      case 'toast-error toast':
        this._closeButtonClass = 'btn-error btn-outline';
        break;
      case 'toast-info toast':
        this._closeButtonClass = 'btn-info';
        break;
      default:
        this._closeButtonClass = 'btn-default';
        break;
    }
  }

  private _onCloseButtonClick() {
    this.toastPackage.triggerAction('closed');
    this.remove();
  }
}

test:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Toast, ToastrService, ToastPackage, ToastrModule } from 'ngx-toastr';
import { flyInOut } from './toastr.animations';
import { ToastrComponent } from './toastr.component';

describe('ToastrComponent', () => {
  let component: ToastrComponent;
  let fixture: ComponentFixture<ToastrComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ToastrModule],
      declarations: [ToastrComponent],
      providers: [ToastrService]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ToastrComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

Error

ToastrComponent should create
Error: StaticInjectorError(DynamicTestModule)[ToastrService -> InjectionToken ToastConfig]: 
  StaticInjectorError(Platform: core)[ToastrService -> InjectionToken ToastConfig]: 
    NullInjectorError: No provider for InjectionToken ToastConfig!

Thank you and best regards Christoph

[trevor-hackett]

What happens if instead of importing ToastrModule, you import ToastrModule.forRoot()? The forRoot method provides 4 “services”: TOAST_CONFIG (InjectionToken), OverlayContainer, Overlay, and ToastrService. All are required for toasts to work propertly.

Maybe something like this:

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ToastrModule.forRoot()],
      declarations: [ToastrComponent],
      providers: [ToastrService]
    })
      .compileComponents();
  }));

[avoerman]

I hacked through it and got it to render by stubbing out ToastPackage like this:

@Injectable()
class MockToastPackage extends ToastPackage {
   constructor() {
     const toastConfig = { toastClass: 'customToast' };
     super(1, <IndividualConfig>toastConfig, 'test message', 'test title', 'show', new ToastRef(null));
   }
}

and then the module setup, just provide the mocked toastPackage

TestBed.configureTestingModule({
  imports: [ToastrModule.forRoot()],
  providers: [{ provide: ToastPackage, useClass: MockToastPackage }]
})