test(examples): add tests for more example pages

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

@@ -0,0 +1,38 @@
+context('/src/Examples/Drawing/Vue/', () => {
+  beforeEach(() => {
+    cy.visit('/src/Examples/Drawing/Vue/')
+  })
+
+  it('should have a working tiptap instance', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      // eslint-disable-next-line
+      expect(editor).to.not.be.null
+    })
+  })
+
+  it('should have a svg canvas', () => {
+    cy.get('.ProseMirror svg').should('exist')
+  })
+
+  it('should draw on the svg canvas', () => {
+    cy.get('.ProseMirror svg').should('exist')
+
+    cy.wait(500)
+
+    cy.get('input').then(inputs => {
+      const color = inputs[0].value
+      const size = inputs[1].value
+
+      cy.get('.ProseMirror svg')
+        .click()
+        .trigger('mousedown', { pageX: 100, pageY: 100, which: 1 })
+        .trigger('mousemove', { pageX: 200, pageY: 200, which: 1 })
+        .trigger('mouseup')
+
+      cy.get('.ProseMirror svg path')
+        .should('exist')
+        .should('have.attr', 'stroke-width', size)
+        .should('have.attr', 'stroke', color.toUpperCase())
+    })
+  })
+})

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

@@ -0,0 +1,38 @@
+context('/src/Examples/Formatting/React/', () => {
+  before(() => {
+    cy.visit('/src/Examples/Formatting/React/')
+  })
+
+  beforeEach(() => {
+    cy.get('.ProseMirror').type('{selectall}{backspace}')
+  })
+
+  const marks = [
+    { label: 'highlight', mark: 'mark' },
+  ]
+
+  marks.forEach(m => {
+    it(`sets ${m.label}`, () => {
+      cy.get('.ProseMirror').type('Hello world.{selectall}')
+      cy.get('button').contains(m.label).click()
+      cy.get('.ProseMirror mark').should('exist')
+    })
+  })
+
+  const alignments = [
+    { label: 'left', alignment: 'left' },
+    { label: 'center', alignment: 'center' },
+    { label: 'right', alignment: 'right' },
+    { label: 'justify', alignment: 'justify' },
+  ]
+
+  alignments.forEach(a => {
+    it(`sets ${a.label}`, () => {
+      cy.get('.ProseMirror').type('Hello world.{selectall}')
+      cy.get('button').contains(a.label).click()
+      if (a.alignment !== 'left') {
+        cy.get('.ProseMirror p').should('have.css', 'text-align', a.alignment)
+      }
+    })
+  })
+})

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

@@ -3,5 +3,36 @@ context('/src/Examples/Formatting/Vue/', () => {
     cy.visit('/src/Examples/Formatting/Vue/')
   })
 
-  // TODO: Write tests
+  beforeEach(() => {
+    cy.get('.ProseMirror').type('{selectall}{backspace}')
+  })
+
+  const marks = [
+    { label: 'highlight', mark: 'mark' },
+  ]
+
+  marks.forEach(m => {
+    it(`sets ${m.label}`, () => {
+      cy.get('.ProseMirror').type('Hello world.{selectall}')
+      cy.get('button').contains(m.label).click()
+      cy.get('.ProseMirror mark').should('exist')
+    })
+  })
+
+  const alignments = [
+    { label: 'left', alignment: 'left' },
+    { label: 'center', alignment: 'center' },
+    { label: 'right', alignment: 'right' },
+    { label: 'justify', alignment: 'justify' },
+  ]
+
+  alignments.forEach(a => {
+    it(`sets ${a.label}`, () => {
+      cy.get('.ProseMirror').type('Hello world.{selectall}')
+      cy.get('button').contains(a.label).click()
+      if (a.alignment !== 'left') {
+        cy.get('.ProseMirror p').should('have.css', 'text-align', a.alignment)
+      }
+    })
+  })
 })

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

