Implement cucumber test with cypress

cypress.json

@@ -1,3 +1,4 @@
 {
-  "projectId": "qa7fe2"
+  "projectId": "qa7fe2",
+  "ignoreTestFiles": "*.js"
 }

cypress/integration/Login.feature

@@ -0,0 +1,25 @@
+Feature: Authentication
+  As a database administrator
+  I want users to sign in
+  In order to attribute posts and other contributions to their authors
+
+  Background:
+    Given my account has the following details:
+      | name         | email             | password |
+      | Peter Lustig | admin@example.org | 1234     |
+
+  Scenario: Log in
+    When I visit the "/login" page
+    And I fill in my email and password combination and click submit
+    Then I can click on my profile picture in the top right corner
+    And I can see my name "Peter Lustig" in the dropdown menu
+
+  Scenario: Refresh and stay logged in
+    Given I am logged in
+    When I refresh the page
+    Then I am still logged in
+
+  Scenario: Log out
+    Given I am logged in
+    When I log out through the menu in the top right corner
+    Then I see the login screen again

cypress/integration/common/steps.js

@@ -0,0 +1,136 @@
+import { Given, When, Then } from "cypress-cucumber-preprocessor/steps";
+
+const baseUrl = 'http://localhost:3000'
+const username = 'Peter Lustig'
+
+
+const login = (email, password) => {
+  cy.visit(`${baseUrl}/login`)
+  cy.get('input[name=email]').trigger('focus').type(email)
+  cy.get('input[name=password]').trigger('focus').type(password)
+  cy.get('button[name=submit]').as('submitButton').click()
+  cy.location('pathname').should('eq', '/') // we're in!
+}
+
+const logout = () => {
+  cy.visit(`${baseUrl}/logout`)
+  cy.location('pathname').should('contain', '/login') // we're out
+}
+
+const checkLoggedIn = () => {
+}
+
+Given('I am logged in', () => {
+  login('admin@example.org', 1234)
+})
+
+Given('my account has the following details:', (table) => {
+  // as long as we rely on seed data, this is only documentation
+})
+
+When('I log out', logout)
+
+When(`I visit the {string} page`, (route) => {
+  cy.visit(`${baseUrl}/${route}`)
+})
+
+When('I fill in my email and password combination and click submit', () => {
+  login('admin@example.org', 1234)
+})
+
+When('I refresh the page', () => {
+  cy.reload()
+})
+
+When('I log out through the menu in the top right corner', () => {
+  cy.get('.avatar-menu').click()
+  cy.get('.avatar-menu-popover').find('a').contains('Logout').click()
+})
+
+Then('I can click on my profile picture in the top right corner', () => {
+  cy.get('.avatar-menu').click()
+})
+
+Then('I can see my name {string} in the dropdown menu', () => {
+  cy.get('.avatar-menu-popover').should('contain', username)
+})
+
+Then('I see the login screen again', () => {
+  cy.location('pathname').should('contain', '/login')
+  cy.contains('Wenn Du ein Konto bei Human Connection hast, melde Dich bitte hier an.')
+})
+
+Then('I am still logged in', () => {
+  cy.get('.avatar-menu').click()
+  cy.get('.avatar-menu-popover').contains(username)
+})
+
+//   cy.visit('http://localhost:3000/')
+//     .get('.layout-blank')
+//     .should('be.visible')
+// 
+//   cy.location('pathname')
+//     .should('contain', '/login')
+// 
+//   cy.get('input[name=email]')
+//     .as('inputEmail')
+//     .should('be.empty')
+//     .and('have.attr', 'placeholder', 'Deine E-Mail')
+//     .trigger('focus')
+//     .type('user@example.org')
+// 
+//   cy.get('input[name=password]')
+//     .as('inputPassword')
+//     .should('be.empty')
+//     // .and('have.attr', 'placeholder', 'Dein Passwort')
+//     .trigger('focus')
+//     .type('1234')
+// 
+//   cy.get('button[name=submit]')
+//     .as('submitButton')
+//     .should('be.visible')
+//     .and('not.be.disabled')
+//     .click()
+// 
+//   cy.get('@submitButton')
+//     .should('be.disabled')
+//     // .next('.snackbar')
+// 
+//   cy.get('.layout-default')
+// 
+//   cy.location('pathname')
+//     .should('eq', '/')
+// }
+// 
+// const logout = function () {
+//   cy.visit('http://localhost:3000/logout')
+// 
+//   cy.location('pathname')
+//     .should('contain', '/login')
+// 
+//   cy.get('.layout-blank')
+//     .should('be.visible')
+// }
+// 
+// context('Authentication', () => {
+//   it('Login Testuser', loginTestUser)
+// 
+//   it('Login & Logout', function () {
+//     // login
+//     loginTestUser()
+// 
+//     // logout
+//     logout()
+//   })
+// 
+//   it('Still logged in after page-reload', function () {
+//     // login
+//     loginTestUser()
+// 
+//     cy.reload()
+//       .get('.layout-default')
+// 
+//     // logout
+//     // logout()
+//   })
+// })

