Issue #19: introduce intention revealing UI element specific helper f…

…unctions:

 - page component helper methods

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]'))
+    }
+  }
+}

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);
   }

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);