tongChong
/
wangEditor
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

test: 优化了 upload-img 测试

This commit is contained in:
luochao 2021-01-10 11:50:35 +08:00
parent eb81c4b274
commit 0d793c573c
1 changed files with 85 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

203
test/unit/menus/img/upload-img.test.ts
View File

@ -2,19 +2,19 @@
* @description upload-img test
* @author luochao
*/
import createEditor from '../../../helpers/create-editor'
import mockCmdFn from '../../../helpers/command-mock'
import mockFile from '../../../helpers/mock-file'
import mockXHR from '../../../helpers/mock-xhr'
import Editor from '../../../../src/editor'
import UploadImg from '../../../../src/menus/img/upload-img'
let editor: Editor
let id = 1
const imgUrl = 'http://www.wangeditor.com/imgs/logo.jpeg'
const errorUrl = 'logo123.jpeg'
const errorUrl = 'error.jpeg'
const uploadImgServer = 'http://localhost:8881/api/upload-img'
const uploadImgServerWithHash = 'http://localhost:8881/api/upload-img#/123'
const defaultRes = {
status: 200,
@ -32,7 +32,7 @@ const mockXHRHttpRequest = (res: any = defaultRes) => {
return mockXHRObject
}
const createUploadImgInstance = (config: any) => {
const createUploadImgInstance = (config: any = {}) => {
const editor = createEditor(document, `div${id++}`, '', config)
const uploadImg = new UploadImg(editor)
return uploadImg
@ -43,44 +43,38 @@ const mockSupportCommand = () => {
document.queryCommandSupported = jest.fn(() => true)
}
const deaultFiles = [{ name: 'test.png', size: 512, mimeType: 'image/png' }]
const createMockFilse = (fileList: any[] = deaultFiles) => {
const defaultFiles = [{ name: 'test.png', size: 512, mimeType: 'image/png' }]
const createMockFiles = (fileList: any[] = defaultFiles) => {
const files = fileList.map(file => mockFile(file))
return files.filter(Boolean)
}
// mock img onload and onerror event
const mockImgOnloadAndOnError = () => {
// Mocking Image.prototype.src to call the onload or onerror
// callbacks depending on the src passed to it
// @ts-ignore
Object.defineProperty(global.Image.prototype, 'src', {
// Define the property setter
set(src) {
if (src === errorUrl) {
// Call with setTimeout to simulate async loading
setTimeout(() => this.onerror(new Error('mocked error')))
} else if (src === imgUrl) {
setTimeout(() => this.onload())
}
},
})
}
describe('upload img', () => {
// mock img onload and onerror event
beforeAll(() => {
// Mocking Image.prototype.src to call the onload or onerror
// callbacks depending on the src passed to it
// @ts-ignore
Object.defineProperty(global.Image.prototype, 'src', {
// Define the property setter
set(src) {
if (src === errorUrl) {
// Call with setTimeout to simulate async loading
setTimeout(() => this.onerror(new Error('mocked error')))
} else if (src === imgUrl) {
setTimeout(() => this.onload())
}
},
})
})
beforeEach(() => {
editor = createEditor(document, `div${id++}`)
})
test('能够初始化基本的UploadImg类', () => {
const uploadImg = new UploadImg(editor)
expect(uploadImg.insertImg instanceof Function).toBeTruthy()
expect(uploadImg.uploadImg instanceof Function).toBeTruthy()
// mock img onload and onerror event
mockImgOnloadAndOnError()
})
test('调用 insertImg 可以网编辑器里插入图片', () => {
const uploadImg = new UploadImg(editor)
const uploadImg = createUploadImgInstance()
mockSupportCommand()
@ -104,11 +98,6 @@ describe('upload img', () => {
uploadImg.insertImg(imgUrl)
expect(document.execCommand).toBeCalledWith(
'insertHTML',
false,
`<img src="${imgUrl}" style="max-width:100%;"/>`
)
expect(callback).toBeCalledWith(imgUrl)
})
@ -130,10 +119,10 @@ describe('upload img', () => {
`wangEditor: 插入图片错误，图片链接 "${errorUrl}"，下载链接失败`
)
done()
}, 1000)
}, 200)
})
test('调用 uploadImg 上传图片', done => {
test('可以调用 uploadImg 上传图片', done => {
expect.assertions(1)
const jestFn = jest.fn()
@ -145,7 +134,7 @@ describe('upload img', () => {
},
})
const files = createMockFilse()
const files = createMockFiles()
const mockXHRObject = mockXHRHttpRequest()
upload.uploadImg(files)
@ -158,24 +147,24 @@ describe('upload img', () => {
}, 1000)
})
test('调用 uploadImg 上传图片，如果传入的文件为空直接返回', () => {
const upload = new UploadImg(editor)
test('调用 uploadImg 上传图片，如果传入的文件为空直接返回 undefined，不执行上传操作', () => {
const upload = createUploadImgInstance()
const res = upload.uploadImg([])
expect(res).toBeUndefined()
})
test('调用 uploadImg 上传图片，如果没有配置customUploadImg, 则必须配置 uploadImgServer 或者 uploadImgShowBase64', () => {
const upload = new UploadImg(editor)
const files = createMockFilse()
test('调用 uploadImg 上传图片，如果没有配置customUploadImg, 则必须配置 uploadImgServer 或者 uploadImgShowBase64，否则直接返回', () => {
const upload = createUploadImgInstance()
const files = createMockFiles()
const res = upload.uploadImg(files)
expect(res).toBeUndefined()
})
test('调用 uploadImg 上传图片，如果文件没有名字或者size为，则会被过滤掉', () => {
test('调用 uploadImg 上传图片，如果文件没有名字或者size为0，则会弹窗警告', () => {
const fn = jest.fn()
const upload = createUploadImgInstance({
@ -183,15 +172,14 @@ describe('upload img', () => {
customAlert: fn,
})
const files = createMockFilse([{ name: '', size: 0, mimeType: 'image/png' }])
const files = createMockFiles([{ name: '', size: 0, mimeType: 'image/png' }])
const res = upload.uploadImg(files)
upload.uploadImg(files)
expect(res).toBeUndefined()
expect(fn).toBeCalledWith('传入的文件不合法', 'warning')
})
test('调用 uploadImg 上传图片，如果文件非图片，则返回并提示错误信息', () => {
test('调用 uploadImg 上传图片，如果文件非图片，则提示错误信息', () => {
const fn = jest.fn()
const upload = createUploadImgInstance({
@ -199,15 +187,14 @@ describe('upload img', () => {
customAlert: fn,
})
const files = createMockFilse([{ name: 'test.txt', size: 200, mimeType: 'text/plain' }])
const files = createMockFiles([{ name: 'test.txt', size: 200, mimeType: 'text/plain' }])
const res = upload.uploadImg(files)
upload.uploadImg(files)
expect(res).toBeUndefined()
expect(fn).toBeCalledWith('图片验证未通过: \n【test.txt】不是图片', 'warning')
})
test('调用 uploadImg 上传图片，如果文件体积大小超过配置的大小，则返回并提示错误信息', () => {
test('调用 uploadImg 上传图片，如果文件体积大小超过配置的大小，则提示错误信息', () => {
const fn = jest.fn()
const upload = createUploadImgInstance({
@ -216,13 +203,12 @@ describe('upload img', () => {
customAlert: fn,
})
const files = createMockFilse([
const files = createMockFiles([
{ name: 'test.png', size: 6 * 1024 * 1024, mimeType: 'image/png' },
])
const res = upload.uploadImg(files)
upload.uploadImg(files)
expect(res).toBeUndefined()
expect(fn).toBeCalledWith(`图片验证未通过: \n【test.png】大于 5M`, 'warning')
})
@ -235,19 +221,18 @@ describe('upload img', () => {
customAlert: fn,
})
const files = createMockFilse([
const files = createMockFiles([
{ name: 'test1.png', size: 2048, mimeType: 'image/png' },
{ name: 'test2.png', size: 2048, mimeType: 'image/png' },
{ name: 'test3.png', size: 2048, mimeType: 'image/png' },
])
const res = upload.uploadImg(files)
upload.uploadImg(files)
expect(res).toBeUndefined()
expect(fn).toBeCalledWith('一次最多上传2张图片', 'warning')
})
test('调用 uploadImg 上传图片，如果配置了 customUploadImg 选项，则调用customUploadImg上传', () => {
test('调用 uploadImg 上传图片，如果配置了 customUploadImg 选项，则调用 customUploadImg 上传', () => {
const fn = jest.fn()
const upload = createUploadImgInstance({
@ -255,15 +240,14 @@ describe('upload img', () => {
customUploadImg: fn,
})
const files = createMockFilse()
const files = createMockFiles()
const res = upload.uploadImg(files)
upload.uploadImg(files)
expect(res).toBeUndefined()
expect(fn).toBeCalled()
})
test('调用 uploadImg 上传图片，如果可以配置uploadImgParamsWithUrl添加query参数', done => {
test('调用 uploadImg 上传图片，如果配置了 uploadImgParamsWithUrl 为true， 则允许添加query参数', done => {
expect.assertions(1)
const fn = jest.fn()
@ -280,7 +264,7 @@ describe('upload img', () => {
},
})
const files = createMockFilse()
const files = createMockFiles()
const mockXHRObject = mockXHRHttpRequest()
@ -289,18 +273,18 @@ describe('upload img', () => {
mockXHRObject.onreadystatechange()
setTimeout(() => {
expect(fn).toBeCalled()
expect(mockXHRObject.open).toHaveBeenCalledWith('POST', `${uploadImgServer}?a=a&b=b`)
done()
})
})
test('调用 uploadImg 上传图片，uploadImgServer支持hash参数拼接', done => {
test('调用 uploadImg 上传图片，uploadImgServer支持 hash query 参数拼接', done => {
expect.assertions(1)
const fn = jest.fn()
const upload = createUploadImgInstance({
uploadImgServer,
uploadImgServer: uploadImgServerWithHash,
uploadImgParams: {
a: 'a',
b: 'b',
@ -311,10 +295,7 @@ describe('upload img', () => {
},
})
const files = createMockFilse([
{ name: 'test1.png', size: 2048, mimeType: 'image/png' },
{ name: 'test2.png', size: 2048, mimeType: 'image/png' },
])
const files = createMockFiles([{ name: 'test1.png', size: 2048, mimeType: 'image/png' }])
const mockXHRObject = mockXHRHttpRequest()
@ -323,25 +304,28 @@ describe('upload img', () => {
mockXHRObject.onreadystatechange()
setTimeout(() => {
expect(fn).toBeCalled()
expect(mockXHRObject.open).toHaveBeenCalledWith(
'POST',
`${uploadImgServer}?a=a&b=b#/123`
)
done()
})
})
test('调用 uploadImg 上传图片失败，会有错误提示，并支持配置onError hook', done => {
expect.assertions(2)
test('调用 uploadImg 上传图片失败，支持配置 onError 钩子监听', done => {
expect.assertions(1)
const fn = jest.fn()
const errorFn = jest.fn()
const alertFn = jest.fn()
const upload = createUploadImgInstance({
uploadImgServer,
uploadImgHooks: {
error: fn,
error: errorFn,
},
customAlert: alertFn,
})
const files = createMockFilse()
const files = createMockFiles()
const mockXHRObject = mockXHRHttpRequest({ status: 500 })
@ -350,18 +334,13 @@ describe('upload img', () => {
mockXHRObject.onreadystatechange()
setTimeout(() => {
expect(fn).toBeCalled()
expect(alertFn).toBeCalledWith(
'上传图片错误',
'error',
'上传图片错误，服务器返回状态: 500'
)
expect(errorFn).toBeCalled()
done()
})
})
test('调用 uploadImg 上传图片成功后数据返回不正常，会有错误提示，并支持配置onFail hook', done => {
expect.assertions(2)
test('调用 uploadImg 上传图片成功后数据返回格式不正常，支持配置 onFail 钩子监听', done => {
expect.assertions(1)
const fn = jest.fn()
const alertFn = jest.fn()
@ -373,7 +352,7 @@ describe('upload img', () => {
},
customAlert: alertFn,
})
const files = createMockFilse()
const files = createMockFiles()
const mockXHRObject = mockXHRHttpRequest({
status: 200,
@ -386,11 +365,6 @@ describe('upload img', () => {
setTimeout(() => {
expect(fn).toBeCalled()
expect(alertFn).toBeCalledWith(
'上传图片失败',
'error',
'上传图片返回结果错误，返回结果: {test: 123}'
)
done()
})
})
@ -407,7 +381,7 @@ describe('upload img', () => {
},
})
const files = createMockFilse()
const files = createMockFiles()
const mockXHRObject = mockXHRHttpRequest()
@ -421,21 +395,21 @@ describe('upload img', () => {
})
})
test('调用 uploadImg 上传被阻止，会有错误提示', done => {
test('调用 uploadImg， 如果配置 before 钩子阻止上传，会有错误提示', done => {
expect.assertions(2)
const beforFn = jest.fn(() => ({ prevent: true, msg: '阻止发送请求' }))
const beforeFn = jest.fn(() => ({ prevent: true, msg: '阻止发送请求' }))
const alertFn = jest.fn()
const upload = createUploadImgInstance({
uploadImgServer,
uploadImgHooks: {
before: beforFn,
before: beforeFn,
},
customAlert: alertFn,
})
const files = createMockFilse()
const files = createMockFiles()
const mockXHRObject = mockXHRHttpRequest()
@ -444,14 +418,14 @@ describe('upload img', () => {
mockXHRObject.onreadystatechange()
setTimeout(() => {
expect(beforFn).toBeCalled()
expect(beforeFn).toBeCalled()
expect(alertFn).toBeCalledWith('阻止发送请求', 'error')
done()
})
})
test('调用 uploadImg 上传返回的错误码不符合条件会有错误提示，并触发fail回调', done => {
expect.assertions(2)
test('调用 uploadImg 上传返回的错误码不符合条件, 会触发fail回调', done => {
expect.assertions(1)
const failFn = jest.fn()
const alertFn = jest.fn()
@ -464,7 +438,7 @@ describe('upload img', () => {
customAlert: alertFn,
})
const files = createMockFilse()
const files = createMockFiles()
const mockXHRObject = mockXHRHttpRequest({
status: 200,
@ -477,39 +451,33 @@ describe('upload img', () => {
setTimeout(() => {
expect(failFn).toBeCalled()
expect(alertFn).toBeCalledWith(
'上传图片失败',
'error',
'上传图片返回结果错误，返回结果 errno=-1'
)
done()
})
})
test('调用 uploadImg 上传，如果配置 uploadImgShowBase64 参数，则直接插入base64到编辑器', () => {
const callback = jest.fn()
test('调用 uploadImg 上传，如果配置 uploadImgShowBase64 参数，则直接插入图片 base64 字符串到编辑器', () => {
const upload = createUploadImgInstance({
uploadImgShowBase64: true,
linkImgCallback: callback,
})
const files = createMockFilse()
const mockFn = jest.fn()
const files = createMockFiles()
const mockReadAsDataURL = jest.fn()
// @ts-ignore
jest.spyOn(global, 'FileReader').mockImplementation(() => {
return {
readAsDataURL: mockFn,
readAsDataURL: mockReadAsDataURL,
}
})
upload.uploadImg(files)
expect(mockFn).toBeCalled()
expect(mockReadAsDataURL).toBeCalled()
})
test('调用 uploadImg 上传超时会触发超时回调', done => {
expect.assertions(2)
expect.assertions(1)
const timeoutFn = jest.fn()
const alertFn = jest.fn()
@ -522,7 +490,7 @@ describe('upload img', () => {
customAlert: alertFn,
})
const files = createMockFilse()
const files = createMockFiles()
const mockXHRObject = mockXHRHttpRequest()
upload.uploadImg(files)
@ -531,7 +499,6 @@ describe('upload img', () => {
setTimeout(() => {
expect(timeoutFn).toBeCalled()
expect(alertFn).toBeCalledWith('上传图片超时', 'error')
done()
})
})