辅助模块单元测试

准备工作

通常我们会优先为一个库的辅助方法编写测试，我们会优先为 ts-axios 库的 helpers 目录下的模块编写测试。我们在 test 目录下创建一个 helpers 目录，创建一个 boot.ts 空文件，这个是因为我们上节课给 Jest 配置了 setupFilesAfterEnv 指向了这个文件，后面的章节我们会编写这个文件。

然后我们可以在控制台运行 npm test，它实际上是执行了 jest --coverage 来跑单元测试，我们会发现它会报错，没有匹配的测试文件，那是因为我们还没有在 test 目录下编写任何一个 .spec.ts 结尾的测试文件。接下来我们就来为这些辅助模块编写相应的测试。

util 模块测试

test/helpers/util.spec.ts：

  1. import {
  2.   isDate,
  3.   isPlainObject,
  4.   isFormData,
  5.   isURLSearchParams,
  6.   extend,
  7.   deepMerge
  8. } from '../../src/helpers/util'
  10. describe('helpers:util', () => {
  11.   describe('isXX', () => {
  12.     test('should validate Date', () => {
  13.       expect(isDate(new Date())).toBeTruthy()
  14.       expect(isDate(Date.now())).toBeFalsy()
  15.     })
  17.     test('should validate PlainObject', () => {
  18.       expect(isPlainObject({})).toBeTruthy()
  19.       expect(isPlainObject(new Date())).toBeFalsy()
  20.     })
  22.     test('should validate FormData', () => {
  23.       expect(isFormData(new FormData())).toBeTruthy()
  24.       expect(isFormData({})).toBeFalsy()
  25.     })
  27.     test('should validate URLSearchParams', () => {
  28.       expect(isURLSearchParams(new URLSearchParams())).toBeTruthy()
  29.       expect(isURLSearchParams('foo=1&bar=2')).toBeFalsy()
  30.     })
  31.   })
  33.   describe('extend', () => {
  34.     test('should be mutable', () => {
  35.       const a = Object.create(null)
  36.       const b = { foo: 123 }
  38.       extend(a, b)
  40.       expect(a.foo).toBe(123)
  41.     })
  43.     test('should extend properties', function() {
  44.       const a = { foo: 123, bar: 456 }
  45.       const b = { bar: 789 }
  46.       const c = extend(a, b)
  48.       expect(c.foo).toBe(123)
  49.       expect(c.bar).toBe(789)
  50.     })
  51.   })
  53.   describe('deepMerge', () => {
  54.     test('should be immutable', () => {
  55.       const a = Object.create(null)
  56.       const b: any = { foo: 123 }
  57.       const c: any = { bar: 456 }
  59.       deepMerge(a, b, c)
  61.       expect(typeof a.foo).toBe('undefined')
  62.       expect(typeof a.bar).toBe('undefined')
  63.       expect(typeof b.bar).toBe('undefined')
  64.       expect(typeof c.foo).toBe('undefined')
  65.     })
  67.     test('should deepMerge properties', () => {
  68.       const a = { foo: 123 }
  69.       const b = { bar: 456 }
  70.       const c = { foo: 789 }
  71.       const d = deepMerge(a, b, c)
  73.       expect(d.foo).toBe(789)
  74.       expect(d.bar).toBe(456)
  75.     })
  77.     test('should deepMerge recursively', function() {
  78.       const a = { foo: { bar: 123 } }
  79.       const b = { foo: { baz: 456 }, bar: { qux: 789 } }
  80.       const c = deepMerge(a, b)
  82.       expect(c).toEqual({
  83.         foo: {
  84.           bar: 123,
  85.           baz: 456
  86.         },
  87.         bar: {
  88.           qux: 789
  89.         }
  90.       })
  91.     })
  93.     test('should remove all references from nested objects', () => {
  94.       const a = { foo: { bar: 123 } }
  95.       const b = {}
  96.       const c = deepMerge(a, b)
  98.       expect(c).toEqual({
  99.         foo: {
  100.           bar: 123
  101.         }
  102.       })
  104.       expect(c.foo).not.toBe(a.foo)
  105.     })
  107.     test('should handle null and undefined arguments', () => {
  108.       expect(deepMerge(undefined, undefined)).toEqual({})
  109.       expect(deepMerge(undefined, { foo: 123 })).toEqual({ foo: 123 })
  110.       expect(deepMerge({ foo: 123 }, undefined)).toEqual({ foo: 123 })
  112.       expect(deepMerge(null, null)).toEqual({})
  113.       expect(deepMerge(null, { foo: 123 })).toEqual({ foo: 123 })
  114.       expect(deepMerge({ foo: 123 }, null)).toEqual({ foo: 123 })
  115.     })
  116.   })
  117. })

