From cc21f4b38118fad70792f61e2a6a409f19162800 Mon Sep 17 00:00:00 2001
From: saw-jan <saw.jan.grg3e@gmail.com>
Date: Sun, 20 Jun 2021 20:46:55 +0545
Subject: [PATCH] BDD UI test setup

---
 .eslintignore                                 |  1 +
 client/package.json                           |  7 ++++-
 .../features/webUILogin/login.feature         |  6 ++++
 .../stepDefinitions/loginContext.js           | 20 +++++++++++++
 client/tests/cucumber.conf.js                 | 30 +++++++++++++++++++
 client/tests/nightwatch.conf.js               | 17 +++++++++++
 package.json                                  |  4 ++-
 7 files changed, 83 insertions(+), 2 deletions(-)
 create mode 100644 .eslintignore
 create mode 100644 client/tests/acceptance/features/webUILogin/login.feature
 create mode 100644 client/tests/acceptance/stepDefinitions/loginContext.js
 create mode 100644 client/tests/cucumber.conf.js
 create mode 100644 client/tests/nightwatch.conf.js

diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 00000000..7897b9c8
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1 @@
+client/tests/**/*
\ No newline at end of file
diff --git a/client/package.json b/client/package.json
index 74ecf143..961c6a5e 100755
--- a/client/package.json
+++ b/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"
   }
diff --git a/client/tests/acceptance/features/webUILogin/login.feature b/client/tests/acceptance/features/webUILogin/login.feature
new file mode 100644
index 00000000..37148b07
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/client/tests/acceptance/stepDefinitions/loginContext.js b/client/tests/acceptance/stepDefinitions/loginContext.js
new file mode 100644
index 00000000..a30aa4af
--- /dev/null
+++ b/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');
+});
diff --git a/client/tests/cucumber.conf.js b/client/tests/cucumber.conf.js
new file mode 100644
index 00000000..dd15a2ee
--- /dev/null
+++ b/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 () {});
diff --git a/client/tests/nightwatch.conf.js b/client/tests/nightwatch.conf.js
new file mode 100644
index 00000000..2c4406ed
--- /dev/null
+++ b/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',
+      },
+    },
+  },
+};
diff --git a/package.json b/package.json
index c6999cfd..27258470 100644
--- a/package.json
+++ b/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": {