cypress/integration/login/login.spec.js

@@ -1,73 +0,0 @@
-/// <reference types="Cypress" />
-
-const loginTestUser = function () {
-  // Visiting our app before each test removes any state build up from
-  cy.visit('http://localhost:3000/')
-    .get('.layout-blank')
-    .should('be.visible')
-
-  cy.location('pathname')
-    .should('contain', '/login')
-
-  cy.get('input[name=email]')
-    .as('inputEmail')
-    .should('be.empty')
-    .and('have.attr', 'placeholder', 'Deine E-Mail')
-    .trigger('focus')
-    .type('user@example.org')
-
-  cy.get('input[name=password]')
-    .as('inputPassword')
-    .should('be.empty')
-    // .and('have.attr', 'placeholder', 'Dein Passwort')
-    .trigger('focus')
-    .type('1234')
-
-  cy.get('button[name=submit]')
-    .as('submitButton')
-    .should('be.visible')
-    .and('not.be.disabled')
-    .click()
-
-  cy.get('@submitButton')
-    .should('be.disabled')
-    // .next('.snackbar')
-
-  cy.get('.layout-default')
-
-  cy.location('pathname')
-    .should('eq', '/')
-}
-
-const logout = function () {
-  cy.visit('http://localhost:3000/logout')
-
-  cy.location('pathname')
-    .should('contain', '/login')
-
-  cy.get('.layout-blank')
-    .should('be.visible')
-}
-
-context('Authentication', () => {
-  it('Login Testuser', loginTestUser)
-
-  it('Login & Logout', function () {
-    // login
-    loginTestUser()
-
-    // logout
-    logout()
-  })
-
-  it('Still logged in after page-reload', function () {
-    // login
-    loginTestUser()
-
-    cy.reload()
-      .get('.layout-default')
-
-    // logout
-    // logout()
-  })
-})

cypress/plugins/index.js

@@ -11,7 +11,16 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
-module.exports = () => { // (on, config) => {
+const cucumber = require('cypress-cucumber-preprocessor').default
+module.exports = (on) => { // (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
+  on('file:preprocessor', cucumber())
+
+  on('task', {
+    log () {
+      console.log(arguments)
+      return null
+    }
+  })
 }

package.json

@@ -15,6 +15,9 @@
     "test": "jest",
     "precommit": "yarn lint"
   },
+  "cypress-cucumber-preprocessor": {
+    "nonGlobalStepDefinitions": true
+  },
   "jest": {
     "moduleFileExtensions": [
       "js",
@@ -30,7 +33,9 @@
       "^@@/(.*)$": "<rootDir>/styleguide/src/system/$1",
       "^~/(.*)$": "<rootDir>/$1"
     },
-    "modulePathIgnorePatterns": ["<rootDir>/styleguide"]
+    "modulePathIgnorePatterns": [
+      "<rootDir>/styleguide"
+    ]
   },
   "dependencies": {
     "@nuxtjs/apollo": "^4.0.0-rc3",
@@ -56,6 +61,7 @@
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
     "babel-preset-env": "^1.7.0",
+    "cypress-cucumber-preprocessor": "^1.9.1",
     "eslint": "^5.0.1",
     "eslint-config-prettier": "^3.1.0",
     "eslint-loader": "^2.0.0",