@@ -0,0 +1,27 @@
+context('/src/Examples/Images/React/', () => {
+  beforeEach(() => {
+    cy.visit('/src/Examples/Images/React/')
+  })
+
+  // TODO: Write tests
+  it('finds image elements inside editor', () => {
+    cy.get('.ProseMirror img').should('have.length', 2)
+  })
+
+  it('allows removing images', () => {
+    cy.get('.ProseMirror img').should('have.length', 2)
+    cy.get('.ProseMirror img').first().trigger('mousedown', { which: 1 })
+    cy.get('.ProseMirror').type('{backspace}')
+    cy.get('.ProseMirror img').should('have.length', 1)
+  })
+
+  it('allows images to be added via URL', () => {
+    cy.window().then(win => {
+      cy.stub(win, 'prompt').returns('https://unsplash.it/250/250')
+
+      cy.get('button').contains('add image from URL').click()
+      cy.wait(1000)
+      cy.get('.ProseMirror img').should('have.length', 3)
+    })
+  })
+})

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

@@ -1,7 +1,27 @@
 context('/src/Examples/Images/Vue/', () => {
-  before(() => {
+  beforeEach(() => {
     cy.visit('/src/Examples/Images/Vue/')
   })
 
   // TODO: Write tests
+  it('finds image elements inside editor', () => {
+    cy.get('.ProseMirror img').should('have.length', 2)
+  })
+
+  it('allows removing images', () => {
+    cy.get('.ProseMirror img').should('have.length', 2)
+    cy.get('.ProseMirror img').first().trigger('mousedown', { which: 1 })
+    cy.get('.ProseMirror').type('{backspace}')
+    cy.get('.ProseMirror img').should('have.length', 1)
+  })
+
+  it('allows images to be added via URL', () => {
+    cy.window().then(win => {
+      cy.stub(win, 'prompt').returns('https://unsplash.it/250/250')
+
+      cy.get('button').contains('add image from URL').click()
+      cy.wait(1000)
+      cy.get('.ProseMirror img').should('have.length', 3)
+    })
+  })
 })

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

@@ -0,0 +1,27 @@
+context('/src/Examples/InteractivityComponent/React/', () => {
+  beforeEach(() => {
+    cy.visit('/src/Examples/InteractivityComponent/React/')
+  })
+
+  it('should have a working tiptap instance', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      // eslint-disable-next-line
+      expect(editor).to.not.be.null
+    })
+  })
+
+  it('should render a custom node', () => {
+    cy.get('.ProseMirror .react-component').should('have.length', 1)
+  })
+
+  it('should handle count click inside custom node', () => {
+    cy.get('.ProseMirror .react-component button')
+      .should('have.text', 'This button has been clicked 0 times.')
+      .click()
+      .should('have.text', 'This button has been clicked 1 times.')
+      .click()
+      .should('have.text', 'This button has been clicked 2 times.')
+      .click()
+      .should('have.text', 'This button has been clicked 3 times.')
+  })
+})

demos/src/Examples/InteractivityComponent/Vue/Component.vue

@@ -3,9 +3,7 @@
     <span class="label">Vue Component</span>
 
     <div class="content">
-      <button @click="increase">
+      <button @click="increase">This button has been clicked {{ node.attrs.count }} times.</button>
-        This button has been clicked {{ node.attrs.count }} times.
-      </button>
     </div>
   </node-view-wrapper>
 </template>

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

@@ -0,0 +1,27 @@
+context('/src/Examples/InteractivityComponent/Vue/', () => {
+  beforeEach(() => {
+    cy.visit('/src/Examples/InteractivityComponent/Vue/')
+  })
+
+  it('should have a working tiptap instance', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      // eslint-disable-next-line
+      expect(editor).to.not.be.null
+    })
+  })
+
+  it('should render a custom node', () => {
+    cy.get('.ProseMirror .vue-component').should('have.length', 1)
+  })
+
+  it('should handle count click inside custom node', () => {
+    cy.get('.ProseMirror .vue-component button')
+      .should('have.text', 'This button has been clicked 0 times.')
+      .click()
+      .should('have.text', 'This button has been clicked 1 times.')
+      .click()
+      .should('have.text', 'This button has been clicked 2 times.')
+      .click()
+      .should('have.text', 'This button has been clicked 3 times.')
+  })
+})

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

