首先要了解什么是karma,karma干嘛用的,它的好朋友jasmine又是啥?这些文章可以帮助你:

  karma干嘛的?

  angular与karma1

  angular与karma2

  看了以上几篇文章之后,我们基本上就可以启动我们最简单的一个karma测试例子了。然后我们还要有webpack对吧:

  karma-webpack插件

  这些都配置好,我们的karma配置文件就成了这个样子:

  1. // Karma configuration
  2. // Generated on Sun Dec 04 2016 19:19:27 GMT+0800 (中国标准时间)
  3. module.exports = function(config) {
  4. config.set({
  5. // base path that will be used to resolve all patterns (eg. files, exclude)
  6. basePath: '',
  7. // frameworks to use
  8. // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
  9. frameworks: ['jasmine'],
  10. // list of files / patterns to load in the browser
  11. files: [
  12. 'test/**/*.js'
  13. ],
  14. // list of files to exclude
  15. exclude: [
  16. ],
  17. // preprocess matching files before serving them to the browser
  18. // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
  19. preprocessors: {
  20. 'test/**/*.js': ['webpack','coverage']
  21. },
  22. // test results reporter to use
  23. // possible values: 'dots', 'progress'
  24. // available reporters: https://npmjs.org/browse/keyword/karma-reporter
  25. reporters: ['progress','coverage'],
  26. // web server port
  27. port: 9876,
  28. // enable / disable colors in the output (reporters and logs)
  29. colors: true,
  30. // level of logging
  31. // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
  32. logLevel: config.LOG_INFO,
  33. // enable / disable watching file and executing tests whenever any file changes
  34. autoWatch: true,
  35. // start these browsers
  36. // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
  37. browsers: ['Chrome'],
  38. // Continuous Integration mode
  39. // if true, Karma captures browsers, runs the tests and exits
  40. singleRun: false,
  41. // Concurrency level
  42. // how many browser should be started simultaneous
  43. concurrency: Infinity,
  44. webpack: {
  45. module: {
  46. debug: true,
  47. module: {
  48. loaders: [
  49. // nothing here yet! We'll add more stuff in Part 2
  50. ]
  51. }
  52. }
  53. },
  54. webpackServer: {
  55. noInfo: true // prevent console spamming when running in Karma!
  56. },
  57. plugins: [
  58. 'karma-chrome-launcher',
  59. 'karma-webpack',
  60. 'karma-jasmine',
  61. 'karma-coverage'
  62. ],
  63. coverageReporter: {
  64. type : 'html',
  65. dir : 'coverage/'
  66. }
  67. })
  68. }

  app.js中的内容

  1. var angular = require('angular');
  2. var mamApp = angular.module("mamApp",[
  3. require('angular-ui-router'),
  4. require('./modules/listsModule.js'),
  5. require('./modules/detailModule.js')
  6. ]);
  7. mamApp.controller('mamAppModuleCtrl', function($scope,$http,$state,$stateParams) {
  8. var listType = $stateParams.listType;
  9. var state = $state.current.name;
  10. $scope.listType = listType;
  11. $scope.menuData = [
  12. {
  13. id:"appManage",
  14. name:"应用管理"
  15. }
  16. ];
  17. });

  test文件夹里写了一个testIndex.js。

  1. var angular = require('angular');
  2. var mocks = require('angular-mocks');
  3. var mamApp = require('../src/js/app.js');
  4. describe("mamApp", function() {
  5. var scope;
  6. beforeEach(angular.mock.module('mamApp'));
  7. beforeEach(angular.mock.inject(function ($rootScope, $controller) {
  8. scope = $rootScope.$new();
  9. $controller('mamAppModuleCtrl', {$scope: scope});
  10. }));
  11. it("menuData", function() {
  12. expect(scope.menuData[0].id==="appManage").toBe(true);
  13. });
  14. it("listType", function() {
  15. scope.listType="white";
  16. expect(scope.listType=="white").toBe(true);
  17. });
  18. });

  然后开跑,cmd里输入:karma start

  ok,没问题,顺利运行。控制台打出两个绿色的success。

  那我现在要测试listsModule这个子模块了,它是app的依赖模块,想当然的代码写成这样:

  新建一个文件:testListModule.js

  1. var angular = require('angular');
  2. var mocks = require('angular-mocks');
  3. var mamApp = require('../src/js/app.js');
  4. describe("listsModuleWhite", function() {
  5. var scope;
  6. beforeEach(angular.mock.module('listsModule'));
  7. beforeEach(angular.mock.inject(function ($rootScope,$http,$state,$stateParams,$controller) {
  8. scope = $rootScope.$new();
  9. $stateParams.listType="white";
  10. $controller('listsModuleCtrl', {$scope: scope,$http:$http,$state:$state,$stateParams:$stateParams});
  11. }));
  12. it("when listType is white scope.listType should be white", function() {
  13. expect(scope.listType==="white").toBe(true);
  14. });
  15. it("when listType is white btnsShow should be false", function() {
  16. expect(scope.btnsShow).toBe(false);
  17. });
  18. it("when listType is white scope.colNames[1].html should be 版本号", function() {
  19. expect(scope.colNames[1].html==="版本号").toBe(true);
  20. });
  21. });

  运行起来报错。。。一个是报多次引用angular的错误,另外总是报找不到的stateprovider,经过错误分析应该改成这样:

  1. describe("listsModuleWhite", function() {
  2. var scope;
  3. beforeEach(angular.mock.module('mamApp'));//注意这行
  4. beforeEach(angular.mock.module('listsModule'));
  5. beforeEach(angular.mock.inject(function ($rootScope,$http,$state,$stateParams,$controller) {
  6. scope = $rootScope.$new();
  7. $stateParams.listType="white";
  8. $controller('listsModuleCtrl', {$scope: scope,$http:$http,$state:$state,$stateParams:$stateParams});
  9. }));
  10. it("when listType is white scope.listType should be white", function() {
  11. expect(scope.listType==="white").toBe(true);
  12. });
  13. it("when listType is white btnsShow should be false", function() {
  14. expect(scope.btnsShow).toBe(false);
  15. });
  16. it("when listType is white scope.colNames[1].html should be 版本号", function() {
  17. expect(scope.colNames[1].html==="版本号").toBe(true);
  18. });
  19. });

  注意这行:

  1. beforeEach(angular.mock.module('mamApp'));

  把它加在子模块的实例化之前。就解决了哪些unknown provider的错误。

  那么好,我们继续写一个文件测试DetailModule,当然是模仿前一个写成这样:

  1. describe("detailModuleWhite", function() {
  2. var scope;
  3. beforeEach(angular.mock.module('mamApp'));
  4. beforeEach(angular.mock.module('detailModule'));
  5. beforeEach(angular.mock.inject(function ($rootScope,$http,$state,$stateParams,$controller) {
  6. scope = $rootScope.$new();
  7. $stateParams.listType="white";
  8. $controller('detailModuleCtrl', {$scope: scope,$http:$http,$state:$state,$stateParams:$stateParams});
  9. }));
  10. it("when listType is white scope.listType should be white", function() {
  11. expect(scope.listType==="white").toBe(true);
  12. });
  13. it("when listType is white params should be ...", function() {
  14. expect(scope.params.deviceNum).toBe(0);
  15. expect(scope.params.backBtnName=="返回白名单列表").toBe(true);
  16. });
  17. });

  然后又报错,说angular undefined。

  仔细分析了一下,各种方法都测了一遍,最后发现是代码执行顺序错误了。Detail这个文件应为名字开头是D,先于Index(开头是I)文件运行了。所以我就把“Index”文件改了个名字叫“1ndex”,这样代码又顺利运行了。

  然后仔细回想了一下,配置文件里,files配置的是一个array,而且是有顺序的。所以我把index文件名改回来,把karma.config.js的内容稍微改一行:

  1. files: [
  2. 'test/index.js','test/modules/**/*.js'
  3. ],

