Karma Angular 1.5 Error: alertify.dialog: name already exists when running a least two tests

Question

Versions

angular: 1.5.0

alertify-js: 1.6.1

I would like to implement unit tests on an Angular 1.5 component.

I created my karma.conf.js, importing my dependencies :

//jshint strict: false
module.exports = function(config) {
    config.set({

        basePath: './',

        files: [
            'app/bower_components/jquery/dist/jquery.js',
            'app/bower_components/angular/angular.js',
            'app/bower_components/angular-ui-router/release/angular-ui-router.js',
            'app/bower_components/angular-mocks/angular-mocks.js',
            'app/bower_components/kendo-ui/src/js/kendo.ui.core.js',
            'app/bower_components/kendo-ui/src/js/kendo.angular.js',
            'app/bower_components/kendo-ui/src/js/cultures/kendo.culture.fr-FR.js',
            'app/bower_components/alertify-js/build/alertify.js',
            'app/bower_components/angular-resource/angular-resource.js',
            'app/bower_components/ui-leaflet/dist/ui-leaflet.js',
            'app/bower_components/angular-simple-logger/dist/angular-simple-logger.js',
            'app/bower_components/lodash/lodash.js',
            'app/bower_components/moment/moment.js',
            'app/bower_components/moment/locale/fr.js',
            'app/modules/app.js',
            'app/modules/**/*.md.js',
            'app/modules/**/*.js',
            'test/**/*.js'
        ],

        autoWatch: false,

        frameworks: ['jasmine'],

        browsers: ['Chrome'],

        plugins: [
            'karma-chrome-launcher',
            'karma-firefox-launcher',
            'karma-jasmine',
            'karma-junit-reporter'
        ],

        singleRun: true,

        reporters: ['dots', 'junit'],

        junitReporter: {
            outputFile: 'test-results.xml'
        }

    });
}; 

Here is a minimal working exemple of a test case that will reproduce the error file. It just needs to have two tests :

'use strict';

describe('Component: sales', function () {
    var $componentController;
    var $scope;

    beforeEach(module('app.sales'));
    beforeEach(inject(function (_$componentController_, $rootScope, _TownshipService_, $q) {
        $scope = $rootScope.$new();
        $componentController = _$componentController_('sales', {$scope: $scope, TownshipService: _TownshipService_});
    }));

    describe('controller', function () {

        it('should be defined', function () {
            expect($componentController).toBeDefined();
        });

        it('should not crash', function () {

        });
    });
});

I'm crashing because of alertify. We created a new dialog following the default usage of the documentation which we called auxConfirm.

(function (app) {
    'use strict';

    app.run(function () {
        alertify.dialog('auxConfirm', function () {
            // [...]
        });
    });
})(angular.module('app.component'));

We get the following error message :

Chrome 55.0.2883 (Mac OS X 10.12.2) Component: sales controller  FAILED
    Error: alertify.dialog: name already exists
    at Object.dialog ([project_folder]/ui/app/bower_components/alertify-js/build/alertify.js:2885:27)
        at [project_folder]/ui/app/modules/common/component/ThreeButtonsConfirm.js:5:18
        at Object.invoke ([project_folder]/ui/app/bower_components/angular/angular.js:4604:19)
        at [project_folder]/ui/app/bower_components/angular/angular.js:4412:62
        at forEach ([project_folder]/ui/app/bower_components/angular/angular.js:321:20)
        at Object.createInjector [as injector] ([project_folder]/ui/app/bower_components/angular/angular.js:4412:3)
        at Object.workFn ([project_folder]/ui/app/bower_components/angular-mocks/angular-mocks.js:2799:52)
Chrome 55.0.2883 (Mac OS X 10.12.2): Executed 2 of 2 (1 FAILED) (0.073 secs / 0.058 secs)

By looking into alertify source code, when it try to inject a new custom dialog, we check the name of the custom dialog and throw an exception if it already exists :

            /**
             * Dialogs factory 
             *
             * @param {string}      Dialog name.
             * @param {Function}    A Dialog factory function.
             * @param {Boolean}     Indicates whether to create a singleton or transient dialog.
             * @param {String}      The name of the base type to inherit from.
             */
            dialog: function (name, Factory, transient, base) {

                // get request, create a new instance and return it.
                if (typeof Factory !== 'function') {
                    return get_dialog(name);
                }

                if (this.hasOwnProperty(name)) {
                    throw new Error('alertify.dialog: name already exists');
                }
            }

What can I do to prevent encoutering this error ? I did not find a way to remove a custom dialog from alertify that I could put in an afterEach(). Is there a way to recreate alertify.js to prevent this ?

Answer 1

The solution came in the auxConfirm declaration file. Adding a conditional statement before the alertify.dialog() solved the problem.

(function (app) {
    'use strict';

    app.run(function () {
        if (!alertify.auxConfirm) {
            alertify.dialog('auxConfirm', function () {
                // [...]
            });
        }
    });
})(angular.module('app.component'));