defaults 模块单元测试

defaults 模块为请求配置提供了一些默认的属性和方法，我们需要为其编写单元测试。
test/defaults.spec.ts：

  1. import axios, { AxiosTransformer } from '../src/index'
  2. import { getAjaxRequest } from './helper'
  3. import { deepMerge } from '../src/helpers/util'
  5. describe('defaults', () => {
  6.   beforeEach(() => {
  7.     jasmine.Ajax.install()
  8.   })
  10.   afterEach(() => {
  11.     jasmine.Ajax.uninstall()
  12.   })
  14.   test('should transform request json', () => {
  15.     expect((axios.defaults.transformRequest as AxiosTransformer[])[0]({ foo: 'bar' })).toBe('{"foo":"bar"}')
  16.   })
  18.   test('should do nothing to request string', () => {
  19.     expect((axios.defaults.transformRequest as AxiosTransformer[])[0]('foo=bar')).toBe('foo=bar')
  20.   })
  22.   test('should transform response json', () => {
  23.     const data = (axios.defaults.transformResponse as AxiosTransformer[])[0]('{"foo":"bar"}')
  25.     expect(typeof data).toBe('object')
  26.     expect(data.foo).toBe('bar')
  27.   })
  29.   test('should do nothing to response string', () => {
  30.     expect((axios.defaults.transformResponse as AxiosTransformer[])[0]('foo=bar')).toBe('foo=bar')
  31.   })
  33.   test('should use global defaults config', () => {
  34.     axios('/foo')
  36.     return getAjaxRequest().then(request => {
  37.       expect(request.url).toBe('/foo')
  38.     })
  39.   })
  41.   test('should use modified defaults config', () => {
  42.     axios.defaults.baseURL = 'http://example.com/'
  44.     axios('/foo')
  46.     return getAjaxRequest().then(request => {
  47.       expect(request.url).toBe('http://example.com/foo')
  48.       delete axios.defaults.baseURL
  49.     })
  50.   })
  52.   test('should use request config', () => {
  53.     axios('/foo', {
  54.       baseURL: 'http://www.example.com'
  55.     })
  57.     return getAjaxRequest().then(request => {
  58.       expect(request.url).toBe('http://www.example.com/foo')
  59.     })
  60.   })
  62.   test('should use default config for custom instance', () => {
  63.     const instance = axios.create({
  64.       xsrfCookieName: 'CUSTOM-XSRF-TOKEN',
  65.       xsrfHeaderName: 'X-CUSTOM-XSRF-TOKEN'
  66.     })
  67.     document.cookie = instance.defaults.xsrfCookieName + '=foobarbaz'
  69.     instance.get('/foo')
  71.     return getAjaxRequest().then(request => {
  72.       expect(request.requestHeaders[instance.defaults.xsrfHeaderName!]).toBe('foobarbaz')
  73.       document.cookie =
  74.         instance.defaults.xsrfCookieName +
  75.         '=;expires=' +
  76.         new Date(Date.now() - 86400000).toUTCString()
  77.     })
  78.   })
  80.   test('should use GET headers', () => {
  81.     axios.defaults.headers.get['X-CUSTOM-HEADER'] = 'foo'
  82.     axios.get('/foo')
  84.     return getAjaxRequest().then(request => {
  85.       expect(request.requestHeaders['X-CUSTOM-HEADER']).toBe('foo')
  86.       delete axios.defaults.headers.get['X-CUSTOM-HEADER']
  87.     })
  88.   })
  90.   test('should use POST headers', () => {
  91.     axios.defaults.headers.post['X-CUSTOM-HEADER'] = 'foo'
  92.     axios.post('/foo', {})
  94.     return getAjaxRequest().then(request => {
  95.       expect(request.requestHeaders['X-CUSTOM-HEADER']).toBe('foo')
  96.       delete axios.defaults.headers.post['X-CUSTOM-HEADER']
  97.     })
  98.   })
  100.   test('should use header config', () => {
  101.     const instance = axios.create({
  102.       headers: {
  103.         common: {
  104.           'X-COMMON-HEADER': 'commonHeaderValue'
  105.         },
  106.         get: {
  107.           'X-GET-HEADER': 'getHeaderValue'
  108.         },
  109.         post: {
  110.           'X-POST-HEADER': 'postHeaderValue'
  111.         }
  112.       }
  113.     })
  115.     instance.get('/foo', {
  116.       headers: {
  117.         'X-FOO-HEADER': 'fooHeaderValue',
  118.         'X-BAR-HEADER': 'barHeaderValue'
  119.       }
  120.     })
  122.     return getAjaxRequest().then(request => {
  123.       expect(request.requestHeaders).toEqual(
  124.         deepMerge(axios.defaults.headers.common, axios.defaults.headers.get, {
  125.           'X-COMMON-HEADER': 'commonHeaderValue',
  126.           'X-GET-HEADER': 'getHeaderValue',
  127.           'X-FOO-HEADER': 'fooHeaderValue',
  128.           'X-BAR-HEADER': 'barHeaderValue'
  129.         })
  130.       )
  131.     })
  132.   })
  134.   test('should be used by custom instance if set before instance created', () => {
  135.     axios.defaults.baseURL = 'http://example.org/'
  136.     const instance = axios.create()
  138.     instance.get('/foo')
  140.     return getAjaxRequest().then(request => {
  141.       expect(request.url).toBe('http://example.org/foo')
  142.       delete axios.defaults.baseURL
  143.     })
  144.   })
  146.   test('should not be used by custom instance if set after instance created', () => {
  147.     const instance = axios.create()
  148.     axios.defaults.baseURL = 'http://example.org/'
  150.     instance.get('/foo')
  152.     return getAjaxRequest().then(request => {
  153.       expect(request.url).toBe('/foo')
  154.     })
  155.   })
  156. })

