请求模块单元测试

请求模块是 axios 最基础的模块，通过一个 axios 方法发送 Ajax 请求。

jasmine-ajax

Jasmine 是一个 BDD(行为驱动开发)的测试框架，它有很多成熟的插件，比如我们要用到的 jasmine-ajax，它会为我们发出的 Ajax 请求根据规范定义一组假的响应，并跟踪我们发出的Ajax请求，可以让我们方便的为结果做断言。

其实 Jest 也可以去写插件，但并没有现成的 Ajax 相关的 Jest 插件，但是 Jest 测试中我们仍然可以使用 Jasmine 相关的插件，只需要做一些小小的配置即可。

当然，未来我也会考虑去编写一个 Ajax 相关的 Jest 插件，目前我们仍然使用 jasmine-ajax 去配合我们编写测试。

jasmine-ajax 依赖 jasmine-core，因此首先我们要安装几个依赖包，jasmine-ajax、jasmine-core 和 @types/jasmine-ajax。

这个时候我们需要去修改 test/boot.ts 文件，因为每次跑具体测试代码之前会先运行该文件，我们可以在这里去初始化 jasmine-ajax。

  1. const JasmineCore = require('jasmine-core')
  2. // @ts-ignore
  3. global.getJasmineRequireObj = function() {
  4.   return JasmineCore
  5. }
  6. require('jasmine-ajax')

这里为了让 jasmine-ajax 插件运行成功，我们需要手动添加全局的 getJasmineRequireObj 方法，参考 issue。

接下来，我们就开始编写请求模块的单元测试。

测试代码编写