@@ -0,0 +1,47 @@
+context('/src/Examples/InteractivityComponentContent/React/', () => {
+  beforeEach(() => {
+    cy.visit('/src/Examples/InteractivityComponentContent/React/')
+  })
+
+  it('should have a working tiptap instance', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      // eslint-disable-next-line
+      expect(editor).to.not.be.null
+    })
+  })
+
+  it('should render a custom node', () => {
+    cy.get('.ProseMirror .react-component-with-content')
+      .should('have.length', 1)
+  })
+
+  it('should allow text editing inside component', () => {
+    cy.get('.ProseMirror .react-component-with-content .content div')
+      .invoke('attr', 'contentEditable', true)
+      .invoke('text', '')
+      .type('Hello World!')
+      .should('have.text', 'Hello World!')
+  })
+
+  it('should allow text editing inside component with markdown text', () => {
+    cy.get('.ProseMirror .react-component-with-content .content div')
+      .invoke('attr', 'contentEditable', true)
+      .invoke('text', '')
+      .type('Hello World! This is **bold**.')
+      .should('have.text', 'Hello World! This is bold.')
+
+    cy.get('.ProseMirror .react-component-with-content .content strong')
+      .should('exist')
+  })
+
+  it('should remove node via selectall', () => {
+    cy.get('.ProseMirror .react-component-with-content')
+      .should('have.length', 1)
+
+    cy.get('.ProseMirror')
+      .type('{selectall}{backspace}')
+
+    cy.get('.ProseMirror .react-component-with-content')
+      .should('have.length', 0)
+  })
+})

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

@@ -0,0 +1,47 @@
+context('/src/Examples/InteractivityComponentContent/Vue/', () => {
+  beforeEach(() => {
+    cy.visit('/src/Examples/InteractivityComponentContent/Vue/')
+  })
+
+  it('should have a working tiptap instance', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      // eslint-disable-next-line
+      expect(editor).to.not.be.null
+    })
+  })
+
+  it('should render a custom node', () => {
+    cy.get('.ProseMirror .vue-component')
+      .should('have.length', 1)
+  })
+
+  it('should allow text editing inside component', () => {
+    cy.get('.ProseMirror .vue-component .content')
+      .invoke('attr', 'contentEditable', true)
+      .invoke('text', '')
+      .type('Hello World!')
+      .should('have.text', 'Hello World!')
+  })
+
+  it('should allow text editing inside component with markdown text', () => {
+    cy.get('.ProseMirror .vue-component .content')
+      .invoke('attr', 'contentEditable', true)
+      .invoke('text', '')
+      .type('Hello World! This is **bold**.')
+      .should('have.text', 'Hello World! This is bold.')
+
+    cy.get('.ProseMirror .vue-component .content strong')
+      .should('exist')
+  })
+
+  it('should remove node via selectall', () => {
+    cy.get('.ProseMirror .vue-component')
+      .should('have.length', 1)
+
+    cy.get('.ProseMirror')
+      .type('{selectall}{backspace}')
+
+    cy.get('.ProseMirror .vue-component')
+      .should('have.length', 0)
+  })
+})

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