transform 模块单元测试

transform 模块用来定义请求和响应的转换方法，我们需要为其编写单元测试。

  1. import axios, { AxiosResponse, AxiosTransformer } from '../src/index'
  2. import { getAjaxRequest } from './helper'
  4. describe('transform', () => {
  5.   beforeEach(() => {
  6.     jasmine.Ajax.install()
  7.   })
  9.   afterEach(() => {
  10.     jasmine.Ajax.uninstall()
  11.   })
  13.   test('should transform JSON to string', () => {
  14.     const data = {
  15.       foo: 'bar'
  16.     }
  18.     axios.post('/foo', data)
  20.     return getAjaxRequest().then(request => {
  21.       expect(request.params).toBe('{"foo":"bar"}')
  22.     })
  23.   })
  25.   test('should transform string to JSON', done => {
  26.     let response: AxiosResponse
  28.     axios('/foo').then(res => {
  29.       response = res
  30.     })
  32.     getAjaxRequest().then(request => {
  33.       request.respondWith({
  34.         status: 200,
  35.         responseText: '{"foo": "bar"}'
  36.       })
  38.       setTimeout(() => {
  39.         expect(typeof response.data).toBe('object')
  40.         expect(response.data.foo).toBe('bar')
  41.         done()
  42.       }, 100)
  43.     })
  44.   })
  46.   test('should override default transform', () => {
  47.     const data = {
  48.       foo: 'bar'
  49.     }
  51.     axios.post('/foo', data, {
  52.       transformRequest(data) {
  53.         return data
  54.       }
  55.     })
  57.     return getAjaxRequest().then(request => {
  58.       expect(request.params).toEqual({ foo: 'bar' })
  59.     })
  60.   })
  62.   test('should allow an Array of transformers', () => {
  63.     const data = {
  64.       foo: 'bar'
  65.     }
  67.     axios.post('/foo', data, {
  68.       transformRequest: (axios.defaults.transformRequest as AxiosTransformer[]).concat(function(
  69.         data
  70.       ) {
  71.         return data.replace('bar', 'baz')
  72.       })
  73.     })
  75.     return getAjaxRequest().then(request => {
  76.       expect(request.params).toBe('{"foo":"baz"}')
  77.     })
  78.   })
  80.   test('should allowing mutating headers', () => {
  81.     const token = Math.floor(Math.random() * Math.pow(2, 64)).toString(36)
  83.     axios('/foo', {
  84.       transformRequest: (data, headers) => {
  85.         headers['X-Authorization'] = token
  86.         return data
  87.       }
  88.     })
  90.     return getAjaxRequest().then(request => {
  91.       expect(request.requestHeaders['X-Authorization']).toEqual(token)
  92.     })
  93.   })
  94. })

xsrf 模块单元测试

