test: add insert.block test to ensure custom keys are preserved

portabletext · Jan 27, 2025 · 47d48ab · 47d48ab
1 parent 9c3bf07
commit 47d48ab
Show file tree

Hide file tree

Showing 3 changed files with 187 additions and 3 deletions.
diff --git a/packages/editor/tests/event.insert.block.test.tsx b/packages/editor/tests/event.insert.block.test.tsx
@@ -0,0 +1,179 @@
+import * as React from 'react'
+import {describe, expect, test} from 'vitest'
+import {render} from 'vitest-browser-react'
+import type {Editor} from '../src/editor/create-editor'
+import {defineSchema} from '../src/editor/define-schema'
+import {PortableTextEditable} from '../src/editor/Editable'
+import {EditorProvider, useEditor} from '../src/editor/editor-provider'
+import {createTestKeyGenerator} from '../src/internal-utils/test-key-generator'
+
+describe('event.insert.block', () => {
+  test('Scenario: Inserting block with custom _key', () => {
+    const editorRef = React.createRef<Editor>()
+
+    render(
+      <EditorProvider
+        initialConfig={{
+          keyGenerator: createTestKeyGenerator(),
+          schemaDefinition: defineSchema({}),
+        }}
+      >
+        <EditorRefPlugin ref={editorRef} />
+        <PortableTextEditable />
+      </EditorProvider>,
+    )
+
+    expect(editorRef.current?.getSnapshot().context.value).toEqual([
+      {
+        _key: 'k2',
+        _type: 'block',
+        children: [
+          {
+            _key: 'k3',
+            _type: 'span',
+            text: '',
+            marks: [],
+          },
+        ],
+        markDefs: [],
+        style: 'normal',
+      },
+    ])
+
+    editorRef.current?.send({
+      type: 'insert.block',
+      block: {
+        _type: 'block',
+        _key: 'custom key',
+        children: [
+          {
+            _type: 'span',
+            text: 'foo',
+          },
+        ],
+      },
+      placement: 'auto',
+    })
+
+    expect(editorRef.current?.getSnapshot().context.value).toEqual([
+      {
+        _key: 'custom key',
+        _type: 'block',
+        children: [
+          {
+            _key: 'k4',
+            _type: 'span',
+            text: 'foo',
+            marks: [],
+          },
+        ],
+        markDefs: [],
+        style: 'normal',
+      },
+    ])
+  })
+
+  test('Scenario: Inserting two blocks with same custom _key', () => {
+    const editorRef = React.createRef<Editor>()
+
+    render(
+      <EditorProvider
+        initialConfig={{
+          keyGenerator: createTestKeyGenerator(),
+          schemaDefinition: defineSchema({}),
+        }}
+      >
+        <EditorRefPlugin ref={editorRef} />
+        <PortableTextEditable />
+      </EditorProvider>,
+    )
+
+    expect(editorRef.current?.getSnapshot().context.value).toEqual([
+      {
+        _key: 'k2',
+        _type: 'block',
+        children: [
+          {
+            _key: 'k3',
+            _type: 'span',
+            text: '',
+            marks: [],
+          },
+        ],
+        markDefs: [],
+        style: 'normal',
+      },
+    ])
+
+    editorRef.current?.send({
+      type: 'insert.block',
+      block: {
+        _type: 'block',
+        _key: 'custom key',
+        children: [
+          {
+            _type: 'span',
+            text: 'foo',
+          },
+        ],
+      },
+      placement: 'auto',
+    })
+
+    editorRef.current?.send({
+      type: 'insert.block',
+      block: {
+        _type: 'block',
+        _key: 'custom key',
+        children: [
+          {
+            _type: 'span',
+            text: 'bar',
+          },
+        ],
+      },
+      placement: 'auto',
+    })
+
+    expect(editorRef.current?.getSnapshot().context.value).toEqual([
+      {
+        _key: 'custom key',
+        _type: 'block',
+        children: [
+          {
+            _key: 'k4',
+            _type: 'span',
+            text: 'foo',
+            marks: [],
+          },
+        ],
+        markDefs: [],
+        style: 'normal',
+      },
+      {
+        _key: 'k5',
+        _type: 'block',
+        children: [
+          {
+            _key: 'k6',
+            _type: 'span',
+            text: 'bar',
+            marks: [],
+          },
+        ],
+        markDefs: [],
+        style: 'normal',
+      },
+    ])
+  })
+})
+
+const EditorRefPlugin = React.forwardRef<Editor | null>((_, ref) => {
+  const editor = useEditor()
+
+  const portableTextEditorRef = React.useRef(editor)
+
+  React.useImperativeHandle(ref, () => portableTextEditorRef.current, [])
+
+  return null
+})
diff --git a/packages/editor/tsconfig.json b/packages/editor/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
   "extends": "./tsconfig.base.json",
-  "include": ["./src", "./e2e-tests", "./gherkin-tests"],
+  "include": ["./src", "./e2e-tests", "./gherkin-tests", "./tests"],
   "compilerOptions": {
     "rootDir": ".",
     "outDir": "./lib",

diff --git a/packages/editor/vitest.workspace.ts b/packages/editor/vitest.workspace.ts
@@ -11,7 +11,12 @@ export default defineWorkspace([
     ],
     test: {
       name: 'browser',
-      include: ['gherkin-tests/**/*.test.ts', 'gherkin-tests/**/*.test.tsx'],
+      include: [
+        'gherkin-tests/**/*.test.ts',
+        'gherkin-tests/**/*.test.tsx',
+        'tests/**/*.test.ts',
+        'tests/**/*.test.tsx',
+      ],
       browser: {
         enabled: true,
         headless: true,
@@ -39,7 +44,7 @@ export default defineWorkspace([
     ],
     test: {
       name: 'unit',
-      exclude: ['node_modules', 'e2e-tests', 'gherkin-tests'],
+      exclude: ['node_modules', 'e2e-tests', 'gherkin-tests', 'tests'],
       environment: 'jsdom',
       setupFiles: ['./vitest.setup.ts'],
     },