除了index.js,其他要测试的文件都放到modules文件夹内。

  同时为了让coverage分析准确,把index.js的内容改为:

  1. var angular = require('angular');
  2. var mocks = require('angular-mocks');
  3. var mamApp = require('../src/js/app.js');
  1. 实际的测试内容代码,放到一个新建的testMamApp.js文件内,再把这个文件放入modules文件夹内。弄完以后的结构如下:
  1. test:.
  2. Index.js

  3. └─modules
  4. testDetailModule.js
  5. testListModule.js
  6. testMamApp.js
  1. 好了,这样karma就可以陪伴我们一起愉快的开发了。
  2. ![coverage效果](https://img-blog.csdn.net/20161214103626988?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc2lzaWVyZGE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

与karma、angular的第一次亲密接触的更多相关文章

  1. 第四章 跨平台图像显示库——SDL 第一节 与SDL第一次亲密接触

    http://blog.csdn.net/visioncat/article/details/1596576 GCC for Win32 开发环境介绍(5) 第四章 跨平台图像显示库——SDL 第一节 ...

  2. 多线程第一次亲密接触 CreateThread与_beginthreadex本质区别

    本文将带领你与多线程作第一次亲密接触,并深入分析CreateThread与_beginthreadex的本质区别,相信阅读本文后你能轻松的使用多线程并能流畅准确的回答CreateThread与_beg ...

  3. 【阿里云产品公测】与云引擎ACE第一次亲密接触

    阿里云用户:林哥神话 公测当然是第一次了.这个第一次亲密接触,但话又说回来对ACE我一直都不是那感兴趣的,但是看到阿里介绍还是那般神奇,再加上200无代金券来更加给力.最后就申请了这次公测. 平时一直 ...

  4. Linux就是这个范儿之第一次亲密接触(3)

    原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责 1.4 返璞归真的命令行 有一种说法,现代计算机不是靠电力驱动,而是靠“鼠标”.多少应用程序的界面需 ...

  5. 我和Python的第一次亲密接触 - 零基础入门学习Python001

    我和Python的第一次亲密接触 让编程改变世界 Change the world by program 小甲鱼经常说,学习一门编程语言就是要深入其中,要把编程语言想象为你的女朋友你的情人,这样你学习 ...

  6. 第一次亲密接触MSF

    第一次亲密接触MSF Metasploit Framework介绍 Metasploit是一款开源安全漏洞检测工具,附带数百个已知的软件漏洞,并保持频繁更新.被安全社区冠以“可以黑掉整个宇宙”之名的强 ...

  7. [OS] 多线程--第一次亲密接触CreateThread与_beginthreadex本质区别

    转自:http://blog.csdn.net/morewindows/article/details/7421759 本文将带领你与多线程作第一次亲密接触,并深入分析CreateThread与_be ...

  8. Linux认知之旅【01 与Linux第一次亲密接触】!

    一.搜索LINUX,了解它的前世今生! linux很厉害,应用在很多方面,我知道有超算.IOT.树莓派. 而且好多开发人员都在用这个系统.linux作为服务器使用,常年不用重启,不宕机,很少受病毒影响 ...

  9. Linux就是这个范儿之第一次亲密接触(2)

    原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责 1.2 不一样的图形操作 几乎所有Linux的新用户都会认为Linux的图形界面是相当的绚丽又多彩. ...

随机推荐

  1. CSPS模拟 69

    $C_n^0=1$ $C_n^0=1$ $C_n^0=1$ 我怎么又双叒叕犯这种错误了啊 (咳檀) T1 WA0,大神题,不会做! T2 就是要找一个最长区间,满足左端点是区间最小值,右端点是区间最大 ...

  2. CSPS模拟 67

    炸分炸的厉害.(当然这跟b哥定律无关 话说好久没人嘲笑我菜了,快飘的不知道到哪了. 谁能讽我两句我不要面子的. 另外在博客上写些没用的东西好浪费精力啊我又不想当网红 主要是考试的时候心态不稳. 以为T ...

  3. 如何在 Spring/Spring Boot 中做参数校验?你需要了解的都在这里!

    本文为作者原创,如需转载请在文首著名地址,公众号转载请申请开白. springboot-guide : 适合新手入门以及有经验的开发人员查阅的 Spring Boot 教程(业余时间维护中,欢迎一起维 ...

  4. 史上最全 Java 中各种锁的介绍

    更多精彩原创内容请关注:JavaInterview,欢迎 star,支持鼓励以下作者,万分感谢. 锁的分类介绍 乐观锁与悲观锁 锁的一种宏观分类是乐观锁与悲观锁.乐观锁与悲观锁并不是特定的指哪个锁(J ...

  5. 股票交易——单调队列优化DP

    题目描述 思路 蒟蒻还是太弱了,,就想到半个方程就GG了,至于什么单调队列就更想不到了. $f[i][j]$表示第$i天有j$张股票的最大收益. 那么有四种选择: 不买股票:$f[i][j]=max( ...

  6. Intellij IDEA配置JDK、Maven和Tomcat

    一.配置JDK 1.File-->Project Structure 2.选择SDKs 3.点击+号添加自己本地jdk的安装目录,保存即可 二.配置Maven 1.File -> Othe ...

  7. 百度艾尼(ERNIE)常见问题汇总及解答

    一.ERNIE安装配置类问题 Q1:最适合ERNIE2.0的PaddlePaddle版本是?A1:PaddlePaddle版本建议升级到1.5.0及以上版本. Q2:ERNIE可以在哪些系统上使用?A ...

  8. ELK分布式日志+NLog在.NetCore中的应用

    一.ELK简介 ELK是Elasticsearch.Logstash和Kibana首字母的缩写.这三者均是开源软件,这三套开源工具组合起来形成了一套强大的集中式日志管理平台 Elasticsearch ...

  9. 因为 GitHub Actions 我发现了 Jake Wharton 的一个仓库

    本文微信公众号「AndroidTraveler」首发. 背景 昨天(2019-11-14)上去 GitHub 上面一看,结果来了个下面的提示: 点进去一看: 看来是自动化构建相关的. 那就试一下,选了 ...

  10. 基于docker实现redis高可用集群

    基于docker实现redis高可用集群 yls 2019-9-20 简介 基于docker和docker-compose 使用redis集群和sentinel集群,达到redis高可用,为缓存做铺垫 ...