# 手工测试

qs.js

function parse(str) {
    let arr = str.split('&');
    let obj = {};
    arr.forEach((item) => {
        let [key, val] = item.split('=');
        obj[key] = val;
    });
    return obj;
}
function stringify(obj) {
    let arr = [];
    for (let key in obj) {
        arr.push(key + '=' + obj[key]);
    }
    return arr.join('&');
}
exports.parse = parse;
exports.stringify = stringify;

# 2. assert断言 [#](#t12. assert断言)

• 断言是表达设计人员对于系统应达到状态的一种预期
• 各种语言都内置了断言的接口
• 断言是单元测试的核心

# 3. 测试框架 [#](#t23. 测试框架)

• 通过测试框架，我们可以分离测试代码和源代码
• 测试框架可以自动运行所有的用例并输出结果
• 测试框架可能提高编写测试代码的效率

# 4.开发模式 #

# 4.1 瀑布模式 [#](#t44.1 瀑布模式)

1. 分析需求
2. 调试开发
3. 测试发布

# 4.2 TDD [#](#t54.2 TDD)

Test-Driven-Development 测试驱动开发，

1. 分析需求
2. 任务、模块分解
3. 编写测试用例,尽量穷尽和考虑所有边界
4. 快速构建代码跑通测试用例
5. 重构代码
6. 功能测试、发布

# 4.3 TDD [#](#t64.3 TDD)

• 在TDD理念中，先有测试代码再有功能逻辑代码
• 包括测试用例和断言
• 分为模块测试和单元测试
• 有其使用场景，不能滥用
• 在实际开发中一般会使用测试框架

# 5. 常用测试框架 [#](#t75. 常用测试框架)

• qunit jQuery
• mocha 支持Node&Browser express.js
• jasmine支持Node&Browser Vue.js
• karma A Test-Runner 在不同的浏览器中跑测试用例 Angular
• jest React
  • 零配置
  • 内置代码覆盖率
  • 内置Mocks

# 6. Jest [#](#t86. Jest)

Jest官方文档

# 6.1 安装 [#](#t96.1 安装)

cnpm i jest --save-dev
cnpm i jest -g

# 6.2 编写 [#](#t106.2 编写)

**test.js

# 6.3 运行 [#](#t116.3 运行)

jest npm jest
npm test

# 6.4 编写测试用例 [#](#t126.4 编写测试用例)

• Test Suits 测试套件，每个文件就是一个套件
• Test Group 分组 describe
• Test Case 测试用途 test()
• Assert 断言 expect()

qs.test.js

let { parse, stringify } = require('./qs');
describe('parse', () => {//分组
    test('one', () => {//测试用例
        expect(parse("name=zxmf").name).toBe('zxmf');
    });
    test('two', () => {
        expect(parse("name=zxmf&age=9").age).toBe('9');
    });
});

​

describe('stringify', () => {
    test('one', () => {
        expect(stringify({ name: 'zxmf' })).toBe('name=zxmf');
    });
    test('two', () => {
        expect(stringify({ name: 'zxmf', age: 9 })).toBe('name=zxmf&age=9');
    });
});

# 6.5 配置 [#](#t136.5 配置)

# 6.5.1 配置位置 [#](#t146.5.1 配置位置)

• package.json
• jest.config.js
• 命令行

# 6.5.2 配置项 [#](#t156.5.2 配置项)

• testMatch glob规则,识别哪些文件中测试文件

• testRegex 文件正则

• testEnvironment 测试环境

• rootDir 根目录

• moduleFileExtensions 模块文件扩展名

  module.exports = {
      testMatch: ['**/__tests__/**/*.js?(x)', '**/?(*.)(spec|test).js?(x)'],//设置识别哪些文件是测试文件（glob形式），与testRegex互斥，不能同时写
      testRegex: '(/__tests__).*|(\\.|/)(test|spec))\\.jsx?$',//设置识别哪些文件是测试文件（正则形式），与testMatch互斥，不能同时写
      testEnvironment: 'jsdom',//测试环境，默认值是：jsdom，可修改为node
      rootDir: '',//默认值：当前目录，一般是package.json所在的目录。
      moduleFileExtensions: ['js', 'json', 'jsx', 'node']//测试文件的类型
  }
  

