From 5fc43e6cb1fd5435d719cbe0acc051284c0d8a5e Mon Sep 17 00:00:00 2001
From: "Andrew Revinsky (DART)" <andrew.revinsky@digitalarrowtech.com>
Date: Mon, 28 Jun 2021 20:08:12 +0300
Subject: [PATCH] Issue #19: introduce intention revealing UI element specific
 helper functions:  - page component helper methods

---
 tests-ui/helpers/index.js        | 29 +++++++++++++++++++++++++++++
 tests-ui/pages/landing.js        | 25 ++++++++++++++-----------
 tests-ui/pages/pageComponents.js | 10 ++++++++++
 3 files changed, 53 insertions(+), 11 deletions(-)
 create mode 100644 tests-ui/pages/pageComponents.js

diff --git a/tests-ui/helpers/index.js b/tests-ui/helpers/index.js
index e9b4a6e..6e01d3f 100644
--- a/tests-ui/helpers/index.js
+++ b/tests-ui/helpers/index.js
@@ -1,2 +1,31 @@
 //textField(page, SEL.FORM_FIELD_ADDRESS).enter(testData.address)
 
+//await waitClickAndType(page, SEL.FORM_FIELD_ADDRESS, testData.address);
+//await waitForTimeout(page, 10);
+import { waitClickAndType, waitForSelector, waitForSelectorAndClick } from '../puppeteerExtensions';
+import { cssSel } from '../../src/shared/e2e';
+
+export const textField = (page, sel) => {
+  return {
+    enter(text) {
+      return waitClickAndType(page, sel, text);
+    },
+    ensurePresent() {
+      return waitForSelector(page, sel);
+    },
+  };
+}
+
+export const element = (page, sel) => {
+  return {
+    ensurePresent() {
+      return waitForSelector(page, sel);
+    },
+    click() {
+      return waitForSelectorAndClick(page, sel);
+    },
+    expectDisabled() {
+      return waitForSelector(page, cssSel(sel).mod('[disabled]'))
+    }
+  }
+}
diff --git a/tests-ui/pages/landing.js b/tests-ui/pages/landing.js
index b508437..f342ddb 100644
--- a/tests-ui/pages/landing.js
+++ b/tests-ui/pages/landing.js
@@ -1,28 +1,31 @@
-import { waitClickAndType, waitForSelector, waitForSelectorAndClick, waitForTimeout } from '../puppeteerExtensions';
+import { waitForSelector, waitForTimeout } from '../puppeteerExtensions';
 import { SEL } from '../selectors';
 import { makeScreenshot } from '../testWrapper';
 import { tagPageObject } from './utilities';
+import {
+  addressAndTimeForm,
+  addressAndTimeFormSubmitButton,
+  addressField,
+  spinIcon,
+  timeField
+} from './pageComponents';
 
 export const landingPage = page => tagPageObject('landingPage', {
 
   expectVisitingSelf: () => waitForSelector(page, SEL.PAGE_LANDING),
 
   fillOutTheAddressAndTimeForm: async (testData) => {
-    await waitForSelector(page, SEL.FORM_PICK_ADDRESS_TIME);
-    await waitClickAndType(page, SEL.FORM_FIELD_ADDRESS, testData.address);
-//    await waitForTimeout(page, 10);
-
-    await waitClickAndType(page, SEL.FORM_FIELD_TIME, testData.time);
-//    await waitForTimeout(page, 10);
+    await addressAndTimeForm(page).ensurePresent();
+    await addressField(page).enter(testData.address);
+    await timeField(page).enter(testData.time);
 
     await makeScreenshot(page, { label: 'time_entry' });
   },
 
   submitTheAddressAndTimeFormSuccessfully: async () => {
-    await waitForSelectorAndClick(page, SEL.BTN_SUBMIT_FORM_PICK_ADDRESS_TIME);
-//    await waitForTimeout(page, 10);
-    await waitForSelector(page, SEL.BTN_SUBMIT_FORM_PICK_ADDRESS_TIME + '[disabled]');
-    await waitForSelector(page, SEL.ICON_SPIN);
+    await addressAndTimeFormSubmitButton(page).click();
+    await addressAndTimeFormSubmitButton(page).expectDisabled();
+    await spinIcon(page).ensurePresent();
 
     await waitForTimeout(page, 300);
   }
diff --git a/tests-ui/pages/pageComponents.js b/tests-ui/pages/pageComponents.js
new file mode 100644
index 0000000..9b8dc3e
--- /dev/null
+++ b/tests-ui/pages/pageComponents.js
@@ -0,0 +1,10 @@
+//await addressField(page).enter(testData.address);
+
+import { element, textField } from '../helpers';
+import { SEL } from '../selectors';
+
+export const addressField = page => textField(page, SEL.FORM_FIELD_ADDRESS);
+export const timeField = page => textField(page, SEL.FORM_FIELD_TIME);
+export const addressAndTimeForm = page => element(page, SEL.FORM_PICK_ADDRESS_TIME)
+export const addressAndTimeFormSubmitButton = page => element(page, SEL.BTN_SUBMIT_FORM_PICK_ADDRESS_TIME);
+export const spinIcon = page => element(page, SEL.ICON_SPIN);