课程名称：web前端架构师

课程章节：第11周 第五章

主讲老师：张轩

课程内容：通测试驱动开发，完成上传组件的钩子

分析

我的的上传组件需要支持传入的钩子函数

<upload-file beforeUpload="xxx"/>

钩子函数有

• beforeUpload，上传之前
• onProgross, 上传过程中
• onSuccess，上传成功
• onError ，上传失败
• onChange, 文件修改

编写测试文件

beforeUpload

beforeUpload 返回一个布尔值或 promise 的布尔值

• 返回 false 时，不会发送请求
• 返回 true ，正常发送请求
  测试beforeUpload是否会正常调用

it.only('before upload check', async () => {
  const beforeUpload = vi.fn((file:File) => file)
  const wrapper = mount(UploadFile, {
    props: {
      beforeUpload
    }
  })
  const fileInput = wrapper.get('input').element
  // 设置 input val, 并返回上传文件的对象
  const testFile = setInputVal(fileInput)
  wrapper.get('input').trigger('change')
  expect(beforeUpload).toHaveBeenCalled()
  expect(request).not.toHaveBeenCalled()
  expect(wrapper.findAll('li').length).toBe(0)
  // 测试 beforeUpload 的参数是否时上传的文件
  expect(beforeUpload).toHaveBeenCalledWith(testFile)
})

测试布尔值

it.only('before upload check use boolean', async () => {
  const wrapper = mount(UploadFile, {
    props: {
      beforeUpload: vi.fn(() => false)
    }
  })
  const fileInput = wrapper.get('input').element
  setInputVal(fileInput)
  wrapper.get('input').trigger('change')
  await flushPromises()
  expect(request).not.toHaveBeenCalled()
  expect(wrapper.findAll('li').length).toBe(0)
})

测试 promsie 布尔值 ,增加了 await flushPromises()

it.only('before upload check use promise boolean', async () => {
  const wrapper = mount(UploadFile, {
    props: {
      beforeUpload: vi.fn(() => new Promise(resolve => {
        setTimeout(() => {
          resolve(false)
        }, 300)
      }))
    }
  })
  const fileInput = wrapper.get('input').element
  setInputVal(fileInput)
  wrapper.get('input').trigger('change')
  await flushPromises()
  expect(request).not.toHaveBeenCalled()
  expect(wrapper.findAll('li').length).toBe(0)
})

编写代码

接下来编写代码，代码很简单，只有下面几行

if (props.beforeUpload) {
 const res = await props.beforeUpload(uploadFile)
 if (!res) {
   return
 }
}

这次测试的代码要远比实现代码多的多，但是它可以很好的体现用户的所有操作流程

测试写的越详细，就越能发现代码中存在的问题。

回顾这周

未完成的功能

上传钩子

• onProgross, 上传过程中
• onSuccess，上传成功
• onError ，上传失败
• onChange, 文件修改

拖拽上传

需要优化和新增的内容

• 自定义 headers
• 自定义 file
• 更多需要发送的数据
• 支持 input 原生属性
  • multiple
  • accept
  • …
• with-credentials 请求时是否携带 cookie， 默认为 false
• 上传前图片裁切