karma/jasmine/angular - 使用templateUrl的故障单元测试指令AngularJS

指令的模板未加载。karma/jasmine/angular - 使用templateUrl的故障单元测试指令AngularJS

现在我越来越：

$ karma start test/config/karma.config.js 
INFO [karma]: Karma v0.10.10 server started at http://localhost:9876/ 
INFO [launcher]: Starting browser Chrome 
INFO [Chrome 35.0.1916 (Mac OS X 10.9.4)]: Connected on socket PC84tuDRk52x9Cq4G_xp 
Chrome 35.0.1916 (Mac OS X 10.9.4) Directive pagination test has the number of the page as text in each page item FAILED 
    Error: Unexpected request: GET static/src/partials/pagination.tpl.html

我想单元测试一个简单的指令。在directives.js中声明的指令。

angular.module('app.directives', []) 
.directive('pagination', function() { 
    return { 
     restrict: "E", 
     scope: { 
      numPages: "=", 
      currentPage: "=" 
     }, 
     templateUrl: 'static/src/partials/pagination.tpl.html', 
     replace: true, 
     link: function(scope) { 
      // ... 
     } 
    }; 
}); 
;

目录结构：

static 
├── Gruntfile.js 
├── bower.json 
├── node_modules 
├── package.json 
├── src 
│   ├── app.js 
│   ├── controllers.js 
│   ├── directives.js 
│   ├── partials 
│   │   ├── add.tpl.html 
│   │   ├── edit.tpl.html 
│   │   ├── list.tpl.html 
│   │   ├── pagination.tpl.html 
│   │   ├── secpage.tpl.html 
│   │   └── toolbar.tpl.html 
│   └── services.js 
├── test 
│   ├── config 
│   │   └── karma.config.js 
│   └── unit 
│    ├── button-directive.test.js 
│    ├── pagination-directive.test.js 
│    └── t1.test.js 
└── vendor

测试文件分页，directive.test.js

describe('Directive pagination test', function() { 

    var $rootScope, 
     $compile, 
     element, 
     lis; 

    beforeEach(angular.mock.module('app.directives')); 
    beforeEach(angular.mock.module('templates')); 
    beforeEach(inject(function (_$rootScope_, _$compile_) { 
     $rootScope = _$rootScope_; 
     $compile = _$compile_; 

     $rootScope.numPages = 5; 
     $rootScope.currentPage = 3; 

     element = $compile('<pagination num-pages="numPages" current-page="currentPage"></pagination>')($rootScope); 
     $rootScope.$digest(); 

     lis = function() {return element.find('li');}; 
    })); 
    it('has the number of the page as text in each page item', function() { 
     for (var i=1; i<=$rootScope.numPages; i++) { 
      expect(lis().eq(i).text()).toEqual(''+i); 
     } 
    }); 
});

和因果报应的配置：

module.exports = function(config) { 
    config.set({ 
    basePath: '', 

    frameworks: ['jasmine'], 

    files: [ 
     '../../vendor/angular/angular.js', 
     '../../vendor/angular-mocks/angular-mocks.js', 
     '../../vendor/angular-cookies/angular-cookies.js', 
     '../../vendor/angular-route/angular-route.js', 
     '../../vendor/angular-resource/angular-resource.js', 

     '../../src/*.js', 
     '../../src/partials/*.html', 

     '../unit/*.test.js', 
    ], 

    exclude: [], 

    preprocessors: { 
     "../../src/**/*.html": "ng-html2js" 
    }, 

    ngHtml2JsPreprocessor: { 
     stripPrefix: "../../", 
     prependPrefix: "static/", 
     moduleName: "templates" 
    }, 

    reporters: ['progress'], 
    port: 9876, 
    colors: true, 
    logLevel: config.LOG_INFO, 
    autoWatch: true, 
    browsers: ['Chrome'], 
    singleRun: false 
    }); 
};

请帮助我。

的源代码： https://github.com/Istergul/directive_test

来源

2014-07-15 user2020891

你能提供在GitHub代码的样本变化？需要很长时间来重新创建项目结构。从我身边 - 我也遇到了** ng-html2js **和简单的** html2js **问题。 –

@ krzysztof-safjanowski我把源代码放在这里https://github.com/Istergul/directive_test – user2020891

小拉请求正在等着你。 –

巨大的配置，比./static/node_modules/karma/bin/karma start static/test/config/karma.config.js

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-mocks/angular-mocks.js', 
     './vendor/angular-cookies/angular-cookies.js', 
     './vendor/angular-route/angular-route.js', 
     './vendor/angular-resource/angular-resource.js', 
     './src/*.js', 
     './src/partials/*.html', 
     './test/unit/*.test.js', 
    ], 

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

    ngHtml2JsPreprocessor: { 
     moduleName: "templates" 
    } 
    }); 
};

，由于某种原因NG-html2js无法理解interpolateProvide提供商

.config(["$interpolateProvider", function($interpolateProvider){ 
    $interpolateProvider.startSymbol('[['); 
    $interpolateProvider.endSymbol(']]'); 
}])

来源

2014-07-15 13:12:50

谢谢！你帮了我很多。 – user2020891

试试这个：静态文件夹下

移动karma.config.js。

static 
├── karma.config.js

karma.config.js

files: [ 
    'vendor/angular/angular.js', 
    'vendor/angular-mocks/angular-mocks.js', 
    'vendor/angular-cookies/angular-cookies.js', 
    'vendor/angular-route/angular-route.js', 
    'vendor/angular-resource/angular-resource.js', 

    'src/*.js', 
    'src/partials/*.html', 

    'test/unit/*.test.js', 
], 

preprocessors: { 
    "src/**/*.html": "ng-html2js" 
}, 

ngHtml2JsPreprocessor: { 
    stripPrefix: "src/", 
    moduleName: "templates" 
},

指令

templateUrl: 'partials/pagination.tpl.html',

希望这有助于。

来源

2014-07-15 12:59:15 soomong

karma/jasmine/angular - 使用templateUrl的故障单元测试指令AngularJS

回答

相关问题