test: Setup UI test using BDD approach (#152)

client/nightwatch.conf.js

@@ -0,0 +1,19 @@
+const path = require('path');
+const LAUNCH_URL = process.env.LAUNCH_URL || 'http://localhost:3000';
+
+module.exports = {
+  page_objects_path: path.join(__dirname, 'tests' , 'acceptance', 'pageObjects'),
+  test_settings: {
+    default: {
+      launch_url: LAUNCH_URL,
+      selenium: {
+        start_process: false,
+        host: 'localhost',
+        port: 4444,
+      },
+      desiredCapabilities: {
+        browserName: 'chrome',
+      },
+    },
+  },
+};

client/package.json

@@ -6,7 +6,8 @@
     "eject": "react-scripts eject",
     "lint": "eslint --ext js,jsx src config-overrides.js",
     "start": "react-app-rewired start",
-    "test": "react-app-rewired test"
+    "test": "react-app-rewired test",
+    "test:webui": "cucumber-js --require tests/acceptance/cucumber.conf.js --require tests/acceptance/stepDefinitions -f @cucumber/pretty-formatter"
   },
   "browserslist": {
     "production": [
@@ -108,6 +109,8 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@cucumber/cucumber": "^7.3.1",
+    "@cucumber/pretty-formatter": "^1.0.0-alpha.1",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
@@ -119,6 +122,8 @@
     "eslint-plugin-jsx-a11y": "^6.10.0",
     "eslint-plugin-react": "^7.36.1",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "nightwatch": "^1.7.8",
+    "nightwatch-api": "^3.0.2",
     "react-test-renderer": "18.2.0"
   }
 }

client/tests/acceptance/cucumber.conf.js

@@ -0,0 +1,25 @@
+const {
+  After,
+  Before,
+  AfterAll,
+  BeforeAll,
+  setDefaultTimeout,
+} = require("@cucumber/cucumber");
+const { createSession, closeSession } = require("nightwatch-api");
+
+setDefaultTimeout(60000);
+// runs before all scenarios
+BeforeAll(async function () {});
+
+// runs before each scenario
+Before(async function () {
+  await createSession();
+});
+
+// runs after each scenario
+After(async function () {
+  await closeSession();
+});
+
+// runs after all scenarios
+AfterAll(async function () {});

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

@@ -0,0 +1,9 @@
+Feature: login
+    As a user
+    I want to log in
+    So that I can manage project
+
+    Scenario: User logs in with valid credentials
+        Given user has browsed to the login page
+        When user logs in with email "[email protected]" and password "demo" using the webUI
+        Then the user should be in the dashboard page

client/tests/acceptance/pageObjects/dashboardPage.js

@@ -0,0 +1,20 @@
+module.exports = {
+  url: function () {
+    return this.api.launchUrl + "/dashboard";
+  },
+  commands: {
+    isDashboardPage: async function () {
+      let result = false;
+      await this.waitForElementVisible("@dashboardHeader");
+      await this.isVisible("@dashboardHeader", (res) => {
+        result = res.value;
+      });
+      return result;
+    },
+  },
+  elements: {
+    dashboardHeader: {
+      selector: "a.Header_title__3SEjb",
+    },
+  },
+};

client/tests/acceptance/pageObjects/loginPage.js

@@ -0,0 +1,26 @@
+module.exports = {
+  url: function () {
+    return this.api.launchUrl + "/login";
+  },
+  commands: {
+    logIn: function (email, password) {
+      return this.waitForElementVisible("@emailInput")
+        .setValue("@emailInput", email)
+        .waitForElementVisible("@passwordInput")
+        .setValue("@passwordInput", password)
+        .waitForElementVisible("@loginBtn")
+        .click("@loginBtn");
+    },
+  },
+  elements: {
+    emailInput: {
+      selector: "input[name=emailOrUsername]",
+    },
+    passwordInput: {
+      selector: "input[name=password]",
+    },
+    loginBtn: {
+      selector: "form button",
+    },
+  },
+};

client/tests/acceptance/stepDefinitions/loginContext.js

@@ -0,0 +1,26 @@
+const { Given, When, Then } = require("@cucumber/cucumber");
+const { client } = require("nightwatch-api");
+const assert = require("assert");
+
+const loginPage = client.page.loginPage();
+const dashboardPage = client.page.dashboardPage();
+
+Given("user has browsed to the login page", function () {
+  return loginPage.navigate();
+});
+
+When(
+  "user logs in with username/email {string} and password {string} using the webUI",
+  function (username, password) {
+    return loginPage.logIn(username, password);
+  }
+);
+
+Then("the user should be in the dashboard page", async function () {
+  const isDashboard = await dashboardPage.isDashboardPage();
+  assert.strictEqual(
+    isDashboard,
+    true,
+    "Expected to see dashboard page but not visible"
+  );
+});