From f6d92634b701503bf9ed96ee76a9c3458ae71af0 Mon Sep 17 00:00:00 2001
From: Billy Oliver <billy.oliver@gmail.com>
Date: Wed, 8 Jun 2022 13:03:03 +0100
Subject: [PATCH] f-wdio-util@v0.11.0 - Introduced a new base page to reduce
 client code (#1909)

* Introduced a new base page to reduce client code

* Updated ver.

Co-authored-by: billy.oliver <billy.oliver@just-eat.com>
---
 packages/services/f-wdio-utils/CHANGELOG.md   |  9 +++++++
 packages/services/f-wdio-utils/package.json   |  2 +-
 .../services/f-wdio-utils/src/base.page.js    | 24 +++++++++++++++++++
 .../services/f-wdio-utils/src/page.object.js  |  7 +++---
 4 files changed, 37 insertions(+), 5 deletions(-)
 create mode 100644 packages/services/f-wdio-utils/src/base.page.js

diff --git a/packages/services/f-wdio-utils/CHANGELOG.md b/packages/services/f-wdio-utils/CHANGELOG.md
index d171dbd1fe..c381870050 100644
--- a/packages/services/f-wdio-utils/CHANGELOG.md
+++ b/packages/services/f-wdio-utils/CHANGELOG.md
@@ -3,6 +3,15 @@
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+
+v0.11.0
+------------------------------
+*June 8, 2022*
+
+### Added
+- Introduce a new base page that infers the calling component which can then reduce the client code
+
+
 v0.10.0
 ------------------------------
 *June 1, 2022*
diff --git a/packages/services/f-wdio-utils/package.json b/packages/services/f-wdio-utils/package.json
index 972c799f2f..02c2f4db07 100644
--- a/packages/services/f-wdio-utils/package.json
+++ b/packages/services/f-wdio-utils/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@justeat/f-wdio-utils",
   "description": "Fozzie Wdio Utils - webdriverIO page object",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "files": [
     "src/"
   ],
diff --git a/packages/services/f-wdio-utils/src/base.page.js b/packages/services/f-wdio-utils/src/base.page.js
new file mode 100644
index 0000000000..98dc4dcb33
--- /dev/null
+++ b/packages/services/f-wdio-utils/src/base.page.js
@@ -0,0 +1,24 @@
+const Page = require('./page.object');
+const { buildUrl } = require('./storybook-extensions');
+
+class BasePage extends Page {
+    get component () {
+        return $(`[${this.componentTag}='${this.componentName}']`);
+    }
+
+    async load (queries) {
+        const pageUrl = buildUrl(this.componentType, this.componentName, this.composePath(queries));
+        this.open(pageUrl);
+        await this.waitForComponent();
+    }
+
+    async waitForComponent (timeoutMs = 500) {
+        await this.component.waitForExist({ timeout: timeoutMs });
+    }
+
+    isComponentDisplayed () {
+        return this.component.isDisplayed();
+    }
+}
+
+module.exports = BasePage;
diff --git a/packages/services/f-wdio-utils/src/page.object.js b/packages/services/f-wdio-utils/src/page.object.js
index 511b97c4f0..9ffdba9ee3 100644
--- a/packages/services/f-wdio-utils/src/page.object.js
+++ b/packages/services/f-wdio-utils/src/page.object.js
@@ -2,12 +2,11 @@ const { source } = require('axe-core');
 const { buildUrl } = require('./storybook-extensions');
 
 class Page {
-    #defaultWaitTimeout = 500;
-
-    constructor (componentType, componentName) {
+    constructor (componentType, componentName, componentTag = 'data-test-id') {
         this.title = 'Component URLS';
         this.componentType = componentType;
         this.componentName = componentName;
+        this.componentTag = componentTag;
         this.path = '';
     }
 
@@ -22,7 +21,7 @@ class Page {
         return this;
     }
 
-    waitForComponent (component, timeoutMs = this.#defaultWaitTimeout) {
+    waitForComponent (component, timeoutMs = 500) {
         component.waitForExist({ timeout: timeoutMs });
     }