@@ -0,0 +1,102 @@
+context('/src/Examples/MarkdownShortcuts/React/', () => {
+  before(() => {
+    cy.visit('/src/Examples/MarkdownShortcuts/React/')
+  })
+
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.clearContent()
+    })
+  })
+
+  it('should make a h1', () => {
+    cy.get('.ProseMirror')
+      .type('# Headline')
+      .find('h1')
+      .should('contain', 'Headline')
+  })
+
+  it('should make a h2', () => {
+    cy.get('.ProseMirror')
+      .type('## Headline')
+      .find('h2')
+      .should('contain', 'Headline')
+  })
+
+  it('should make a h3', () => {
+    cy.get('.ProseMirror')
+      .type('### Headline')
+      .find('h3')
+      .should('contain', 'Headline')
+  })
+
+  it('should make a h4', () => {
+    cy.get('.ProseMirror')
+      .type('#### Headline')
+      .find('h4')
+      .should('contain', 'Headline')
+  })
+
+  it('should make a h5', () => {
+    cy.get('.ProseMirror')
+      .type('##### Headline')
+      .find('h5')
+      .should('contain', 'Headline')
+  })
+
+  it('should make a h6', () => {
+    cy.get('.ProseMirror')
+      .type('###### Headline')
+      .find('h6')
+      .should('contain', 'Headline')
+  })
+
+  it('should create inline code', () => {
+    cy.get('.ProseMirror')
+      .type('`$foobar`')
+      .find('code')
+      .should('contain', '$foobar')
+  })
+
+  it('should create a code block without language', () => {
+    cy.get('.ProseMirror')
+      .type('``` {enter}const foo = bar{enter}```')
+      .find('pre')
+      .should('contain', 'const foo = bar')
+  })
+
+  it('should create a bullet list from asteriks', () => {
+    cy.get('.ProseMirror')
+      .type('* foobar')
+      .find('ul')
+      .should('contain', 'foobar')
+  })
+
+  it('should create a bullet list from dashes', () => {
+    cy.get('.ProseMirror')
+      .type('- foobar')
+      .find('ul')
+      .should('contain', 'foobar')
+  })
+
+  it('should create a bullet list from pluses', () => {
+    cy.get('.ProseMirror')
+      .type('+ foobar')
+      .find('ul')
+      .should('contain', 'foobar')
+  })
+
+  it('should create a ordered list', () => {
+    cy.get('.ProseMirror')
+      .type('1. foobar')
+      .find('ol')
+      .should('contain', 'foobar')
+  })
+
+  it('should create a blockquote', () => {
+    cy.get('.ProseMirror')
+      .type('> foobar')
+      .find('blockquote')
+      .should('contain', 'foobar')
+  })
+})

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

@@ -9,11 +9,10 @@ context('/src/Examples/Menus/React/', () => {
     })
   })
 
-  // TODO: fix test
+  it('should show menu when the editor is empty', () => {
-  // it('should show menu when the editor is empty', () => {
+    cy.get('#app')
-  //   cy.get('#app')
+      .find('[data-tippy-root]')
-  //     .find('[data-tippy-root]')
+  })
-  // })
 
   it('should show menu when text is selected', () => {
     cy.get('.ProseMirror')

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

@@ -0,0 +1,47 @@
+context('/src/Examples/Minimal/React/', () => {
+  before(() => {
+    cy.visit('/src/Examples/Minimal/React/')
+  })
+
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.clearContent()
+    })
+  })
+
+  it('text should be wrapped in a paragraph by default', () => {
+    cy.get('.ProseMirror')
+      .type('Example Text')
+      .find('p')
+      .should('contain', 'Example Text')
+  })
+
+  it('should parse paragraphs correctly', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.setContent('<p>Example Text</p>')
+      expect(editor.getHTML()).to.eq('<p>Example Text</p>')
+
+      editor.commands.setContent('<p style="color:DodgerBlue;">Example Text</p>')
+      expect(editor.getHTML()).to.eq('<p>Example Text</p>')
+    })
+  })
+
+  it('enter should make a new paragraph', () => {
+    cy.get('.ProseMirror')
+      .type('First Paragraph{enter}Second Paragraph')
+      .find('p')
+      .should('have.length', 2)
+  })
+
+  it('backspace should remove the last paragraph', () => {
+    cy.get('.ProseMirror')
+      .type('{enter}')
+      .find('p')
+      .should('have.length', 2)
+
+    cy.get('.ProseMirror')
+      .type('{backspace}')
+      .find('p')
+      .should('have.length', 1)
+  })
+})

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

