@pie-lib/editable-html-tip-tap 2.1.1 → 2.1.2-next.102

package/src/extensions/__tests__/math.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import { render, waitFor, fireEvent } from '@testing-library/react';
-import { MathNode, MathNodeView } from '../math';
+import { render, waitFor, fireEvent, act } from '@testing-library/react';
+import { EnsureTextAfterMathPlugin, MathNode, MathNodeView, ZeroWidthSpaceHandlingPlugin } from '../math';
+import * as toolbarUtils from '../../utils/toolbar';
 
 jest.mock('@tiptap/react', () => ({
   NodeViewWrapper: ({ children, ...props }) => (
@@ -147,6 +148,35 @@ describe('MathNode', () => {
       expect(commands).toHaveProperty('insertMath');
       expect(typeof commands.insertMath).toBe('function');
     });
+
+    it('insertMath opens the toolbar after inserting a math node', () => {
+      const setToolbarOpenedSpy = jest.spyOn(toolbarUtils, 'setToolbarOpened');
+      const mathNode = { type: { name: 'math' }, nodeSize: 1 };
+      const tr = {
+        insert: jest.fn().mockReturnThis(),
+        setSelection: jest.fn().mockReturnThis(),
+        doc: {},
+      };
+      const editor = {
+        view: {
+          state: {
+            schema: { nodes: { math: { create: jest.fn(() => mathNode) } } },
+            selection: { $from: { pos: 1 } },
+          },
+        },
+      };
+      const dispatch = jest.fn();
+      const insertMath = MathNode.addCommands().insertMath('x^2');
+
+      insertMath({ tr, editor, dispatch });
+
+      expect(tr.insert).toHaveBeenCalledWith(1, mathNode);
+      expect(tr.setSelection).toHaveBeenCalled();
+      expect(dispatch).toHaveBeenCalledWith(tr);
+      expect(setToolbarOpenedSpy).toHaveBeenCalledWith(editor, true);
+
+      setToolbarOpenedSpy.mockRestore();
+    });
   });
 
   describe('addNodeView', () => {
@@ -156,17 +186,215 @@ describe('MathNode', () => {
       expect(result).toBeDefined();
     });
   });
+
+  describe('addProseMirrorPlugins', () => {
+    it('registers ensure-text-after-math and zero-width-space plugins', () => {
+      const plugins = MathNode.addProseMirrorPlugins();
+
+      expect(plugins).toHaveLength(2);
+      expect(plugins[0].appendTransaction).toBeDefined();
+      expect(plugins[1].props.handleKeyDown).toBeDefined();
+    });
+  });
+});
+
+describe('EnsureTextAfterMathPlugin', () => {
+  it('inserts a zero-width space after a math node when no text follows', () => {
+    const plugin = EnsureTextAfterMathPlugin('math');
+    const textNode = { type: { name: 'text' } };
+    const mathNode = { type: { name: 'math' }, nodeSize: 3 };
+    const tr = { insert: jest.fn() };
+
+    const newState = {
+      schema: { text: jest.fn((value) => ({ type: textNode.type, text: value })) },
+      tr,
+      doc: {
+        descendants: (cb) => cb(mathNode, 5),
+        nodeAt: jest.fn(() => null),
+      },
+    };
+
+    const result = plugin.appendTransaction([{ docChanged: true }], {}, newState);
+
+    expect(tr.insert).toHaveBeenCalledWith(8, expect.anything());
+    expect(result).toBe(tr);
+  });
+
+  it('does not insert when text already follows the math node', () => {
+    const plugin = EnsureTextAfterMathPlugin('math');
+    const tr = { insert: jest.fn() };
+    const mathNode = { type: { name: 'math' }, nodeSize: 3 };
+
+    const newState = {
+      schema: { text: jest.fn() },
+      tr,
+      doc: {
+        descendants: (cb) => cb(mathNode, 5),
+        nodeAt: jest.fn(() => ({ type: { name: 'text' } })),
+      },
+    };
+
+    const result = plugin.appendTransaction([{ docChanged: true }], {}, newState);
+
+    expect(tr.insert).not.toHaveBeenCalled();
+    expect(result).toBeNull();
+  });
+
+  it('returns null when the document did not change', () => {
+    const plugin = EnsureTextAfterMathPlugin('math');
+
+    const result = plugin.appendTransaction([{ docChanged: false }], {}, {});
+    expect(result).toBeNull();
+  });
+});
+
+describe('ZeroWidthSpaceHandlingPlugin', () => {
+  const createDocWithMathAndZwsp = (resolveOverrides = {}) => ({
+    resolve: jest.fn((pos) => ({
+      nodeAfter: null,
+      nodeBefore: null,
+      pos,
+      ...resolveOverrides[pos],
+    })),
+    nodeAt: jest.fn((pos) => {
+      if (pos === 1) {
+        return { type: { name: 'text' }, textContent: '\u200b' };
+      }
+      if (pos === 0) {
+        return { type: { name: 'math' }, nodeSize: 1 };
+      }
+      return null;
+    }),
+  });
+
+  const createDocWithRegularTextBeforeCursor = () => ({
+    resolve: jest.fn((pos) => ({ nodeAfter: null, nodeBefore: null, pos })),
+    nodeAt: jest.fn((pos) => {
+      if (pos === 1) {
+        return { type: { name: 'text' }, textContent: 'a' };
+      }
+      return null;
+    }),
+  });
+
+  const createView = ({ state: stateOverrides = {} } = {}) => {
+    const dispatch = jest.fn();
+    const tr = {
+      delete: jest.fn().mockReturnThis(),
+      setSelection: jest.fn().mockReturnThis(),
+    };
+
+    return {
+      state: {
+        selection: { from: 2, empty: true },
+        doc: createDocWithMathAndZwsp(),
+        tr,
+        ...stateOverrides,
+      },
+      dispatch,
+    };
+  };
+
+  describe('Backspace', () => {
+    it('deletes the inline node and zero-width space before the cursor', () => {
+      const view = createView();
+      const handled = ZeroWidthSpaceHandlingPlugin.props.handleKeyDown(view, { key: 'Backspace' });
+
+      expect(handled).toBe(true);
+      expect(view.state.tr.delete).toHaveBeenCalledWith(0, 2);
+      expect(view.dispatch).toHaveBeenCalledWith(view.state.tr);
+    });
+
+    it('returns false when regular text precedes the cursor', () => {
+      const view = createView({
+        state: {
+          doc: createDocWithRegularTextBeforeCursor(),
+        },
+      });
+
+      const handled = ZeroWidthSpaceHandlingPlugin.props.handleKeyDown(view, { key: 'Backspace' });
+
+      expect(handled).toBe(false);
+      expect(view.state.tr.delete).not.toHaveBeenCalled();
+      expect(view.dispatch).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('ArrowLeft', () => {
+    it('selects the inline node before a zero-width space', () => {
+      const mathNode = { nodeSize: 3 };
+      const view = createView({
+        state: {
+          doc: createDocWithMathAndZwsp({
+            0: { nodeAfter: mathNode, nodeBefore: null, pos: 0 },
+          }),
+        },
+      });
+      const { NodeSelection } = require('prosemirror-state');
+
+      const handled = ZeroWidthSpaceHandlingPlugin.props.handleKeyDown(view, { key: 'ArrowLeft' });
+
+      expect(handled).toBe(true);
+      expect(view.state.doc.resolve).toHaveBeenCalledWith(0);
+      expect(NodeSelection.create).toHaveBeenCalledWith(view.state.doc, 0);
+      expect(view.dispatch).toHaveBeenCalled();
+    });
+
+    it('moves the text cursor before the zero-width space when no inline node precedes it', () => {
+      const view = createView();
+      const { TextSelection } = require('prosemirror-state');
+
+      const handled = ZeroWidthSpaceHandlingPlugin.props.handleKeyDown(view, { key: 'ArrowLeft' });
+
+      expect(handled).toBe(true);
+      expect(view.state.doc.resolve).toHaveBeenCalledWith(0);
+      expect(TextSelection.create).toHaveBeenCalledWith(view.state.doc, 0);
+      expect(view.dispatch).toHaveBeenCalled();
+    });
+
+    it('returns false when regular text precedes the cursor', () => {
+      const view = createView({
+        state: {
+          doc: createDocWithRegularTextBeforeCursor(),
+        },
+      });
+
+      const handled = ZeroWidthSpaceHandlingPlugin.props.handleKeyDown(view, { key: 'ArrowLeft' });
+
+      expect(handled).toBe(false);
+      expect(view.state.tr.setSelection).not.toHaveBeenCalled();
+      expect(view.dispatch).not.toHaveBeenCalled();
+    });
+  });
+
+  it('returns false for unrelated keys', () => {
+    const view = createView();
+
+    const handled = ZeroWidthSpaceHandlingPlugin.props.handleKeyDown(view, { key: 'Enter' });
+    expect(handled).toBe(false);
+  });
 });
 
 describe('MathNodeView', () => {
+  const createEditorElement = (rect = { top: 0, left: 0, width: 600, height: 400 }) => {
+    const element = document.createElement('div');
+    Object.defineProperty(element, 'getBoundingClientRect', {
+      value: jest.fn(() => rect),
+      configurable: true,
+    });
+    return element;
+  };
+
   const createMockEditor = () => ({
     state: {
       selection: {
         from: 0,
         to: 1,
+        node: { type: { name: 'math' } },
       },
       tr: {
         setSelection: jest.fn().mockReturnThis(),
+        setMeta: jest.fn().mockReturnThis(),
       },
       doc: {},
     },
@@ -174,6 +402,9 @@ describe('MathNodeView', () => {
       coordsAtPos: jest.fn(() => ({ top: 100, left: 50 })),
       dispatch: jest.fn(),
     },
+    options: {
+      element: createEditorElement(),
+    },
     commands: {
       focus: jest.fn(),
     },
@@ -185,17 +416,11 @@ describe('MathNodeView', () => {
     attrs: {
       latex: 'x^2',
     },
+    nodeSize: 1,
   };
 
   let defaultProps;
 
-  beforeAll(() => {
-    Object.defineProperty(document.body, 'getBoundingClientRect', {
-      value: jest.fn(() => ({ top: 0, left: 0 })),
-      configurable: true,
-    });
-  });
-
   beforeEach(() => {
     jest.clearAllMocks();
     mockCreatePortal.mockImplementation((node) => node);
@@ -205,6 +430,7 @@ describe('MathNodeView', () => {
       editor: createMockEditor(),
       selected: false,
       options: {},
+      getPos: jest.fn(() => 0),
     };
   });
 
@@ -244,38 +470,31 @@ describe('MathNodeView', () => {
   });
 
   describe('toolbar positioning', () => {
-    it('uses _tiptapContainerEl for position calculation when available', async () => {
-      const containerEl = document.createElement('div');
-      containerEl.getBoundingClientRect = jest.fn(() => ({ top: -50, left: 20, width: 600, height: 400 }));
-
-      const editor = {
-        ...defaultProps.editor,
-        _tiptapContainerEl: containerEl,
-      };
-
-      const { container } = render(<MathNodeView {...defaultProps} editor={editor} selected={true} />);
+    it('positions relative to portal container using coordsAtPos', async () => {
+      const { container } = render(<MathNodeView {...defaultProps} selected={true} />);
       await waitFor(() => {
         const toolbar = container.querySelector('[data-toolbar-for]');
         expect(toolbar).toBeInTheDocument();
-        // top = coordsAtPos.top (100) + Math.abs(containerEl.top (-50)) + 40 = 190
-        expect(toolbar.style.top).toBe('190px');
+        expect(toolbar.style.top).toBe('100px');
         expect(toolbar.style.left).toBe('50px');
       });
     });
 
-    it('falls back to document.body when _tiptapContainerEl is not set', async () => {
+    it('offsets position by portal container getBoundingClientRect', async () => {
+      const containerEl = document.createElement('div');
+      containerEl.getBoundingClientRect = jest.fn(() => ({ top: 100, left: 50, width: 600, height: 400 }));
+
       const editor = {
         ...defaultProps.editor,
-        _tiptapContainerEl: undefined,
+        _tiptapContainerEl: containerEl,
       };
 
       const { container } = render(<MathNodeView {...defaultProps} editor={editor} selected={true} />);
       await waitFor(() => {
         const toolbar = container.querySelector('[data-toolbar-for]');
         expect(toolbar).toBeInTheDocument();
-        // top = coordsAtPos.top (100) + Math.abs(document.body.top (0)) + 40 = 140
-        expect(toolbar.style.top).toBe('140px');
-        expect(toolbar.style.left).toBe('50px');
+        expect(toolbar.style.top).toBe('0px');
+        expect(toolbar.style.left).toBe('0px');
       });
     });
 
@@ -288,7 +507,16 @@ describe('MathNodeView', () => {
       });
     });
 
-    it('recalculates position when toolbar reopens', async () => {
+    it('renders above other editor overlays with a high z-index', async () => {
+      const { container } = render(<MathNodeView {...defaultProps} selected={true} />);
+      await waitFor(() => {
+        const toolbar = container.querySelector('[data-toolbar-for]');
+        expect(toolbar).toBeInTheDocument();
+        expect(toolbar.style.zIndex).toBe('1000');
+      });
+    });
+
+    it('updates position from coordsAtPos when selection changes', async () => {
       const editor = {
         ...defaultProps.editor,
         view: {
@@ -302,28 +530,62 @@ describe('MathNodeView', () => {
       await waitFor(() => {
         const toolbar = container.querySelector('[data-toolbar-for]');
         expect(toolbar).toBeInTheDocument();
-        // top = 200 + Math.abs(0) + 40 = 240
-        expect(toolbar.style.top).toBe('240px');
+        expect(toolbar.style.top).toBe('200px');
         expect(toolbar.style.left).toBe('150px');
       });
     });
 
-    it('accounts for negative container top (scrolled container)', async () => {
-      const containerEl = document.createElement('div');
-      containerEl.getBoundingClientRect = jest.fn(() => ({ top: -200, left: 0, width: 600, height: 400 }));
+    it('clamps toolbar position to viewport margins', async () => {
+      const originalInnerHeight = window.innerHeight;
+      const originalInnerWidth = window.innerWidth;
+
+      Object.defineProperty(window, 'innerHeight', { configurable: true, writable: true, value: 200 });
+      Object.defineProperty(window, 'innerWidth', { configurable: true, writable: true, value: 300 });
 
       const editor = {
         ...defaultProps.editor,
-        _tiptapContainerEl: containerEl,
+        view: {
+          ...defaultProps.editor.view,
+          coordsAtPos: jest.fn(() => ({ top: 190, left: 280, bottom: 195 })),
+          dispatch: jest.fn(),
+        },
       };
 
       const { container } = render(<MathNodeView {...defaultProps} editor={editor} selected={true} />);
+
+      let toolbar;
       await waitFor(() => {
-        const toolbar = container.querySelector('[data-toolbar-for]');
+        toolbar = container.querySelector('[data-toolbar-for]');
         expect(toolbar).toBeInTheDocument();
-        // top = 100 + Math.abs(-200) + 40 = 340
-        expect(toolbar.style.top).toBe('340px');
       });
+
+      Object.defineProperty(toolbar, 'offsetHeight', { configurable: true, value: 100 });
+      Object.defineProperty(toolbar, 'offsetWidth', { configurable: true, value: 150 });
+
+      await act(async () => {
+        window.dispatchEvent(new Event('resize'));
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+      });
+
+      await waitFor(() => {
+        expect(parseInt(toolbar.style.top, 10)).toBeLessThanOrEqual(200 - 100 - 8);
+        expect(parseInt(toolbar.style.left, 10)).toBeLessThanOrEqual(300 - 150 - 8);
+        expect(parseInt(toolbar.style.top, 10)).toBeGreaterThanOrEqual(8);
+        expect(parseInt(toolbar.style.left, 10)).toBeGreaterThanOrEqual(8);
+      });
+
+      Object.defineProperty(window, 'innerHeight', { configurable: true, writable: true, value: originalInnerHeight });
+      Object.defineProperty(window, 'innerWidth', { configurable: true, writable: true, value: originalInnerWidth });
+    });
+
+    it('attaches scroll and resize listeners while toolbar is open', async () => {
+      const addSpy = jest.spyOn(window, 'addEventListener');
+      render(<MathNodeView {...defaultProps} selected={true} />);
+      await waitFor(() => {
+        expect(addSpy).toHaveBeenCalledWith('scroll', expect.any(Function), true);
+        expect(addSpy).toHaveBeenCalledWith('resize', expect.any(Function));
+      });
+      addSpy.mockRestore();
     });
 
     it('portals toolbar into _tiptapContainerEl when available', async () => {
@@ -395,23 +657,45 @@ describe('MathNodeView', () => {
     });
   });
 
-  it('unsets editor._toolbarOpened when toolbar is closed', async () => {
+  it('unsets editor._toolbarOpened when toolbar is closed and node is not selected', async () => {
+    const { getByTestId } = render(<MathNodeView {...defaultProps} selected={false} />);
+
+    fireEvent.click(getByTestId('math-preview'));
+
+    await waitFor(() => {
+      expect(getByTestId('math-toolbar')).toBeInTheDocument();
+      expect(defaultProps.editor._toolbarOpened).toBe(true);
+    });
+
+    fireEvent.click(getByTestId('done-button'));
+
+    await waitFor(() => {
+      expect(defaultProps.editor._toolbarOpened).toBe(false);
+    });
+  });
+
+  it('keeps editor._toolbarOpened true while the math node remains selected', async () => {
     const { getByTestId } = render(<MathNodeView {...defaultProps} selected={true} />);
 
     await waitFor(() => {
       expect(getByTestId('done-button')).toBeInTheDocument();
+      expect(defaultProps.editor._toolbarOpened).toBe(true);
     });
 
-    const doneButton = getByTestId('done-button');
-    fireEvent.click(doneButton);
+    fireEvent.click(getByTestId('done-button'));
 
     await waitFor(() => {
-      expect(defaultProps.editor._toolbarOpened).toBe(false);
+      expect(defaultProps.editor._toolbarOpened).toBe(true);
     });
   });
 
-  it('closes toolbar on outside click', async () => {
-    const { queryByTestId } = render(<MathNodeView {...defaultProps} selected={true} />);
+  it('closes toolbar on outside click and runs handleDone', async () => {
+    const updateAttributes = jest.fn();
+    const editor = createMockEditor();
+    const { TextSelection } = require('prosemirror-state');
+    const { queryByTestId } = render(
+      <MathNodeView {...defaultProps} editor={editor} updateAttributes={updateAttributes} selected={true} />,
+    );
 
     await waitFor(() => {
       expect(queryByTestId('math-toolbar')).toBeInTheDocument();
@@ -421,6 +705,161 @@ describe('MathNodeView', () => {
 
     await waitFor(() => {
       expect(queryByTestId('math-toolbar')).not.toBeInTheDocument();
+      expect(updateAttributes).toHaveBeenCalledWith({ latex: 'x^2' });
+      expect(TextSelection.create).toHaveBeenCalledWith(editor.state.doc, 1);
+      expect(editor.state.tr.setSelection).toHaveBeenCalled();
+      expect(editor.view.dispatch).toHaveBeenCalledWith(editor.state.tr);
+      expect(editor.commands.focus).toHaveBeenCalled();
+      expect(editor._toolbarOpened).toBe(true);
+    });
+  });
+
+  it('re-registers click listener when node changes', async () => {
+    const addEventListenerSpy = jest.spyOn(document, 'addEventListener');
+    const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener');
+    const nodeA = { attrs: { latex: 'x^2' } };
+    const nodeB = { attrs: { latex: 'y^2' } };
+
+    const { rerender } = render(<MathNodeView {...defaultProps} node={nodeA} selected={true} />);
+
+    await waitFor(() => {
+      expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function));
+    });
+
+    const initialCallCount = addEventListenerSpy.mock.calls.length;
+
+    rerender(<MathNodeView {...defaultProps} node={nodeB} selected={true} />);
+
+    await waitFor(() => {
+      expect(removeEventListenerSpy).toHaveBeenCalled();
+      expect(addEventListenerSpy.mock.calls.length).toBeGreaterThan(initialCallCount);
+    });
+
+    addEventListenerSpy.mockRestore();
+    removeEventListenerSpy.mockRestore();
+  });
+
+  it('does not close toolbar when clicking the math node preview', async () => {
+    const { getByTestId, queryByTestId } = render(<MathNodeView {...defaultProps} selected={true} />);
+
+    await waitFor(() => {
+      expect(queryByTestId('math-toolbar')).toBeInTheDocument();
+    });
+
+    fireEvent.click(getByTestId('math-preview'));
+
+    await waitFor(() => {
+      expect(queryByTestId('math-toolbar')).toBeInTheDocument();
+    });
+  });
+
+  describe('unique math-node class per instance', () => {
+    let dateNowSpy;
+
+    beforeEach(() => {
+      let timestamp = 1000;
+      dateNowSpy = jest.spyOn(Date, 'now').mockImplementation(() => timestamp++);
+    });
+
+    afterEach(() => {
+      dateNowSpy.mockRestore();
+    });
+
+    it('assigns a timestamp-based class to NodeViewWrapper', () => {
+      const { getByTestId } = render(<MathNodeView {...defaultProps} />);
+      const wrapper = getByTestId('node-view-wrapper');
+
+      expect(wrapper.className).toMatch(/^math-node-\d+$/);
+    });
+
+    it('assigns a different class to each MathNodeView instance', () => {
+      const { getAllByTestId } = render(
+        <>
+          <MathNodeView {...defaultProps} />
+          <MathNodeView {...defaultProps} node={{ attrs: { latex: 'y^2' } }} />
+        </>,
+      );
+
+      const wrappers = getAllByTestId('node-view-wrapper');
+      expect(wrappers[0].className).toBe('math-node-1000');
+      expect(wrappers[1].className).toBe('math-node-1001');
+    });
+
+    it('closes toolbar when clicking a different math node', async () => {
+      const updateAttributes = jest.fn();
+      const editorA = createMockEditor();
+      const editorB = createMockEditor();
+
+      const { getAllByTestId, queryAllByTestId } = render(
+        <>
+          <MathNodeView {...defaultProps} editor={editorA} updateAttributes={updateAttributes} selected={false} />
+          <MathNodeView {...defaultProps} editor={editorB} node={{ attrs: { latex: 'y^2' } }} selected={false} />
+        </>,
+      );
+
+      fireEvent.click(getAllByTestId('math-preview')[0]);
+
+      await waitFor(() => {
+        expect(queryAllByTestId('math-toolbar')).toHaveLength(1);
+      });
+
+      const secondPreview = getAllByTestId('math-preview')[1];
+      fireEvent.click(secondPreview);
+
+      await waitFor(() => {
+        expect(queryAllByTestId('math-toolbar')).toHaveLength(1);
+        expect(updateAttributes).toHaveBeenCalledWith({ latex: 'x^2' });
+        expect(editorA._toolbarOpened).toBe(false);
+        expect(getAllByTestId('math-input')[0]).toHaveValue('y^2');
+      });
+    });
+  });
+
+  describe('selection-based toolbar guard', () => {
+    it('opens toolbar when selected transitions to true and the editor has a NodeSelection on math', async () => {
+      const { queryByTestId, rerender } = render(<MathNodeView {...defaultProps} selected={false} />);
+      expect(queryByTestId('math-toolbar')).not.toBeInTheDocument();
+
+      rerender(<MathNodeView {...defaultProps} selected={true} />);
+      await waitFor(() => {
+        expect(queryByTestId('math-toolbar')).toBeInTheDocument();
+      });
+    });
+
+    it('does not open toolbar when selected briefly becomes true but editor selection has no node (Cmd+A / drag case)', async () => {
+      const editor = {
+        ...defaultProps.editor,
+        state: {
+          ...defaultProps.editor.state,
+          selection: { from: 0, to: 100 }, // no .node — TextSelection / AllSelection shape
+        },
+      };
+
+      const { queryByTestId, rerender } = render(
+        <MathNodeView {...defaultProps} editor={editor} selected={false} />,
+      );
+      rerender(<MathNodeView {...defaultProps} editor={editor} selected={true} />);
+
+      await act(async () => {});
+      expect(queryByTestId('math-toolbar')).not.toBeInTheDocument();
+    });
+
+    it('does not open toolbar when selected briefly becomes true but NodeSelection targets a non-math node', async () => {
+      const editor = {
+        ...defaultProps.editor,
+        state: {
+          ...defaultProps.editor.state,
+          selection: { from: 0, to: 1, node: { type: { name: 'image' } } },
+        },
+      };
+
+      const { queryByTestId, rerender } = render(
+        <MathNodeView {...defaultProps} editor={editor} selected={false} />,
+      );
+      rerender(<MathNodeView {...defaultProps} editor={editor} selected={true} />);
+
+      await act(async () => {});
+      expect(queryByTestId('math-toolbar')).not.toBeInTheDocument();
     });
   });