test/requests.spec.ts：

  1. import axios, { AxiosResponse, AxiosError } from '../src/index'
  2. import { getAjaxRequest } from './helper'
  4. describe('requests', () => {
  5.   beforeEach(() => {
  6.     jasmine.Ajax.install()
  7.   })
  9.   afterEach(() => {
  10.     jasmine.Ajax.uninstall()
  11.   })
  13.   test('should treat single string arg as url', () => {
  14.     axios('/foo')
  16.     return getAjaxRequest().then(request => {
  17.       expect(request.url).toBe('/foo')
  18.       expect(request.method).toBe('GET')
  19.     })
  20.   })
  22.   test('should treat method value as lowercase string', done => {
  23.     axios({
  24.       url: '/foo',
  25.       method: 'POST'
  26.     }).then(response => {
  27.       expect(response.config.method).toBe('post')
  28.       done()
  29.     })
  31.     getAjaxRequest().then(request => {
  32.       request.respondWith({
  33.         status: 200
  34.       })
  35.     })
  36.   })
  38.   test('should reject on network errors', done => {
  39.     const resolveSpy = jest.fn((res: AxiosResponse) => {
  40.       return res
  41.     })
  43.     const rejectSpy = jest.fn((e: AxiosError) => {
  44.       return e
  45.     })
  47.     jasmine.Ajax.uninstall()
  49.     axios('/foo')
  50.       .then(resolveSpy)
  51.       .catch(rejectSpy)
  52.       .then(next)
  54.     function next(reason: AxiosResponse | AxiosError) {
  55.       expect(resolveSpy).not.toHaveBeenCalled()
  56.       expect(rejectSpy).toHaveBeenCalled()
  57.       expect(reason instanceof Error).toBeTruthy()
  58.       expect((reason as AxiosError).message).toBe('Network Error')
  59.       expect(reason.request).toEqual(expect.any(XMLHttpRequest))
  61.       jasmine.Ajax.install()
  63.       done()
  64.     }
  65.   })
  67.   test('should reject when request timeout', done => {
  68.     let err: AxiosError
  70.     axios('/foo', {
  71.       timeout: 2000,
  72.       method: 'post'
  73.     }).catch(error => {
  74.       err = error
  75.     })
  77.     getAjaxRequest().then(request => {
  78.       // @ts-ignore
  79.       request.eventBus.trigger('timeout')
  81.       setTimeout(() => {
  82.         expect(err instanceof Error).toBeTruthy()
  83.         expect(err.message).toBe('Timeout of 2000 ms exceeded')
  84.         done()
  85.       }, 100)
  86.     })
  87.   })
  89.   test('should reject when validateStatus returns false', done => {
  90.     const resolveSpy = jest.fn((res: AxiosResponse) => {
  91.       return res
  92.     })
  94.     const rejectSpy = jest.fn((e: AxiosError) => {
  95.       return e
  96.     })
  98.     axios('/foo', {
  99.       validateStatus(status) {
  100.         return status !== 500
  101.       }
  102.     })
  103.       .then(resolveSpy)
  104.       .catch(rejectSpy)
  105.       .then(next)
  107.     getAjaxRequest().then(request => {
  108.       request.respondWith({
  109.         status: 500
  110.       })
  111.     })
  113.     function next(reason: AxiosError | AxiosResponse) {
  114.       expect(resolveSpy).not.toHaveBeenCalled()
  115.       expect(rejectSpy).toHaveBeenCalled()
  116.       expect(reason instanceof Error).toBeTruthy()
  117.       expect((reason as AxiosError).message).toBe('Request failed with status code 500')
  118.       expect((reason as AxiosError).response!.status).toBe(500)
  120.       done()
  121.     }
  122.   })
  124.   test('should resolve when validateStatus returns true', done => {
  125.     const resolveSpy = jest.fn((res: AxiosResponse) => {
  126.       return res
  127.     })
  129.     const rejectSpy = jest.fn((e: AxiosError) => {
  130.       return e
  131.     })
  133.     axios('/foo', {
  134.       validateStatus(status) {
  135.         return status === 500
  136.       }
  137.     })
  138.       .then(resolveSpy)
  139.       .catch(rejectSpy)
  140.       .then(next)
  142.     getAjaxRequest().then(request => {
  143.       request.respondWith({
  144.         status: 500
  145.       })
  146.     })
  148.     function next(res: AxiosResponse | AxiosError) {
  149.       expect(resolveSpy).toHaveBeenCalled()
  150.       expect(rejectSpy).not.toHaveBeenCalled()
  151.       expect(res.config.url).toBe('/foo')
  153.       done()
  154.     }
  155.   })
  157.   test('should return JSON when resolved', done => {
  158.     let response: AxiosResponse
  160.     axios('/api/account/signup', {
  161.       auth: {
  162.         username: '',
  163.         password: ''
  164.       },
  165.       method: 'post',
  166.       headers: {
  167.         Accept: 'application/json'
  168.       }
  169.     }).then(res => {
  170.       response = res
  171.     })
  173.     getAjaxRequest().then(request => {
  174.       request.respondWith({
  175.         status: 200,
  176.         statusText: 'OK',
  177.         responseText: '{"a": 1}'
  178.       })
  180.       setTimeout(() => {
  181.         expect(response.data).toEqual({ a: 1 })
  182.         done()
  183.       }, 100)
  184.     })
  185.   })
  187.   test('should return JSON when rejecting', done => {
  188.     let response: AxiosResponse
  190.     axios('/api/account/signup', {
  191.       auth: {
  192.         username: '',
  193.         password: ''
  194.       },
  195.       method: 'post',
  196.       headers: {
  197.         Accept: 'application/json'
  198.       }
  199.     }).catch(error => {
  200.       response = error.response
  201.     })
  203.     getAjaxRequest().then(request => {
  204.       request.respondWith({
  205.         status: 400,
  206.         statusText: 'Bad Request',
  207.         responseText: '{"error": "BAD USERNAME", "code": 1}'
  208.       })
  210.       setTimeout(() => {
  211.         expect(typeof response.data).toBe('object')
  212.         expect(response.data.error).toBe('BAD USERNAME')
  213.         expect(response.data.code).toBe(1)
  214.         done()
  215.       }, 100)
  216.     })
  217.   })
  219.   test('should supply correct response', done => {
  220.     let response: AxiosResponse
  222.     axios.post('/foo').then(res => {
  223.       response = res
  224.     })
  226.     getAjaxRequest().then(request => {
  227.       request.respondWith({
  228.         status: 200,
  229.         statusText: 'OK',
  230.         responseText: '{"foo": "bar"}',
  231.         responseHeaders: {
  232.           'Content-Type': 'application/json'
  233.         }
  234.       })
  236.       setTimeout(() => {
  237.         expect(response.data.foo).toBe('bar')
  238.         expect(response.status).toBe(200)
  239.         expect(response.statusText).toBe('OK')
  240.         expect(response.headers['content-type']).toBe('application/json')
  241.         done()
  242.       }, 100)
  243.     })
  244.   })
  246.   test('should allow overriding Content-Type header case-insensitive', () => {
  247.     let response: AxiosResponse
  249.     axios
  250.       .post(
  251.         '/foo',
  252.         { prop: 'value' },
  253.         {
  254.           headers: {
  255.             'content-type': 'application/json'
  256.           }
  257.         }
  258.       )
  259.       .then(res => {
  260.         response = res
  261.       })
  263.     return getAjaxRequest().then(request => {
  264.       expect(request.requestHeaders['Content-Type']).toBe('application/json')
  265.     })
  266.   })
  267. })

