test: Added tests for 'Menus' example (#2052)

demos/src/Examples/Menus/React/index.spec.js

@@ -1,7 +1,59 @@
-context('/src/Examples/BubbleMenu/React/', () => {
+context('/src/Examples/Menus/React/', () => {
   before(() => {
-    cy.visit('/src/Examples/BubbleMenu/React/')
+    cy.visit('/src/Examples/Menus/React/')
   })
 
-  // TODO: Write tests
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.clearContent()
+    })
+  })
+
+  it('should show menu when the editor is empty', () => {
+    cy.get('.ProseMirror')
+      .focus()
+
+    cy.get('#app')
+      .find('#tippy-2')
+  })
+
+  it('should show menu when text is selected', () => {
+    cy.get('.ProseMirror')
+      .type('Test')
+      .type('{selectall}')
+
+    cy.get('#app')
+      .find('#tippy-1')
+  })
+
+  const marks = [
+    {
+      button: 'Bold',
+      tag: 'strong',
+    },
+    {
+      button: 'Italic',
+      tag: 'em',
+    },
+    {
+      button: 'Strike',
+      tag: 's',
+    },
+  ]
+
+  marks.forEach(mark => {
+    it(`should apply ${mark.button} correctly`, () => {
+      cy.get('.ProseMirror')
+        .type('Test')
+        .type('{selectall}')
+
+      cy.get('#app')
+        .find('#tippy-1')
+        .contains(mark.button)
+        .click()
+
+      cy.get('.ProseMirror')
+        .find(`p ${mark.tag}`)
+    })
+  })
 })

demos/src/Examples/Menus/Vue/index.spec.js

@@ -1,7 +1,56 @@
-context('/src/Examples/BubbleMenu/Vue/', () => {
+context('/src/Examples/Menus/Vue/', () => {
   before(() => {
-    cy.visit('/src/Examples/BubbleMenu/Vue/')
+    cy.visit('/src/Examples/Menus/Vue/')
   })
 
-  // TODO: Write tests
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.clearContent()
+    })
+  })
+
+  it('should show menu when the editor is empty', () => {
+    cy.get('#app div')
+      .find('#tippy-2')
+  })
+
+  it('should show menu when text is selected', () => {
+    cy.get('.ProseMirror')
+      .type('Test')
+      .type('{selectall}')
+
+    cy.get('#app div')
+      .find('#tippy-1')
+  })
+
+  const marks = [
+    {
+      button: 'Bold',
+      tag: 'strong',
+    },
+    {
+      button: 'Italic',
+      tag: 'em',
+    },
+    {
+      button: 'Strike',
+      tag: 's',
+    },
+  ]
+
+  marks.forEach(mark => {
+    it(`should apply ${mark.button} correctly`, () => {
+      cy.get('.ProseMirror')
+        .type('Test')
+        .type('{selectall}')
+
+      cy.get('#app div')
+        .find('#tippy-1')
+        .contains(mark.button)
+        .click()
+
+      cy.get('.ProseMirror')
+        .find(`p ${mark.tag}`)
+    })
+  })
 })