test: added first tests for examples

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

@@ -0,0 +1,12 @@
+context('/src/Examples/Book/React/', () => {
+  before(() => {
+    cy.visit('/src/Examples/Book/React/')
+  })
+
+  it('should have a working tiptap instance', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      // eslint-disable-next-line
+      expect(editor).to.not.be.null
+    })
+  })
+})

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

@@ -3,5 +3,10 @@ context('/src/Examples/Book/Vue/', () => {
     cy.visit('/src/Examples/Book/Vue/')
   })
 
-  // TODO: Write tests
+  it('should have a working tiptap instance', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      // eslint-disable-next-line
+      expect(editor).to.not.be.null
+    })
+  })
 })

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

@@ -0,0 +1,28 @@
+context('/src/Examples/CodeBlockLanguage/React/', () => {
+  before(() => {
+    cy.visit('/src/Examples/CodeBlockLanguage/React/')
+  })
+
+  it('should have hljs classes for syntax highlighting', () => {
+    cy.get('[class^=hljs]').then(elements => {
+      expect(elements.length).to.be.greaterThan(0)
+    })
+  })
+
+  it('should have different count of hljs classes after switching language', () => {
+    cy.get('[class^=hljs]').then(elements => {
+      const initialCount = elements.length
+
+      expect(initialCount).to.be.greaterThan(0)
+
+      cy.get('.ProseMirror select').select('java')
+      cy.wait(500)
+
+      cy.get('[class^=hljs]').then(newElements => {
+        const newCount = newElements.length
+
+        expect(newCount).to.not.equal(initialCount)
+      })
+    })
+  })
+})

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

@@ -0,0 +1,28 @@
+context('/src/Examples/CodeBlockLanguage/Vue/', () => {
+  before(() => {
+    cy.visit('/src/Examples/CodeBlockLanguage/Vue/')
+  })
+
+  it('should have hljs classes for syntax highlighting', () => {
+    cy.get('[class^=hljs]').then(elements => {
+      expect(elements.length).to.be.greaterThan(0)
+    })
+  })
+
+  it('should have different count of hljs classes after switching language', () => {
+    cy.get('[class^=hljs]').then(elements => {
+      const initialCount = elements.length
+
+      expect(initialCount).to.be.greaterThan(0)
+
+      cy.get('.ProseMirror select').select('java')
+      cy.wait(500)
+
+      cy.get('[class^=hljs]').then(newElements => {
+        const newCount = newElements.length
+
+        expect(newCount).to.not.equal(initialCount)
+      })
+    })
+  })
+})

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

@@ -1,7 +1,24 @@
 context('/src/Examples/CollaborativeEditing/React/', () => {
-  before(() => {
+  beforeEach(() => {
     cy.visit('/src/Examples/CollaborativeEditing/React/')
   })
 
-  // TODO: Write tests
+  it('should show the current room with participants', () => {
+    cy.get('.editor__status').then(status => {
+      status.should('contain', 'rooms.')
+      status.should('contain', 'users online')
+    })
+  })
+
+  it('should allow user to change name', () => {
+    cy.window().then(win => {
+      cy.wait(5000)
+
+      cy.stub(win, 'prompt').returns('John Doe')
+      cy.get('.editor__name > button').click()
+      cy.wait(1000)
+      cy.get('.editor__name').should('contain', 'John Doe')
+    })
+
+  })
 })

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

@@ -1,7 +1,24 @@
 context('/src/Examples/CollaborativeEditing/Vue/', () => {
-  before(() => {
+  beforeEach(() => {
     cy.visit('/src/Examples/CollaborativeEditing/Vue/')
   })
 
-  // TODO: Write tests
+  it('should show the current room with participants', () => {
+    cy.get('.editor__status').then(status => {
+      status.should('contain', 'rooms.')
+      status.should('contain', 'users online')
+    })
+  })
+
+  it('should allow user to change name', () => {
+    cy.window().then(win => {
+      cy.wait(5000)
+
+      cy.stub(win, 'prompt').returns('John Doe')
+      cy.get('.editor__name > button').click()
+      cy.wait(1000)
+      cy.get('.editor__name').should('contain', 'John Doe')
+    })
+
+  })
 })

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

@@ -0,0 +1,37 @@
+context('/src/Examples/Community/React/', () => {
+  beforeEach(() => {
+    cy.visit('/src/Examples/Community/React/')
+  })
+
+  it('should count the characters correctly', () => {
+    // check if count text is "44/280 characters"
+    cy.get('.character-count__text', { timeout: 25000 }).should('have.text', '44/280 characters')
+
+    // type in .ProseMirror
+    cy.get('.ProseMirror').type(' Hello World')
+    cy.get('.character-count__text').should('have.text', '56/280 characters')
+
+    // remove content from .ProseMirror and enter text
+    cy.get('.ProseMirror').type('{selectall}{backspace}Hello World')
+    cy.get('.character-count__text').should('have.text', '11/280 characters')
+  })
+
+  it('should mention a user', () => {
+    cy.get('.ProseMirror').type('{selectall}{backspace}@')
+
+    // check if the mention autocomplete is visible
+    cy.get('.tippy-content .items').should('be.visible')
+
+    // select the first user
+    cy.get('.tippy-content .items .item').first().then($el => {
+      const name = $el.text()
+
+      $el.click()
+
+      // check if the user is mentioned
+      cy.get('.ProseMirror').should('have.text', `@${name} `)
+      cy.get('.character-count__text').should('have.text', '2/280 characters')
+    })
+
+  })
+})

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

@@ -1,7 +1,37 @@
 context('/src/Examples/Community/Vue/', () => {
-  before(() => {
+  beforeEach(() => {
     cy.visit('/src/Examples/Community/Vue/')
   })
 
-  // TODO: Write tests
+  it('should count the characters correctly', () => {
+    // check if count text is "44/280 characters"
+    cy.get('.character-count__text', { timeout: 25000 }).should('have.text', '44/280 characters')
+
+    // type in .ProseMirror
+    cy.get('.ProseMirror').type(' Hello World')
+    cy.get('.character-count__text').should('have.text', '56/280 characters')
+
+    // remove content from .ProseMirror and enter text
+    cy.get('.ProseMirror').type('{selectall}{backspace}Hello World')
+    cy.get('.character-count__text').should('have.text', '11/280 characters')
+  })
+
+  it('should mention a user', () => {
+    cy.get('.ProseMirror').type('{selectall}{backspace}@')
+
+    // check if the mention autocomplete is visible
+    cy.get('.tippy-content .items').should('be.visible')
+
+    // select the first user
+    cy.get('.tippy-content .items .item').first().then($el => {
+      const name = $el.text()
+
+      $el.click()
+
+      // check if the user is mentioned
+      cy.get('.ProseMirror').should('have.text', `@${name} `)
+      cy.get('.character-count__text').should('have.text', '2/280 characters')
+    })
+
+  })
 })

demos/src/Examples/Community/Vue/index.vue

@@ -32,9 +32,7 @@
       />
     </svg>
 
-    <div class="character-count__text">
+    <div class="character-count__text">{{ editor.storage.characterCount.characters() }}/{{ limit }} characters</div>
-      {{ editor.storage.characterCount.characters() }}/{{ limit }} characters
-    </div>
   </div>
 </template>