xsrf 模块提供了一套防御 xsrf 攻击的解决方案，我们需要为其编写单元测试。
test/xsrf.spec.ts：

  1. import axios from '../src/index'
  2. import { getAjaxRequest } from './helper'
  4. describe('xsrf', () => {
  5.   beforeEach(() => {
  6.     jasmine.Ajax.install()
  7.   })
  9.   afterEach(() => {
  10.     jasmine.Ajax.uninstall()
  11.     document.cookie =
  12.       axios.defaults.xsrfCookieName + '=;expires=' + new Date(Date.now() - 86400000).toUTCString()
  13.   })
  15.   test('should not set xsrf header if cookie is null', () => {
  16.     axios('/foo')
  18.     return getAjaxRequest().then(request => {
  19.       expect(request.requestHeaders[axios.defaults.xsrfHeaderName!]).toBeUndefined()
  20.     })
  21.   })
  23.   test('should set xsrf header if cookie is set', () => {
  24.     document.cookie = axios.defaults.xsrfCookieName + '=12345'
  26.     axios('/foo')
  28.     return getAjaxRequest().then(request => {
  29.       expect(request.requestHeaders[axios.defaults.xsrfHeaderName!]).toBe('12345')
  30.     })
  31.   })
  33.   test('should not set xsrf header for cross origin', () => {
  34.     document.cookie = axios.defaults.xsrfCookieName + '=12345'
  36.     axios('http://example.com/')
  38.     return getAjaxRequest().then(request => {
  39.       expect(request.requestHeaders[axios.defaults.xsrfHeaderName!]).toBeUndefined()
  40.     })
  41.   })
  43.   test('should set xsrf header for cross origin when using withCredentials', () => {
  44.     document.cookie = axios.defaults.xsrfCookieName + '=12345'
  46.     axios('http://example.com/', {
  47.       withCredentials: true
  48.     })
  50.     return getAjaxRequest().then(request => {
  51.       expect(request.requestHeaders[axios.defaults.xsrfHeaderName!]).toBe('12345')
  52.     })
  53.   })
  54. })

注意在 afterEach 函数中我们清空了 xsrf 相关的 cookie。

上传下载模块单元测试

上传下载模块允许我们监听上传和下载的进度，我们需要为其编写单元测试。
test/progress.spec.ts：

  1. import axios from '../src/index'
  2. import { getAjaxRequest } from './helper'
  4. describe('progress', () => {
  5.   beforeEach(() => {
  6.     jasmine.Ajax.install()
  7.   })
  9.   afterEach(() => {
  10.     jasmine.Ajax.uninstall()
  11.   })
  13.   test('should add a download progress handler', () => {
  14.     const progressSpy = jest.fn()
  16.     axios('/foo', { onDownloadProgress: progressSpy })
  18.     return getAjaxRequest().then(request => {
  19.       request.respondWith({
  20.         status: 200,
  21.         responseText: '{"foo": "bar"}'
  22.       })
  23.       expect(progressSpy).toHaveBeenCalled()
  24.     })
  25.   })
  27.   test('should add a upload progress handler', () => {
  28.     const progressSpy = jest.fn()
  30.     axios('/foo', { onUploadProgress: progressSpy })
  32.     return getAjaxRequest().then(request => {
  33.       // Jasmine AJAX doesn't trigger upload events.Waiting for jest-ajax fix
  34.       // expect(progressSpy).toHaveBeenCalled()
  35.     })
  36.   })
  37. })

注意，由于 jasmine-ajax 插件不会派发 upload 事件，这个未来可以通过我们自己编写的 jest-ajax 插件来解决，目前不写断言的情况它会直接通过。

HTTP 授权模块单元测试

HTTP 授权模块为我们在请求头中添加 Authorization 字段，我们需要为其编写单元测试。
test/auth.spec.ts：

  1. import axios from '../src/index'
  2. import { getAjaxRequest } from './helper'
  4. describe('auth', () => {
  5.   beforeEach(() => {
  6.     jasmine.Ajax.install()
  7.   })
  9.   afterEach(() => {
  10.     jasmine.Ajax.uninstall()
  11.   })
  13.   test('should accept HTTP Basic auth with username/password', () => {
  14.     axios('/foo', {
  15.       auth: {
  16.         username: 'Aladdin',
  17.         password: 'open sesame'
  18.       }
  19.     })
  21.     return getAjaxRequest().then(request => {
  22.       expect(request.requestHeaders['Authorization']).toBe('Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==')
  23.     })
  24.   })
  26.   test('should fail to encode HTTP Basic auth credentials with non-Latin1 characters', () => {
  27.     return axios('/foo', {
  28.       auth: {
  29.         username: 'Aladßç£☃din',
  30.         password: 'open sesame'
  31.       }
  32.     })
  33.       .then(() => {
  34.         throw new Error(
  35.           'Should not succeed to make a HTTP Basic auth request with non-latin1 chars in credentials.'
  36.         )
  37.       })
  38.       .catch(error => {
  39.         expect(/character/i.test(error.message)).toBeTruthy()
  40.       })
  41.   })
  42. })

