angularjs requirejs unit test
angularjs requirejs unit test
一、安装notejs
传送门https://nodejs.org/en/download/
最好默认路径安装,选上添加环境变量 和npm安装
二、全局安装bower
npm install -g bower
三、添加配置文件
1. package.json (nodejs的库)
可以通过npm init来创建,也可以手动添加如下的依赖库
{ "name": "workflow", "version": "1.0.0", "description": "suibian", "main": "karma.conf.js", "dependencies": {}, "devDependencies": { "bower": "^1.8.0", "http-server": "^0.9.0", "jasmine-core": "^2.3.0", "karma": "^0.12.31", "karma-chrome-launcher": "^0.1.8", "karma-firefox-launcher": "^0.1.4", "karma-jasmine": "^0.3.5", "karma-junit-reporter": "^0.2.2", "karma-requirejs": "^0.2.2", "protractor": "^1.1.1", "requirejs": "^2.1.15", "shelljs": "^0.2.6" }, "scripts": { "postinstall": "bower install", //npm install完后就会接着执行bower install "prestart": "npm install", "start": "http-server -a localhost -p 8090 -c-1 ", "pretest": "npm install", "test": "karma start karma.conf.js", "test-single-run": "karma start karma.conf.js --single-run", "preupdate-webdriver": "npm install", "update-webdriver": "webdriver-manager update", "preprotractor": "npm run update-webdriver", "protractor": "protractor e2e-tests/protractor.conf.js" }, "author": "", "license": "ISC" }
2. bower.json (web库)
同样的可以通过bower init创建,也可以直接手动添加
{ "name": "workflow", "authors": [ "Purk <737633175@qq.com>" ], "description": "workflow progrem", "main": "", "license": "MIT", "homepage": "", "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ], "dependencies": { "angular-animate": "^1.6.4", "angular-mocks": "^1.6.4", "angular-ui-router": "^1.0.3", "jquery": "^3.2.1", "jquery-ui": "jqueryui#^1.12.1", "angular-slimscroll": "^1.1.5", "angular": "^1.6.4", "jquery-slimscroll": "^1.3.8", "bootstrap": "^3.3.7", "font-awesome": "^4.7.0", "animate.css": "animate-css#^3.5.2" }, "private": true }
四、安装nodejs库和web库
npm install
五、配置karma
karma.conf.js
//jshint strict: false
module.exports = function(config) {
config.set({
basePath: '',
files: [
{ pattern: 'bower_components/angular/angular.js', included: false },
{ pattern: 'bower_components/angular-mocks/angular-mocks.js', included: false },
{ pattern: 'bower_components/jquery/dist/jquery.min.js', included: false },
{ pattern: 'bower_components/jquery-ui/jquery-ui.min.js', included: false },
{ pattern: 'bower_components/jquery-slimscroll/jquery.slimscroll.min.js', included: false },
{ pattern: 'bower_components/angular-slimscroll/angular-slimscroll.js', included: false },
{ pattern: 'bower_components/angular-animate/angular-animate.min.js', included: false },
{ pattern: 'modules/**/*.js', included: false },
{ pattern: 'component/**/*.js', included: false },
{ pattern: 'directive/*.js', included: false },
{ pattern: 'filter/**/*.js', included: false },
{ pattern: 'js/!(require.config).js', included: false },
// needs to be last http://karma-runner.github.io/0.12/plus/requirejs.html
'js/require.config.js'
],
autoWatch: true,
frameworks: ['jasmine', 'requirejs'],
browsers: ['Chrome'],
plugins: [
'karma-chrome-launcher',
'karma-firefox-launcher',
'karma-jasmine',
'karma-requirejs',
'karma-junit-reporter'
],
junitReporter: {
outputFile: 'test_out/unit.xml',
suite: 'unit'
}
});
};
六、requirejs配置
(function() { var allTestFiles = []; var TEST_REGEXP = /spec\.js$/i; if (window.__karma__) { var pathToModule = function(path) { return path.replace(/^\/base\//, '').replace(/\.js$/, ''); }; Object.keys(window.__karma__.files).forEach(function(file) { if (TEST_REGEXP.test(file)) { // Normalize paths to RequireJS module names. allTestFiles.push(pathToModule(file)); } }); } function testReady() { var testInternal = setInterval(function() { if (window.__karma__.angularIsReady == true) { window.__karma__.start(); clearInterval(testInternal); } }, 50); } require.config({ baseUrl: window.__karma__ ? '/base/' : '', paths: { jquery: 'bower_components/jquery/dist/jquery.min', jqueryUI: 'bower_components/jquery-ui/jquery-ui.min', ng_slimscroll: 'bower_components/angular-slimscroll/angular-slimscroll', angular: 'bower_components/angular/angular', ng_animate: 'bower_components/angular-animate/angular-animate.min', ng_mock: 'bower_components/angular-mocks/angular-mocks', commonjs: 'modules/commonjs/commonjs', ng_component: 'modules/component/component', ng_directive: 'modules/directive/directive', domReady: 'js/domReady', page_load: 'component/page_load/page_load', header: 'component/header/header', side_bar: 'component/side_bar/side_bar', menu_list: 'component/side_bar/menu_list', content: 'component/content/content', view_intro: 'component/view_intro/view_intro', panel: 'component/panel/panel', d_slide: 'directive/slide', slimscroll: 'bower_components/jquery-slimscroll/jquery.slimscroll.min' }, shim: { 'angular': { exports: 'angular', deps: ['jquery'] }, 'ng_animate': { deps: ['angular'] }, 'ng_mock': { deps: ['angular'], 'exports': 'angular.mock' }, 'jqueryUI': { deps: ['jquery'] }, 'slimscroll': { deps: ['jquery'] } }, priority: [ "angular" ], deps: window.__karma__ ? allTestFiles : ['js/main.js'], callback: window.__karma__ ? testReady : null, //testReady没有直接使用window.__karma__.start(官方的教程)是因为我的项目angularjs+requirejs是异步加载ng的,testReady就是让所有的ng模板compile完后才执行karma的测试,不然后面会报模板找不到的。 urlArgs: "bust=" + (new Date()).getTime() //防止读取缓存,调试用 }) })();
注: 在npm运行服务或者运行test时可能会报
问题是中文字符导致的,修改方式如下
node_modules/connect/lib/patch.js 修改下面框出的代码
下面是直接复制,省去君们的手敲。
try{ if(typeof val === 'string'){ val = val.replace(/中国标准时间/,'') } return setHeader.call(this, field, val); }catch(e){ console.log(e, val,field) }