左本Web3D 左本Web3D
首页
  • Cesium案例

    • 地形|模型加载,地图绘制测量 (opens new window)
    • 基于若依三维Gis可视化系统 (opens new window)
  • Mapbox案例

    • 养殖场模型渲染 (opens new window)
    • 近海阀式养殖 (opens new window)
  • Three案例

    • 学习案例
    • 网络案例,附源码地址
  • Three+D3

    • Demo | D3.js SVG Maps and Three.js (opens new window)
    • Demo | MapBox with D3.js and Three.js (opens new window)
  • 项目案例

    • 消防楼物联网三维可视化大屏
    • 智慧养殖三维可视化大屏
    • 智慧农田三维可视化大屏
    • 智慧城市运营管理平台
    • 智慧设备运维综合管理平台
    • 设备运维管理系统
    • 网格工具
    • 博物馆VR全景
    • 数字虚拟展厅
  • 在线访问

    • 网格工具 (opens new window)
    • 博物馆VR全景 (opens new window)
    • AI数字人 (opens new window)
    • 水厂3D可视化 (opens new window)
    • 3D地图 (opens new window)
  • 链接工具

    • Web3D相关链接
    • Gis相关链接
  • 小游戏

    • 吃什么? (opens new window)
CSDN (opens new window)
Gitee (opens new window)
GitHub (opens new window)
备用地址 (opens new window)

左本Web3D

专注Web3D技术领域
首页
  • Cesium案例

    • 地形|模型加载,地图绘制测量 (opens new window)
    • 基于若依三维Gis可视化系统 (opens new window)
  • Mapbox案例

    • 养殖场模型渲染 (opens new window)
    • 近海阀式养殖 (opens new window)
  • Three案例

    • 学习案例
    • 网络案例,附源码地址
  • Three+D3

    • Demo | D3.js SVG Maps and Three.js (opens new window)
    • Demo | MapBox with D3.js and Three.js (opens new window)
  • 项目案例

    • 消防楼物联网三维可视化大屏
    • 智慧养殖三维可视化大屏
    • 智慧农田三维可视化大屏
    • 智慧城市运营管理平台
    • 智慧设备运维综合管理平台
    • 设备运维管理系统
    • 网格工具
    • 博物馆VR全景
    • 数字虚拟展厅
  • 在线访问

    • 网格工具 (opens new window)
    • 博物馆VR全景 (opens new window)
    • AI数字人 (opens new window)
    • 水厂3D可视化 (opens new window)
    • 3D地图 (opens new window)
  • 链接工具

    • Web3D相关链接
    • Gis相关链接
  • 小游戏

    • 吃什么? (opens new window)
CSDN (opens new window)
Gitee (opens new window)
GitHub (opens new window)
备用地址 (opens new window)
  • 初识 TypeScript

    • 简介
    • 安装 TypeScript
    • 编写第一个 TypeScript 程序
  • TypeScript 常用语法

    • 基础类型
    • 变量声明
    • 接口
    • 类
    • 函数
    • 泛型
    • 类型推断
    • 高级类型
  • ts-axios 项目初始化

    • 需求分析
    • 初始化项目
    • 编写基础请求代码
  • ts-axios 基础功能实现

    • 处理请求 url 参数
    • 处理请求 body 数据
    • 处理请求 header
    • 获取响应数据
    • 处理响应 header
    • 处理响应 data
  • ts-axios 异常情况处理

    • 错误处理
    • 错误信息增强
  • ts-axios 接口扩展

    • 扩展接口
    • axios 函数重载
    • 响应数据支持泛型
  • ts-axios 拦截器实现

    • 拦截器设计与实现
  • ts-axios 配置化实现

    • 合并配置的设计与实现
    • 请求和响应配置化
    • 扩展 create 静态接口
  • ts-axios 取消功能实现

    • 取消功能的设计与实现
  • ts-axios 更多功能实现

    • withCredentials
    • XSRF 防御
    • 上传和下载的进度监控
    • HTTP 授权
    • 自定义合法状态码
    • 自定义参数序列化
    • baseURL
    • 静态方法扩展
  • ts-axios 单元测试

    • 前言
    • Jest 安装和配置
    • 辅助模块单元测试
    • 请求模块单元测试
    • headers 模块单元测试
    • Axios 实例模块单元测试
    • 拦截器模块单元测试
    • mergeConfig 模块单元测试
      • 测试代码编写
    • 请求取消模块单元测试
    • 剩余模块单元测试
  • ts-axios 部署与发布

    • ts-axios 编译与发布
    • 引用 ts-axios 库
  • 《TypeScript 从零实现 axios》
  • ts-axios 单元测试