其中 describe 方法用来定义一组测试，它可以支持嵌套，test 函数是用来定义单个测试用例，它是测试的最小单元。expect 是断言函数，所谓”断言”，就是判断代码的实际执行结果与预期结果是否一致，如果不一致就抛出一个错误。

测试文件编写好后，我们可以去控制台运行一次 npm test，看一下测试结果，我们可以看跑了几个测试文件，测试是否通过，测试覆盖率等。

cookie 模块测试

test/helpers/cookie.spec.ts：

  1. import cookie from '../../src/helpers/cookie'
  3. describe('helpers:cookie', () => {
  4.   test('should read cookies', () => {
  5.     document.cookie = 'foo=baz'
  6.     expect(cookie.read('foo')).toBe('baz')
  7.   })
  9.   test('should return null if cookie name is not exist', () => {
  10.     document.cookie = 'foo=baz'
  11.     expect(cookie.read('bar')).toBeNull()
  12.   })
  13. })

这里我们可以通过 document.cookie 去设置 cookie，就像在浏览器里一样操作。

data 模块测试

test/helpers/data.spec.ts：

  1. import { transformRequest, transformResponse } from '../../src/helpers/data'
  3. describe('helpers:data', () => {
  4.   describe('transformRequest', () => {
  5.     test('should transform request data to string if data is a PlainObject', () => {
  6.       const a = { a: 1 }
  7.       expect(transformRequest(a)).toBe('{"a":1}')
  8.     })
  10.     test('should do nothing if data is not a PlainObject', () => {
  11.       const a = new URLSearchParams('a=b')
  12.       expect(transformRequest(a)).toBe(a)
  13.     })
  14.   })
  16.   describe('transformResponse', () => {
  17.     test('should transform response data to Object if data is a JSON string', () => {
  18.       const a = '{"a": 2}'
  19.       expect(transformResponse(a)).toEqual({ a: 2 })
  20.     })
  22.     test('should do nothing if data is a string but not a JSON string', () => {
  23.       const a = '{a: 2}'
  24.       expect(transformResponse(a)).toBe('{a: 2}')
  25.     })
  27.     test('should do nothing if data is not a string', () => {
  28.       const a = { a: 2 }
  29.       expect(transformResponse(a)).toBe(a)
  30.     })
  31.   })
  32. })

error 模块测试

test/helpers/error.spec.ts：

  1. import { createError } from '../../src/helpers/error'
  2. import { AxiosRequestConfig, AxiosResponse } from '../../src/types'
  4. describe('helpers::error', function() {
  5.   test('should create an Error with message, config, code, request, response and isAxiosError', () => {
  6.     const request = new XMLHttpRequest()
  7.     const config: AxiosRequestConfig = { method: 'post' }
  8.     const response: AxiosResponse = {
  9.       status: 200,
  10.       statusText: 'OK',
  11.       headers: null,
  12.       request,
  13.       config,
  14.       data: { foo: 'bar' }
  15.     }
  16.     const error = createError('Boom!', config, 'SOMETHING', request, response)
  17.     expect(error instanceof Error).toBeTruthy()
  18.     expect(error.message).toBe('Boom!')
  19.     expect(error.config).toBe(config)
  20.     expect(error.code).toBe('SOMETHING')
  21.     expect(error.request).toBe(request)
  22.     expect(error.response).toBe(response)
  23.     expect(error.isAxiosError).toBeTruthy()
  24.   })
  25. })

