feat: 统一后台与用户端图片与文件上传交互,支持点击放大预览、删除与多图批量多选上传
这个提交包含在:
@@ -0,0 +1,100 @@
|
||||
import * as path from 'path';
|
||||
|
||||
const UPLOADER_UTS = path.resolve(
|
||||
__dirname,
|
||||
'../../../mpuniapp/components/image-uploader/useImageUploader.uts'
|
||||
);
|
||||
|
||||
function loadUploaderUTS() {
|
||||
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
||||
return require(UPLOADER_UTS);
|
||||
}
|
||||
|
||||
describe('Image Uploader (mpuniapp) UTS Unit Tests', () => {
|
||||
it('1. 初始化状态正确', () => {
|
||||
const { createImageUploaderState } = loadUploaderUTS();
|
||||
const state = createImageUploaderState();
|
||||
expect(state.images).toEqual([]);
|
||||
expect(state.uploading).toBe(false);
|
||||
expect(state.errorMessage).toBe('');
|
||||
});
|
||||
|
||||
it('2. 单图与多图添加,遵守 maxCount 截断', () => {
|
||||
const { createImageUploaderState, addImageUrls } = loadUploaderUTS();
|
||||
const state = createImageUploaderState();
|
||||
addImageUrls(state, ['https://cdn.omnicard.ai/img1.jpg'], 3);
|
||||
expect(state.images).toEqual(['https://cdn.omnicard.ai/img1.jpg']);
|
||||
|
||||
// 批量添加多张,上限为 3
|
||||
addImageUrls(
|
||||
state,
|
||||
[
|
||||
'https://cdn.omnicard.ai/img2.jpg',
|
||||
'https://cdn.omnicard.ai/img3.jpg',
|
||||
'https://cdn.omnicard.ai/img4.jpg',
|
||||
],
|
||||
3
|
||||
);
|
||||
expect(state.images).toEqual([
|
||||
'https://cdn.omnicard.ai/img1.jpg',
|
||||
'https://cdn.omnicard.ai/img2.jpg',
|
||||
'https://cdn.omnicard.ai/img3.jpg',
|
||||
]);
|
||||
});
|
||||
|
||||
it('3. 单张图片删除与全部清空', () => {
|
||||
const { createImageUploaderState, addImageUrls, removeImageByIndex, clearAllImages } =
|
||||
loadUploaderUTS();
|
||||
const state = createImageUploaderState();
|
||||
addImageUrls(state, [
|
||||
'https://cdn.omnicard.ai/img1.jpg',
|
||||
'https://cdn.omnicard.ai/img2.jpg',
|
||||
'https://cdn.omnicard.ai/img3.jpg',
|
||||
]);
|
||||
|
||||
// 删除第 2 张 (索引 1)
|
||||
removeImageByIndex(state, 1);
|
||||
expect(state.images).toEqual([
|
||||
'https://cdn.omnicard.ai/img1.jpg',
|
||||
'https://cdn.omnicard.ai/img3.jpg',
|
||||
]);
|
||||
|
||||
// 全部清空
|
||||
clearAllImages(state);
|
||||
expect(state.images).toEqual([]);
|
||||
});
|
||||
|
||||
it('4. 大图预览 URL 序列提取', () => {
|
||||
const { createImageUploaderState, addImageUrls, resolvePreviewUrls } = loadUploaderUTS();
|
||||
const state = createImageUploaderState();
|
||||
addImageUrls(state, ['https://cdn.omnicard.ai/a.png', 'https://cdn.omnicard.ai/b.png']);
|
||||
const previewUrls = resolvePreviewUrls(state);
|
||||
expect(previewUrls).toEqual([
|
||||
'https://cdn.omnicard.ai/a.png',
|
||||
'https://cdn.omnicard.ai/b.png',
|
||||
]);
|
||||
});
|
||||
|
||||
it('5. 模拟选图与上传流程成功', async () => {
|
||||
const { createImageUploaderState, chooseAndUploadImages } = loadUploaderUTS();
|
||||
const state = createImageUploaderState();
|
||||
const mockChooseFn = jest.fn((opts: { count?: number; success?: (res: { tempFilePaths: string[] }) => void }) => {
|
||||
opts.success?.({
|
||||
tempFilePaths: [
|
||||
'file:///tmp/mock1.png',
|
||||
'file:///tmp/mock2.png',
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
const success = await chooseAndUploadImages(state, {
|
||||
chooseImageFn: mockChooseFn,
|
||||
maxCount: 5,
|
||||
multiple: true,
|
||||
});
|
||||
|
||||
expect(success).toBe(true);
|
||||
expect(state.images.length).toBe(2);
|
||||
expect(state.uploading).toBe(false);
|
||||
});
|
||||
});
|
||||
在新工单中引用
屏蔽一个用户