前端测试

Michael_Ding 发布于2019-08-22 18:15 / 670人阅读

摘要：块被称为测试用例，第个参数是实际执行的函数。每当有代码更新的时候，先获取对应的源码，然后一步步根据配置执行，刚涉及到前端测试，以上内容如有错误的地方，请不吝指正。

前端测试

说起前端测试，经常会听到assert，shouldjs，mocha，karma，travis等等，
这些是都是分别用来干什么的呢？

为什么需要前端测试

本人目前工作中，其实没有涉及到前端测试，周围的人也很少用到过前端测试，
那为什么需要前端测试呢？

通过测试的代码，安全性能高，使用放心

大的前端框架比如jquery等等，都是必须要有测试，
比如由于添加功能，要将现在的jquery版本由1.7升级到1.8，
如果没有测试，添加的新功能对以前的code有没有影响，
我们需要一步一步去手动调试，会是一个很大的工作量，
但是通过执行测试代码，可以很方便的帮助我们检测以前的功能还是不是能很好的运行。
同时通过执行测试代码，对我们的各个功能模块的代码也是一个很好的性能检测。

怎样写测试

首先需要了解如何写测试代码，可以将测试代码看成一种语言（虽然它便不是）。
它有它的语法，及框架。

写测试代码

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("4"))
    })
  })
})

上面是一段非常简单的测试代码，这就是测试代码的语法。
一个测试文件中应该包含一个或者多个describe块，
一个describe块应该包含一个或者多个it块。
describe块被称为测试套件，第2个参数是实际执行的函数。
it块被称为测试用例，第2个参数是实际执行的函数。

assert模块是nodejs的断言库，主要使用了过来判断结果是否符合预期值，
比如 assert.equal(-1, [1, 2, 3].indexof("4")),
就是判断[1, 2, 3].indexof("4")的值和-1是否相等，
相等就测试通过，否则不通过。
关于assert语法可以参考这里。
shouldjs就是对assert模块的一个扩展。

运行测试代码

上面的测试代码如何运行呢，可以通过测试框架，如mocha等来运行。
先安装 npm install mocha -g,
然后在package.js中添加一条scripttest: mocha;
mocha默认会去执行相同目录下中的test下的js文件，
也就是说将上面的js文件test.js放入package同目录下的test文件夹下，mocha会默认执行。
执行npm run test，就可以看到如下的结果。
![测试结果](http://zoucz.com/blogimgs/201...）

浏览器上运行测试代码

通过mocha测试框架确实能运行测试代码了，但是在终端去查看测试结果多少有些不方便，
可以通过karma测试工具来实现在浏览器上运行测试代码，
甚至可以在浏览器上打断点来运行测试代码。
安装karma npm install -g karma-cli，
然后在package.js中添加一条scriptkarma: karma start;
karma可以通过karma init来初始化配置文件，
配置文件中可以设置浏览器，测试代码的使用框架，热更新功能等等。
执行npm run karma后，能自动打开在karma配置文件中设置的浏览器，
以及在此浏览器上运行测试代码。

持续集成

持续集成就是，每次源码（如github上的）有更新，比如有人push了一段代码，
持续集成工具就下载源码，根据配置文件，执行相应的代码（经常是测试代码），
然后反馈执行结果。
travis对于开源项目是免费的,推荐使用。

Travis CI 只支持 Github，不支持其他代码托管服务。

在Travis上添加想要持续集成的github源。

Travis CI需要有一个配置文件travis.yml,用来指定travis的行为。

language: node_js
node_js:
  - "8"
before_install:
  - export CHROME_BIN=chromium-browser
  - export DISPLAY=:99.0
  - sh -e /etc/init.d/xvfb start
install:
  - npm install -g karma
  - npm install
script:
  - npm run test

每当有代码更新的时候，travis先获取github对应的源码，
然后一步步根据配置执行，before_install =>install => npm run test

刚涉及到前端测试，以上内容如有错误的地方，请不吝指正。

云服务器 GPU云服务器前端测试 web前端测试 ajax前端测试工具前端测试开发工程师

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95654.html

前端进阶之路: 前端架构设计(3) - 测试核心

摘要：而测试驱动开发技术并不只是单纯的测试工作。需求向来就是软件开发过程中感觉最不好明确描述易变的东西。这里说的需求不只是指用户的需求，还包括对代码可能很多人和我一样, 首次听到前端架构这个词, 第一反应是: 前端还有架构这一说呢? 在后端开发领域, 系统规划和可扩展性非常关键, 因此架构师备受重视, 早在开发工作启动之前, 他们就被邀请加入到项目中, 而且他们会跟客户讨论即将建成的平台的...

Karuru 2019-08-01 18:16 评论0 收藏0
前端进阶之路: 前端架构设计(3) - 测试核心

摘要：而测试驱动开发技术并不只是单纯的测试工作。需求向来就是软件开发过程中感觉最不好明确描述易变的东西。这里说的需求不只是指用户的需求，还包括对代码可能很多人和我一样, 首次听到前端架构这个词, 第一反应是: 前端还有架构这一说呢? 在后端开发领域, 系统规划和可扩展性非常关键, 因此架构师备受重视, 早在开发工作启动之前, 他们就被邀请加入到项目中, 而且他们会跟客户讨论即将建成的平台的...

宋华 2019-08-22 11:22 评论0 收藏0
测试你的前端代码 - part1（介绍篇）

摘要：测试光谱光谱的一端单元测试顾名思义，代码以单元为单位进行测试。这个系列文章整体如下测试你的前端代码单元测试测试你的前端代码端到端测试测试你的前端代码集成测试。 showImg(https://segmentfault.com/img/remote/1460000008812278?w=998&h=354); 本文作者：Gil Tayar 编译：胡子大哈翻译原文：http://hu...

helloworldcoding 2019-05-29 17:00 评论0 收藏0
测试你的前端代码 - part1（介绍篇）

摘要：测试光谱光谱的一端单元测试顾名思义，代码以单元为单位进行测试。这个系列文章整体如下测试你的前端代码单元测试测试你的前端代码端到端测试测试你的前端代码集成测试。 showImg(https://segmentfault.com/img/remote/1460000008812278?w=998&h=354); 本文作者：Gil Tayar 编译：胡子大哈翻译原文：http://hu...

jimhs 2019-08-20 15:20 评论0 收藏0
搭建自己的前端自动化测试脚手架（一）

摘要：还可以自动完成单元测试的配置，工具选型为准备出发有了以上的初步了解，我们就可以准备着手搭建我们自己的测试环境了，让我们短暂休息一下，下一章见下一篇搭建自己的前端自动化测试脚手架二搭建自己的前端自动化测试脚手架（一） LancerComet at 17:55, 2016.07.17.欢迎转载，转载时还请保留作者署名。随着前端项目规模的日益膨胀，自动化测试越来越受到广大前端与测试朋友关...

luffyZh 2019-05-29 16:57 评论0 收藏0