静态方法模块单元测试

静态方法模块为 axios 对象添加了 2 个静态方法，我们需要为其编写单元测试。
test/static.spec.ts：

  1. import axios from '../src/index'
  3. describe('promise', () => {
  4.   test('should support all', done => {
  5.     let fulfilled = false
  7.     axios.all([true, false]).then(arg => {
  8.       fulfilled = arg[0]
  9.     })
  11.     setTimeout(() => {
  12.       expect(fulfilled).toBeTruthy()
  13.       done()
  14.     }, 100)
  15.   })
  17.   test('should support spread', done => {
  18.     let sum = 0
  19.     let fulfilled = false
  20.     let result: any
  22.     axios
  23.       .all([123, 456])
  24.       .then(
  25.         axios.spread((a, b) => {
  26.           sum = a + b
  27.           fulfilled = true
  28.           return 'hello world'
  29.         })
  30.       )
  31.       .then(res => {
  32.         result = res
  33.       })
  35.     setTimeout(() => {
  36.       expect(fulfilled).toBeTruthy()
  37.       expect(sum).toBe(123 + 456)
  38.       expect(result).toBe('hello world')
  39.       done()
  40.     }, 100)
  41.   })
  42. })

补充未覆盖的代码测试

我们发现，跑完测试后，仍有一些代码没有覆盖到测试，其中 core/xhr.ts 文件的第 43 行：

  1. if (responseType) {
  2.   request.responseType = responseType
  3. }

我们并未在测试中设置过 responseType，因此我们在 test/requests.spect.ts 文件中补充相关测试：

  1. test('should support array buffer response', done => {
  2.   let response: AxiosResponse
  4.   function str2ab(str: string) {
  5.     const buff = new ArrayBuffer(str.length * 2)
  6.     const view = new Uint16Array(buff)
  7.     for (let i = 0; i < str.length; i++) {
  8.       view[i] = str.charCodeAt(i)
  9.     }
  10.     return buff
  11.   }
  13.   axios('/foo', {
  14.     responseType: 'arraybuffer'
  15.   }).then(data => {
  16.     response = data
  17.   })
  19.   getAjaxRequest().then(request => {
  20.     request.respondWith({
  21.       status: 200,
  22.       // @ts-ignore
  23.       response: str2ab('Hello world')
  24.     })
  26.     setTimeout(() => {
  27.       expect(response.data.byteLength).toBe(22)
  28.       done()
  29.     }, 100)
  30.   })
  31. })

另外我们发现 core/xhr.ts 文件的第 13 行：

  1. method = 'get'

分支没有测试完全。因为实际上代码执行到这的时候 method 是一定会有的，所以我们不必为其指定默认值，另外还需要在 method!.toUpperCase() 的时候使用非空断言。
同时core/xhr.ts 文件的第 66 行：

  1. const responseData = responseType !== 'text' ? request.response : request.responseText

分支也没有测试完全。这里我们应该先判断存在 responseType 存在的情况下再去和 text 做对比，需要修改逻辑：

  1. const responseData = responseType && responseType !== 'text' ? request.response : request.responseText

这样再次跑测试，就覆盖了所有的分支。
到此为止，除了我们之前说的 helpers/error.ts 模块中对于 super 的测试的分支覆盖率没达到 100%，其它模块均达到 100% 的测试覆盖率。
有些有强迫症的同学可能会觉得，能不能通过某种手段让它的覆盖率达到 100% 呢，这里其实有一个奇技淫巧，在 helpers/error.ts 文件的 constructor 函数上方加一个 /* istanbul ignore next */ 注释，这样其实相当于忽略了整个构造函数的测试，这样我们就可以达到 100% 的覆盖率了。
/* istanbul ignore next */ 在我们去阅读一些开源代码的时候经常会遇到，主要用途就是用来忽略测试用的，这个技巧不可滥用，除非你明确的知道这段代码不需要测试，否则你不应该使用它。滥用就失去了单元测试的意义了。
至此，我们就完成了整个 ts-axios 库的测试了，我们也成功地让测试覆盖率达到目标 99% 以上。下一章我会教大家如果打包构建和发布我们的 ts-axios 库。