1

问题：我想访问我的模板中的表单，并针对验证、提交等进行测试。我相信我的 Karma/Jasmine 测试设置正确，但我不知道如何访问表单。

测试模块.view.html：

<div id="main">
    <form name="theForm">
        <input id="keywords" type="text" ... ></input>
        <select id="listOfThings" ... ng-options="...for list..."></select>
        <input id="somedate" type="date" ...></input>
    </form>
</div>

指令：

(function(){
    "use strict";

    angular.module('TestModule').directive('testDirective',Directive);
    function Directive(){
        return {
            restrict: 'E',
            controller: 'TestModuleController',
            controllerAs: 'testModuleVm',
            templateUrl: 'testModule/test-module.view.html'
        };
    };

})();

测试： 

describe('Directive Tests',function(){
    var element,$compile,$rootScope;

    beforeEach(module('myTemplates'));

    beforeEach(inject([
        '$compile','$rootScope',
        function($c,$rs){
            $compile = $c;
            $rootScope = $rs;
        }
    ]));

    it('should test an input element',function(){
        element = $compile('<test-directive></test-directive>')($rootScope);
        $rootScope.$digest();
        console.log(element); // Should see your template displayed
    });
});

业力.conf.js：

// Created May 04, 2016
module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
      'vendor/angular/angular.js',
        'vendor/angular/angular-mocks.js', 
        'test-module/test-module.view.html',
        'test-module/test-module.module.js',
        'test-module/test-module.controller.js',
        'test-module/test-module.directive.js',
        'test/test-module-tests.js',
    ],


    // list of files to exclude
    exclude: [
      'vendor/bootstrap*',
      'vendor/jquery*',
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-    preprocessor
    preprocessors: {
        // karma-ng-html2js-preprocessor for templates in directives
        'testModule/test-module.view.html': ['ng-html2js']
    },

    ngHtml2JsPreprocessor: {
        moduleName: 'myTemplates'
    },

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR ||     config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}
4

1 回答 1

2

经过大量的学习和挫折，对于那些像我一样从头开始使用 Karma 的人，没有本地支持，请随意将其用作模板。设置指令测试的方法有很多，但我终于得到了这种方法，并且我可以阅读它。

首先，很遗憾，我在 karma.conf.js 中丢失了我的指令文件。

其次，HTML 模板的预处理（karma.conf 中的预处理器、karma.conf 中的 ngHtml2JsPreprocessor 和 karma-ng-html2js-preprocessor npm 模块）并将它们存储到模块中将有助于您的测试。就我而言，我有大约 20 个模块，每个模块都有一个模板/指令。因此，将它们放入一个大模板模块并为这种类型的每个测试加载它是很方便的。

最后，我仍然不知道如何针对表单验证进行测试，这引发了这个问题，但我离完成这项工作还有很多。

于 2016-06-10T15:51:57.170 回答