From 229936dd3bacbb357d2aa6bb88aa55889bbd6dfc Mon Sep 17 00:00:00 2001
From: Dominik Biedebach <dominik.biedebach@ueber.io>
Date: Tue, 10 May 2022 19:38:10 +0200
Subject: [PATCH] test: added first tests for examples

---
 demos/src/Examples/Book/React/index.spec.js   | 12 ++++++
 demos/src/Examples/Book/Vue/index.spec.js     |  7 +++-
 .../CodeBlockLanguage/React/index.spec.js     | 28 ++++++++++++++
 .../CodeBlockLanguage/Vue/index.spec.js       | 28 ++++++++++++++
 .../CollaborativeEditing/React/index.spec.js  | 21 ++++++++++-
 .../CollaborativeEditing/Vue/index.spec.js    | 21 ++++++++++-
 .../Examples/Community/React/index.spec.js    | 37 +++++++++++++++++++
 .../src/Examples/Community/Vue/index.spec.js  | 34 ++++++++++++++++-
 demos/src/Examples/Community/Vue/index.vue    |  4 +-
 9 files changed, 182 insertions(+), 10 deletions(-)
 create mode 100644 demos/src/Examples/Book/React/index.spec.js
 create mode 100644 demos/src/Examples/CodeBlockLanguage/React/index.spec.js
 create mode 100644 demos/src/Examples/CodeBlockLanguage/Vue/index.spec.js
 create mode 100644 demos/src/Examples/Community/React/index.spec.js

diff --git a/demos/src/Examples/Book/React/index.spec.js b/demos/src/Examples/Book/React/index.spec.js
new file mode 100644
index 00000000..9cee5292
--- /dev/null
+++ b/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
+    })
+  })
+})
diff --git a/demos/src/Examples/Book/Vue/index.spec.js b/demos/src/Examples/Book/Vue/index.spec.js
index f4607af8..72d0f440 100644
--- a/demos/src/Examples/Book/Vue/index.spec.js
+++ b/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
+    })
+  })
 })
diff --git a/demos/src/Examples/CodeBlockLanguage/React/index.spec.js b/demos/src/Examples/CodeBlockLanguage/React/index.spec.js
new file mode 100644
index 00000000..03feb221
--- /dev/null
+++ b/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)
+      })
+    })
+  })
+})
diff --git a/demos/src/Examples/CodeBlockLanguage/Vue/index.spec.js b/demos/src/Examples/CodeBlockLanguage/Vue/index.spec.js
new file mode 100644
index 00000000..1b2f9d6e
--- /dev/null
+++ b/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)
+      })
+    })
+  })
+})
diff --git a/demos/src/Examples/CollaborativeEditing/React/index.spec.js b/demos/src/Examples/CollaborativeEditing/React/index.spec.js
index 222b2b4f..675caa42 100644
--- a/demos/src/Examples/CollaborativeEditing/React/index.spec.js
+++ b/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')
+    })
+
+  })
 })
diff --git a/demos/src/Examples/CollaborativeEditing/Vue/index.spec.js b/demos/src/Examples/CollaborativeEditing/Vue/index.spec.js
index a8389944..420753ea 100644
--- a/demos/src/Examples/CollaborativeEditing/Vue/index.spec.js
+++ b/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')
+    })
+
+  })
 })
diff --git a/demos/src/Examples/Community/React/index.spec.js b/demos/src/Examples/Community/React/index.spec.js
new file mode 100644
index 00000000..be09f331
--- /dev/null
+++ b/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')
+    })
+
+  })
+})
diff --git a/demos/src/Examples/Community/Vue/index.spec.js b/demos/src/Examples/Community/Vue/index.spec.js
index fc34d50f..1dc6389b 100644
--- a/demos/src/Examples/Community/Vue/index.spec.js
+++ b/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')
+    })
+
+  })
 })
diff --git a/demos/src/Examples/Community/Vue/index.vue b/demos/src/Examples/Community/Vue/index.vue
index 6e7950f0..cd6a4c9e 100644
--- a/demos/src/Examples/Community/Vue/index.vue
+++ b/demos/src/Examples/Community/Vue/index.vue
@@ -32,9 +32,7 @@
       />
     </svg>
 
-    <div class="character-count__text">
-      {{ editor.storage.characterCount.characters() }}/{{ limit }} characters
-    </div>
+    <div class="character-count__text">{{ editor.storage.characterCount.characters() }}/{{ limit }} characters</div>
   </div>
 </template>