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

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 "demo@demo.demo" 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"
+  );
+});