Add NODE_TO_KEY tests for number of mounts for split_node and merge_node

packages/slate-react/test/index.spec.tsx

@@ -1,5 +1,12 @@
 import React from 'react'
-import { createEditor, NodeEntry, Range } from 'slate'
+import {
+  createEditor,
+  NodeEntry,
+  Node,
+  Range,
+  Element,
+  Transforms,
+} from 'slate'
 import { create, act, ReactTestRenderer } from 'react-test-renderer'
 import {
   Slate,
@@ -9,14 +16,14 @@ import {
   DefaultElement,
 } from '../src'
 
+const createNodeMock = () => ({
+  ownerDocument: global.document,
+  getRootNode: () => global.document,
+})
+
 describe('slate-react', () => {
   describe('Editable', () => {
     describe('decorate', () => {
-      const createNodeMock = () => ({
-        ownerDocument: global.document,
-        getRootNode: () => global.document,
-      })
-
       it('should be called on all nodes in document', () => {
         const editor = withReact(createEditor())
         const value = [{ type: 'block', children: [{ text: '' }] }]
@@ -97,5 +104,72 @@ describe('slate-react', () => {
         expect(renderElement).toHaveBeenCalledTimes(3)
       })
     })
+
+    describe('NODE_TO_KEY logic', () => {
+      it('should not unmount the node that gets split on a split_node operation', async () => {
+        const editor = withReact(createEditor())
+        const value = [{ type: 'block', children: [{ text: 'test' }] }]
+        const mounts = jest.fn<void, [Element]>()
+
+        let el: ReactTestRenderer
+
+        act(() => {
+          el = create(
+            <Slate editor={editor} value={value} onChange={() => {}}>
+              <DefaultEditable
+                renderElement={({ element, children }) => {
+                  React.useEffect(() => mounts(element), [])
+
+                  return children
+                }}
+              />
+            </Slate>,
+            { createNodeMock }
+          )
+        })
+
+        // slate updates at next tick, so we need this to be async
+        await act(async () =>
+          Transforms.splitNodes(editor, { at: { path: [0, 0], offset: 2 } })
+        )
+
+        // 2 renders, one for the main element and one for the split element
+        expect(mounts).toHaveBeenCalledTimes(2)
+      })
+
+      it('should not unmount the node that gets merged into on a merge_node operation', async () => {
+        const editor = withReact(createEditor())
+        const value = [
+          { type: 'block', children: [{ text: 'te' }] },
+          { type: 'block', children: [{ text: 'st' }] },
+        ]
+        const mounts = jest.fn<void, [Element]>()
+
+        let el: ReactTestRenderer
+
+        act(() => {
+          el = create(
+            <Slate editor={editor} value={value} onChange={() => {}}>
+              <DefaultEditable
+                renderElement={({ element, children }) => {
+                  React.useEffect(() => mounts(element), [])
+
+                  return children
+                }}
+              />
+            </Slate>,
+            { createNodeMock }
+          )
+        })
+
+        // slate updates at next tick, so we need this to be async
+        await act(async () =>
+          Transforms.mergeNodes(editor, { at: { path: [0, 0], offset: 0 } })
+        )
+
+        // only 2 renders for the initial render
+        expect(mounts).toHaveBeenCalledTimes(2)
+      })
+    })
   })
 })