BDD UI test setup

.eslintignore

@@ -0,0 +1 @@
+client/tests/**/*

client/package.json

@@ -6,7 +6,8 @@
     "eject": "react-scripts eject",
     "lint": "eslint --ext js,jsx src",
     "start": "react-scripts start",
-    "test": "react-scripts test"
+    "test": "react-scripts test",
+    "test:webui": "cucumber-js --require tests/cucumber.conf.js --require tests/acceptance/stepDefinitions -f @cucumber/pretty-formatter"
   },
   "browserslist": {
     "production": [
@@ -92,6 +93,8 @@
   },
   "devDependencies": {
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
+    "@cucumber/cucumber": "^7.3.0",
+    "@cucumber/pretty-formatter": "^1.0.0-alpha.1",
     "chai": "^4.3.0",
     "enzyme": "^3.11.0",
     "eslint": "^7.32.0",
@@ -103,6 +106,8 @@
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest-enzyme": "^7.1.2",
+    "nightwatch": "^1.7.6",
+    "nightwatch-api": "^3.0.2",
     "prettier": "2.3.2",
     "react-test-renderer": "^17.0.1"
   }

client/tests/acceptance/features/webUILogin/login.feature

@@ -0,0 +1,6 @@
+Feature: login
+
+    Scenario: valid user logs in
+        Given user has browsed to the login page
+        When user logs in with username "demo@demo.demo" and password "demo"
+        Then user should be in dashboard page

client/tests/acceptance/stepDefinitions/loginContext.js

@@ -0,0 +1,20 @@
+const { Given, When, Then } = require('@cucumber/cucumber');
+const { client } = require('nightwatch-api');
+
+Given('user has browsed to the login page', function () {
+  return client.url(client.launchUrl + '/login');
+});
+
+When(
+  'user logs in with username {string} and password {string}',
+  function (username, password) {
+    return client
+      .setValue('input[name=emailOrUsername]', username)
+      .setValue('input[name=password]', password)
+      .click('.field > button');
+  }
+);
+
+Then('user should be in dashboard page', async function () {
+  return client.assert.containsText('.menu > .item:nth-child(3)', 'Demo Demo');
+});

client/tests/cucumber.conf.js

@@ -0,0 +1,30 @@
+const path = require('path');
+const {
+  setDefaultTimeout,
+  After,
+  Before,
+  AfterAll,
+  BeforeAll,
+} = require('@cucumber/cucumber');
+const {
+  createSession,
+  closeSession,
+  startWebDriver,
+} = require('nightwatch-api');
+
+startWebDriver({ configFile: path.join(__dirname, 'nightwatch.conf.js') });
+setDefaultTimeout(60000);
+
+BeforeAll(async function () {});
+
+// runs before each scenario
+Before(async function () {
+  await createSession();
+});
+
+// runs after each scenario
+After(async function () {
+  await closeSession();
+});
+
+AfterAll(async function () {});

client/tests/nightwatch.conf.js

@@ -0,0 +1,17 @@
+const LAUNCH_URL = process.env.LAUNCH_URL || 'http://localhost:3000';
+
+module.exports = {
+  test_settings: {
+    default: {
+      launch_url: LAUNCH_URL,
+      selenium: {
+        start_process: false,
+        host: 'localhost',
+        port: 4444,
+      },
+      desiredCapabilities: {
+        browserName: 'chrome',
+      },
+    },
+  },
+};

package.json

@@ -25,7 +25,9 @@
     "server:start:prod": "npm run start:prod --prefix server",
     "server:test": "npm test --prefix server",
     "start": "concurrently -n server,client \"npm run server:start\" \"npm run client:start\"",
-    "test": "npm run server:test && npm run client:test"
+    "test": "npm run server:test && npm run client:test",
+    "test:webui": "npm run test:webui --prefix client",
+    "serve": "npm run server:db:init && npm run start"
   },
   "husky": {
     "hooks": {