Angular-UI/Bootstrap: Experimenting with a controller incorporating a dialog box

Question

Angular-UI/Bootstrap: Experimenting with a controller incorporating a dialog box

Hello there, I have a controller that utilizes a Dialog from the angular-ui/bootstrap framework:

   function ClientFeatureController($dialog, $scope, ClientFeature, Country, FeatureService) {

        //Get list of client features for selected client (that is set in ClientController)
        $scope.clientFeatures = ClientFeature.query({clientId: $scope.selected.client.id}, function () {
            console.log('getting clientfeatures for clientid: ' + $scope.selected.client.id);
            console.log($scope.clientFeatures);
        });

        //Selected ClientFeature
        $scope.selectedClientFeature = {};

        /**
         * Edit selected clientFeature.
         * @param clientFeature
         */
        $scope.editClientFeature = function (clientFeature) {
            //set selectedClientFeature for data binding
            $scope.selectedClientFeature = clientFeature;

            var dialogOpts = {
                templateUrl: 'partials/clients/dialogs/clientfeature-edit.html',
                controller: 'EditClientFeatureController',
                resolve: {selectedClientFeature: function () {
                    return clientFeature;
                } }
            };
            //open dialog box
            $dialog.dialog(dialogOpts).open().then(function (result) {
                if (result) {
                    $scope.selectedClientFeature = result;
                    $scope.selectedClientFeature.$save({clientId: $scope.selectedClientFeature.client.id}, function (data, headers) {
                        console.log('saved.');
                    }, null);
                }
            });
        };
    });

As someone who is relatively new to testing, I believe it's important to test two specific aspects of this controller:

Confirming that a dialog opens when $scope.editClientFeature() is triggered
Ensuring that $save function is successfully called after the dialog closes and returns a 'result'

My current attempt at writing a test script looks like this:

describe('ClientFeatureController', function () {
    var scope, $dialog, provider;

    beforeEach(function () {
            inject(function ($controller, $httpBackend, $rootScope, _$dialog_) {
            scope = $rootScope;
            $dialog = _$dialog_;

            //mock client
            scope.selected = {};
            scope.selected.client = {
                id: 23805
            };

            $httpBackend.whenGET('http://localhost:3001/client/' + scope.selected.client.id + '/clientfeatures').respond(mockClientFeatures);
            $controller('ClientFeatureController', {$scope: scope});
            $httpBackend.flush();
        });
    });


    it('should inject dialog service from angular-ui-bootstrap module', function () {
        expect($dialog).toBeDefined();
        console.log($dialog); //{}
    });

    var dialog;

    var createDialog = function (opts) {
        dialog = $dialog.dialog(opts);
    };

    describe('when editing a clientfeature', function () {
        createDialog({});
        console.log(dialog); //undefined
//        var res;
//        var d;
//        beforeEach(function () {
//            var dialogOpts = {
//                template: '<div>dummy template</div>'
//            };
//            console.log(dialog);
//            d = $dialog.dialog(dialogOpts);
//            d.open();
//        });
//
//        it('should open a dialog when editing a client feature', function () {
//            expect(d.isOpen()).toBe(true);
//        });
    });

});

Currently, I am facing an issue wherein I cannot create or open a dialog. The error message I receive is as follows:

Chrome 25.0 (Mac) ClientFeatureController when editing a clientfeature encountered a declaration exception FAILED
    TypeError: Cannot call method 'dialog' of undefined

If anyone has experience in writing tests for a similar scenario, I would greatly appreciate any guidance or examples as I am feeling quite lost.

Thank you, Shaun

javascript testing angularjs jasmine angular-ui

Answer 1

Answer №1

After facing the same issue, I delved into the GitHub repository and stumbled upon the dialog tests, which served as a helpful starting point for me:

var $dialog,$scope,$httpBackend;
  beforeEach(module('ui.bootstrap.dialog'));
  beforeEach(function(){
    inject(function (_$dialog_, _$httpBackend_, $controller){
      $dialog = _$dialog_;
      $httpBackend = _$httpBackend_;
      $httpBackend.expectGET('/appServer/list')
        .respond([{
            id:1,
            name:'test1'
          },
          {
            id:2,
            name:'test2'
          },
          {
            id:3,
            name:'test3'
          }]);


      //setup controller scope
      scope = {};
      ServerCtrl = $controller('ServerCtrl', {
        $scope: scope,
        $dialog:$dialog
      });
    });
  });

Answer 2

After facing the same issue, I delved into the GitHub repository and stumbled upon the dialog tests, which served as a helpful starting point for me:

var $dialog,$scope,$httpBackend;
  beforeEach(module('ui.bootstrap.dialog'));
  beforeEach(function(){
    inject(function (_$dialog_, _$httpBackend_, $controller){
      $dialog = _$dialog_;
      $httpBackend = _$httpBackend_;
      $httpBackend.expectGET('/appServer/list')
        .respond([{
            id:1,
            name:'test1'
          },
          {
            id:2,
            name:'test2'
          },
          {
            id:3,
            name:'test3'
          }]);


      //setup controller scope
      scope = {};
      ServerCtrl = $controller('ServerCtrl', {
        $scope: scope,
        $dialog:$dialog
      });
    });
  });

Answer 3

Answer №2

My preference lies in utilizing a proper mock. In instances when one is not accessible, I resort to patching the service.

To put this to the test:

$dialog.messageBox(title, msg, btns)
   .open()
   .then(function (result) {
       if (result == 'ok') {
            // This block of code runs when the user clicks OK
       }
});