@@ -0,0 +1,125 @@
+context('/src/Examples/Tables/React/', () => {
+  before(() => {
+    cy.visit('/src/Examples/Tables/React/')
+  })
+
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.clearContent()
+      cy.get('button').contains('insertTable').click()
+    })
+  })
+
+  // TODO: Write tests
+  it('adds a table with three columns and three rows', () => {
+    cy.get('.ProseMirror table')
+      .should('exist')
+
+    cy.get('.ProseMirror table tr')
+      .should('exist')
+      .should('have.length', 3)
+
+    cy.get('.ProseMirror table th')
+      .should('exist')
+      .should('have.length', 3)
+
+    cy.get('.ProseMirror table td')
+      .should('exist')
+      .should('have.length', 6)
+  })
+
+  it('adds & delete columns', () => {
+    cy.get('button').contains('addColumnBefore').click()
+    cy.get('.ProseMirror table th')
+      .should('have.length', 4)
+
+    cy.get('button').contains('addColumnAfter').click()
+    cy.get('.ProseMirror table th')
+      .should('have.length', 5)
+
+    cy.get('button').contains('deleteColumn')
+      .click()
+      .click()
+    cy.get('.ProseMirror table th')
+      .should('have.length', 3)
+  })
+
+  it('adds & delete rows', () => {
+    cy.get('button').contains('addRowBefore').click()
+    cy.get('.ProseMirror table tr')
+      .should('have.length', 4)
+
+    cy.get('button').contains('addRowAfter').click()
+    cy.get('.ProseMirror table tr')
+      .should('have.length', 5)
+
+    cy.get('button').contains('deleteRow')
+      .click()
+      .click()
+    cy.get('.ProseMirror table tr')
+      .should('have.length', 3)
+  })
+
+  it('should delete table', () => {
+    cy.get('button').contains('deleteTable').click()
+    cy.get('.ProseMirror table').should('not.exist')
+  })
+
+  it('should merge cells', () => {
+    cy.get('.ProseMirror').type('{shift}{rightArrow}')
+    cy.get('button').contains('mergeCells').click()
+    cy.get('.ProseMirror table th').should('have.length', 2)
+  })
+
+  it('should split cells', () => {
+    cy.get('.ProseMirror').type('{shift}{rightArrow}')
+    cy.get('button').contains('mergeCells').click()
+    cy.get('.ProseMirror table th').should('have.length', 2)
+    cy.get('button').contains('splitCell').click()
+    cy.get('.ProseMirror table th').should('have.length', 3)
+  })
+
+  it('should toggle header columns', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.toggleHeaderColumn()
+      cy.get('.ProseMirror table th').should('have.length', 5)
+    })
+  })
+
+  it('should toggle header row', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.toggleHeaderRow()
+      cy.get('.ProseMirror table th').should('have.length', 0)
+    })
+  })
+
+  it('should merge split', () => {
+    cy.get('.ProseMirror').type('{shift}{rightArrow}')
+    cy.get('button').contains('mergeCells').click()
+    cy.get('.ProseMirror th[colspan="2"]')
+      .should('exist')
+    cy.get('button')
+      .contains('mergeOrSplit')
+      .click()
+    cy.get('.ProseMirror th[colspan="2"]')
+      .should('not.exist')
+  })
+
+  it('should set cell attribute', () => {
+    cy.get('.ProseMirror').type('{downArrow}')
+    cy.get('button').contains('setCellAttribute').click()
+    cy.get('.ProseMirror table td[style]').should('have.attr', 'style', 'background-color: #FAF594')
+  })
+
+  it('should move focus to next or prev cell', () => {
+    cy.get('.ProseMirror').type('Column 1')
+    cy.get('button').contains('goToNextCell').click()
+    cy.get('.ProseMirror').type('Column 2')
+    cy.get('button').contains('goToPreviousCell').click()
+
+    cy.get('.ProseMirror th').then(elements => {
+      expect(elements[0].innerText).to.equal('Column 1')
+      expect(elements[1].innerText).to.equal('Column 2')
+    })
+  })
+})

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