我们要注意的一些点，在这里列出：

  • beforeEach & afterEach

beforeEach表示每个测试用例运行前的钩子函数，在这里我们执行 jasmine.Ajax.install() 安装 jasmine.Ajax。

afterEach表示每个测试用例运行后的钩子函数，在这里我们执行 jasmine.Ajax.uninstall() 卸载 jasmine.Ajax。

  • getAjaxRequest

getAjaxRequest 是我们在 test/helper.ts 定义的一个辅助方法，通过 jasmine.Ajax.requests.mostRecent() 拿到最近一次请求的 request 对象，这个 request 对象是 jasmine-ajax 库伪造的 xhr 对象，它模拟了 xhr 对象上的方法，并且提供一些 api 让我们使用，比如 request.respondWith 方法返回一个响应。

  • 异步测试

注意到我们这里大部分的测试用例不再是同步的代码了，几乎都是一些异步逻辑，Jest 非常好地支持异步测试代码。通常有 2 种解决方案。

第一种是利用 done 参数，每个测试用例函数有一个 done 参数，一旦我们使用了该参数，只有当 done 函数执行的时候表示这个测试用例结束。

第二种是我们的测试函数返回一个 Promise 对象，一旦这个 Promise 对象 resolve 了，表示这个测试结束。

  • expect.any(constructor)

它表示匹配任意由 constructor 创建的对象实例。

  • request.eventBus.trigger

由于 request.responseTimeout 方法内部依赖了 jasmine.clock 方法会导致运行失败，这里我直接用了 request.eventBus.trigger('timeout') 方法触发了 timeout 事件。因为这个方法不在接口定义中，所以需要加 // @ts-ignore。

另外，我们在测试中发现 2 个 case 没有通过。

第一个是 should treat method value as lowercase string，这个测试用例是我们发送请求的 method 需要转换成小写字符串，这么做的目的也是为了之后 flattenHeaders 能正常处理这些 method，所以我们需要修改源码逻辑。

core/Axios.ts：

  1.   request(url: any, config?: any): AxiosPromise {
  2.     if (typeof url === 'string') {
  3.       if (!config) {
  4.         config = {}
  5.       }
  6.       config.url = url
  7.     } else {
  8.       config = url
  9.     }
  11.     config = mergeConfig(this.defaults, config)
  12.     config.method = config.method.toLowerCase()
  14.     // ...
  15.   }

在合并配置后，我们需要把 config.method 转成小写字符串。

另一个是 should return JSON when rejecting，这个测试用例是当我们发送请求失败后，也能把响应数据转换成 JSON 格式，所以也需要修改源码逻辑。

core/dispatchRequest.ts：

  1. export default function dispatchRequest(config: AxiosRequestConfig): AxiosPromise {
  2.   throwIfCancellationRequested(config)
  3.   processConfig(config)
  4.   return xhr(config).then(
  5.     res => {
  6.       return transformResponseData(res)
  7.     },
  8.     e => {
  9.       if (e && e.response) {
  10.         e.response = transformResponseData(e.response)
  11.       }
  12.       return Promise.reject(e)
  13.     }
  14.   )
  15. }

除了对正常情况的响应数据做转换，我们也需要对异常情况的响应数据做转换。

至此我们完成了 ts-axios 库对请求模块的测试，下一节课我们会从业务的角度来测试 headers 模块。