内容简介:上次谈了用那么,有没有一种方法,使这些流程自动化,自动将测试的结果输出到某个可见的地方(例如:终端)?这次就来尝试完成这个过程。这次我们需要用到:
上次谈了用 chai
和 chai-spies
来进行单元测试,但是这种测试方法存在着一些不方便之处,每次改动代码之后都需要刷新浏览器,打开开发者工具,来查看有没有报错。
那么,有没有一种方法,使这些流程自动化,自动将测试的结果输出到某个可见的地方(例如:终端)?这次就来尝试完成这个过程。
用到的工具
这次我们需要用到:
- Karma:卡玛是一个测试运行器,它可以呼起浏览器,加载测试脚本,然后运行测试用例。
- Mocha:摩卡是一个单元测试框架/库,它可以用来写测试用例。
- Sinon:西农是一个 spy / stub / mock 库,用以辅助测试。
安装
执行下面的命令安装工具。别一个一个地看包名了,全都安装就完事了。 npm i -D karma karma-chrome-launcher karma-mocha karma-sinon-chai mocha sinon sinon-chai karma-chai karma-chai-spies
配置 Karma
新建一个 karma.conf.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: ['mocha', 'sinon-chai'], client: { chai: { includeStack: true } }, // list of files / patterns to load in the browser files: ['dist/**/*.test.js', 'dist/**/*.test.css'], // 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: ['ChromeHeadless'], // 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 }); }; 复制代码
重写测试用例
新建一个 test 文件夹,并在里面建立一个 button.test.js
的文件,接下来将在这个文件里面重写测试用例。
const expect = chai.expect; import Vue from 'vue'; import Button from '../src/button'; Vue.config.productionTip = false; Vue.config.devtools = false; describe('Button', () => { it('存在.', () => { expect(Button).to.be.ok; }); it('可以接受 color 作为类名', () => { const div = document.createElement('div'); document.body.appendChild(div); const Constructor = Vue.extend(Button); const vm = new Constructor({ propsData: { color: 'red' } }).$mount(div); const element = vm.$el; //我断言这个生成的 button 有一个类名叫 'red' 为真 expect(element.classList.contains('red')).to.eq(true); vm.$el.remove(); vm.$destroy(); }); it('点击 button 触发 click 事件', () => { const Constructor = Vue.extend(Button); const vm = new Constructor({ propsData: { color: 'red' } }).$mount(); //间谍函数 const callback = sinon.fake(); vm.$on('click', callback); vm.$el.click(); expect(callback).to.have.been.called; }); }); 复制代码
和之前的测试用例类似,就稍微改变了结构。
创建测试脚本
为了方便启动,我们将启动命令写到 package.json
里面。
"scripts": { "dev-test": "parcel watch test/* --no-cache & karma start", "test": "parcel build test/* --no-minify && karma start --single-run" } 复制代码
谈谈两个命令中的两个参数的意义。
parcel <slot></slot>
使用
运行一次查看结果
如果只想看看测试用例的结果就运行下面的命令。 npm run test
从图中的运行结果可以看出,在输入这个命令之后,会进行组件打包、读取测试用例文件、开启服务器、启动浏览器、运行测试用例等等一系列操作,最后将运行结果输出。图中显示一共有3个测试,通过了3个,也就是测试用例全部通过。
监测测试结果
如果想随时地监测测试用例文件的运行结果就用这个命令。 npm run dec-test
它启动之后,会先输入当前测试用例的运行结果,然后进行监测,当测试用例文件发送变化时,它就会再一次的运行并输入结果。
我们尝试将测试颜色作为类名的测试改一下。
it('可以接受 color 作为类名', () => { const div = document.createElement('div'); document.body.appendChild(div); const Constructor = Vue.extend(Button); const vm = new Constructor({ propsData: { color: 'black' } }).$mount(div); const element = vm.$el; //我断言这个生成的 button 有一个类名叫 'red' 为真 expect(element.classList.contains('red')).to.eq(true); vm.$el.remove(); vm.$destroy(); }); 复制代码
来看看终端有什么变化。
这里我们看到又运行了一次测试用例,显示有一个测试失败了,也就是我们刚刚改的那一个。
我们可以利用这个功能,来协助我们来写测试用例。
如何更自动化?
虽然我们现在能够在本地开启监听服务,随时检查测试用例的通过情况,但是还是要手动地开启服务。
那么,有没有一种办法,在云端自动进行测试呢?下次来讲讲将代码上传至 Github 后,利用云服务自动测试代码,并将结果通知给我们。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Vue 应用单元测试的策略与实践 02 - 单元测试基础
- Vue 应用单元测试的策略与实践 04 - Vuex 单元测试
- Vue 应用单元测试的策略与实践 03 - Vue 组件单元测试
- Angular单元测试系列-Component、Directive、Pipe 以及Service单元测试
- 单元测试,只是测试吗?
- 单元测试和集成测试业务
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Design systems
Not all design systems are equally effective. Some can generate coherent user experiences, others produce confusing patchwork designs. Some inspire teams to contribute to them, others are neglected. S......一起来看看 《Design systems》 这本书的介绍吧!