Unit test $mdDialog angular material

Question

I called one $mdDialog inside a function. I want to unit-test $mdDialog ok and cancel cases.

The below is my controller code (app.controller.js).

 (function () {
    'use strict';

    app.controller('AppCtrl', AppCtrl);

    AppCtrl.$inject = ['$scope', '$mdDialog'];

    function AppCtrl($scope, $mdDialog) {

        $scope.saveEntry = function (ev) {
            var confirm = $mdDialog.prompt()
                .title('Save Entry')
                .textContent('If you want, you can add a description to explain what you changed.')
                .placeholder('Version Description')
                .ariaLabel('Version Description')
                .initialValue('')
                .targetEvent(ev)
                .ok('Save')
                .cancel('Cancel');

            $mdDialog.show(confirm).then(function (result) {
                $scope.status = true;
            }, function () {
                $scope.status = false;
            });
        };
    }

})();

The following is the spec code (app.controller.spec.js) :

describe('Unit test AppController: mdDialog', function () {
    var $controller, $mdDialog;
    beforeEach(function () {
        module('App');
        inject(function (_$controller_, _$mdDialog_) {
            $controller = _$controller_;
            $mdDialog = _$mdDialog_;
        });
    });

    it(': Opened', function () {
        var $scope = {};
        var controller = $controller('AppCtrl', { $scope: $scope });

        var $mdDialogOpened = false;
        $mdDialog.show = jasmine.createSpy().and.callFake(function () {
            $mdDialogOpened = true;
        });

        $scope.saveEntry();
        $scope.$digest();

        expect($mdDialog.show).toHaveBeenCalled;
        expect($mdDialogOpened).toBe.true;
    });
});

when I running the above code I'm getting the following error: TypeError: Cannot read property 'then' of undefined

I referred this GitHub issue https://github.com/angular/material/issues/1482. But I'm not getting solution for my problem

Thanks in advance

Answer 1

The problem is that you are injecting one version of $mdDialog, and trying to test on another one.
You could try something like this:

describe('Unit test AppController: mdDialog', function () {
    var ctrl, mdDialog, scope;

    beforeEach(function () {
        module('App');
        inject(function ($rootScope, $controller, $mdDialog) {
        scope = $rootScope.$new();
        mdDialog = $mdDialog; //keep the reference, for later testing.

        spyOn(mdDialog, 'show');
        mdDialog.show.and.callFake(function () {
        return {
            then: function (callBack) {
                        callBack(true); //return the value to be assigned.
                    }
        }
        });     

        ctrl = $controller('AppCtrl',{$scope:scope, $mdDialog:mdDialog}); //Inject the dependency

        });
    });

    it(': Opened', function () {
        scope.saveEntry(); //exercise the method.
        scope.$digest();

        expect(mdDialog.show).toHaveBeenCalled();
        expect(scope.status).toBe(true);
    });
});

Something very similar should work.
hope this help.