[email protected] - Bumped f-wdio-utils version & fixed up breaking changes

packages/components/atoms/f-button/CHANGELOG.md

@@ -3,14 +3,20 @@
 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).
 
-Latest (add to next release)
+
+v3.4.1
 ------------------------------
-*May 27, 2021*
+*Jun 10, 2022*
+
+### Changed
+- Bumped wdio version and fixed breaking changes.
+
+*May 27, 2022*
 
 ### Removed
 - unneeded `load` and `waitForComponent` functions from component object
 
-*May 26, 2021*
+*May 26, 2022*
 
 ### Changed
 - Refactor WebDriverIO tests to use async in order to support Node 16 using `codemod` utility.

packages/components/atoms/f-button/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeat/f-button",
   "description": "Fozzie Button – The generic button component",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "main": "dist/f-button.umd.min.js",
   "maxBundleSize": "5kB",
   "files": [
@@ -60,8 +60,8 @@
     "vue-router": ">=3.4.8"
   },
   "devDependencies": {
+    "@justeat/f-wdio-utils": "0.11.0",
     "@justeattakeaway/pie-icons-vue": "1.0.0",
-    "@justeat/f-wdio-utils": "0.5.0",
     "@vue/cli-plugin-babel": "4.5.16",
     "@vue/cli-plugin-unit-jest": "4.5.16",
     "@vue/test-utils": "1.0.3",

packages/components/atoms/f-button/test-utils/component-objects/f-button--action.component.js

@@ -1,16 +1,13 @@
-const Page = require('@justeat/f-wdio-utils/src/page.object');
+const Page = require('@justeat/f-wdio-utils/src/base.page');
 
 module.exports = class ActionButton extends Page {
     constructor () {
         super('atom-folder', 'f-button--button-component');
     }
 
+    // Overriding base implementation
     get component () { return $('[data-test-id="action-button-component"]'); }
 
-    async isComponentDisplayed () {
-        return this.component.isDisplayed();
-    }
-
     async isComponentClickable () {
         return this.component.isClickable();
     }

packages/components/atoms/f-button/test-utils/component-objects/f-button--icon.component.js

@@ -1,16 +1,13 @@
-const Page = require('@justeat/f-wdio-utils/src/page.object');
+const Page = require('@justeat/f-wdio-utils/src/base.page');
 
 module.exports = class IconButton extends Page {
     constructor () {
         super('atom-folder', 'f-button--icon-button-component');
     }
 
+    // Overriding base implementation
     get component () { return $('[data-test-id="action-button-component"]'); }
 
-    async isComponentDisplayed () {
-        return this.component.isDisplayed();
-    }
-
     async isComponentClickable () {
         return this.component.isClickable();
     }

packages/components/atoms/f-button/test-utils/component-objects/f-button--link.component.js

@@ -1,16 +1,13 @@
-const Page = require('@justeat/f-wdio-utils/src/page.object');
+const Page = require('@justeat/f-wdio-utils/src/base.page');
 
 module.exports = class LinkButton extends Page {
     constructor () {
         super('atom-folder', 'f-button--link-button-component');
     }
 
+    // Overridding base implementation
     get component () { return $('[data-test-id="link-button-component"]'); }
 
-    async isComponentDisplayed () {
-        return this.component.isDisplayed();
-    }
-
     async isComponentClickable () {
         return this.component.isClickable();
     }

packages/components/atoms/f-button/test/accessibility/axe-accessibility.spec.js

@@ -12,7 +12,7 @@ describe('Accessibility tests', () => {
         button = new ActionButton();
 
         // Act
-        button.load(button.component);
+        button.load();
         const axeResults = getAxeResults('f-button - action');
 
         // Assert
@@ -24,7 +24,7 @@ describe('Accessibility tests', () => {
         button = new LinkButton();
 
         // Act
-        button.load(button.component);
+        button.load();
         const axeResults = getAxeResults('f-button - link');
 
         // Assert
@@ -36,7 +36,7 @@ describe('Accessibility tests', () => {
         button = new IconButton();
 
         // Act
-        button.load(button.component);
+        button.load();
         const axeResults = getAxeResults('f-button - icon');
 
         // Assert

packages/components/atoms/f-button/test/component/f-button.component.spec.js

@@ -4,68 +4,69 @@ const IconButton = require('../../test-utils/component-objects/f-button--icon.co
 
 let button;
 
-describe('f-button component tests', () => {
-    it('should display the f-button action component', async () => {
+describe('Action f-button component tests', () => {
+    beforeEach(() => {
         // Arrange
         button = new ActionButton();
+    });
 
+    it('should display the f-button action component', async () => {
         // Act
-        await button.load(button.component);
+        await button.load();
 
         // Assert
         await expect(await button.isComponentDisplayed()).toBe(true);
     });
 
     it('should check that the f-button action component is clickable', async () => {
-        // Arrange
-        button = new ActionButton();
-
         // Act
-        await button.load(button.component);
+        await button.load();
 
         // Assert
         await expect(await button.isComponentClickable()).toBe(true);
     });
+});
 
-    it('should display the f-button link component', async () => {
+describe('Link f-button component tests', () => {
+    beforeEach(() => {
         // Arrange
         button = new LinkButton();
+    });
 
+    it('should display the f-button link component', async () => {
         // Act
-        await button.load(button.component);
+        await button.load();
 
         // Assert
         await expect(await button.isComponentDisplayed()).toBe(true);
     });
 
     it('should check that the f-button link component is clickable', async () => {
-        // Arrange
-        button = new LinkButton();
-
         // Act
-        await button.load(button.component);
+        await button.load();
 
         // Assert
         await expect(await button.isComponentClickable()).toBe(true);
     });
+});
 
-    it('should display the f-button icon component', async () => {
+describe('Icon f-button component tests', () => {
+    beforeEach(() => {
         // Arrange
         button = new IconButton();
+    });
 
+    it('should display the f-button icon component', async () => {
         // Act
-        await button.load(button.component);
+        await button.load();
 
         // Assert
         await expect(await button.isComponentDisplayed()).toBe(true);
     });
 
     it('should check that the f-button icon component is clickable', async () => {
-        // Arrange
-        button = new IconButton();
-
         // Act
-        await button.load(button.component);
+        await button.load();
 
         // Assert
         await expect(await button.isComponentClickable()).toBe(true);

packages/components/atoms/f-button/test/visual/f-button.visual.desktop.spec.js

@@ -6,25 +6,23 @@ let button;
 
 describe('f-button Desktop visual tests', () => {
     describe('primary, secondary, outline and ghost buttons in all 4 sizes', () => {
-        it('should be displayed', async () => {
+        beforeEach(() => {
             // Arrange
             button = new ActionButton();
+        });
 
+        it('should be displayed', async () => {
             // Act
-            await button.load(button.component);
+            await button.load();
 
             // Assert
             await browser.percyScreenshot('f-button - Action', 'desktop');
         });
 
         describe('in isLoading state', () => {
             it('should be displayed', async () => {
-                // Arrange
-                button = new ActionButton();
-                await button.withQuery('args', 'isLoading');
-
                 // Act
-                await button.load(button.component);
+                await button.load({ isLoading: true });
 
                 // Assert
                 await browser.percyScreenshot('f-button - Action - Loading', 'desktop');
@@ -33,12 +31,8 @@ describe('f-button Desktop visual tests', () => {
 
         describe('in disabled state', () => {
             it('should be displayed', async () => {
-                // Arrange
-                button = new ActionButton();
-                await button.withQuery('args', 'disabled');
-
                 // Act
-                await button.load(button.component);
+                await button.load({ disabled: true });
 
                 // Assert
                 await browser.percyScreenshot('f-button - Action - Disabled', 'desktop');
@@ -49,10 +43,9 @@ describe('f-button Desktop visual tests', () => {
             it('should be displayed', async () => {
                 // Arrange
                 button = new ActionButton();
-                await button.withQuery('args', 'hasIcon:leading');
 
                 // Act
-                await button.load(button.component);
+                await button.load({ hasIcon: 'leading' });
 
                 // Assert
                 await browser.percyScreenshot('f-button - Action - With Leading Icon', 'desktop');
@@ -63,10 +56,9 @@ describe('f-button Desktop visual tests', () => {
             it('should be displayed', async () => {
                 // Arrange
                 button = new ActionButton();
-                await button.withQuery('args', 'hasIcon:trailing');
 
                 // Act
-                await button.load(button.component);
+                await button.load({ hasIcon: 'trailing' });
 
                 // Assert
                 await browser.percyScreenshot('f-button - Action - With Trailing Icon', 'desktop');
@@ -75,25 +67,23 @@ describe('f-button Desktop visual tests', () => {
     });
 
     describe('link button', () => {
-        it('should be displayed in all 4 sizes', async () => {
+        beforeEach(() => {
             // Arrange
             button = new LinkButton();
+        });
 
+        it('should be displayed in all 4 sizes', async () => {
             // Act
-            await button.load(button.component);
+            await button.load();
 
             // Assert
             await browser.percyScreenshot('f-button - Link', 'desktop');
         });
 
         describe('in isLoading state', () => {
             it('should be displayed in all 4 sizes', async () => {
-                // Arrange
-                button = new LinkButton();
-                await button.withQuery('args', 'isLoading');
-
                 // Act
-                await button.load(button.component);
+                await button.load({ isLoading: true });
 
                 // Assert
                 await browser.percyScreenshot('f-button - Link - Loading', 'desktop');
@@ -102,12 +92,8 @@ describe('f-button Desktop visual tests', () => {
 
         describe('in disabled state', () => {
             it('should be displayed', async () => {
-                // Arrange
-                button = new LinkButton();
-                await button.withQuery('args', 'disabled');
-
                 // Act
-                await button.load(button.component);
+                await button.load({ disabled: true });
 
                 // Assert
                 await browser.percyScreenshot('f-button - Link - Disabled', 'desktop');
@@ -116,12 +102,8 @@ describe('f-button Desktop visual tests', () => {
 
         describe('in state with leading icon', () => {
             it('should be displayed', async () => {
-                // Arrange
-                button = new LinkButton();
-                await button.withQuery('args', 'hasIcon:leading');
-
                 // Act
-                await button.load(button.component);
+                await button.load({ hasIcon: 'leading' });
 
                 // Assert
                 await browser.percyScreenshot('f-button - Link - With Leading Icon', 'desktop');
@@ -130,12 +112,8 @@ describe('f-button Desktop visual tests', () => {
 
         describe('in state with trailing icon', () => {
             it('should be displayed', async () => {
-                // Arrange
-                button = new LinkButton();
-                await button.withQuery('args', 'hasIcon:trailing');
-
                 // Act
-                await button.load(button.component);
+                await button.load({ hasIcon: 'trailing' });
 
                 // Assert
                 await browser.percyScreenshot('f-button - Link - With Trailing Icon', 'desktop');
@@ -144,25 +122,23 @@ describe('f-button Desktop visual tests', () => {
     });
 
     describe('all valid iconButton types in all sizes', () => {
-        it('should be displayed', async () => {
+        beforeEach(() => {
             // Arrange
             button = new IconButton();
+        });
 
+        it('should be displayed', async () => {
             // Act
-            await button.load(button.component);
+            await button.load();
 
             // Assert
             await browser.percyScreenshot('f-button - Icon', 'desktop');
         });
 
         describe('in isLoading state', () => {
             it('should be displayed', async () => {
-                // Arrange
-                button = new IconButton();
-                await button.withQuery('args', 'isLoading');
-
                 // Act
-                await button.load(button.component);
+                await button.load({ isLoading: true });
 
                 // Assert
                 await browser.percyScreenshot('f-button - Icon - Loading', 'desktop');