js单元测试+函数式编程

单元测试

主要测试的是样式，功能，组件，流程，也包含判断特定条件，某个场景下函数的行为

前端单元测试目的

反馈功能输出
bug
重构安全性
协作开发

如何进行单元测试

被测试对象：最小组成单元：函数，方法，类；可以孤立的验证

// 被测试对象
let add = (a,b)=>a+b;
let res = add(1,2);
if(res!==3){
  throw new Error('预期值与实际值不一致')；
}

 let add = (a, b) => a + b; // 被测试对象
 let expect = (res) => {
   return {
     toBe: (actual) => {
       if (res !== actual) {
         throw new Error('预期与结果不同')
       }
     }
   }
 }
 let test = (desc, fn) => {
   try {
     fn()
   } catch (e) {
     console.log('没有通过')
   }
 }
 test('加法测试', () => {
   expect(add(1, 2)).toBe(1)
 })

第三方库jest

npm i jest -D 安装命令
npm ls jest 查看是否生效

match.js
let add = (a, b) => a + b;

module.exports={add}

match.test.js
let add = require('./match')

test('a+b加法测试',()=>{
  expect(add(1,2)).toBe(2)
})

执行npm run jest进行单元测试

函数式编程

命令式编程
详细的命令机器怎么去处理一件事情以达到你想要的结果
函数式编程
函数式编程是一种编程范式，是一种构建计算机程序结构和元素的风格，把计算看做对数学函数的评估，避免了状态的变化和数据的可变。

// 数组每一项比之前自增1,以下写法是命令式编程，复用性比较低，仅能自增1
let newArr = (arr)=>{
  let res = [];
  for(i=0;i<arr.length;i++){
    res.push(arr[i]+1)
  }
  return res
}
console.log(newArr([1,2,3,4]));

// 函数式编程,将程序分解为一些更可重用、更可靠更易分解的部分，然后将他们组合起来
 let arr = [1, 2, 3, 4]
 let newArr = (arr,fn) => {
   let res = [];
   for (let i = 0; i < arr.length; i++) {
     res.push(fn(arr[i]))
   }
   return res
 }
 let add = item => item + 5
 console.log(newArr(arr, add))

纯函数

函数调用的参数相同，则永远返回相同的结果，不依赖程序执行期间函数外部任务状态或者数据的变化，必须只依赖于其输入的参数。

// 不是纯函数
let discount = 0.8;
let calculatePrice = (price)=>price*discount;
let price =  calculatePrice (100);
console.log(price);

// 不纯的函数
const foo = (something)=>{
  const dt = new Date().toString();
  console.log(`${dt}:${something}`);
  return something;
}
foo('hello');
// 不纯的API
let arr=[1,2,3,4,5,6];
arr.slice(1,2); //纯函数 返回[2,3],原函数不会发生变化
arr.splice(1,3);// 非纯函数,返回[2,3,4],原数组改变
arr.pop();// 非纯函数，返回6，原数组改变

// 纯函数，相同的输入，永远会得到相同的输出
let calculatePrice = (price,discount )=>price*discount;
let price =  calculatePrice (100,0.7);
console.log(price);

函数的副作用

当调用函数时，除了返回函数值之外，还对主调用函数产生附加的影响
例如修改全局变量（函数外的变量）或修改参数

let a =5;
let foo=()=>a=a*5;
foo();
console.log(a);

如何保证函数无副作用

函数入口使用参数运算，而不修改它
函数内不修改函数外的变量
运算结果通过函数返回给外部

let data={count:1};
let foo=(data)=>{
  data.count = 5;
}
console.log(data.count); // 1
foo(data);
 console.log(data.count); // 5

// 改进方案
let data={count:1};
let foo=(data)=>{
  // 深拷贝
  let data1={...data}; // 或者使用JSON.stringify(data)
  data1.count = 5;
}
console.log(data.count); // 1
foo(data);
 console.log(data.count); // 1

可变性是指创建以后可以任意修改
不可变性指一个变量，一旦创建，就永远不会发生改变，不可变性是函数式编程的核心概念