Refactor "Report content" cucumber feature

cypress/integration/05.ReportContent.feature

@@ -7,40 +7,53 @@ Feature: Report and Moderate
   I would like to see all reported content
   So I can look into it and decide what to do
 
-  Scenario: Report a Post from landingpage
+  Background:
-    Given I am logged in as "user"
+    Given we have the following posts in our database:
-    And I am on the "landing" page
+      | Author       | Title                         | Content           | Slug                          |
+      | David Irving | The Truth about the Holocaust | It never existed! | the-truth-about-the-holocaust |
 
-    When I click on a Post menu and select the report option
+  Scenario Outline: Report a post from various pages
-    And I click on send in the confirmation dialog
+    Given I am logged in with a "user" role
-    Then I get a success message
+    And I see David Irving's post on the <Page>
-
+    When I click on "Report Contribution" from the triple dot menu of the post
-  Scenario: See reported content
+    And I confirm the reporting dialog because it is a criminal act under German law:
-    Given I am logged in as "moderator"
+    """
-    And I previously reported a post
+    Do you really want to report the contribution "The Truth about the Holocaust"?
-
+    """
-    When I am on the "moderation" page
+    Then I see a success message:
-    Then I see my reported post
+    """
-
+    Thanks for reporting!
-  Scenario: Report while reading Post
+    """
-    Given I am logged in as "admin"
+    Examples:
-    And I am viewing a post
+      | Page         |
-
+      | landing page |
-    When I report the current post
+      | post page    |
-    And I visit the "moderation" page
-    Then I see my reported post
 
   Scenario: Report user
-    Given I am logged in as "admin"
+    Given I am logged in with a "user" role
-    And I am viewing a post
+    And I see David Irving's post on the post page
-
     When I click on the author
-    And I report the author
+    And I click on "Report User" from the triple dot menu in the user info box
-    And I visit the "moderation" page
+    And I confirm the reporting dialog because he is a holocaust denier:
-    Then I see my reported user
+    """
+    Do you really want to report the user "David Irving"?
+    """
+    Then I see a success message:
+    """
+    Thanks for reporting!
+    """
+
+  Scenario: Review reported content
+    Given somebody reported the following posts:
+      | Slug                          |
+      | the-truth-about-the-holocaust |
+    And I am logged in with a "moderator" role
+    When I click on the avatar menu in the top right corner
+    And I click on "Moderation"
+    Then I see all the reported posts including the one from above
+    And each list item links to the post page
 
   Scenario: Normal user can't see the moderation page
-    Given I am logged in as "user"
+    Given I am logged in with a "user" role
-
+    When I click on the avatar menu in the top right corner
-    When I can click on my profile picture in the top right corner
     Then I can't see the moderation menu item

cypress/integration/common/report.js

@@ -3,6 +3,9 @@ import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
 /* global cy  */
 
 let lastReportTitle
+let dummyReportedPostTitle = "Hacker, Freaks und Funktionäre"
+let dummyReportedPostSlug = 'hacker-freaks-und-funktionareder-ccc' 
+let dummyAuthorName = "Jenny Rostock"
 
 const savePostTitle = $post => {
   return $post
@@ -14,46 +17,42 @@ const savePostTitle = $post => {
       lastReportTitle = title
     })
 }