If you want to patch $dialog, here's how you can do it:

$dialog.messageBox = function (title, msg, btns) {
    return {
        open: function () {
            return {
                 then: function (callback) {
                      callback('ok'); // The parameter result will be set to 'ok'
                 }
             }
        }
    }
 };

Answer 4

My preference lies in utilizing a proper mock. In instances when one is not accessible, I resort to patching the service.

To put this to the test:

$dialog.messageBox(title, msg, btns)
   .open()
   .then(function (result) {
       if (result == 'ok') {
            // This block of code runs when the user clicks OK
       }
});

If you want to patch $dialog, here's how you can do it:

$dialog.messageBox = function (title, msg, btns) {
    return {
        open: function () {
            return {
                 then: function (callback) {
                      callback('ok'); // The parameter result will be set to 'ok'
                 }
             }
        }
    }
 };

Answer 5

Answer №3

In my personal approach, I make sure to test all services thoroughly. In the event that the ui-bootstrap project lacks a $dialog mock, it is recommended to report this issue and request one. Creating a mock service yourself is a simple task.

The mock service should consist of faux methods that simply return promises. Additionally, it should include a function to clear all asynchronous processes in order to facilitate synchronous testing.

Answer 6

In my personal approach, I make sure to test all services thoroughly. In the event that the ui-bootstrap project lacks a $dialog mock, it is recommended to report this issue and request one. Creating a mock service yourself is a simple task.

The mock service should consist of faux methods that simply return promises. Additionally, it should include a function to clear all asynchronous processes in order to facilitate synchronous testing.

Answer 7

Answer №4

When it comes to testing, I prefer creating my own mock dialog for better clarity. Take a look at this example where I simulate selecting "yes" in a dialog.

Code snippet for testing

.controller('AdminListingCtrl', function AdminListingController($scope, $dialog, houseRepository) {
    $scope.houses = houseRepository.query();
    $scope.remove = function (house) {
        var dlg = $dialog.messageBox('Delete house', 'Are you sure?', [
            {label: 'Yep', result: 'yes'},
            {label: 'Nope', result: 'no'}
        ]);
        dlg.open().then(function (result) {
            if (result == 'yes') {
                houseRepository.remove(house.id);
                $scope.houses = houseRepository.query();
            }
        });
    };
}

Testing scenario

    describe('when deleting a house', function () {

        var fakeDialog = {
            open: function()
            {
                return {
                    then: function(callback) {
                        callback("yes");
                    }
                };
            }
        };

        beforeEach(inject(function($dialog) {
            spyOn($dialog, 'messageBox').andReturn(fakeDialog);
        }));

        it('should trigger the remove method in houseRepository', function () {
            scope.remove({id: 99});
            expect(houseRepository.remove).toHaveBeenCalledWith(99);
        });

        // additional tests can be added here
    });

Answer 8

When it comes to testing, I prefer creating my own mock dialog for better clarity. Take a look at this example where I simulate selecting "yes" in a dialog.

Code snippet for testing

.controller('AdminListingCtrl', function AdminListingController($scope, $dialog, houseRepository) {
    $scope.houses = houseRepository.query();
    $scope.remove = function (house) {
        var dlg = $dialog.messageBox('Delete house', 'Are you sure?', [
            {label: 'Yep', result: 'yes'},
            {label: 'Nope', result: 'no'}
        ]);
        dlg.open().then(function (result) {
            if (result == 'yes') {
                houseRepository.remove(house.id);
                $scope.houses = houseRepository.query();
            }
        });
    };
}

Testing scenario

    describe('when deleting a house', function () {

        var fakeDialog = {
            open: function()
            {
                return {
                    then: function(callback) {
                        callback("yes");
                    }
                };
            }
        };

        beforeEach(inject(function($dialog) {
            spyOn($dialog, 'messageBox').andReturn(fakeDialog);
        }));

        it('should trigger the remove method in houseRepository', function () {
            scope.remove({id: 99});
            expect(houseRepository.remove).toHaveBeenCalledWith(99);
        });

        // additional tests can be added here
    });

Angular-UI/Bootstrap: Experimenting with a controller incorporating a dialog box

Answer №1

Answer №2

Answer №3

Answer №4

Code snippet for testing

Testing scenario

Similar questions

Is it possible to select multiple three.js objects by pressing CTRL and clicking on each one

Remove specific data regardless of letter case from the row

Interfacing shared memory between a C++ and JavaScript program

The file selection feature in the browser is malfunctioning when attempting to upload files using either JQuery or JavaScript

In IE the OnFocus and OnBlur style changes are not functioning properly, while they work successfully in Fire Fox

Saving data from a web form into a database using AJAX, JSON, and PHP

Tips for eliminating the trailing slash from the end of a website article's URL

Implementing relationships in microservices with Prisma and NestJS

Unlocking the Secrets of Laravel Blade Integration in a Script File

NVD3 struggling with handling oversized data

Encountering an issue with the combination of SockJS and AngularJS: Error message

Using jQuery to Extract HTML Content from a JSON Object

Could someone please assist me in figuring out the issue with my current three.js code that is preventing it from

The functionality to open the menu by clicking is experiencing issues

JavaScript does not recognize Bootstrap classes

Traversing a multidimensional array with jQuery

Exploring TypeScript and React.js: Navigating the Map Function - Addressing Error ts(7053)

Just because it's easy doesn't mean it will make a difference in the

Develop a PHP component containing an AngularJS routing hyperlink

Users should always receive a notification, whether it be a success message or an