angularjs unit test

angularjs unit test

使用技术:karma + jasmine

1.安装node npm

2.进入目录,npm init生成package.json

3.安装必要的包karma、karma-jasmine、karma-chrome-launcher、jasmine-core、angular、angular-mocks

    使用命令:npm install -g 包名 --save-dev

    权限不够的情况下加上权限:mac下 sudo npm install -g 包名 --save-dev

4.测试基础函数

    1)在项目中创建js文件test.js、test2.js添加需要测试的函数


    2)创建测试用例


    在测试用例中分别写上测试方法,对在test、test2中的函数进行测试,测试函数返回值和预期结果是否一致。

    3)使用karma init命令生成karma配置文件,过程中可采用回车加载默认配置,生成karma.conf.js文件、内容大概如下,其中files为需要加载的文件

// Karma configuration

// Generated on Thu Jan 09 2020 11:23:53 GMT+0800 (China 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: [

'./node_modules/angular/angular.js',    //1.4.7

        './node_modules/angular-mocks/angular-mocks.js',  //1.4.7        '*.js',

    ],

    // list of files / patterns to exclude

    exclude: [

],

    // preprocess matching files before serving them to the browser

// available preprocessors:https://npmjs.org/browse/keyword/karma-preprocessor

    preprocessors: {

},

    // 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: ['Chrome'],

    // 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)在配置文件修改自己需要的设置,主要修改基本路径(basepath)以及所需加载的文件(files)

    5)开始测试


        输入命令,karma start会自动开启谷歌浏览器

点击debug按钮并打开f12控制台会看到如下结果,代表测试成功。 


        修改测试用例中下列地方:


        重新进行测试会看到如下结果:


        结果表示:test1、test2函数均测试失败

                        test3函数测试成功

5、测试angular中的controller

    新增一个js文件controller.js,写上一个简单的controller


    新增一个js文件jasmineTestCtrl.js如下 


    将文件加入karma的配置当中,karma.conf.js > files


    使用karma start进行测试,测试结果如下:


    结果controller中的$scope.notes.length属性测试成功

                              $scope.name属性测试失败

6.测试项目中的controller,需要配置的东西比较多,暂时会发生一些错误信息,还需要进一步研究。


7.解决在6中碰到的问题

    在karma.conf.js中配置依赖的provider


    clientId这种可以使用下面的方式来配置:


    配置完成后重新测试:结果如下图:


测试成功。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,284评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,115评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,614评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,671评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,699评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,562评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,309评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,223评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,668评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,859评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,981评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,705评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,310评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,904评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,023评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,146评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,933评论 2 355

推荐阅读更多精彩内容