Add spec for comments

cypress/integration/comments_spec.js

@@ -0,0 +1,56 @@
+describe('Episode comments', function () {
+  let existingUser
+  beforeEach(function () {
+    // create existing user
+    cy.login()
+      .then(({ user }) => {
+        existingUser = user
+        cy.reload().then(() => cy.visit('/new'))
+      })
+  })
+  it('As a user, I can add comments to a post.', () => {
+    cy.get('.news-post:first-child .title > a').click().then(() => {
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.match(/post/)
+      });
+      cy.wait(1000)
+      cy.get('.comment-add-form input.comment-box').type('This was such a great episode I wish there was more like it!');
+      cy.get('.comment-add-form .buttons-comment button.button-submit').click().then(() => {
+        cy.contains('This was such a great episode I wish there was more like it!');
+        cy.get('.comment-holder').within(() => {
+          cy.get('.reply').should('contain', 'Reply');
+          cy.get('.delete').should('contain', 'Delete');
+          cy.get('.edit').should('contain', 'Edit');
+          // Clean up application state.
+          cy.get('.delete').contains('Delete').click()
+          cy.should('not.contain', 'This was such a great episode I wish there was more like it!');
+        })
+      })
+    })
+  })
+  it('As a user, I can edit my own comment on a post.', () => {
+    cy.get('.news-post:first-child .title > a').click().then(() => {
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.match(/post/)
+      });
+      cy.wait(1000)
+      cy.get('.comment-add-form input.comment-box').type('This was such a great esipode I wish there was mor elike it!');
+      cy.get('.comment-add-form .buttons-comment button.button-submit').click().then(() => {
+        cy.contains('This was such a great esipode I wish there was mor elike it!');
+        cy.get('.edit').click();
+        cy.get('.comment-edit-form input.comment-box').clear();
+        cy.get('.comment-edit-form input.comment-box').type('This was such a great episode I wish there was more like it!');
+        cy.get('.comment-edit-form').contains('Save');
+        // Cannot chain on the above `contains` as the element becomes detached from the DOM.
+        cy.get('.comment-edit-form button.button-submit').click()
+        cy.should('not.contain','This was such a great esipode I wish there was mor elike it!');
+        cy.contains('This was such a great episode I wish there was more like it!');
+        cy.get('.comment-holder').within(() => {
+          // Clean up application state.
+          cy.get('.delete').contains('Delete').click()
+          cy.should('not.contain', 'This was such a great episode I wish there was more like it!');
+        })
+      })
+    })
+  })
+});

cypress/integration/post_details_spec.js

