Front test swal promise return with Jasmine

Hi, first of all thxs for your work it’s great to maintain sweet alert !

I am getting an issue that I hope some of you overcame, testing the return promise of the swal() function ?

I am using swal in my component like this :

handleUpdate(newDate) {
    const swal = require('sweetalert2');
    swal({
        title: ...,
        text: ...,
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: ...,
        cancelButtonText: ...
    }).then(() => {
        this.doSomething();
    }, (dismiss) => {
        if (dismiss === 'cancel' || dismiss === 'overlay' || dismiss === 'esc') {
            this.doSomethingElse();
        }
    });
}

And testing as follow :

it('With modification and click OK', fakeAsync(() => {
    // GIVEN
    comp.isDataModify = true;
    const swal = require('sweetalert2');
    spyOn(swal, 'swal').and.returnValue(Promise.resolve());
    // WHEN
    comp.handleUpdate(new Date('06/12/2017'));
    // THEN
    expect(comp.isDataModify).toBe(false);
}));

I don’t really know if I am getting the right object to spy on ? Or it’s not the right way to spy on Promises ? I got the syntax from angular documentation : https://angular.io/guide/testing#test-a-component-with-an-async-service

Txs in advance for any help on this.

[FGAUTREAULT]

Here it is !

You need to declare SweetAlert as a service

import * as SweetAlert from 'sweetalert2';

Then use the default method to build it

SweetAlert.default({
        title: ...,
        text: ...
    })
    .then(() => { ... });

And finally with Jasmine spy on the default method to get the promise

spyOn(SweetAlert, 'default').and.callFake(function () {
    return Promise.resolve(function() {
        // Data will only be modified inside the Promise
        expect(...).toBe(...);
    });
});

[prmkishor]

deleteItem(itemId) {
    Swal({
      titleText: 'Are you sure to delete item?',
      confirmButtonText: 'Yes',
      cancelButtonText: 'No',
      showCancelButton: true
    }).then((result) => {
      if (result.value !== undefined && result.value) {
        this.itemService.deleteItem(itemId);
      }
    });
  }

can be tested as below

it('should call api to delete item on confirmation', (done) => {
    component.deleteItem('1004');
    expect(Swal.isVisible()).toBeTruthy();
    expect(Swal.getTitle().textContent).toEqual('Are you sure to delete item?');
    Swal.clickConfirm();
    spyOn(itemService, 'deleteItem').and.returnValue(Observable.of({}));
    setTimeout(() => {
      expect(itemService.deleteItem).toHaveBeenCalledWith('1004');
      done();
    });
  });

For more detail https://github.com/prmkishor/sweetAletUnitTesting/wiki/sweetAlert2-Angular-Unit-Testing