-const invokeReportOnElement = selector => {
+
-  cy.get(selector)
+Given('I see David Irving\'s post on the landing page', (page) => {
-    .first()
+  cy.openPage('landing')
+})
+
+Given('I see David Irving\'s post on the post page', (page) => {
+  cy.visit(`/post/${dummyReportedPostSlug}`)
+  cy.contains(dummyReportedPostTitle) // wait
+})
+
+Given('I am logged in with a {string} role', role => {
+  cy.loginAs(role)
+})
+
+When('I click on "Report Contribution" from the triple dot menu of the post', () => {
+  //TODO: match the created post title, not a dummy post title
+  cy.contains('.ds-card', dummyReportedPostTitle)
     .find('.content-menu-trigger')
     .first()
     .click()
 
-  return savePostTitle(cy.get(selector)).then(() => {
   cy.get('.popover .ds-menu-item-link')
-      .contains('Report')
+    .contains('Report Contribution')
     .click()
-  })
-}
-
-Given('I am logged in as {string}', userType => {
-  cy.loginAs(userType)
 })
 
-Given('I previously reported a post', () => {
+When('I click on "Report User" from the triple dot menu in the user info box', () => {
-  invokeReportOnElement('.post-card')
+  //TODO: match the created post author, not a dummy author
-})
+  cy.contains('.ds-card', dummyAuthorName)
-
+    .find('.content-menu-trigger')
-Given('I am viewing a post', () => {
+    .first()
-  cy.visit('/')
-  cy.get('.post-card:nth(2)')
     .click()
-    .wait(300)
-  cy.location('pathname').should('contain', '/post')
-})
 
-When('I report the current post', () => {
+  cy.get('.popover .ds-menu-item-link')
-  invokeReportOnElement('.post-card').then(() => {
+    .contains('Report User')
-    cy.get('button')
-      .contains('Send')
     .click()
-  })
-})
-
-When('I click on a Post menu and select the report option', () => {
-  invokeReportOnElement('.post-card')
 })
 
 When('I click on the author', () => {
@@ -83,13 +82,6 @@ Then('I get a success message', () => {
   cy.get('.iziToast-message').contains('Thanks')
 })
 
-Then('I see my reported post', () => {
-  cy.get('table').then(() => {
-    cy.get('tbody tr')
-      .first()
-      .contains(lastReportTitle.trim().slice(0, 20))
-  })
-})
 Then('I see my reported user', () => {
   cy.get('table').then(() => {
     cy.get('tbody tr')
@@ -99,8 +91,45 @@ Then('I see my reported user', () => {
 })
 
 Then(`I can't see the moderation menu item`, () => {
-  cy.get('.avatar-menu').click()
   cy.get('.avatar-menu-popover')
-    .find('a[href="/moderation"]')
+    .find('a[href="/settings"]', 'Settings')
-    .should('have.length', 0)
+    .should('exist') // OK, the dropdown is actually open
+
+  cy.get('.avatar-menu-popover')
+    .find('a[href="/moderation"]', 'Moderation')
+    .should('not.exist')
+})
+
+When(/^I confirm the reporting dialog .*:$/, () => {
+  //TODO: take message from method argument
+  //TODO: match the right post
+  const message = 'Do you really want to report the'
+  cy.contains(message) // wait for element to become visible
+  //TODO: cy.get('.ds-modal').contains(dummyReportedPostTitle)
+  cy.get('.ds-modal').within(() => {
+    cy.get('button')
+      .contains('Send Report')
+      .click()
+  })
+})
+
+Given('somebody reported the following posts:', table => {
+  table.hashes().forEach((row) => {
+    //TODO: calll factory here
+    // const options = Object.assign({}, row, { reported: true })
+    //create('post', options)
+  })
+})
+
+Then('I see all the reported posts including the one from above', () => {
+  //TODO: match the right post
+  cy.get('table tbody').within(() => {
+    cy.contains('tr', dummyReportedPostTitle)
+  })
+})
+
+Then('each list item links to the post page', () => {
+  //TODO: match the right post
+  cy.contains(dummyReportedPostTitle).click()
+  cy.location('pathname').should('contain', '/post')
 })

cypress/integration/common/steps.js

@@ -4,13 +4,6 @@ import users from '../../fixtures/users.json'
 
 /* global cy  */
 
-const openPage = page => {
-  if (page === 'landing') {
-    page = ''
-  }
-  cy.visit(`/${page}`)
-}
-
 Given('I am logged in', () => {
   cy.loginAs('admin')
 })
@@ -33,10 +26,11 @@ Given('my user account has the role {string}', role => {
 When('I log out', cy.logout)
 
 When('I visit the {string} page', page => {
-  openPage(page)
+  cy.openPage(page)
 })
+
 Given('I am on the {string} page', page => {
-  openPage(page)
+  cy.openPage(page)
 })
 
 When('I fill in my email and password combination and click submit', () => {
@@ -54,11 +48,6 @@ When('I log out through the menu in the top right corner', () => {
     .click()
 })
 
-Then('I can click on my profile picture in the top right corner', () => {
-  cy.get('.avatar-menu').click()
-  cy.get('.avatar-menu-popover')
-})
-
 Then('I can see my name {string} in the dropdown menu', () => {
   cy.get('.avatar-menu-popover').should('contain', users.admin.name)
 })
@@ -94,3 +83,19 @@ When(`I click on {string}`, linkOrButton => {
 When('I press {string}', label => {
   cy.contains(label).click()
 })
+
+Given('we have the following posts in our database:', table => {
+  table.hashes().forEach((row) => {
+    //TODO: calll factory here
+    //create('post', row)
+  })
+})
+
+
+Then('I see a success message:', (message) => {
+  cy.contains(message)
+})
+
+When('I click on the avatar menu in the top right corner', () => {
+  cy.get('.avatar-menu').click()
+})

cypress/support/commands.js

@@ -56,9 +56,9 @@ Cypress.Commands.add('login', (email, password) => {
   cy.location('pathname').should('eq', '/') // we're in!
 })
 
-Cypress.Commands.add('loginAs', userType => {
+Cypress.Commands.add('loginAs', role => {
-  userType = userType || 'admin'
+  role = role || 'admin'
-  cy.login(users[userType].email, users[userType].password)
+  cy.login(users[role].email, users[role].password)
 })
 
 Cypress.Commands.add('logout', (email, password) => {
@@ -66,6 +66,14 @@ Cypress.Commands.add('logout', (email, password) => {
   cy.location('pathname').should('contain', '/login') // we're out
 })
 
+Cypress.Commands.add('openPage', (page) =>  {
+  if (page === 'landing') {
+    page = ''
+  }
+  cy.visit(`/${page}`)
+})
+
+
 //
 //
 // -- This is a child command --