# 6.5.3 Matchers [#](#t166.5.3 Matchers)

• 相等断言

  • toBe(value)： 比较数字、字符串
  • toEqual(value)： 比较对象、数组
  • toBeNull()
  • toBeUndefined()

• 包含断言

  • toHaveProperty(keyPath, value)： 是否有对应的属性
  • toContain(item)： 是否包含对应的值，括号里写上数组、字符串
  • toMatch(regexpOrString)： 括号里写上正则

• 逻辑断言,在JavaScript中，有六个falsy值：false，0，''，null， undefined，和NaN。其他一切都是Truthy。

  • toBeTruthy()
  • toBeFalsy()
  • oBeGreaterThan(number)： 大于
  • toBeLessThan(number)： 小于

• not 取反

  test('matchers', () => {
      const a = {
          name: 'a',
          home: {
              name: 'beijing'
          }
      }
      const b = {
          name: 'a',
          home: {
              name: 'beijing'
          }
      }
      expect(a).toEqual(b)
      expect([1, 2, 3]).toEqual([1, 2, 3])
      expect(null).toBeNull()
      expect([1, 2, 3]).toContain(1)
      expect(b).toHaveProperty('home')
      expect('abc').toContain('b')
      expect('abc').toMatch(/^\w+$/)
      expect('123').not.toContain('4')
  })
  

# 6.6 DOM测试 [#](#t176.6 DOM测试)

• jsdom

• Jest能操作DOM是因为内置了JSDOM

• JSDOM是在node中模拟了DOM环境

  function remove(node) {
      node.parentNode.removeChild(node);
  }
  function on(node, type, handler) {
      node.addEventListener(type, handler);
  }
  exports.remove = remove;
  exports.on = on;
  
  let { remove, on } = require('../src/dom');
  describe('dom', () => {
      test('remove', () => {
          document.body.innerHTML = '<div id="container"><span id="hello">hello</span></div>';
          let container = document.getElementById('container');
          expect(container.nodeName.toLocaleLowerCase()).toBe('div');
          let hello = document.getElementById('hello');
          expect(hello.nodeName.toLocaleLowerCase()).toBe('span');
          remove(hello);
          let hello2 = document.getElementById('hello');
          expect(hello2).toBeNull();
      })
    test('on', () => {
      document.body.innerHTML = '<div id="container"><button id="clickMe">click</button></div>';
        let clickMe = document.getElementById('clickMe');
        on(clickMe, 'click', () => {
            clickMe.innerHTML = 'clicked';
        });
        clickMe.click();
        expect(clickMe.innerHTML).toBe('clicked');
  
    })
  });
  

# 6.7 测试选项卡 [#](#t186.7 测试选项卡)

<div id="tab">
    <div>
        <a href="#" class="tab-button">选项1</a>
        <a href="#" class="tab-button">选项2</a>
    </div>
    <div>
        <div class="tab-panel">面板1</div>
        <div class="tab-panel">面板2</div>
    </div>
</div>

class Tab{
    constructor(id,buttonClass,panelClass){
        this.tab = tab = document.querySelector('#'+id);
        this.buttons = Array.from(tab.querySelectorAll('.'+buttonClass));
        this.panels = Array.from(tab.querySelectorAll('.'+panelClass));
        this.select(0);
        this.bindEvent();
    }
    select(index){
        this.buttons.forEach(button=>button.style.backgroundColor= 'white');
        this.buttons[index].style.backgroundColor= 'red';
        this.panels.forEach(panel=>panel.style.display= 'none');
        this.panels[index].style.display= 'block';
    }
    bindEvent(){
        for(let i=0;i<this.buttons.length;i++){
            this.buttons[i].addEventListener('click',()=>{
                this.select(i);
            });
        }
    }
}
module.exports = Tab;

const Tab = require('../src/tab');
const fs = require('fs');
const path = require('path');

