AngularJs Unit Testing Controller with sweetalert in Jasmine Testing

Question

I'm trying to test my angularjs controller with jasmine and karma but i cant test codeblocks that are in sweetalert function. How can i confirm sweet function from my test class to test $scope.getCategory() is called or not? Here is a example code from my controller and jasmine test case.

Controller:

$scope.changeCategoryStatus = function(selectedId, selectedActive, topId) {
    sweet.show({
        title : "Kategoriyi "+(!selectedActive ? 'aktif' : 'pasif')+ " hale getirmek istiyor musunuz?",
        type : "warning",
        showCancelButton : true,
        confirmButtonColor : "#DD6B55",
        confirmButtonText : "Evet, değiştir!",
        closeOnConfirm : false,
        showLoaderOnConfirm : true,
        html : false
    }, function() {
        $http({
            method : "POST",
            url : webRootUrl+"ajax/category/setActivation",
            data : {
                "id" : selectedId,
                "active" : !selectedActive
            }

        }).then(function(response) {

            //console.log(JSON.stringify(response.data))
            if(response.data.outPutDouble==-7){
                swal("Değiştirilemedi!", response.data.outPutString,"error");
            }else{
            $scope.getCategory(topId);
            swal("Bu kategorinin durumu değiştirildi","",
            "success");
            }
        }, function myError(response) {
            swal("Bu kategorinin durumu değiştirilemedi","","error");

            //console.log("***aaa" + JSON.stringify(response))
        });


    });

}

Jasmine Test Case:

  it("changeCategoryStatus success", function () {
  $scope.changeCategoryStatus(21,true,0)

  spyOn($scope,'getCategory')
  expect($scope.getCategory).toHaveBeenCalled(); });

Has anyone had a similar problem earlier? Thanks in advance for help.

Answer 1

Here's what I did with my Angular 2 app unit test

it("should delete token", () => {
  spyOn(localStorage, 'removeItem');

  // call function
  comp.deleteToken();

  // add some delay till the sweetAlert modal show up
  setTimeout(() => {
    // select the button for the activity you want to test
    let cancelSwal: HTMLButtonElement = fixture.debugElement.query(By.css(".sa-button-container > .cancel")).nativeElement;
    cancelSwal.click();

    // test your sweetAlert callback function
    expect(localStorage.removeItem).toHaveBeenCalledWith("token");
  }, 100);
});

As you can see it's straight forward nothing fancy,

• Call Function with the sweetAlert in it
• Add delay with setTimeout to make sure the swal modal is there
• Select the wanted DOM element using it's CSS selector
• Do the action needed (in our case it's a click event) to get to your call back function you want to test
• Happy Testing :)