added tests

demos/src/Extensions/FloatingMenu/React/index.jsx

@@ -1,13 +1,50 @@
 import './styles.scss'
 
-import { EditorContent, FloatingMenu, useEditor } from '@tiptap/react'
+import {
+  EditorContent, FloatingMenu, mergeAttributes,
+  Node, useEditor,
+} from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import React, { useEffect } from 'react'
 
+const Foo = Node.create({
+  name: 'foo',
+
+  group: 'inline',
+
+  inline: true,
+
+  parseHTML() {
+    return [
+      {
+        tag: 'span',
+        getAttrs: node => node.hasAttribute('data-foo') && null,
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['span', mergeAttributes({ 'data-foo': '', HTMLAttributes }), 'foo']
+  },
+
+  renderText() {
+    return 'foo'
+  },
+
+  addCommands() {
+    return {
+      insertFoo: () => ({ commands }) => {
+        return commands.insertContent({ type: this.name })
+      },
+    }
+  },
+})
+
 export default () => {
   const editor = useEditor({
     extensions: [
       StarterKit,
+      Foo,
     ],
     content: `
       <p>
@@ -32,9 +69,10 @@ export default () => {
           <input type="checkbox" checked={isEditable} onChange={() => setIsEditable(!isEditable)} />
           Editable
         </label>
+        <button data-testid="insert-foo" onClick={() => editor.chain().insertFoo().focus().run()}>Insert Foo</button>
       </div>
       {editor && <FloatingMenu editor={editor} tippyOptions={{ duration: 100 }}>
-        <div className="floating-menu">
+        <div data-testid="floating-menu" className="floating-menu">
           <button
             onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
             className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}

demos/src/Extensions/FloatingMenu/React/index.spec.js

@@ -0,0 +1,35 @@
+context('/src/Extensions/FloatingMenu/React/', () => {
+  before(() => {
+    cy.visit('/src/Extensions/FloatingMenu/React/')
+  })
+
+  it('should not render a floating menu on non-empty nodes', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.chain().setContent('<p>Example Text</p>').focus().run()
+      const floatingMenu = cy.get('[data-testID="floating-menu"]')
+
+      floatingMenu.should('not.exist')
+    })
+  })
+
+  it('should render a floating menu on empty nodes', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.chain().setContent('<p></p>').focus().run()
+      const floatingMenu = cy.get('[data-testID="floating-menu"]')
+
+      floatingMenu.should('exist')
+    })
+  })
+
+  it('should not render a floating menu when a leaf node is inserted', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.chain().setContent('<p></p>').focus().run()
+
+      cy.get('[data-testID="insert-foo"]').click()
+
+      const floatingMenu = cy.get('[data-testID="floating-menu"]')
+
+      floatingMenu.should('not.exist')
+    })
+  })
+})