test('tab',function(){
    document.body.innerHTML = fs.readFileSync(path.resolve(__dirname,'tab.html'),'utf8');
    const tab = new Tab('tab','tab-button','tab-panel');
    expect(tab.buttons[0].style.backgroundColor).toBe('red');
    expect(tab.buttons[1].style.backgroundColor).toBe('white');
    expect(tab.panels[0].style.display).toBe('block');
    expect(tab.panels[1].style.display).toBe('none');
    tab.buttons[1].click();
    expect(tab.buttons[0].style.backgroundColor).toBe('white');
    expect(tab.buttons[1].style.backgroundColor).toBe('red');
    expect(tab.panels[0].style.display).toBe('none');
    expect(tab.panels[1].style.display).toBe('block');
});

# 6.8 异步测试 [#](#t196.8 异步测试)

# 6.8.1 普通异步 [#](#t206.8.1 普通异步)

test('async',(done)=>{
    setTimeout(()=>{
        expect(2).toBe(2);
        done();
    },1000);
});

# 6.8.2 ajax异步 [#](#t216.8.2 ajax异步)

• Mocks可以擦除函数的实际实现来测试代码之间的链接
• Mocks可以捕获对函数的调用
• manual_mocks用可mock依赖的模块，放置在相应mocks目录下
• 使用mock function可以查看函数的调用次数，以及参数

__tests__\users.js

jest.mock('../js/ajax');
const getUsers = require('../js/getUsers');
test('getUsers',(done)=>{
    document.body.innerHTML = `<ul id="users"></ul>`;
    getUsers('/users.json','users',()=>{
        const ul = document.querySelector('#users');
        const lis = ul.querySelectorAll('li');
        expect(lis.length).toBe(2);
        expect(lis[1].innerHTML).toBe('zxmf2');
        done();
    });
});

\js\getUsers.js

var ajax = require('./ajax');
function getUsers(url,id,callback){
 const users = document.getElementById(id);
 ajax(url,data=>{
     console.log('ajax ok');
     data = JSON.parse(data);
     users.innerHTML = data.map(item=>`<li>${item.name}</li>`).join('');
     callback&&callback();
 });
}

module.exports = getUsers;

\js\ajax.js

function ajax(url,success){
  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = ()=>{
      if(xhr.readyState == 4){
          success&success(xhr.responseText);
      }
  }
  xhr.open('get',url);
  xhr.send(null);
}
module.exports = ajax;

js__mocks__\ajax.js

const fs = require('fs');
const path = require('path');
const ajax = (url,success)=>{
   setTimeout(()=>{
       success(JSON.stringify([{name:'zxmf1'},{name:'zxmf2'}]));
   },1000);
}
module.exports = ajax;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul id="users"></ul>
    <script>
        let module = {};
        let require = () => ajax;
    </script>
    <script src="/js/ajax.js"></script>
    <script src="/js/getUsers.js"></script>
    <script>
        getUsers('http://localhost:3000/users.json', 'users');
    </script>
</body>

</html>

users.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul id="users"></ul>
    <script>
        let module = {};
        let require = () => ajax;
    </script>
    <script src="/js/ajax.js"></script>
    <script src="/js/getUsers.js"></script>
    <script>
        getUsers('http://localhost:3000/users.json', 'users');
    </script>
</body>
</html>

server.js

const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(__dirname));
app.get('/',function(req,res){
    res.sendFile(path.resolve(__dirname,'users.html'));
});

app.get('/users.json',function(req,res){
  res.json([{name:'zxmf1'},{name:'zxmf2'}]);
});
app.listen(3000);

# 6.9 代码覆盖率 [#](#t226.9 代码覆盖率)

• line coverage 行覆盖率

• function coverage 函数覆盖率

• branch coverage 分支覆盖率

• statement coverage 语句覆盖率

  npx jest --coverage

# 7.附录 #

# 7.1 glob [#](#t247.1 glob)

gulp内部使用了node-glob模块来实现其文件匹配功能。我们可以使用下面这些特殊的字符来匹配我们想要的文件：

# 7.2 glob规则 [#](#t257.2 glob规则)

# 7.3 glob示例 [#](#t267.3 glob示例)