feat: add form for adding org on home page

Author: Mohmn

features/organization.feature

@@ -2,7 +2,6 @@ Feature: Organization Features
   We allow user to apply for an organization, as an organization, user can approve or reject trees, manage grower under the org.
   Check the `docs/organization-onboarding.md` for more details.
 
-  @skip
   Scenario: Apply for an organization
     Given I am registered user
     And I am on the organization application page

features/page-objects/OrganizationPage.js

@@ -0,0 +1,98 @@
+class OrganizationPage {
+  get nameInput() {
+    return $('#organization-name');
+  }
+
+  get emailInput() {
+    return $('#organization-email');
+  }
+
+  get phoneInput() {
+    return $('#organization-phone');
+  }
+
+  get websiteInput() {
+    return $('#organization-website');
+  }
+
+  get logoUrlInput() {
+    return $('#organization-logo-url');
+  }
+
+  get mapNameInput() {
+    return $('#organization-map-name');
+  }
+
+  get submitButton() {
+    return $('button[type="submit"]');
+  }
+
+  get successAlert() {
+    return $('div=Organization created successfully.');
+  }
+
+  get verifyMenuItem() {
+    return $('a=Verify');
+  }
+
+  async waitForPage() {
+    await this.nameInput.waitForDisplayed({ timeout: 10000 });
+    await this.emailInput.waitForDisplayed({ timeout: 10000 });
+  }
+
+  async fillOrganizationDetails(details) {
+    await this.waitForPage();
+
+    await this.nameInput.setValue(details.name);
+    await this.emailInput.setValue(details.email);
+    await this.phoneInput.setValue(details.phone);
+    await this.websiteInput.setValue(details.website);
+    await this.logoUrlInput.setValue(details.logoUrl);
+    await this.mapNameInput.setValue(details.mapName);
+  }
+
+  async submit() {
+    await this.submitButton.waitForDisplayed({ timeout: 10000 });
+    await this.submitButton.click();
+  }
+
+  async waitForConfirmation() {
+    await this.successAlert.waitForDisplayed({
+      timeout: 60000,
+      timeoutMsg:
+        'Expected a confirmation message after submitting organization details',
+    });
+  }
+
+  async waitForHomeRedirect() {
+    const baseUrl = browser.options.baseUrl;
+
+    await browser.waitUntil(
+      async () => {
+        const currentUrl = await browser.getUrl();
+
+        if (!baseUrl || !currentUrl.startsWith(baseUrl)) {
+          return false;
+        }
+
+        return new URL(currentUrl).pathname === '/';
+      },
+      {
+        timeout: 60000,
+        interval: 500,
+        timeoutMsg:
+          'Expected organization submit flow to return to the home page',
+      }
+    );
+  }
+
+  async waitForVerifyMenuItem() {
+    await this.verifyMenuItem.waitForDisplayed({
+      timeout: 60000,
+      timeoutMsg:
+        'Expected the Verify menu item to be visible after onboarding',
+    });
+  }
+}
+
+module.exports = new OrganizationPage();

features/step-definitions/organization.steps.js

@@ -0,0 +1,102 @@
+const { Given, When, Then } = require('@cucumber/cucumber');
+
+const LoginPage = require('../page-objects/LoginPage');
+const OrganizationPage = require('../page-objects/OrganizationPage');
+
+const LOG_OUT_BUTTON = 'button=LOG OUT';
+const USERNAME = 'user-test-treetracker-admin-client';
+const PASSWORD = 'LjyxVk4t5^yx&!Gl';
+
+let organizationDetails;
+
+async function navigate(path) {
+  await browser.url(path, { wait: 'none' });
+}
+
+async function isExisting(selector) {
+  return $(selector)
+    .isExisting()
+    .catch(() => false);
+}
+
+async function openKeycloakLoginPage() {
+  await navigate('/login');
+
+  if (await LoginPage.isOpen()) {
+    await LoginPage.waitForPage();
+    return;
+  }
+
+  await navigate('/account');
+
+  try {
+    await browser.waitUntil(
+      async () =>
+        (await LoginPage.isOpen()) || (await isExisting(LOG_OUT_BUTTON)),
+      { timeout: 15000, interval: 250 }
+    );
+  } catch {
+    await navigate('/login');
+    await LoginPage.waitForPage();
+    return;
+  }
+
+  if (await LoginPage.isOpen()) {
+    await LoginPage.waitForPage();
+    return;
+  }
+
+  const logoutButton = $(LOG_OUT_BUTTON);
+  await logoutButton.waitForDisplayed({ timeout: 10000 });
+  await logoutButton.scrollIntoView();
+  await logoutButton.click();
+  await LoginPage.waitForPage();
+}
+
+function buildOrganizationDetails() {
+  const timestamp = Date.now();
+
+  return {
+    name: `Organization BDD ${timestamp}`,
+    email: `organization-bdd-${timestamp}@example.com`,
+    phone: '+23270000000',
+    website: `https://example.com/organization-bdd-${timestamp}`,
+    logoUrl: 'https://example.com/logo.png',
+    mapName: `freetown-${timestamp}`,
+  };
+}
+
+Given('I am registered user', async () => {
+  await openKeycloakLoginPage();
+  await LoginPage.login(USERNAME, PASSWORD);
+  await LoginPage.waitForSuccessfulRedirect();
+});
+
+Given('I am on the organization application page', async () => {
+  await browser.url('/organization/apply');
+  await OrganizationPage.waitForPage();
+});
+
+When('I fill in the organization details', async () => {
+  organizationDetails = buildOrganizationDetails();
+  await OrganizationPage.fillOrganizationDetails(organizationDetails);
+});
+
+When('I submit the form', async () => {
+  await OrganizationPage.submit();
+});
+
+Then('I should see a confirmation message', async () => {
+  await OrganizationPage.waitForConfirmation();
+});
+
+Then('Go the home page', async () => {
+  await OrganizationPage.waitForHomeRedirect();
+});
+
+Then(
+  'I should see the `verify` menu item on the menu bar on the top left',
+  async () => {
+    await OrganizationPage.waitForVerifyMenuItem();
+  }
+);