HuangYi
2020-01-05
目录

mergeConfig 模块单元测试

# mergeConfig 模块单元测试

合并配置是 ts-axios 核心流程中非常重要的一个环节,我们需要为它的各种情况去编写测试。

# 测试代码编写

test/mergeConfig.spec.ts:

import axios from '../src/index'
import mergeConfig from '../src/core/mergeConfig'

describe('mergeConfig', () => {
  const defaults = axios.defaults

  test('should accept undefined for second argument', () => {
    expect(mergeConfig(defaults, undefined)).toEqual(defaults)
  })

  test('should accept an object for second argument', () => {
    expect(mergeConfig(defaults, {})).toEqual(defaults)
  })

  test('should not leave references', () => {
    const merged = mergeConfig(defaults, {})
    expect(merged).not.toBe(defaults)
    expect(merged.headers).not.toBe(defaults.headers)
  })

  test('should allow setting request options', () => {
    const config = {
      url: '__sample url__',
      params: '__sample params__',
      data: { foo: true }
    }
    const merged = mergeConfig(defaults, config)
    expect(merged.url).toBe(config.url)
    expect(merged.params).toBe(config.params)
    expect(merged.data).toEqual(config.data)
  })

  test('should not inherit request options', () => {
    const localDefaults = {
      url: '__sample url__',
      params: '__sample params__',
      data: { foo: true }
    }
    const merged = mergeConfig(localDefaults, {})
    expect(merged.url).toBeUndefined()
    expect(merged.params).toBeUndefined()
    expect(merged.data).toBeUndefined()
  })

  test('should return default headers if pass config2 with undefined', () => {
    expect(
      mergeConfig(
        {
          headers: 'x-mock-header'
        },
        undefined
      )
    ).toEqual({
      headers: 'x-mock-header'
    })
  })

  test('should merge auth, headers with defaults', () => {
    expect(
      mergeConfig(
        {
          auth: undefined
        },
        {
          auth: {
            username: 'foo',
            password: 'test'
          }
        }
      )
    ).toEqual({
      auth: {
        username: 'foo',
        password: 'test'
      }
    })
    expect(
      mergeConfig(
        {
          auth: {
            username: 'foo',
            password: 'test'
          }
        },
        {
          auth: {
            username: 'baz',
            password: 'foobar'
          }
        }
      )
    ).toEqual({
      auth: {
        username: 'baz',
        password: 'foobar'
      }
    })
  })

  test('should overwrite auth, headers with a non-object value', () => {
    expect(
      mergeConfig(
        {
          headers: {
            common: {
              Accept: 'application/json, text/plain, */*'
            }
          }
        },
        {
          headers: null
        }
      )
    ).toEqual({
      headers: null
    })
  })

  test('should allow setting other options', () => {
    const merged = mergeConfig(defaults, {
      timeout: 123
    })
    expect(merged.timeout).toBe(123)
  })
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

运行测试后我们发现 mergeConfig.ts 文件的分支覆盖率并未达到 100%,提示是 23 行,打开文件后发现最后一个 else 逻辑并未走到,也就是 val1 为 undefined 的情况。但实际上即使 val1 为 undefined,我们也是返回 undefined,也就是返回 val1,所以这块代码的逻辑可以优化。

function deepMergeStrat(val1: any, val2: any): any {
  if (isPlainObject(val2)) {
    return deepMerge(val1, val2)
  } else if (typeof val2 !== 'undefined') {
    return val2
  } else if (isPlainObject(val1)) {
    return deepMerge(val1)
  } else {
    return val1
  }
}
1
2
3
4
5
6
7
8
9
10
11

2 个分支可以合并到一个分支,这样我们再次跑测试,分支覆盖率就可以达到 100% 了。

至此我们完成了 ts-axios 库对 mergeConfig 模块的测试,下一节课我们来测试取消模块相关代码。

#TypeScript
上次更新: 2023/08/25, 16:22:35
拦截器模块单元测试
请求取消模块单元测试

← 拦截器模块单元测试 请求取消模块单元测试→

最近更新
01
我做了一个手写春联小网页,祝大家虎年暴富 原创
01-28
02
一行代码“黑”掉任意网站 原创
11-25
03
33个非常实用的JavaScript一行代码
11-02
更多文章>
Theme by Vdoing | Copyright © 2023-2025 左本
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式