diff --git a/cypress/integration/comments_spec.js b/cypress/integration/comments_spec.js new file mode 100644 index 00000000..a1d6b0ae --- /dev/null +++ b/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!'); + }) + }) + }) + }) +}); diff --git a/cypress/integration/post_details_spec.js b/cypress/integration/post_details_spec.js index 6bf99cec..aff67212 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) }) }) }) @@ -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()}` 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 @@