공개 본문 fenced 블록 편집 분리

tests/useContentMarkdownFencedBlocks.test.js

@@ -0,0 +1,104 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+import { ref } from 'vue'
+import { useContentMarkdownFencedBlocks } from '../composables/useContentMarkdownFencedBlocks.js'
+
+/**
+ * 테스트용 fenced 블록 편집 상태를 만든다.
+ * @param {string} contentText - Markdown 본문
+ * @returns {{ calls: Object, pendingFocusPosition: import('vue').Ref<string>, pendingFocusOffset: import('vue').Ref<number|null>, state: Object }}
+ */
+const createFencedState = (contentText = '') => {
+  const calls = {
+    commits: [],
+    inserts: []
+  }
+  const pendingFocusPosition = ref('auto')
+  const pendingFocusOffset = ref(null)
+  const state = useContentMarkdownFencedBlocks({
+    content: ref(contentText),
+    interactive: ref(true),
+    pendingFocusPosition,
+    pendingFocusOffset,
+    commitInlineBlockLines: (block, replacementLines) => {
+      calls.commits.push({ block, replacementLines })
+    },
+    insertBelowBlock: (block, options) => {
+      calls.inserts.push({ block, options })
+    }
+  })
+
+  return {
+    calls,
+    pendingFocusPosition,
+    pendingFocusOffset,
+    state
+  }
+}
+
+test('fenced 코드 블록은 본문을 코드 펜스 줄로 저장하고 아래 문단을 삽입한다', () => {
+  const block = {
+    type: 'code',
+    codeLanguage: 'javascript',
+    codeShowLineNumbers: true,
+    text: 'a\nb',
+    meta: { startLine: 1, endLine: 4 }
+  }
+  const { calls, state } = createFencedState()
+
+  assert.deepEqual(state.getCodeLineNumbers(block), [1, 2])
+
+  state.onCodeBlockInsertBelow(block, { value: 'console.log(1)' })
+
+  assert.deepEqual(calls.commits[0].replacementLines, [
+    '```javascript line-numbers',
+    'console.log(1)',
+    '```'
+  ])
+  assert.deepEqual(calls.inserts[0], { block, options: { lines: [''] } })
+})
+
+test('fenced 콜아웃 블록은 기존 여는 줄을 유지하고 다음 문단 포커스를 준비한다', () => {
+  const block = {
+    type: 'callout',
+    meta: { startLine: 0, endLine: 3 }
+  }
+  const { calls, pendingFocusOffset, pendingFocusPosition, state } = createFencedState([
+    ':::callout bg=blue title=안내',
+    'old',
+    ':::'
+  ].join('\n'))
+
+  state.onCalloutBlockInsertBelow(block, { value: '새 본문\n둘째 줄' })
+
+  assert.deepEqual(calls.commits[0].replacementLines, [
+    ':::callout bg=blue title=안내',
+    '새 본문',
+    '둘째 줄',
+    ':::'
+  ])
+  assert.equal(pendingFocusPosition.value, 'start')
+  assert.equal(pendingFocusOffset.value, 0)
+  assert.deepEqual(calls.inserts[0], { block, options: { lines: [''] } })
+})
+
+test('fenced 토글 블록은 제목과 기본 펼침 상태를 유지하고 다음 문단을 삽입한다', () => {
+  const block = {
+    type: 'toggle',
+    title: '자세히',
+    defaultOpen: true,
+    meta: { startLine: 0, endLine: 3 }
+  }
+  const { calls, pendingFocusOffset, pendingFocusPosition, state } = createFencedState()
+
+  state.onToggleBlockInsertBelow(block, '토글 본문')
+
+  assert.deepEqual(calls.commits[0].replacementLines, [
+    ':::toggle open 자세히',
+    '토글 본문',
+    ':::'
+  ])
+  assert.equal(pendingFocusPosition.value, 'start')
+  assert.equal(pendingFocusOffset.value, 0)
+  assert.deepEqual(calls.inserts[0], { block, options: { lines: [''] } })
+})