### 彪哥

爱好前端

- 初识 TypeScript

- TypeScript 常用语法

- ts-axios 项目初始化

- ts-axios 基础功能实现

- ts-axios 异常情况处理

- ts-axios 接口扩展

- ts-axios 拦截器实现

- ts-axios 配置化实现

- ts-axios 取消功能实现

- ts-axios 更多功能实现

- ts-axios 单元测试

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

- ts-axios 部署与发布

- 《TypeScript 从零实现 axios》
- ts-axios 单元测试

HuangYi
2020-01-05
目录

# headers 模块单元测试

# # headers 模块单元测试

之前我们测试了 `headers` 的基础方法模块，接下来我们会从业务角度测试 `headers` 的相关业务逻辑。

## # 测试代码编写

`test/headers.spec.ts`：

    import axios from '../src/index'
    import { getAjaxRequest } from './helper'

    function testHeaderValue(headers: any, key: string, val?: string): void {
      let found = false

      for (let k in headers) {
        if (k.toLowerCase() === key.toLowerCase()) {
          found = true
          expect(headers[k]).toBe(val)
          break
        }
      }

      if (!found) {
        if (typeof val === 'undefined') {
          expect(headers.hasOwnProperty(key)).toBeFalsy()
        } else {
          throw new Error(key + ' was not found in headers')
        }
      }
    }

    describe('headers', () => {
      beforeEach(() => {
        jasmine.Ajax.install()
      })

      afterEach(() => {
        jasmine.Ajax.uninstall()
      })

      test('should use default common headers', () => {
        const headers = axios.defaults.headers.common

        axios('/foo')

        return getAjaxRequest().then(request => {
          for (let key in headers) {
            if (headers.hasOwnProperty(key)) {
              expect(request.requestHeaders[key]).toEqual(headers[key])
            }
          }
        })
      })

      test('should add extra headers for post', () => {
        axios.post('/foo', 'fizz=buzz')

        return getAjaxRequest().then(request => {
          testHeaderValue(request.requestHeaders, 'Content-Type', 'application/x-www-form-urlencoded')
        })
      })

      test('should use application/json when posting an object', () => {
        axios.post('/foo/bar', {
          firstName: 'foo',
          lastName: 'bar'
        })

        return getAjaxRequest().then(request => {
          testHeaderValue(request.requestHeaders, 'Content-Type', 'application/json;charset=utf-8')
        })
      })

      test('should remove content-type if data is empty', () => {
        axios.post('/foo')

        return getAjaxRequest().then(request => {
          testHeaderValue(request.requestHeaders, 'Content-Type', undefined)
        })
      })

      it('should preserve content-type if data is false', () => {
        axios.post('/foo', false)

        return getAjaxRequest().then(request => {
          testHeaderValue(request.requestHeaders, 'Content-Type', 'application/x-www-form-urlencoded')
        })
      })

      test('should remove content-type if data is FormData', () => {
        const data = new FormData()
        data.append('foo', 'bar')

        axios.post('/foo', data)

        return getAjaxRequest().then(request => {
          testHeaderValue(request.requestHeaders, 'Content-Type', undefined)
        })
      })
    })

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

内部定义了 `testHeaderValue` 辅助函数，用于测试 `headers` 是否存在某个 `header name` 下的某个值。

至此我们完成了 `ts-axios` 库 `headers` 模块相关业务逻辑的测试，下一节课我们会对 `Axios` 的实例做测试。

编辑
(opens new window)
#TypeScript
上次更新: 2022/12/14, 19:36:42
请求模块单元测试
Axios 实例模块单元测试

← 请求模块单元测试 Axios 实例模块单元测试→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式