test(experiments): adds test for collaboration annotation examples

demos/src/Experiments/CollaborationAnnotation/Vue/index.spec.js

@@ -1,7 +1,59 @@
-context('/src/Experiments/Annotation/Vue/', () => {
+context('/src/Experiments/CollaborationAnnotation/Vue/', () => {
   before(() => {
-    cy.visit('/src/Experiments/Annotation/Vue/')
+    cy.visit('/src/Experiments/CollaborationAnnotation/Vue/')
   })
 
-  // TODO: Write tests
+  it('renders two editors', () => {
+    cy.get('.ProseMirror').should('have.length', 2)
+  })
+
+  it('sets an annotation in editor 1 and shows annotations in both editors', () => {
+    cy.window().then(win => {
+      cy.stub(win, 'prompt', () => 'This is a test comment')
+      cy.get('.editor-1 .ProseMirror').type('{selectall}{backspace}Hello world{selectall}')
+      cy.get('button').contains('comment').eq(0).click()
+      cy.get('.editor-1 .ProseMirror').type('{end}')
+      cy.get('.ProseMirror .annotation').should('have.length', 2)
+      cy.get('.comment').should('exist').contains('This is a test comment')
+    })
+  })
+
+  it('updates an existing annotation', () => {
+    let commentIndex = 0
+    cy.window().then(win => {
+      cy.stub(win, 'prompt', () => {
+        switch (commentIndex) {
+          case 0:
+            commentIndex += 1
+            return 'This is a test comment'
+
+          case 1:
+            commentIndex += 1
+            return 'This is the new comment'
+
+          default:
+            return ''
+        }
+      })
+
+      cy.get('.editor-1 .ProseMirror').type('{selectall}{backspace}Hello world{selectall}')
+      cy.get('button').contains('comment').eq(0).click()
+      cy.get('.comment').should('exist').contains('This is a test comment')
+      cy.get('button').contains('update').click()
+      cy.get('.comment').should('exist').contains('This is the new comment')
+    })
+  })
+
+  it('deletes an existing annotation', () => {
+    cy.window().then(win => {
+      cy.stub(win, 'prompt', () => 'This is a test comment')
+
+      cy.get('.editor-1 .ProseMirror').type('{selectall}{backspace}Hello world{selectall}')
+      cy.get('button').contains('comment').eq(0).click()
+      cy.get('.comment').should('exist').contains('This is a test comment')
+      cy.get('button').contains('remove').click()
+      cy.get('.ProseMirror .annotation').should('not.exist')
+      cy.get('.comment').should('not.exist')
+    })
+  })
 })

demos/src/Experiments/CollaborationAnnotation/Vue/index.vue

@@ -7,8 +7,8 @@
       <button @click="addComment" :disabled="!editor.can().addAnnotation()">
         comment
       </button>
-      <editor-content :editor="editor" />
+      <editor-content class="editor-1" :editor="editor" />
-      <div v-for="comment in comments" :key="comment.id">
+      <div class="comment" v-for="comment in comments" :key="comment.id">
         {{ comment }}
 
         <button @click="updateComment(comment.id)">
@@ -26,7 +26,7 @@
       <button @click="addAnotherComment" :disabled="!anotherEditor.can().addAnnotation()">
         comment
       </button>
-      <editor-content :editor="anotherEditor" />
+      <editor-content class="editor-2" :editor="anotherEditor" />
     </div>
   </div>
 </template>
@@ -52,12 +52,11 @@ export default {
       editor: null,
       anotherEditor: null,
       comments: [],
-      ydoc: new Y.Doc(),
     }
   },
 
   mounted() {
-    this.ydoc = new Y.Doc()
+    const ydoc = new Y.Doc()
 
     this.editor = new Editor({
       extensions: [
@@ -67,12 +66,12 @@ export default {
         Bold,
         Heading,
         CollaborationAnnotation.configure({
-          document: this.ydoc,
+          document: ydoc,
           onUpdate: items => { this.comments = items },
           instance: 'editor1',
         }),
         Collaboration.configure({
-          document: this.ydoc,
+          document: ydoc,
         }),
       ],
       content: `
@@ -93,11 +92,11 @@ export default {
         Bold,
         Heading,
         CollaborationAnnotation.configure({
-          document: this.ydoc,
+          document: ydoc,
           instance: 'editor2',
         }),
         Collaboration.configure({
-          document: this.ydoc,
+          document: ydoc,
         }),
       ],
     })