当前位置: 首页 > 后端技术 > Node.js

前端单元测试与自动化构建简介

时间:2023-04-03 19:49:58 Node.js

写在开头。本文涉及的知识点会比较广泛,所以每个知识点都不会很深。有针对性的资料和demo,需要读者查漏补缺。最好的学习方法是自己动手。希望这篇文章能帮到你。涉及的知识Nodeassertmochashould.jskarmaTravisCI先了解两个知识点TDD测试驱动开发是敏捷开发中的核心实践和技术,也是一种设计方法论。在开发项目之前,先编写单元测试用例。其基本思想是通过测试用例来推动整个项目的发展,但又不仅仅是简单的测试工作。我们在整个项目的需求分析、设计和质量控制中仍然可以灵活运用。BDD行为驱动其实是测试驱动开发的扩展,关注你想要实现的业务行为。核心是设计,引导整个团队更好的前进。自己看一下Nodeassert的API,掌握一些常用的,比如assert.strictEqual、assert.fail、assert.throws。简单来说,mochamocha是一个可以运行在浏览器和Node环境中的测试框架工具。mocha官网文档写的真好,读起来太蛋疼了,可能作者就喜欢这种流式写法吧。我们先看一个简单的例子。代码的运行环境需要node,需要全局安装mocha。具体代码可以看我github中的exercise1varassert=require('assert')describe('#indexOf()',function(){it('shouldreturn-1whenthevalueisnotpresent',function(){assert.equal(-1,[1,2,3].indexOf(4))})})以上是测试用例之一,可以独立执行,先引入一个断言库asset,有许多断言库,例如,chai;基本的写法是一个describe块至少包含一个it块。describe块称为“测试套件”,代表一组单元测试。第一个参数用于编写描述用例的函数和结果,第二个参数是实际执行的函数。it块被称为“测试用例”(testcase),它代表单个测试。第一个参数是测试用例的名称,第二个参数是实际执行的函数。mocha的基本用法是在控制台通过如下语法运行脚本mochatest/test.js,你会得到如下结果:mocha命令后面可以跟多个测试脚本的路径mochaurl1url2url3mochaalso有自己的生命周期,看名字基本就明白了。describe('hooks',function(){before(function(){//所有测试用例的统一前动作});after(function(){//所有测试用例的统一后动作});beforeEach(function(){//每个测试用例的前动作});afterEach(function(){//每个测试用例的后动作});});还有很多其他的方法,详见阮大神的mocha教程,比较通俗易懂。当然官网文档是最全的。should.js简而言之,should.js中有很多API。我没有用过它们。我通常使用的最好的只有几个。这种链式写法有中JQ的感觉吗?写的如云流水,是那样的惬意。环境运行最常见的就是明明安装了should模块,却报错说找不到模块'should',如下图。心中有一万匹草泥马奔跑,鲁骂,你瞎了吗?..哈哈。小子别不耐烦,所谓代码虐我千百遍,我对待代码就像对待初恋一样。找不到should模块是有原因的。一般尽量降低版本。毕竟国外很多都是用linux的,windows的支持没那么快。或者换个淘宝镜像在npm上重新下载。也许它会成功。工程示例在这里,部分代码如下所示varshould=require('should');varadd=require('../lib/add');describe('添加大数相加方法',function(){it('字符串“42329”加上字符串“21532”等于“63861”',function(){add('9987','987').should.equal('10974')})it('"843529812342341234"Add"236124361425345435"isequalto"1079654173767686669"',function(){add('843529812342341234','236124361425345435').should.equal('1079654173676}')7686,Therearequitealot涉及到的知识点,认真解题会有很多收获,至于知识点,就靠你自己去发现了,最后一关之后,如下图所示:什么是业力?业力是GoogleAngular团队的开源产品,主要目的是为开发者提供一个高效的测试环境,就像一个脚手架,只需要搭建简单的配置,然后编写测试代码就可以得到想要的结果。它是提高团队生产力和创造力的强大工具。安装步骤//选择全局安装karma-clinpminstall-gkarma-cli//然后在你的项目中安装karmanpmikarma-D//安装一些插件npminpminstallkarma-jasminekarma-chrome-launcherjasmine-core--save-dev接下来,初始化业力。在上述项目的根目录下,使用如下命令karmainit选择配置项如下:1.你想使用哪个测试框架?(摩卡咖啡)2。你想使用Require.js吗?(否)3。你想自动捕获任何浏览器吗?(铬)4。您的源文件和测试文件的位置是什么?(https://cdn.bootcss.com/jquery/2.2.4/jquery.js,node_modules/should/should.js,test/**.js)5.是否应排除先前模式中包含的任何文件?()6.您想让Karma监视所有文件并在更改时运行测试吗?(yes)经过最后一步,项目根目录下会出现一个karma.conf.js配置文件。让我们来看看一些比较重要的配置项。框架依赖的测试工具,我这里使用的是mocha,你也可以使用默认的jasmine.files项目中文件的本地地址,以数组的形式展开,也可以是服务器地址,配置里面会全部在js中通过脚本从浏览器加载表单。在页面底部。浏览器依赖的浏览器环境一般填Chrome,我的Chrome浏览器需要填Chrome_travis_ci。并安装karma-chrome-launcher插件。singleRun默认为false。如果为真,运行karmastart只会对测试用例进行一次测试,然后返回结果并退出。autoWatch默认为true,实时监控文件修改,有修改就重新加载测试用例,有点像热加载。通过以下命令运行整个项目karmastart,你会发现浏览器自动打开了一个如下图所示的页面,然后点击DEBUG按钮跳转到另一个页面,然后打开控制台,你会看到一个配置加载好的页面,这时候你会很惊讶karma的设计思路是这样的。项目地址,如果运行成功,会出现如下结果。TravisCI的作用是什么。我们先了解什么是持续集成。通俗地说,我们每天都要向老板汇报一天的工作情况,同时还要进行反思和总结。从专业上讲,代码每天都集成到主干中。优点1.快速发现错误。可以说当天就解决了问题,没有留下任何隐患。2、由于频繁的整合,分支不会偏离主干太大。如果想详细解释,可以参考阮大神的文章。TravisCI是一个集成GitHub的持续集成工具,可以自动化构建和测试操作,并且对公共仓库免费,对开源项目大有裨益。通过健康的发展,我们可以轻松高效地维护开源项目。要使用如此强大的功能,第一步就是配置文件,在我们项目的根目录下创建一个.travis.yml文件。该文件包含TravisCI需要使用的配置和指令。比如项目中常用的几个配置。详情请自行查看//编程语言语言所需环境:node_jsnode_js:-"10"-"8"//执行脚本脚本:node_modules/karma/bin/karmastartkarma.conf.js--single-run//脚本运行前不要安装内容before_install:-exportCHROME_BIN=chromium-browser-exportDISPLAY=:99.0-sh-e/etc/init.d/xvfbstart配置完.travis.yml文件后项目,提交代码到远程github仓库,然后在travis-cli上打开已经和你的github关联的仓库,如下图:页面上的tag按钮是是否开启自动构建。此时打开exercise3项目,点击进入详情。您将看到一个已成功构建的项目。如果要rebuild,也可以点击moreoptions选择tiraggerbuild,如下图:至此,一个简单的项目就认为构建成功了。更多深度学习,敬请持续关注。如果想继续讨论或了解更多知识,欢迎加入QQ或微信讨论:854280588