原因角1.5错误: alertify.dialog:名称在运行至少两个测试时已经存在

Question

版本

角度: 1.5.0

警报-js: 1.6.1

我想在一个角度1.5的组件上实现单元测试。

我创建了我的karma.conf.js，导入了我的依赖项：

//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'
        }

    });
}; 

下面是一个将再现错误文件的测试用例的最小工作示例。它只需要做两个测试：

'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 () {

        });
    });
});

我因为警觉而崩溃了。我们按照文档的默认用法创建了一个新对话框。，我们称之为auxConfirm。

(function (app) {
    'use strict';

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

我们得到以下错误消息：

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)

通过查看alertify源代码，当它尝试注入一个新的自定义对话框时，我们检查自定义对话框的名称，如果它已经存在，则抛出异常：

            /**
             * 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');
                }
            }

我能做些什么来防止隐藏这个错误？我没有找到从警报中删除自定义对话框的方法，因为我可以将其放入afterEach()中。是否有办法重新创建alertify.js以防止这种情况发生？

Answer 1

解决方案出现在auxConfirm声明文件中。在alertify.dialog()解决问题之前添加一个条件语句。

(function (app) {
    'use strict';

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