该模块跑完我们会发现，分支覆盖率是在 50%，因为第十七行代码

  1. super(message)

这个是 super 继承对测试覆盖率支持的坑，目前没有好的解决方案，可以先忽略。

headers 模块测试

test/helpers/headers.spec.ts：

  1. import { parseHeaders, processHeaders, flattenHeaders } from '../../src/helpers/headers'
  3. describe('helpers:header', () => {
  4.   describe('parseHeaders', () => {
  5.     test('should parse headers', () => {
  6.       const parsed = parseHeaders(
  7.         'Content-Type: application/json\r\n' +
  8.           'Connection: keep-alive\r\n' +
  9.           'Transfer-Encoding: chunked\r\n' +
  10.           'Date: Tue, 21 May 2019 09:23:44 GMT\r\n' +
  11.           ':aa\r\n' +
  12.           'key:'
  13.       )
  15.       expect(parsed['content-type']).toBe('application/json')
  16.       expect(parsed['connection']).toBe('keep-alive')
  17.       expect(parsed['transfer-encoding']).toBe('chunked')
  18.       expect(parsed['date']).toBe('Tue, 21 May 2019 09:23:44 GMT')
  19.       expect(parsed['key']).toBe('')
  20.     })
  22.     test('should return empty object if headers is empty string', () => {
  23.       expect(parseHeaders('')).toEqual({})
  24.     })
  25.   })
  27.   describe('processHeaders', () => {
  28.     test('should normalize Content-Type header name', () => {
  29.       const headers: any = {
  30.         'conTenT-Type': 'foo/bar',
  31.         'Content-length': 1024
  32.       }
  33.       processHeaders(headers, {})
  34.       expect(headers['Content-Type']).toBe('foo/bar')
  35.       expect(headers['conTenT-Type']).toBeUndefined()
  36.       expect(headers['Content-length']).toBe(1024)
  37.     })
  39.     test('should set Content-Type if not set and data is PlainObject', () => {
  40.       const headers: any = {}
  41.       processHeaders(headers, { a: 1 })
  42.       expect(headers['Content-Type']).toBe('application/json;charset=utf-8')
  43.     })
  45.     test('should set not Content-Type if not set and data is not PlainObject', () => {
  46.       const headers: any = {}
  47.       processHeaders(headers, new URLSearchParams('a=b'))
  48.       expect(headers['Content-Type']).toBeUndefined()
  49.     })
  51.     test('should do nothing if headers is undefined or null', () => {
  52.       expect(processHeaders(undefined, {})).toBeUndefined()
  53.       expect(processHeaders(null, {})).toBeNull()
  54.     })
  55.   })
  57.   describe('flattenHeaders', () => {
  58.     test('should flatten the headers and include common headers', () => {
  59.       const headers = {
  60.         Accept: 'application/json',
  61.         common: {
  62.           'X-COMMON-HEADER': 'commonHeaderValue'
  63.         },
  64.         get: {
  65.           'X-GET-HEADER': 'getHeaderValue'
  66.         },
  67.         post: {
  68.           'X-POST-HEADER': 'postHeaderValue'
  69.         }
  70.       }
  72.       expect(flattenHeaders(headers, 'get')).toEqual({
  73.         Accept: 'application/json',
  74.         'X-COMMON-HEADER': 'commonHeaderValue',
  75.         'X-GET-HEADER': 'getHeaderValue'
  76.       })
  77.     })
  79.     test('should flatten the headers without common headers', () => {
  80.       const headers = {
  81.         Accept: 'application/json',
  82.         get: {
  83.           'X-GET-HEADER': 'getHeaderValue'
  84.         }
  85.       }
  87.       expect(flattenHeaders(headers, 'patch')).toEqual({
  88.         Accept: 'application/json'
  89.       })
  90.     })
  92.     test('should do nothing if headers is undefined or null', () => {
  93.       expect(flattenHeaders(undefined, 'get')).toBeUndefined()
  94.       expect(flattenHeaders(null, 'post')).toBeNull()
  95.     })
  96.   })
  97. })

