test: add tests for custom block types that contain children

test/fixtures/062-custom-block-type-with-children.ts

@@ -0,0 +1,21 @@
+import type {ArbitraryTypedObject} from '@portabletext/types'
+
+const input: ArbitraryTypedObject[] = [
+  {
+    _type: 'quote',
+    _key: '9a15ea2ed8a2',
+    background: 'blue',
+    children: [
+      {
+        _type: 'span',
+        _key: '9a15ea2ed8a2',
+        text: 'This is an inspirational quote',
+      },
+    ],
+  },
+]
+
+export default {
+  input,
+  output: '<p style="background:blue">Customers say: This is an inspirational quote</p>',
+}

test/fixtures/index.ts

@@ -24,6 +24,7 @@ import inlineBlockWithText from './026-inline-block-with-text'
 import styledListItems from './027-styled-list-items'
 import customListItemType from './028-custom-list-item-type'
 import customBlockType from './050-custom-block-type'
+import customBlockTypeWithChildren from './062-custom-block-type-with-children'
 import customMarks from './052-custom-marks'
 import overrideDefaultMarks from './053-override-default-marks'
 import listIssue from './060-list-issue'
@@ -56,6 +57,7 @@ export {
   styledListItems,
   customListItemType,
   customBlockType,
+  customBlockTypeWithChildren,
   customMarks,
   overrideDefaultMarks,
   listIssue,

test/portable-text.test.tsx

@@ -310,6 +310,41 @@ tap.test('can specify custom component for custom block types', (t) => {
   t.end()
 })
 
+tap.test('can specify custom component for custom block types with children', (t) => {
+  const {input, output} = fixtures.customBlockTypeWithChildren
+  const types: Partial<PortableTextReactComponents>['types'] = {
+    quote: ({renderNode, ...props}) => {
+      t.same(props, {
+        value: {
+          _type: 'quote',
+          _key: '9a15ea2ed8a2',
+          background: 'blue',
+          children: [
+            {
+              _type: 'span',
+              _key: '9a15ea2ed8a2',
+              text: 'This is an inspirational quote',
+            },
+          ],
+        },
+        index: 0,
+        isInline: false,
+      })
+
+      return (
+        <p style={{background: props.value.background}}>
+          {props.value.children.map(({text}) => (
+            <React.Fragment key={text}>Customers say: {text}</React.Fragment>
+          ))}
+        </p>
+      )
+    },
+  }
+  const result = render({value: input, components: {types}})
+  t.same(result, output)
+  t.end()
+})
+
 tap.test('can specify custom components for custom marks', (t) => {
   const {input, output} = fixtures.customMarks
   const highlight: PortableTextMarkComponent<{_type: 'highlight'; thickness: number}> = ({