@@ -2,10 +2,14 @@ const uuidv4 = require('uuid/v4')
 
 describe('The Post Detail Page', function () {
   it('Successfully displays post details', function () {
+    let postTitle = '';
     cy.visit('/new')
-    cy.get('.title > a').first().click({ force: true }).then(() => {
-      cy.location().should((loc) => {
-        expect(loc.pathname).to.match(/post/)
+    cy.get('.news-post .title').first().invoke('text').then(postTitle => {
+      cy.get('.news-post .title > a').first().click().then(() => {
+        cy.location().should((loc) => {
+          expect(loc.pathname).to.match(/post/)
+        })
+        cy.get('h1').contains(postTitle)
       })
     })
   })
@@ -38,29 +42,6 @@ describe('The Post Detail Page', function () {
       .expectActiveVote('none')
     })
   })
-  xit('Successfully comments on post', function () {
-    const comment = `My opinion - ${uuidv4()}`
-    const reply = `Also - ${uuidv4()}`
-    cy.login().then(() => {
-      cy.visit('/new')
-      cy.get('.title > a').first().click({ force: true })
-      cy.get('.comment-box').first().type(comment)
-      cy.contains('Add Comment').click()
-      cy.contains(comment).should('exist')
-      cy.get('.comment-box').should('have.value', '')
-      cy.contains('Reply').first().click()
-      cy.get('.reply-container').first()
-      .within(() => {
-        cy.get('.comment-box').type(reply)
-        cy.contains('Reply').click()
-      })
-      cy.contains(reply).should('exist')
-      cy.get('.replies').first().contains('Delete').click()
-      cy.contains(reply).should('not.exist')
-      cy.get('.comment-holder').first().contains('Delete').first().click()
-      cy.contains(comment).should('not.exist')
-    })
-  })
   xit('Successfully adds related link', function () {
     const linkUrl = `https://google.com/${uuidv4()}`
     const linkTitle = `See also - ${uuidv4()}`

src/components/CommentCompose.vue

@@ -1,11 +1,13 @@
 
 <template>
+  <div class="comment-add-form">
   <comment-form
     :isSubmitting="isSubmitting"
     :content="commentContent"
     :submitCallback="submitCallback"
   >
   </comment-form>
+  </div>
 </template>
 
 <script>
@@ -55,10 +57,10 @@ export default  {
         })
         .catch((error) => {
           this.isSubmitting = false
-          this.$toasted.error(error.response.data.message, { 
+          this.$toasted.error(error.response.data.message, {
               singleton: true,
-              theme: "bubble", 
-              position: "bottom-center", 
+              theme: "bubble",
+              position: "bottom-center",
               duration : 700
           })
         })

src/components/CommentEdit.vue

@@ -1,14 +1,16 @@
 <template>
-  <comment-form
+  <div class="comment-edit-form">
+    <comment-form
       :isSubmitting="isSubmitting"
       :content="commentContent"
       :submitCallback="submitCallback"
       :cancelPressed="doneCallback"
       :existingMentions="originalMentions"
       :showCancel="true"
-      :submitButtonText="'Edit'"
-      >
+      :submitButtonText="'Save'"
+    >
     </comment-form>
+  </div>
 </template>
 
 <script>
@@ -81,10 +83,10 @@ export default {
           this.doneCallback()
         })
         .catch((error) => {
-          this.$toasted.error(error.response.data.message, { 
+          this.$toasted.error(error.response.data.message, {
               singleton: true,
-              theme: "bubble", 
-              position: "bottom-center", 
+              theme: "bubble",
+              position: "bottom-center",
               duration : 700
           })
         })

src/components/CommentForm.vue

@@ -26,7 +26,7 @@
       <div v-if="isSubmitting">
         <spinner :show="true"></spinner>
       </div>
-      <div class="buttons-comment" v-else>
+      <div class="buttons-comment">
         <button
           class="button-submit"
           :disabled="isSubmitting"
@@ -121,18 +121,18 @@ export default {
   },
   watch: {
     commentContent: function() {
-      // Check mentions
-      if(this.isLoggedIn){
-        const currentMentions = [];
-        each(this.mentionedUsers, user => {
-          const mentionText = "@" + user.name;
-          if (this.commentContent.indexOf(mentionText) >= 0) {
-            currentMentions.push(user);
-          }
-        });
-        this.mentionedUsers = currentMentions;
-      } else {
-        this.$toasted.error('You must login to post a comment')
+      // Check mentions
+      if(this.isLoggedIn){
+        const currentMentions = [];
+        each(this.mentionedUsers, user => {
+          const mentionText = "@" + user.name;
+          if (this.commentContent.indexOf(mentionText) >= 0) {
+            currentMentions.push(user);
+          }
+        });
+        this.mentionedUsers = currentMentions;
+      } else {
+        this.$toasted.error('You must login to post a comment')
       }
     },
     content: function() {

src/components/CommentView.vue

@@ -25,13 +25,13 @@
           <!-- <div class="bullet-point"></div> -->
           <!-- <div v-if="isLoggedIn" class="bullet-point"></div> -->
           <span v-if="!isReplying && isLoggedIn">
-            <span class="link" @click="isReplying=!isReplying">Reply</span>
+            <span class="link reply" @click="isReplying=!isReplying">Reply</span>
           </span>
           <span v-if="isReplying && isLoggedIn" class="link" @click="isReplying=!isReplying">Cancel</span>
 
           <span class="delete" v-if="this.isMyComment && !comment.deleted" @click="remove">Delete</span>
           <span
-            class="delete"
+            class="edit"
             v-if="this.isMyComment && !comment.deleted"
             @click="editing=true"
           >Edit</span>
@@ -210,10 +210,10 @@ export default {
           });
         })
         .catch(error => {
-          this.$toasted.error("Error deleting :(", { 
+          this.$toasted.error("Error deleting :(", {
               singleton: true,
-              theme: "bubble", 
-              position: "bottom-center", 
+              theme: "bubble",
+              position: "bottom-center",
               duration : 700
           });
         });