Files
sori.studio/tests/markdown-editor-media.test.js

563 lines
18 KiB
JavaScript

import assert from 'node:assert/strict'
import test from 'node:test'
import {
buildMediaPickerApplyState,
buildMediaPickerEmptyMessage,
buildMediaPickerPageItems,
buildMediaPickerRangeLabel,
buildMediaPickerUploadHint,
createMediaPickerFetchQuery,
createMediaUploadFormData,
createMediaBlockMarkdown,
createDefaultMediaPickerPagination,
createSelectedMediaInsertPlan,
filterImageUploadFiles,
findUploadSizeLimitError,
formatMediaFileSize,
getGallerySelectionOrder,
getMediaItemKind,
getMediaPickerAcceptForTarget,
getMediaPickerKindForTarget,
getMediaPickerPreviewUrl,
getMediaPickerTitleForTarget,
isGalleryMediaPickerTarget,
isMediaItemSelectableForTarget,
isUploadFileAllowedForMediaTarget,
normalizeMediaUploadFiles,
normalizeMediaPickerPage,
normalizeMediaPickerResponse,
resolveImageUploadInsertTarget,
resolveSelectedMediaItems,
resolveUploadedMediaFiles,
resolveUploadFetchErrorMessage,
toggleMediaSelectionState
} from '../lib/markdown-editor-media.js'
import { buildDefaultUploadSizeLimits } from '../lib/upload-size-limit.js'
test('미디어 파일 크기를 표시 문자열로 변환한다', () => {
assert.equal(formatMediaFileSize(512), '512 B')
assert.equal(formatMediaFileSize(1536), '2 KB')
assert.equal(formatMediaFileSize(1024 * 1024 * 1.5), '1.5 MB')
assert.equal(formatMediaFileSize(0), '')
})
test('미디어 항목 kind가 없으면 확장자와 URL로 종류를 판별한다', () => {
assert.equal(getMediaItemKind({ url: '/uploads/a.webp' }), 'image')
assert.equal(getMediaItemKind({ url: '/uploads/a.mp4?x=1' }), 'video')
assert.equal(getMediaItemKind({ url: '/uploads/a.m4a' }), 'audio')
assert.equal(getMediaItemKind({ url: '/uploads/a.zip' }), 'file')
})
test('선택 대상별로 허용 미디어를 판별하고 파생 썸네일은 제외한다', () => {
assert.equal(isMediaItemSelectableForTarget({ url: '/uploads/posts/2026/07/a.png' }, 'image'), true)
assert.equal(isMediaItemSelectableForTarget({ url: '/uploads/posts/2026/07/a.mp4' }, 'image'), false)
assert.equal(isMediaItemSelectableForTarget({ url: '/uploads/posts/2026/07/a.mp4' }, 'video'), true)
assert.equal(isMediaItemSelectableForTarget({ url: '/uploads/posts/2026/07/thumbs/a-card.webp' }, 'image'), false)
assert.equal(isMediaItemSelectableForTarget({ url: '/uploads/posts/2026/07/thumbs/a-body-720.webp' }, 'gallery'), false)
})
test('미디어 선택 미리보기는 본문 파생 썸네일을 우선한다', () => {
assert.equal(getMediaPickerPreviewUrl({
url: '/uploads/posts/2026/07/a.png',
updatedAt: '2026-07-24T00:00:00.000Z',
size: 100,
bodyThumbnailStatus: {
hasThumbnail: true
}
}), '/uploads/posts/2026/07/thumbs/a-body-720.webp?v=2026-07-24T00%3A00%3A00.000Z-100')
})
test('업로드 파일은 선택 대상별 MIME 타입으로 허용 여부를 판별한다', () => {
assert.equal(isUploadFileAllowedForMediaTarget({ type: 'image/png' }, 'gallery'), true)
assert.equal(isUploadFileAllowedForMediaTarget({ type: 'video/mp4' }, 'video'), true)
assert.equal(isUploadFileAllowedForMediaTarget({ type: 'audio/mpeg' }, 'audio'), true)
assert.equal(isUploadFileAllowedForMediaTarget({ type: 'application/pdf' }, 'file'), true)
assert.equal(isUploadFileAllowedForMediaTarget({ type: 'image/png' }, 'file'), false)
})
test('미디어 선택 대상별 입력 accept와 API kind를 계산한다', () => {
assert.equal(getMediaPickerAcceptForTarget('image'), 'image/*')
assert.equal(getMediaPickerAcceptForTarget('gallery'), 'image/*')
assert.equal(getMediaPickerAcceptForTarget('video'), 'video/*')
assert.equal(getMediaPickerAcceptForTarget('audio'), 'audio/*')
assert.equal(getMediaPickerAcceptForTarget('file'), '.pdf,.zip,.txt,.csv,.docx,.xlsx,.pptx')
assert.equal(getMediaPickerKindForTarget('image'), 'image')
assert.equal(getMediaPickerKindForTarget('active-gallery'), 'image')
assert.equal(getMediaPickerKindForTarget('video'), 'video')
assert.equal(getMediaPickerKindForTarget('file'), 'file')
assert.equal(getMediaPickerKindForTarget('unknown'), 'all')
})
test('미디어 선택 대상별 모달 제목을 계산한다', () => {
assert.equal(getMediaPickerTitleForTarget('image'), '이미지 선택')
assert.equal(getMediaPickerTitleForTarget('gallery'), '갤러리 이미지 선택')
assert.equal(getMediaPickerTitleForTarget('active-gallery'), '갤러리 이미지 선택')
assert.equal(getMediaPickerTitleForTarget('video'), '비디오 선택')
assert.equal(getMediaPickerTitleForTarget('audio'), '오디오 선택')
assert.equal(getMediaPickerTitleForTarget('file'), '파일 선택')
assert.equal(getMediaPickerTitleForTarget('unknown'), '이미지 선택')
})
test('미디어 선택 대상별 갤러리 여부와 업로드 안내 문구를 계산한다', () => {
const uploadSizeLimits = buildDefaultUploadSizeLimits({
image: 10485760,
video: 209715200,
audio: 52428800,
document: 52428800
})
assert.equal(isGalleryMediaPickerTarget('gallery'), true)
assert.equal(isGalleryMediaPickerTarget('active-gallery'), true)
assert.equal(isGalleryMediaPickerTarget('image'), false)
assert.equal(buildMediaPickerUploadHint('gallery', uploadSizeLimits), '여러 이미지를 한 번에 선택할 수 있습니다. (최대 10MB)')
assert.equal(buildMediaPickerUploadHint('video', uploadSizeLimits), 'MP4, WebM, MOV 비디오를 업로드할 수 있습니다. (최대 200MB)')
assert.equal(buildMediaPickerUploadHint('audio', uploadSizeLimits), 'MP3, WAV, OGG, M4A 오디오를 업로드할 수 있습니다. (최대 50MB)')
assert.equal(buildMediaPickerUploadHint('file', uploadSizeLimits), 'PDF, ZIP, 문서 파일을 업로드할 수 있습니다. (최대 50MB)')
assert.equal(buildMediaPickerUploadHint('image', uploadSizeLimits), '단일 이미지가 본문에 삽입됩니다. (최대 10MB)')
})
test('미디어 선택 라이브러리 빈 상태 문구를 계산한다', () => {
assert.equal(buildMediaPickerEmptyMessage(''), '선택할 미디어가 없습니다. 업로드 탭에서 파일을 추가할 수 있습니다.')
assert.equal(buildMediaPickerEmptyMessage(' car '), '「car」에 맞는 미디어가 없습니다.')
})
test('미디어 선택 적용 버튼 상태를 계산한다', () => {
assert.deepEqual(buildMediaPickerApplyState({
selectedUrls: [],
isUploading: false,
isGallery: false
}), {
disabled: true,
label: '삽입'
})
assert.deepEqual(buildMediaPickerApplyState({
selectedUrls: ['/a.png'],
isUploading: true,
isGallery: false
}), {
disabled: true,
label: '삽입'
})
assert.deepEqual(buildMediaPickerApplyState({
selectedUrls: ['/a.png', '/b.png'],
isUploading: false,
isGallery: true
}), {
disabled: false,
label: '2개 삽입'
})
})
test('미디어 선택 목록 조회 query를 계산한다', () => {
assert.deepEqual(createMediaPickerFetchQuery({
page: 2,
pageSize: 50,
kind: 'image',
searchQuery: ' 스크린샷 '
}), {
paged: '1',
tab: 'library',
page: 2,
pageSize: 50,
kind: 'image',
search: '스크린샷'
})
assert.deepEqual(createMediaPickerFetchQuery({
page: 1,
pageSize: 50,
kind: 'all',
searchQuery: ' '
}), {
paged: '1',
tab: 'library',
page: 1,
pageSize: 50,
kind: 'all',
search: undefined
})
})
test('미디어 항목으로 fenced 미디어 블록을 만든다', () => {
assert.deepEqual(createMediaBlockMarkdown('video', {
url: '/uploads/a.mp4',
title: '영상'
}), [':::video', 'url=/uploads/a.mp4', 'title=영상', 'caption=', ':::'])
assert.deepEqual(createMediaBlockMarkdown('file', {
url: '/uploads/a.pdf',
name: 'a.pdf',
size: 2048
}), [':::file', 'url=/uploads/a.pdf', 'title=a.pdf', 'description=', 'name=a.pdf', 'size=2 KB', ':::'])
})
test('선택 미디어 삽입 계획은 슬래시 줄 삽입과 일반 삽입을 구분한다', () => {
assert.deepEqual(createSelectedMediaInsertPlan({
target: 'image',
selectedItems: [{ url: '/uploads/a.png' }],
liveSlashLine: 3
}), {
kind: 'insert-at-line',
line: 3,
lines: ['![](/uploads/a.png)']
})
assert.deepEqual(createSelectedMediaInsertPlan({
target: 'gallery',
selectedItems: [{ url: '/uploads/a.png' }, { url: '/uploads/b.png' }],
liveSlashLine: 1
}), {
kind: 'insert-at-line',
line: 1,
lines: [':::gallery', '![](/uploads/a.png)', '![](/uploads/b.png)', ':::']
})
assert.deepEqual(createSelectedMediaInsertPlan({
target: 'video',
selectedItems: [{ url: '/uploads/a.mp4', title: '영상' }],
liveSlashLine: 2
}), {
kind: 'insert-at-line',
line: 2,
lines: [':::video', 'url=/uploads/a.mp4', 'title=영상', 'caption=', ':::']
})
})
test('선택 미디어 삽입 계획은 일반 삽입 대상을 구분한다', () => {
assert.deepEqual(createSelectedMediaInsertPlan({
target: 'image',
selectedItems: [{ url: '/uploads/a.png' }],
liveSlashLine: null
}), {
kind: 'image',
image: {
url: '/uploads/a.png',
useAlt: false,
caption: ''
}
})
assert.deepEqual(createSelectedMediaInsertPlan({
target: 'active-gallery',
selectedItems: [{ url: '/uploads/a.png' }, { url: '/uploads/b.png' }],
liveSlashLine: null
}), {
kind: 'active-gallery',
images: [
{
url: '/uploads/a.png',
useAlt: false,
caption: ''
},
{
url: '/uploads/b.png',
useAlt: false,
caption: ''
}
]
})
assert.deepEqual(createSelectedMediaInsertPlan({
target: 'file',
selectedItems: [{ url: '/uploads/a.pdf', name: 'a.pdf', size: 2048 }],
liveSlashLine: null
}), {
kind: 'block',
lines: [':::file', 'url=/uploads/a.pdf', 'title=a.pdf', 'description=', 'name=a.pdf', 'size=2 KB', ':::']
})
})
test('선택 미디어 삽입 계획은 적용할 항목이 없으면 무시한다', () => {
assert.deepEqual(createSelectedMediaInsertPlan({
target: 'image',
selectedItems: [],
liveSlashLine: null
}), {
kind: 'none'
})
assert.deepEqual(createSelectedMediaInsertPlan({
target: 'unknown',
selectedItems: [{ url: '/uploads/a.png' }],
liveSlashLine: 1
}), {
kind: 'none'
})
})
test('업로드 입력 파일 목록을 배열과 FormData로 정규화한다', () => {
const imageFile = new File(['a'], 'a.png', { type: 'image/png' })
const textFile = new File(['b'], 'b.txt', { type: 'text/plain' })
const files = normalizeMediaUploadFiles([imageFile, null, textFile])
assert.deepEqual(files, [imageFile, textFile])
const formData = createMediaUploadFormData(files)
assert.deepEqual(formData.getAll('files'), [imageFile, textFile])
})
test('업로드 응답과 이미지 업로드 삽입 대상을 계산한다', () => {
const uploadedFiles = [{ url: '/uploads/a.png' }]
assert.deepEqual(resolveUploadedMediaFiles({ files: uploadedFiles }), uploadedFiles)
assert.deepEqual(resolveUploadedMediaFiles({}), [])
assert.equal(resolveImageUploadInsertTarget([
new File(['a'], 'a.png', { type: 'image/png' })
]), 'image')
assert.equal(resolveImageUploadInsertTarget([
new File(['a'], 'a.png', { type: 'image/png' }),
new File(['b'], 'b.png', { type: 'image/png' })
]), 'gallery')
})
test('업로드 파일 목록에서 이미지만 골라낸다', () => {
const imageFile = new File(['a'], 'a.png', { type: 'image/png' })
const textFile = new File(['b'], 'b.txt', { type: 'text/plain' })
assert.deepEqual(filterImageUploadFiles([imageFile, textFile]), [imageFile])
})
test('갤러리 선택 순서를 선택 URL 순서로 반환한다', () => {
assert.equal(getGallerySelectionOrder(['/a.png', '/b.png'], '/b.png'), 2)
assert.equal(getGallerySelectionOrder(['/a.png'], '/b.png'), 0)
})
test('단일 미디어 선택은 기존 선택을 새 항목 하나로 교체한다', () => {
assert.deepEqual(toggleMediaSelectionState({
selectedUrls: ['/old.png'],
selectedItemMap: {
'/old.png': { url: '/old.png' }
},
mediaItem: { url: '/new.png', name: 'new' },
isGallery: false
}), {
selectedUrls: ['/new.png'],
selectedItemMap: {
'/new.png': { url: '/new.png', name: 'new' }
}
})
})
test('갤러리 미디어 선택은 선택 추가와 제거를 토글한다', () => {
const selected = toggleMediaSelectionState({
selectedUrls: ['/a.png'],
selectedItemMap: {
'/a.png': { url: '/a.png' }
},
mediaItem: { url: '/b.png' },
isGallery: true
})
assert.deepEqual(selected.selectedUrls, ['/a.png', '/b.png'])
assert.deepEqual(Object.keys(selected.selectedItemMap), ['/a.png', '/b.png'])
assert.deepEqual(toggleMediaSelectionState({
selectedUrls: selected.selectedUrls,
selectedItemMap: selected.selectedItemMap,
mediaItem: { url: '/a.png' },
isGallery: true
}), {
selectedUrls: ['/b.png'],
selectedItemMap: {
'/b.png': { url: '/b.png' }
}
})
})
test('선택된 URL 순서대로 미디어 항목을 해석한다', () => {
assert.deepEqual(resolveSelectedMediaItems(
['/a.png', '/b.png', '/missing.png'],
{
'/a.png': { url: '/a.png', source: 'map' }
},
[
{ url: '/b.png', source: 'list' }
]
), [
{ url: '/a.png', source: 'map' },
{ url: '/b.png', source: 'list' }
])
})
test('업로드 API 오류를 사용자 메시지로 변환한다', () => {
assert.equal(resolveUploadFetchErrorMessage({
data: {
message: ' 서버 오류 '
}
}), '서버 오류')
assert.equal(resolveUploadFetchErrorMessage({ statusCode: 413 }), '업로드 가능한 파일 크기를 초과했습니다.')
assert.equal(resolveUploadFetchErrorMessage(new Error('네트워크 오류')), '네트워크 오류')
assert.equal(resolveUploadFetchErrorMessage({}), '파일 업로드에 실패했습니다.')
})
test('업로드 파일 한도 초과 메시지를 계산한다', () => {
const uploadSizeLimits = buildDefaultUploadSizeLimits({
image: 100
})
assert.equal(findUploadSizeLimitError({
files: [
{ name: 'a.png', type: 'image/png', size: 10 },
{ name: 'b.png', type: 'image/png', size: 10 }
],
maxFileCount: 1,
maxTotalSize: 1000,
uploadSizeLimits
}), '한 번에 업로드할 수 있는 파일은 최대 1개입니다.')
assert.equal(findUploadSizeLimitError({
files: [
{ name: 'a.png', type: 'image/png', size: 60 },
{ name: 'b.png', type: 'image/png', size: 60 }
],
maxFileCount: 5,
maxTotalSize: 100,
uploadSizeLimits
}), '한 번에 업로드 가능한 전체 용량을 초과했습니다. (최대 100B)')
assert.equal(findUploadSizeLimitError({
files: [
{ name: 'a.png', type: 'image/png', size: 101 }
],
maxFileCount: 5,
maxTotalSize: 1000,
uploadSizeLimits
}), '파일 크기가 너무 큽니다. (최대 100B)')
assert.equal(findUploadSizeLimitError({
files: [
{ name: 'a.png', type: 'image/png', size: 100 }
],
maxFileCount: 5,
maxTotalSize: 1000,
uploadSizeLimits
}), null)
})
test('미디어 선택 페이지 번호를 유효 범위로 보정한다', () => {
assert.equal(normalizeMediaPickerPage(3, 5), 3)
assert.equal(normalizeMediaPickerPage('99', 5), 5)
assert.equal(normalizeMediaPickerPage(-1, 5), 1)
assert.equal(normalizeMediaPickerPage('bad', 0), 1)
})
test('미디어 선택 페이지 범위 문구를 계산한다', () => {
assert.equal(buildMediaPickerRangeLabel({
pagination: {
page: 2,
pageSize: 50,
total: 231
},
currentPage: 2,
pageCount: 5,
defaultPageSize: 50
}), '231개 중 51-100개')
assert.equal(buildMediaPickerRangeLabel({
pagination: {
page: 99,
pageSize: 50,
total: 231
},
currentPage: 99,
pageCount: 5,
defaultPageSize: 50
}), '231개 중 201-231개')
assert.equal(buildMediaPickerRangeLabel({
pagination: {
total: 0
},
currentPage: 1,
pageCount: 1,
defaultPageSize: 50
}), '0개')
})
test('미디어 선택 페이지 번호와 말줄임 항목을 계산한다', () => {
assert.deepEqual(buildMediaPickerPageItems({
currentPage: 1,
pageCount: 5
}), [1, 2, 3, 4, 5])
assert.deepEqual(buildMediaPickerPageItems({
currentPage: 6,
pageCount: 12
}), [1, 'ellipsis-1-4', 4, 5, 6, 7, 8, 'ellipsis-8-12', 12])
assert.deepEqual(buildMediaPickerPageItems({
currentPage: 12,
pageCount: 12
}), [1, 'ellipsis-1-9', 9, 10, 11, 12])
})
test('미디어 선택 기본 페이지네이션 상태를 만든다', () => {
assert.deepEqual(createDefaultMediaPickerPagination(50), {
page: 1,
pageSize: 50,
total: 0,
pageCount: 1
})
assert.deepEqual(createDefaultMediaPickerPagination(20, 3), {
page: 1,
pageSize: 20,
total: 3,
pageCount: 1
})
})
test('미디어 선택 API 응답을 상태용 값으로 정규화한다', () => {
assert.deepEqual(normalizeMediaPickerResponse({
items: [{ url: '/a.png' }],
pagination: {
page: 2,
pageSize: 50,
total: 101,
pageCount: 3
}
}, 50), {
items: [{ url: '/a.png' }],
pagination: {
page: 2,
pageSize: 50,
total: 101,
pageCount: 3
}
})
assert.deepEqual(normalizeMediaPickerResponse({
items: [{ url: '/a.png' }]
}, 50), {
items: [{ url: '/a.png' }],
pagination: {
page: 1,
pageSize: 50,
total: 1,
pageCount: 1
}
})
assert.deepEqual(normalizeMediaPickerResponse({
items: 'invalid',
pagination: {
page: -2,
pageSize: 0,
total: -10,
pageCount: 0
}
}, 50), {
items: [],
pagination: {
page: 1,
pageSize: 50,
total: 0,
pageCount: 1
}
})
})