From 3dca9a50657c6b64b1880d37416f0b48f64b9cf4 Mon Sep 17 00:00:00 2001 From: Matt Glaman Date: Sun, 18 Aug 2019 21:17:17 -0500 Subject: [PATCH 1/3] Add spec for comments --- cypress/integration/comments_spec.js | 24 ++++++++++++++++++++++++ cypress/integration/post_details_spec.js | 10 +++++++--- 2 files changed, 31 insertions(+), 3 deletions(-) create mode 100644 cypress/integration/comments_spec.js diff --git a/cypress/integration/comments_spec.js b/cypress/integration/comments_spec.js new file mode 100644 index 00000000..aa78952a --- /dev/null +++ b/cypress/integration/comments_spec.js @@ -0,0 +1,24 @@ +describe('Episode comments', function () { + let existingUser + beforeEach(function () { + // create existing user + cy.login() + .then(({ user }) => { + existingUser = user + cy.reload() + }) + }) + it('As a user, I can add comments to an episode.', () => { + cy.visit('/new') + 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('input.comment-box').type('This was such a great episode I wish there was more like it!') + cy.get('.buttons-comment button.button-submit').click().then(() => { + cy.contains('This was such a great episode I wish there was more like it!') + }) + }) + }) +}); diff --git a/cypress/integration/post_details_spec.js b/cypress/integration/post_details_spec.js index 6bf99cec..9355a288 100644 --- a/cypress/integration/post_details_spec.js +++ b/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) }) }) }) From f780a6643bfd8d5f1f45a9eb94a43febf3e6954e Mon Sep 17 00:00:00 2001 From: Matt Glaman Date: Mon, 19 Aug 2019 13:42:57 -0500 Subject: [PATCH 2/3] Test editing comments, change "Edit" to "Save" --- cypress/integration/comments_spec.js | 46 ++++++++++++++++++++---- cypress/integration/post_details_spec.js | 23 ------------ src/components/CommentCompose.vue | 8 +++-- src/components/CommentEdit.vue | 14 ++++---- src/components/CommentForm.vue | 26 +++++++------- src/components/CommentView.vue | 10 +++--- 6 files changed, 71 insertions(+), 56 deletions(-) diff --git a/cypress/integration/comments_spec.js b/cypress/integration/comments_spec.js index aa78952a..b16d36a7 100644 --- a/cypress/integration/comments_spec.js +++ b/cypress/integration/comments_spec.js @@ -5,19 +5,53 @@ describe('Episode comments', function () { cy.login() .then(({ user }) => { existingUser = user - cy.reload() + cy.reload().then(() => cy.visit('/new')) }) }) - it('As a user, I can add comments to an episode.', () => { - 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('input.comment-box').type('This was such a great episode I wish there was more like it!') - cy.get('.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-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.reload(); + 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.reload(); + 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!'); + }) }) }) }) diff --git a/cypress/integration/post_details_spec.js b/cypress/integration/post_details_spec.js index 9355a288..aff67212 100644 --- a/cypress/integration/post_details_spec.js +++ b/cypress/integration/post_details_spec.js @@ -42,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()}` diff --git a/src/components/CommentCompose.vue b/src/components/CommentCompose.vue index a321c56c..25095705 100644 --- a/src/components/CommentCompose.vue +++ b/src/components/CommentCompose.vue @@ -1,11 +1,13 @@