美文网首页
初识前端测试1

初识前端测试1

作者: 前端开发小匠 | 来源:发表于2018-06-01 23:13 被阅读0次

    最近新加入的个学习小组,小组学习却是先从前端的JavaScript测试开始(我对前端测试感觉是个盲区)。最近也做了几个小练习,算是慢慢了解、学习有关前端测试的东西吧。下面谈谈我对测试的理解吧

    image.png

    什么是测试

    为检测特定的目标是否符合标准而采用专用的工具或者方法进行验证,并最终得出特定的结果。

    这里的特定目标就是指我们写的代码了,而工具呢就是我们需要用到的测试框架(库)、测试用例等。检测处的结果就是展示测试是否通过或者给出测试报告,这样才能方便问题的排查和后期的修正。

    测试的意义

    一个标准完整的项目,测试是非常有必要的。很多时候我们只是完成了项目而忽略了项目测试的部分,测试的意义主要在于下面几点:

    1. JavaScript 是动态语言,缺少类型检查,编译期间无法定位到错误; JavaScript 宿主的兼容性问题, 比如 DOM 操作在不同浏览器上的表现。
    2. TDD 被证明是有效的软件编写原则,它能覆盖更多的功能接口。
    3. 快速反馈你的功能输出,验证你的想法
    4. 保证代码重构的安全性,没有一成不变的代码,测试用例能给你多变的代码结构一个定心丸。
    5. 测试用例其实可以看成代码 API 使用文档,而且还是定时更新的,对 API 的使用者有很大的帮助
    6. 易于测试的代码,说明是一个好的设计。做单元测试之前,肯定要实例化一个东西,假如这个东西有很多依赖的话,这个测试构7. 造过程将会非常耗时,会影响你的测试效率,怎么办呢?要依赖分离,一个类尽量保证功能单一,比如视图与功能分离,这样的话,你的代码也便于维护和理解。

    前端开发如何实现测试

    前端测试主要还是基于NodeJS来实现,而现在也出现了一些测试框架。因此可以通过一些前端测试框架来实现,比如 mochamocha是JavaScript的一种单元测试框架。

    当你确定选择测试框架之后,就需要熟悉这个框架的所提供的API。接下来就需要根据待检测的代码写相关的测试代码的。完成测试代码就可以用写好的测试代码来测试目标代码了。

    下面通过mocha进行前端测试的步骤:

    npm install mocha -g
    

    当然也可以在不在全局安装,只安局部安装在项目中

    npm install mocha --save
    
    • 创建一个测试文件 test.js
    var assert = require('assert')
    
    describe('Array', function() {
      describe('#indexOf()', function() {
        it('should return -1 when the value is not present', function() {
          assert.equal(-1, [1, 2, 3].indexOf(-1))
        })
      })
    })
    

    这段文件和简单就是测试 Array 的一个 indexOf() 方法。这里我是用的断言库是 Node 所提供的 Assert 模块里的API。这里断言 -1 等于 数组 [1, 2, 3] 执行 indexOf(-1)后返回的值,如果测试通过则不会报错,如果有误就会报出错误。

    下面我们使用全局安装的 mocha 来运行一下这个文件 mocha test.js
    下面是返回结果

    image.png

    看到结果说明断言成功,代码运行的结果与我的预期相同,测试通过。这也就达到了测试测目的。

    相关文章

      网友评论

          本文标题:初识前端测试1

          本文链接:https://www.haomeiwen.com/subject/edhlsftx.html