@@ -3,5 +3,123 @@ context('/src/Examples/Tables/Vue/', () => {
     cy.visit('/src/Examples/Tables/Vue/')
   })
 
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.clearContent()
+      cy.get('button').contains('insertTable').click()
+    })
+  })
+
   // TODO: Write tests
+  it('adds a table with three columns and three rows', () => {
+    cy.get('.ProseMirror table')
+      .should('exist')
+
+    cy.get('.ProseMirror table tr')
+      .should('exist')
+      .should('have.length', 3)
+
+    cy.get('.ProseMirror table th')
+      .should('exist')
+      .should('have.length', 3)
+
+    cy.get('.ProseMirror table td')
+      .should('exist')
+      .should('have.length', 6)
+  })
+
+  it('adds & delete columns', () => {
+    cy.get('button').contains('addColumnBefore').click()
+    cy.get('.ProseMirror table th')
+      .should('have.length', 4)
+
+    cy.get('button').contains('addColumnAfter').click()
+    cy.get('.ProseMirror table th')
+      .should('have.length', 5)
+
+    cy.get('button').contains('deleteColumn')
+      .click()
+      .click()
+    cy.get('.ProseMirror table th')
+      .should('have.length', 3)
+  })
+
+  it('adds & delete rows', () => {
+    cy.get('button').contains('addRowBefore').click()
+    cy.get('.ProseMirror table tr')
+      .should('have.length', 4)
+
+    cy.get('button').contains('addRowAfter').click()
+    cy.get('.ProseMirror table tr')
+      .should('have.length', 5)
+
+    cy.get('button').contains('deleteRow')
+      .click()
+      .click()
+    cy.get('.ProseMirror table tr')
+      .should('have.length', 3)
+  })
+
+  it('should delete table', () => {
+    cy.get('button').contains('deleteTable').click()
+    cy.get('.ProseMirror table').should('not.exist')
+  })
+
+  it('should merge cells', () => {
+    cy.get('.ProseMirror').type('{shift}{rightArrow}')
+    cy.get('button').contains('mergeCells').click()
+    cy.get('.ProseMirror table th').should('have.length', 2)
+  })
+
+  it('should split cells', () => {
+    cy.get('.ProseMirror').type('{shift}{rightArrow}')
+    cy.get('button').contains('mergeCells').click()
+    cy.get('.ProseMirror table th').should('have.length', 2)
+    cy.get('button').contains('splitCell').click()
+    cy.get('.ProseMirror table th').should('have.length', 3)
+  })
+
+  it('should toggle header columns', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.toggleHeaderColumn()
+      cy.get('.ProseMirror table th').should('have.length', 5)
+    })
+  })
+
+  it('should toggle header row', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.toggleHeaderRow()
+      cy.get('.ProseMirror table th').should('have.length', 0)
+    })
+  })
+
+  it('should merge split', () => {
+    cy.get('.ProseMirror').type('{shift}{rightArrow}')
+    cy.get('button').contains('mergeCells').click()
+    cy.get('.ProseMirror th[colspan="2"]')
+      .should('exist')
+    cy.get('button')
+      .contains('mergeOrSplit')
+      .click()
+    cy.get('.ProseMirror th[colspan="2"]')
+      .should('not.exist')
+  })
+
+  it('should set cell attribute', () => {
+    cy.get('.ProseMirror').type('{downArrow}')
+    cy.get('button').contains('setCellAttribute').click()
+    cy.get('.ProseMirror table td[style]').should('have.attr', 'style', 'background-color: #FAF594')
+  })
+
+  it('should move focus to next or prev cell', () => {
+    cy.get('.ProseMirror').type('Column 1')
+    cy.get('button').contains('goToNextCell').click()
+    cy.get('.ProseMirror').type('Column 2')
+    cy.get('button').contains('goToPreviousCell').click()
+
+    cy.get('.ProseMirror th').then(elements => {
+      expect(elements[0].innerText).to.equal('Column 1')
+      expect(elements[1].innerText).to.equal('Column 2')
+    })
+  })
 })