0

版本

角度：1.5.0

警报-js：1.6.1

我想在 Angular 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 () {

        });
    });
});

因为alertify，我崩溃了。我们按照我们称为的文档的默认用法创建了一个新对话框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');
                }
            }

我能做些什么来防止遇到这个错误？我没有找到从 alertify 中删除自定义对话框的方法，我可以放入afterEach(). 有没有办法重新创建 alertify.js 来防止这种情况？

4

1 回答 1

0

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

(function (app) {
    'use strict';

    app.run(function () {
        if (!alertify.auxConfirm) {
            alertify.dialog('auxConfirm', function () {
                // [...]
            });
        }
    });
})(angular.module('app.component'));
于 2016-12-29T15:14:21.207 回答