运行后，我们会发现 parseHeaders 测试组的 should parse headers 测试没通过，expect(parsed['date']).toBe('Tue, 21 May 2019 09:23:44 GMT') 我们期望解析后的 date 字段是 Tue, 21 May 2019 09:23:44 GMT，而实际的值是 Tue, 21 May 2019 09。

测试没通过，我们检查一下代码，发现我们 parseHeaders 的代码逻辑漏洞，我们只考虑了第一个 “:” 号，没考虑后半部分的字符串内部也可能有 “:”，按我们现有的逻辑就会把字符串中 “:” 后面部分都截断了。

因此我们修改 parseHeaders 的实现逻辑。

  1. export function parseHeaders(headers: string): any {
  2.   let parsed = Object.create(null)
  3.   if (!headers) {
  4.     return parsed
  5.   }
  7.   headers.split('\r\n').forEach(line => {
  8.     let [key, ...vals] = line.split(':')
  9.     key = key.trim().toLowerCase()
  10.     if (!key) {
  11.       return
  12.     }
  13.     let val = vals.join(':').trim()
  14.     parsed[key] = val
  15.   })
  17.   return parsed
  18. }

这样我们再重新跑测试，就会通过了。

url 模块测试

test/helpers/url.spec.ts：

  1. import { buildURL, isAbsoluteURL, combineURL, isURLSameOrigin } from '../../src/helpers/url'
  3. describe('helpers:url', () => {
  4.   describe('buildURL', () => {
  5.     test('should support null params', () => {
  6.       expect(buildURL('/foo')).toBe('/foo')
  7.     })
  9.     test('should support params', () => {
  10.       expect(
  11.         buildURL('/foo', {
  12.           foo: 'bar'
  13.         })
  14.       ).toBe('/foo?foo=bar')
  15.     })
  17.     test('should ignore if some param value is null', () => {
  18.       expect(
  19.         buildURL('/foo', {
  20.           foo: 'bar',
  21.           baz: null
  22.         })
  23.       ).toBe('/foo?foo=bar')
  24.     })
  26.     test('should ignore if the only param value is null', () => {
  27.       expect(
  28.         buildURL('/foo', {
  29.           baz: null
  30.         })
  31.       ).toBe('/foo')
  32.     })
  34.     test('should support object params', () => {
  35.       expect(
  36.         buildURL('/foo', {
  37.           foo: {
  38.             bar: 'baz'
  39.           }
  40.         })
  41.       ).toBe('/foo?foo=' + encodeURI('{"bar":"baz"}'))
  42.     })
  44.     test('should support date params', () => {
  45.       const date = new Date()
  47.       expect(
  48.         buildURL('/foo', {
  49.           date: date
  50.         })
  51.       ).toBe('/foo?date=' + date.toISOString())
  52.     })
  54.     test('should support array params', () => {
  55.       expect(
  56.         buildURL('/foo', {
  57.           foo: ['bar', 'baz']
  58.         })
  59.       ).toBe('/foo?foo[]=bar&foo[]=baz')
  60.     })
  62.     test('should support special char params', () => {
  63.       expect(
  64.         buildURL('/foo', {
  65.           foo: '@:$, '
  66.         })
  67.       ).toBe('/foo?foo=@:$,+')
  68.     })
  70.     test('should support existing params', () => {
  71.       expect(
  72.         buildURL('/foo?foo=bar', {
  73.           bar: 'baz'
  74.         })
  75.       ).toBe('/foo?foo=bar&bar=baz')
  76.     })
  78.     test('should correct discard url hash mark', () => {
  79.       expect(
  80.         buildURL('/foo?foo=bar#hash', {
  81.           query: 'baz'
  82.         })
  83.       ).toBe('/foo?foo=bar&query=baz')
  84.     })
  86.     test('should use serializer if provided', () => {
  87.       const serializer = jest.fn(() => {
  88.         return 'foo=bar'
  89.       })
  90.       const params = { foo: 'bar' }
  91.       expect(buildURL('/foo', params, serializer)).toBe('/foo?foo=bar')
  92.       expect(serializer).toHaveBeenCalled()
  93.       expect(serializer).toHaveBeenCalledWith(params)
  94.     })
  96.     test('should support URLSearchParams', () => {
  97.       expect(buildURL('/foo', new URLSearchParams('bar=baz'))).toBe('/foo?bar=baz')
  98.     })
  99.   })
  101.   describe('isAbsoluteURL', () => {
  102.     test('should return true if URL begins with valid scheme name', () => {
  103.       expect(isAbsoluteURL('https://api.github.com/users')).toBeTruthy()
  104.       expect(isAbsoluteURL('custom-scheme-v1.0://example.com/')).toBeTruthy()
  105.       expect(isAbsoluteURL('HTTP://example.com/')).toBeTruthy()
  106.     })
  108.     test('should return false if URL begins with invalid scheme name', () => {
  109.       expect(isAbsoluteURL('123://example.com/')).toBeFalsy()
  110.       expect(isAbsoluteURL('!valid://example.com/')).toBeFalsy()
  111.     })
  113.     test('should return true if URL is protocol-relative', () => {
  114.       expect(isAbsoluteURL('//example.com/')).toBeTruthy()
  115.     })
  117.     test('should return false if URL is relative', () => {
  118.       expect(isAbsoluteURL('/foo')).toBeFalsy()
  119.       expect(isAbsoluteURL('foo')).toBeFalsy()
  120.     })
  121.   })
  123.   describe('combineURL', () => {
  124.     test('should combine URL', () => {
  125.       expect(combineURL('https://api.github.com', '/users')).toBe('https://api.github.com/users')
  126.     })
  128.     test('should remove duplicate slashes', () => {
  129.       expect(combineURL('https://api.github.com/', '/users')).toBe('https://api.github.com/users')
  130.     })
  132.     test('should insert missing slash', () => {
  133.       expect(combineURL('https://api.github.com', 'users')).toBe('https://api.github.com/users')
  134.     })
  136.     test('should not insert slash when relative url missing/empty', () => {
  137.       expect(combineURL('https://api.github.com/users', '')).toBe('https://api.github.com/users')
  138.     })
  140.     test('should allow a single slash for relative url', () => {
  141.       expect(combineURL('https://api.github.com/users', '/')).toBe('https://api.github.com/users/')
  142.     })
  143.   })
  145.   describe('isURLSameOrigin', () => {
  146.     test('should detect same origin', () => {
  147.       expect(isURLSameOrigin(window.location.href)).toBeTruthy()
  148.     })
  150.     test('should detect different origin', () => {
  151.       expect(isURLSameOrigin('https://github.com/axios/axios')).toBeFalsy()
  152.     })
  153.   })
  154. })

这里要注意的是，我们使用了 jest.fn 去模拟了一个函数，这个也是在编写 Jest 测试中非常常用的一个 API。

至此，我们就实现了 ts-axios 库 helpers 目录下所有模块的测试，并把该目录下的测试覆盖率达到了近乎 100% 的覆盖率。下面的章节我们就开始测试 ts-axios 的核心流程，针对不同的 feature 去编写单元测试了。