[terra-functional-testing] Set test page to the viewport size instead…

… of the browser's window size (#673)

* Run tests using viewport size instead of window size

* return viewport size

* Fix getViewportSize time outs.

packages/terra-functional-testing/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 * Fixed
   * Updated screenshot cleaning to match nested snapshot directories
+  * Updated to size the test page to the viewport size instead of the browser's window size to correctly match the corresponding breakpoint. This change may affect the size of existing screenshots, particularly in IE and firefox. The affected screenshots may need to be regenerated.
 
 ## 1.8.0 - (June 8, 2021)
 

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

@@ -1,4 +1,6 @@
 const setViewport = require('./setViewport');
+const setViewportSize = require('./setViewportSize');
+const getViewportSize = require('./getViewportSize');
 
 /**
  * Mocha `describe` block to run tests through a defined list of viewports.
@@ -22,7 +24,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 = global.browser.getWindowSize();
+        previousViewportSize = getViewportSize();
 
         setViewport(viewport);
       });
@@ -31,7 +33,7 @@ const describeViewports = (title, viewports, fn) => {
 
       global.after(() => {
         // Restore the browser window to the original size.
-        global.browser.setWindowSize(previousViewportSize.width, previousViewportSize.height);
+        setViewportSize(previousViewportSize);
       });
     });
   });

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

@@ -0,0 +1,20 @@
+/**
+ * Gets the viewport size of the current browser window.
+ * @return {Object} - viewport width and height of the current browser window.
+ */
+const getViewportSize = () => {
+  // eslint-disable-next-line prefer-arrow-callback
+  const resolution = global.browser.execute(function getResolution() {
+    return {
+      screenWidth: Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
+      screenHeight: Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
+    };
+  });
+
+  return {
+    width: resolution.screenWidth,
+    height: resolution.screenHeight,
+  };
+};
+
+module.exports = getViewportSize;

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

@@ -4,9 +4,11 @@ const describeViewports = require('./describeViewports');
 const dispatchCustomEvent = require('./dispatchCustomEvent');
 const downloadScreenshots = require('./downloadScreenshots');
 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,
@@ -15,7 +17,9 @@ module.exports = {
   dispatchCustomEvent,
   downloadScreenshots,
   getViewports,
+  getViewportSize,
   hideInputCaret,
   setApplicationLocale,
   setViewport,
+  setViewportSize,
 };

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

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

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

@@ -0,0 +1,25 @@
+const getViewportSize = require('./getViewportSize');
+
+const MAX_RETRIES = 5;
+
+const setViewportSize = (viewport, retryNo = 0) => {
+  const { width, height } = viewport;
+
+  const windowSize = global.browser.getWindowSize();
+  const viewportSize = getViewportSize();
+
+  const widthDiff = windowSize.width - viewportSize.width;
+  const heightDiff = windowSize.height - viewportSize.height;
+
+  // change window size with indent
+  global.browser.setWindowSize(width + widthDiff, height + heightDiff);
+
+  const newViewportSize = getViewportSize();
+
+  // if viewport size is not equal to the desired size, execute process again
+  if (retryNo < MAX_RETRIES && (newViewportSize.width !== width || newViewportSize.height !== height)) {
+    setViewportSize(viewport, retryNo + 1);
+  }
+};
+
+module.exports = setViewportSize;

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

@@ -1,26 +1,5 @@
-/* global browser */
-
 const { TERRA_VIEWPORTS } = require('../../../constants');
-
-/**
- * Determines the current viewport size.
- *
- * @returns {Object} - the current viewport size.
- */
-function getViewportSize() {
-  // eslint-disable-next-line prefer-arrow-callback
-  const resolution = browser.execute(function getResolution() {
-    return {
-      screenWidth: Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
-      screenHeight: Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
-    };
-  });
-
-  return {
-    width: resolution.screenWidth,
-    height: resolution.screenHeight,
-  };
-}
+const { getViewportSize } = require('../../../commands/utils');
 
 /**
  * Determines the Terra form factor for the current viewport size.

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

@@ -0,0 +1,16 @@
+const { getViewportSize } = require('../../../../src/commands/utils');
+
+describe('getViewportSize', () => {
+  it('should get the current viewport size', () => {
+    const mockExecute = jest.fn().mockReturnValue({ screenWidth: 1000, screenHeight: 768 });
+    global.browser = {
+      execute: mockExecute,
+    };
+
+    const viewportSize = getViewportSize();
+
+    expect(mockExecute).toHaveBeenCalled();
+    expect(viewportSize.width).toEqual(1000);
+    expect(viewportSize.height).toEqual(768);
+  });
+});

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

@@ -5,9 +5,11 @@ const {
   dispatchCustomEvent,
   downloadScreenshots,
   getViewports,
+  getViewportSize,
   hideInputCaret,
   setApplicationLocale,
   setViewport,
+  setViewportSize,
 } = require('../../../../src/commands/utils');
 
 describe('index', () => {
@@ -18,8 +20,10 @@ describe('index', () => {
     expect(dispatchCustomEvent).toBeDefined();
     expect(downloadScreenshots).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,24 +1,20 @@
-const { setViewport } = require('../../../../src/commands/utils');
+const { setViewport, setViewportSize } = require('../../../../src/commands/utils');
 const { TERRA_VIEWPORTS } = require('../../../../src/constants');
 
-const mockSetWindowSize = jest.fn();
-
-global.browser = {
-  setWindowSize: mockSetWindowSize,
-};
+jest.mock('../../../../src/commands/utils/setViewportSize');
 
 describe('setViewport', () => {
   it('should set specified viewport', () => {
-    const { width, height } = TERRA_VIEWPORTS.tiny;
+    const tinyViewport = TERRA_VIEWPORTS.tiny;
 
     setViewport('tiny');
 
-    expect(global.browser.setWindowSize).toHaveBeenCalledWith(width, height);
+    expect(setViewportSize).toHaveBeenCalledWith(tinyViewport);
   });
 
   it('should not set the window size for unsupported viewport', () => {
     setViewport('unsupported-viewport');
 
-    expect(global.browser.setWindowSize).not.toHaveBeenCalled();
+    expect(setViewportSize).not.toHaveBeenCalled();
   });
 });

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

@@ -0,0 +1,27 @@
+const { setViewportSize, getViewportSize } = require('../../../../src/commands/utils');
+
+const mockSetWindowSize = jest.fn();
+const mockGetWindowSize = jest.fn().mockReturnValue({ width: 1010, height: 778 });
+
+jest.mock('../../../../src/commands/utils/getViewportSize', () => {
+  const mockGetViewportSize = jest.fn(() => (
+    { width: 910, height: 760 }
+  ));
+
+  return mockGetViewportSize;
+});
+
+global.browser = {
+  setWindowSize: mockSetWindowSize,
+  getWindowSize: mockGetWindowSize,
+};
+
+describe('setViewportSize', () => {
+  it('should set specified viewport size', () => {
+    setViewportSize({ width: 1000, height: 768 }, 5);
+
+    expect(getViewportSize).toHaveBeenCalledTimes(2);
+    expect(mockSetWindowSize).toHaveBeenCalled();
+    expect(mockGetWindowSize).toHaveBeenCalled();
+  });
+});