Angular unit test for bootstrap pop-up

Question

I want to write the angular unit test unit test for the following function,

$scope.addDataList = function () {
    $scope.IsDefault = false;
    $scope.IsPATsDefault = false;
    $('#plAddEditCopy').modal('show');
}

The addDataList opens the bootstrap popup. How do I use SpyOn on the third line of the function $('#plAddEditCopy').modal('show')?

score 0 · Answer 1 · answered Mar 15 '17 at 11:22

0

Try using following

JS code

  describe(function() {
    var form;

    beforeEach(function() {
      html= $('<div id="plAddEditCopy" class="modal fade" role="dialog">'+
      '<div class="modal-dialog"></div></div>');
      $(document.body).append(html);
    });

    it('your test', function() {
    // call your function
    // so that will open modal and cover that code
    // like 
    ctrl.addDataList();
    expect();
    })

    afterEach(function() {
      // remove it
    });
  });

answered Mar 15 '17 at 11:22

Jayant Patil

1,537
2
11
18

it('Test to check pop up is showing or not', function () { var iElement = $(element).find("#lnkAddPriceList")[0]; iElement.click(); // which is calling addDataList() }); my question is what property should i test in expect() – Ritesh Gore Mar 15 '17 at 11:32
cover scope variables only – Jayant Patil Mar 15 '17 at 11:35
I am still not clear i have already loaded template so the div id plAddEditCopy is present in the template is there any way to spyOn on the $('#plAddEditCopy').modal('show'); just like i have done in the following test :- it('Test to check the Show rule button is working or not ', function () { spyOn(BootstrapDialog, 'show').and.callThrough(); var iElement = $(element).find('#lnkScoreCalculation')[0]; //console.log(iElement) iElement.click(); scope.$digest(); expect(BootstrapDialog.show).toHaveBeenCalled(); }); – Ritesh Gore Mar 15 '17 at 11:49
This will add html to dom and your error will be get resolved – Jayant Patil Mar 15 '17 at 11:50
Html is already present in the DOM i am using templateCache to load the html page : - template = $templateCache.get('**/SS.html'); – Ritesh Gore Mar 15 '17 at 11:54
I am still not clear i have already loaded template so the div id plAddEditCopy is present in the template is there any way to spyOn on the $('#plAddEditCopy').modal('show'); just like i have done in the following test :- it('Test to check the Show rule button is working or not ', function () { spyOn(BootstrapDialog, 'show').and.callThrough(); var iElement = $(element).find('#lnkScoreCalculation')[0]; //console.log(iElement) iElement.click(); scope.$digest(); expect(BootstrapDialog.show).toHaveBeenCalled(); }); – Ritesh Gore Mar 15 '17 at 11:56

Jayant Patil · Accepted Answer · 2017-03-17T10:03:01.997

0

To spy on modal you can do following

//spyOn(object, methodName) where object.method() is a function
spyOn($('#yourelementId'), 'modal')

expect($('#yourElementId').modal).toHaveBeenCalled()();

refer Jasmine spy on

edited Mar 17 '17 at 10:03

answered Mar 16 '17 at 06:29

Jayant Patil

1,537
2
11
18

or refer this http://stackoverflow.com/questions/21214868/mocking-modal-in-angularjs-unit-tests – Jayant Patil Mar 16 '17 at 06:30
My Test case is as follows :- it('Test Case ', function () { spyOn($('#plAddEditCopy'), 'modal') var AddNewEntry = $(element).find("#lnkAddPriceList")[0]; AddNewEntry.click(); expect($('#plAddEditCopy').modal)..toBeCalled(); }); but getting error TypeError: expect(...).toBeCalled is not a function – Ritesh Gore Mar 17 '17 at 09:21
updated plz use expect(foo.setBar).toHaveBeenCalled() – Jayant Patil Mar 17 '17 at 10:03
already tried with toHaveBeenCalled() getting Error :-Expected a spy, but got Function. Usage: expect().toHaveBeenCalled() – Ritesh Gore Mar 17 '17 at 10:08

Angular unit test for bootstrap pop-up

2 Answers2