FE.TEST-前端测试初探

摘要：使用可以快速生成一个项目，其中包含了和以及覆盖率统计的配置参考一个创建测试脚本的快速方法其他参考资料前端自动化测试概览测试之使用对项目进行单元测试

测试可以提供快速反馈，根据测试用例覆盖代码，从而提升代码开发效率和质量。根据投入产出价值，通常迭代较快的业务逻辑不做测试用例，对通用常用的代码基本组件或框架需要编写测试。

在 2018 年年初对测试工具的整体回顾：
An Overview of JavaScript Testing in 2018

测试驱动开发的基本思想就是在开发功能代码之前，先编写测试代码。也就是说在明确要开发某个功能后，首先思考如何对这个功能进行测试，并完成测试代码的编写，然后编写相关的代码满足这些测试用例。然后循环进行添加其他功能，直到完全部功能的开发。(mocha示例)

//mocha
suite("Array", function() {
  setup(function() {
    // ...
  });

  suite("#indexOf()", function() {
    test("should return -1 when not present", function() {
      assert.equal(-1, [1,2,3].indexOf(4));
    });
  });
});

Behavior Driven Development，行为驱动开发是一种敏捷软件开发的技术，它鼓励软件项目中的开发者、QA和非技术人员或商业参与者之间的协作。

与一般的自动化测试（如单元测试、服务测试、UI 测试）不一样的是，BDD 是由多方参与的测试开发方式。如在使用 Protractor 写 Angular 的 E2E 测试的时候，所以的测试都是前端测试人员编写的。BDD 最重要的一个特性是：由非开发人员编写测试用例，而这些测试用例是使用自然语言编写的 DSL（领域特定语言）。换多话来说，业务人员、测试人员、客户等利益相关者，以习惯的方式编写相关的测试用例，再由开发人员去实现相关的测试。
(Jasmine示例)

//Jasmine
describe("A suite is just a function", function() {
  var a;

  it("and so is a spec", function() {
    a = true;

    expect(a).toBe(true);
  });
});

单元测试准则27条

node assert

const assert = require("assert");
assert.equal(1, "1");//ok

const obj1 = {a: {b: 1}};
const obj2 = {a: {b: 1}};
assert.deepEqual(obj1, obj2);//ok

shouldjs

should(null).not.be.ok();
({ a: 10}).should.be.eql({ a: 10 });
"ab".should.be.equalOneOf(["a", 10, "ab"]);

chai

//should
chai.should();

foo.should.be.a("string");
foo.should.equal("bar");
foo.should.have.lengthOf(3);
tea.should.have.property("flavors")
  .with.lengthOf(3);

//except
var expect = chai.expect;
expect(foo).to.be.a("string");
expect(foo).to.equal("bar");
expect(foo).to.have.lengthOf(3);
expect(tea).to.have.property("flavors")
  .with.lengthOf(3);

//assert
var assert = chai.assert;
assert.typeOf(foo, "string");
assert.equal(foo, "bar");
assert.lengthOf(foo, 3)
assert.property(tea, "flavors");
assert.lengthOf(tea.flavors, 3);

Mock

Mock.mock({"number|1-100": 100})
//{"number": 30}
Mock.mock({"regexp": /d{5,10}/})
//{"regexp": "365355673"}
Mock.mock({
  "object|2-4": {
    "110000": "北京市",
    "120000": "天津市",
    "130000": "河北省",
    "140000": "山西省"
  }
})
/*
{
  "object": {
    "120000": "天津市",
    "130000": "河北省",
    "140000": "山西省"
  }
}
*/
Random.date()
//"2007-10-24"
Random.image("200x100", "#4A7BF7", "Hello")

cypress 在浏览器中边预览执行可视化测试用例，像selenium一样模拟用户操作，可以接入Mocha和chai

describe("My First Test", function() {
  it("clicking "type" navigates to a new url", function() {
    cy.visit("https://example.cypress.io")

    cy.contains("type").click()

    // Should be on a new URL which includes "/commands/actions"
    cy.url().should("include", "/commands/actions")
  })
})

Nightmare
基于 Electron 的框架，针对 Web 自动化测试和爬虫。

webdriverio
Node.js的下一代WebDriver测试自动化框架,参考官方代码示例

jsPerf
benchmark.js

持续集成是一种非常优秀的多人开发实践，通过代码push触发钩子，实现自动运行编译、测试等工作。接入持续集成后，我们的每一次push代码，每个Merge Request都会生成对应的测试结果，项目的其他成员可以很清楚地了解到新代码是否影响了现有的功能，在接入自动告警后，可以在代码提交阶段就快速发现错误，提升开发迭代效率。

持续集成会在每次集成时提供一个几乎空白的虚拟机器，并拷贝用户提交的代码到机器本地，通过读取用户项目下的持续集成配置，自动化的安装环境和依赖，编译和测试完成后生成报告，在一段时间之后释放虚拟机器资源。

Travel CI 开源持续集成构建项目,采用yaml格式。

Coveralls nodejs下面的代码测试覆盖率，原理是通过istanbul生成测试数据，上传到coveralls网站上，然后以badge的形式展示出来

目前比较流行js校验工具有 JSLint、JSHint、JSCS、ESLint, 它们之前的差异比较可以参考 A Comparison of JavaScript Linting Tools，推荐使用
ESlint。
代码风格检查同样也可以集成到 ci，只需要在 ci 命令前追加检查命令即可。以 eslint 为例：

"scripts": {
    // ..
    "lint": "eslint .",
    "cov": "istanbul cover .",
    "ci": "tnpm run lint && TEST_TIMEOUT=60000 istanbul cover ."
 }

此时构建会先做代码风格检查，再做单元测试、覆盖率统计，如代码风格检查失败，会直接导致构建中断。

Jest
Facebook 出品的一个测试框架，相对其他测试框架，其一大特点就是就是内置了常用的测试工具，比如自带断言、测试覆盖率工具。与React搭配更加。 (示例)

karma
一个测试集成框架，可以方便地以插件的形式集成测试框架、测试环境、覆盖率工具等等。与Angular搭配更加。(使用 vue-cli 可以快速生成一个 Vue 项目，其中包含了 Webpack 和 Karma 以及覆盖率统计的配置)

cucumber & cuketest
参考 一个创建 Cucumber. js 测试脚本的快速方法

其他参考资料：
前端自动化测试概览
E2E 测试之 Cypress
使用 Jest + Enzyme 对 React 项目进行单元测试
Testing Strategies for React and Redux