[terra-functional-testing] Wdio7 Upgrade (#674)

* Upgrade wdio 7

* Update all wdio dependencies

* update constructor

* writeStream

* work around

* upgrade guide

* Update packages/terra-toolkit-docs/src/terra-dev-site/tool/terra-functional-testing/upgrade-guides.5/version-2-upgrade-guide.2.tool.md

Co-authored-by: Ben Cai <[email protected]>

* Fix merged jest tests. Code review comments

* node version

* Revert "[terra-functional-testing]  Set test page to the viewport size instead of the browser's window size (#673)"

This reverts commit 4ada1f5.

* Update large test viewport

* More doc updates

* Update packages/terra-functional-testing/src/services/wdio-visual-regression-service/modules/getTerraFormFactor.js

Co-authored-by: Matt Henkes <[email protected]>

* Update CHANGELOG.md

changelog oops

* lint

* Fix test

Co-authored-by: Ben Cai <[email protected]>
Co-authored-by: Matt Henkes <[email protected]>

packages/terra-functional-testing/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+* Breaking
+  * Upgraded to wdio v7
+  * Increased large viewport size to `1020`
+
 ## 1.10.0 - (July 16, 2021)
 
 * Added

packages/terra-functional-testing/package.json

@@ -7,7 +7,7 @@
     "access": "public"
   },
   "engines": {
-    "node": ">=10 <13"
+    "node": ">=12 <15"
   },
   "files": [
     "bin",
@@ -47,12 +47,12 @@
   "dependencies": {
     "@babel/runtime": "^7.11.2",
     "@mirzazeyrek/node-resemble-js": "^1.2.1",
-    "@wdio/cli": "^6.1.4",
-    "@wdio/local-runner": "^6.1.4",
-    "@wdio/mocha-framework": "^6.1.0",
-    "@wdio/reporter": "^6.6.6",
-    "@wdio/spec-reporter": "^6.0.16",
-    "@wdio/sync": "^6.1.14",
+    "@wdio/cli": "^7.7.3",
+    "@wdio/local-runner": "^7.7.3",
+    "@wdio/mocha-framework": "^7.7.3",
+    "@wdio/reporter": "^7.7.3",
+    "@wdio/spec-reporter": "^7.7.3",
+    "@wdio/sync": "^7.7.3",
     "axe-core": "4.0.2",
     "chalk": "^4.1.0",
     "expect": "^26.4.2",
@@ -72,7 +72,7 @@
     "lodash.pickby": "^4.6.0",
     "strip-ansi": "^6.0.0",
     "uuid": "^3.0.0",
-    "webdriverio": "^6.5.0",
+    "webdriverio": "^7.7.3",
     "webpack-dev-server": "^3.11.0",
     "which": "^2.0.2"
   },

packages/terra-functional-testing/src/commands/utils/describeViewports.js

@@ -1,6 +1,4 @@
 const setViewport = require('./setViewport');
-const setViewportSize = require('./setViewportSize');
-const getViewportSize = require('./getViewportSize');
 
 /**
  * Mocha `describe` block to run tests through a defined list of viewports.
@@ -24,7 +22,7 @@ const describeViewports = (title, viewports, fn) => {
     global.describe(`[${viewport}]`, () => {
       global.before(() => {
         // Store the original browser window size so it can be restored after the test has run.
-        previousViewportSize = getViewportSize();
+        previousViewportSize = global.browser.getWindowSize();
 
         setViewport(viewport);
       });
@@ -33,7 +31,7 @@ const describeViewports = (title, viewports, fn) => {
 
       global.after(() => {
         // Restore the browser window to the original size.
-        setViewportSize(previousViewportSize);
+        global.browser.setWindowSize(previousViewportSize.width, previousViewportSize.height);
       });
     });
   });

packages/terra-functional-testing/src/commands/utils/index.js

@@ -5,11 +5,9 @@ const dispatchCustomEvent = require('./dispatchCustomEvent');
 const downloadScreenshots = require('./downloadScreenshots');
 const eventEmitter = require('./eventEmitter');
 const getViewports = require('./getViewports');
-const getViewportSize = require('./getViewportSize');
 const hideInputCaret = require('./hideInputCaret');
 const setApplicationLocale = require('./setApplicationLocale');
 const setViewport = require('./setViewport');
-const setViewportSize = require('./setViewportSize');
 
 module.exports = {
   cleanScreenshots,
@@ -19,9 +17,7 @@ module.exports = {
   downloadScreenshots,
   eventEmitter,
   getViewports,
-  getViewportSize,
   hideInputCaret,
   setApplicationLocale,
   setViewport,
-  setViewportSize,
 };

packages/terra-functional-testing/src/commands/utils/setViewport.js

@@ -1,6 +1,5 @@
 const { Logger } = require('@cerner/terra-cli');
 const { TERRA_VIEWPORTS } = require('../../constants');
-const setViewportSize = require('./setViewportSize');
 
 const logger = new Logger({ prefix: '[terra-functional-testing:setViewport]' });
 
@@ -14,9 +13,9 @@ const setViewport = (viewport) => {
     return;
   }
 
-  const terraViewport = TERRA_VIEWPORTS[viewport];
+  const { height, width } = TERRA_VIEWPORTS[viewport];
 
-  setViewportSize(terraViewport);
+  global.browser.setWindowSize(width, height);
 };
 
 module.exports = setViewport;

packages/terra-functional-testing/src/constants/index.js

@@ -12,7 +12,7 @@ const TERRA_VIEWPORTS = {
     height: 768,
   },
   large: {
-    width: 1000,
+    width: 1020,
     height: 768,
   },
   huge: {

packages/terra-functional-testing/src/reporters/accessibility-reporter/wdio-accessibility-reporter.js

@@ -16,7 +16,7 @@ class AccessibilityReporter extends WDIOReporter {
   }
 
   constructor(options) {
-    super(options);
+    super({ stdout: true, ...options });
 
     this.currentTest = null;
     this.accessibilityResults = {};

packages/terra-functional-testing/src/reporters/file-output-reporter/index.js

@@ -8,8 +8,8 @@ const { Logger } = require('@cerner/terra-cli');
 const LOG_CONTEXT = '[terra-functional-testing:file-output-reporter]';
 
 class FileOutputReporter extends SpecReporter {
-  constructor() {
-    super();
+  constructor(options) {
+    super({ stdout: true, ...options });
     this.runners = [];
     this.resultJsonObject = {
       startDate: '',
@@ -149,7 +149,7 @@ class FileOutputReporter extends SpecReporter {
     if (runner.isMultiremote) {
       testLinks = Object.entries(runner.capabilities).map(
         ([instanceName, capabilities]) => this.getTestLink({
-          config: { ...runner.config, ...{ capabilities } },
+          config: { ...global.browser.config, ...{ capabilities } },
           sessionId: capabilities.sessionId,
           isMultiremote: runner.isMultiremote,
           instanceName,
@@ -185,8 +185,9 @@ class FileOutputReporter extends SpecReporter {
       runners.forEach((runner, index) => {
         // determine correct file name given configuration for run
         if (index === 0) {
-          const { cid, capabilities, config } = runner;
+          const { cid, capabilities } = runner;
           const { browserName } = capabilities;
+          const { config } = global.browser;
           const { formFactor, locale, theme } = config.launcherOptions;
           const options = {
             browserName,

packages/terra-functional-testing/src/reporters/spec-reporter/wdio-spec-reporter.js

@@ -6,7 +6,7 @@ const { eventEmitter } = require('../../commands/utils');
 
 class SpecReporter extends WDIOReporter {
   constructor(options) {
-    super(options);
+    super({ stdout: true, ...options });
     this.screenshotPaths = [];
     this.screenshotMap = {};
 

packages/terra-functional-testing/src/services/wdio-visual-regression-service/modules/getTerraFormFactor.js

@@ -1,5 +1,16 @@
+/* global browser */
+
 const { TERRA_VIEWPORTS } = require('../../../constants');
-const { getViewportSize } = require('../../../commands/utils');
+
+/**
+ * Determines the current viewport size.
+ *
+ * @returns {Object} - the current viewport size.
+ */
+function getViewportSize() {
+  // eslint-disable-next-line prefer-arrow-callback
+  return browser.getWindowSize();
+}
 
 /**
  * Determines the Terra form factor for the current viewport size.

packages/terra-functional-testing/tests/jest/commands/utils/index.test.js

@@ -6,11 +6,9 @@ const {
   downloadScreenshots,
   eventEmitter,
   getViewports,
-  getViewportSize,
   hideInputCaret,
   setApplicationLocale,
   setViewport,
-  setViewportSize,
 } = require('../../../../src/commands/utils');
 
 describe('index', () => {
@@ -22,10 +20,8 @@ describe('index', () => {
     expect(downloadScreenshots).toBeDefined();
     expect(eventEmitter).toBeDefined();
     expect(getViewports).toBeDefined();
-    expect(getViewportSize).toBeDefined();
     expect(hideInputCaret).toBeDefined();
     expect(setApplicationLocale).toBeDefined();
     expect(setViewport).toBeDefined();
-    expect(setViewportSize).toBeDefined();
   });
 });

packages/terra-functional-testing/tests/jest/commands/utils/setViewport.test.js

@@ -1,20 +1,24 @@
-const { setViewport, setViewportSize } = require('../../../../src/commands/utils');
+const { setViewport } = require('../../../../src/commands/utils');
 const { TERRA_VIEWPORTS } = require('../../../../src/constants');
 
-jest.mock('../../../../src/commands/utils/setViewportSize');
+const mockSetWindowSize = jest.fn();
+
+global.browser = {
+  setWindowSize: mockSetWindowSize,
+};
 
 describe('setViewport', () => {
   it('should set specified viewport', () => {
-    const tinyViewport = TERRA_VIEWPORTS.tiny;
+    const { width, height } = TERRA_VIEWPORTS.tiny;
 
     setViewport('tiny');
 
-    expect(setViewportSize).toHaveBeenCalledWith(tinyViewport);
+    expect(global.browser.setWindowSize).toHaveBeenCalledWith(width, height);
   });
 
   it('should not set the window size for unsupported viewport', () => {
     setViewport('unsupported-viewport');
 
-    expect(setViewportSize).not.toHaveBeenCalled();
+    expect(global.browser.setWindowSize).not.toHaveBeenCalled();
   });
 });