0

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.

enter image description here

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

Niranjan
  • 537
  • 2
  • 14
  • 31
  • Why haven't you mocked anything ? Any particular reason ? –  Oct 23 '18 at 09:14
  • Hi, do i need to mock ToasterService? – Niranjan Oct 23 '18 at 09:16
  • 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
  • Okay So how can I write it now? – Niranjan Oct 23 '18 at 09:19
  • 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
  • It is HTML file. – Niranjan Oct 23 '18 at 09:32

1 Answers1

0

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);

  });
hazan kazim
  • 938
  • 9
  • 11