Question

我想测试我的html标签（text，div，span等...）我正在使用angularjs，带有茉莉花框架的业力。

这是我的业力档案，这里包括 ng-html2js 预处理。

    // Karma configuration
    // Generated on Tue Jan 26 2016 21:38:16 GMT+0530 (India Standard Time)

    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: [

    '../app/js/base.js',
    '../global_URL.js',
     '../app/**/*.html',        
    'bower_components/angular-mocks/angular-mocks.js',
    '../app/js/app.js',
    'test/spec/**/*.js',
    '../app/**/*.json'

    ],

    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
        '../app/**/*.html': ['ng-html2js']
    },

     ngHtml2JsPreprocessor: {
        moduleName: 'templates'
     },


    // 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: false,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],
    plugins: [
                'karma-chrome-launcher',
                'karma-firefox-launcher',
                'karma-jasmine',
                'karma-phantomjs-launcher',
                'karma-ng-html2js-preprocessor'
            ],


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

为了获取html页面我正在使用httpBackend，我的测试文件是这样的。

    'use strict';

    describe('Login Controller', function () {

      // load the controller's module
      var MainCtrl,

            httpBackend,
            templateHtml
            formElem,
            form,
            scope;

      beforeEach(module('test'));
      beforeEach(module('templates'));
      beforeEach(module('ngMockE2E'));
      //beforeEach(module('sample',['ngMock']));


      // Initialize the controller and a mock scope
      beforeEach(inject(function ($rootScope, $controller,$compile,$httpBackend,$templateCache) {
        scope = $rootScope.$new();
        httpBackend = $httpBackend
        MainCtrl = $controller('TestController', {
          $scope: scope,             
        });

        templateHtml = httpBackend.expectGET('app/admin/login.html').respond([]);
        console.log(templateHtml)
        formElem = angular.element("<div>test</div>")
        $compile(formElem)(scope)
        form = scope.form

        scope.$apply()
      }));          

        it('should not allow an invalid `width`', function() {
          expect(form).toBeDefined();
        });

    });

这里我在控制台中打印我的html页面，但是它写成了undefined。

如何在业力中注入我的html页面以及如何测试html标签。

请提前帮助我。

Answer 1

预加载html我们使用以下karma.conf.js ...

'use strict';

module.exports = function (config) {
 config.set({
basePath: './',
browsers: ['PhantomJS'],
frameworks: ['jasmine'],
reporters: ['mocha', 'coverage'],
singleRun: true,
preprocessors: {
  'src/**/!(*spec)*.js': ['coverage'],
  'dest/**/*.html': ['ng-html2js']
},
ngHtml2JsPreprocessor: {
  stripPrefix: 'dest/',
  moduleName: 'ngHtmlFiles'
},
coverageReporter: {
  type: 'html',
  dir: 'coverage'
},
files: [
  'dest/vendor.min.js',
  'bower_components/angular-mocks/angular-mocks.js',
  'src/**/*.js',
  'dest/**/*.html'
]
  });
};

然后在每次测试中......

 beforeEach(module('ngHtmlFiles'));

这将预加载HTML。

但是，我们这样做是出于完全不同的原因，即在发出HTML文件请求时阻止httpBackend失败。

我个人会使用量角器E2E测试来测试UI。我认为单元测试应该仅限于测试控制器/服务代码。

如何在业力测试中测试html标签

1 个答案: