Unable to run unit test case for toast message in angular

Question

Hi I am developing web application in angular 5. I am using toast messages to display messages. I am using toast messages from https://www.npmjs.com/package/angular2-toaster. The implementation is correct and working fine. I am facing issue with writing unit test cases. Below is my implementation in component. I have added below line of code in component.

import { ToasterModule, ToasterService } from 'angular2-toaster';

I have added below code in constructor.

private toasterService: ToasterService

I am showing toast message as below.

this.toasterService.pop('success', 'Args Title', 'Args Body');

I have added below code in HTML file.

<toaster-container></toaster-container>

This implementation works fine. I am writing unit test case as below.

describe('Component: TenantEditorComponent', () => {

  beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
                HttpClientModule,
                RouterTestingModule,
                TranslateModule.forRoot({
                    loader: {
                        provide: TranslateLoader,
                        useClass: TranslateLanguageLoader
                    }
                }),
                NgxDatatableModule,
                FormsModule,
                UiSwitchModule,
                TooltipModule.forRoot(),
                ModalModule.forRoot(),
                ToasterModule
            ],
  providers: [   ToasterService ]
        }).compileComponents();
fixture = TestBed.createComponent(TenantEditorComponent);
        component = fixture.componentInstance;
        submitEl = fixture.debugElement;
        fixture.detectChanges();
    }));

This is giving me error

No Toaster Containers have been initialized to receive toasts.

I have added screenshot below.

Can someone help me to figure it out the issue? Any help would be appreciated. Thank you

Well not only that, but anything that is not used in your component. You should not have `HttpClientModule`, `TooltipModule`, `ToasterModule`, and anything that isn't included in the HTML (I imagine for instance `UiSwitchModule` being an HTML tag like ``, in those cases you might leave it). — , Oct 23 '18 at 09:18
Well that's going to be very long, I recommend you start reading [the documentation](https://angular.io/guide/testing), as it might help you way more than we ever could ! — , Oct 23 '18 at 09:20
Thanks. Do you know why I am getting error in unit test case? — Niranjan, Oct 23 '18 at 09:24
No idea, but if you mock your dependency, I'm 100% sure your error will go away. Seems like the error states that you didn't add ``, or that you didn't set it as the toaster container (with something like `.init()` maybe ?) — , Oct 23 '18 at 09:28
I have added in html. But it is giving error when running unit test case. In setup how can i initialize toaster-container? — Niranjan, Oct 23 '18 at 09:30
I don't know, your library documentation might tell you that ! is this HTML in the component or somewhere else ? — , Oct 23 '18 at 09:31

score 0 · Answer 1 · answered Jan 30 '19 at 18:11

create spy for check the toasterservice.

     describe('Component: TenantEditorComponent', () => {
      let toasterServiceSpy: jasmine.Spy;

 const toasterSetvices = jasmine.createSpyObj('toasterSetvices', ['pop']);
     toasterServiceSpy = toasterSetvices.pop.and.returnValue(of(''));

      beforeEach(async(() => {
            TestBed.configureTestingModule({
                imports: [
                    HttpClientModule,
                    RouterTestingModule,
                    TranslateModule.forRoot({
                        loader: {
                            provide: TranslateLoader,
                            useClass: TranslateLanguageLoader
                        }
                    }),
                    NgxDatatableModule,
                    FormsModule,
                    UiSwitchModule,
                    TooltipModule.forRoot(),
                    ModalModule.forRoot(),
                    ToasterModule
                ],
      providers: [    {provide: ToasterService, useValue: toasterSetvices } ]
            }).compileComponents();

    fixture = TestBed.createComponent(TenantEditorComponent);
            component = fixture.componentInstance;
            submitEl = fixture.debugElement;
            fixture.detectChanges();
        }));

   it('Hit the Login Button', () => {
    const fixtureInstance = TestBed.createComponent<LoginComponent> 
     (LoginComponent);
    const toasterServiceInstance = 
    fixtureInstance.componentInstance.toasterService;
    fixtureInstance.detectChanges();
    component.submit();
    expect(toasterServiceSpy.calls.any()).toBe(true);

  });

Unable to run unit test case for toast message in angular

1 Answers1