Chore: document controls functional tests + improve reliability (#716)

functional-tests/constants.js

@@ -13,3 +13,14 @@ exports.SELECTOR_BOX_PREVIEW_DOC = '.bp-doc';
 exports.SELECTOR_BOX_PREVIEW_MP3 = '.bp-media-mp3';
 exports.SELECTOR_BOX_PREVIEW_DASH = '.bp-media-dash';
 exports.SELECTOR_BOX_PREVIEW_MP4 = '.bp-media-mp4';
+exports.SELECTOR_BOX_PREVIEW_ZOOM_OUT_BUTTON = '.bp-doc-zoom-out-icon';
+exports.SELECTOR_BOX_PREVIEW_ZOOM_IN_BUTTON = '.bp-doc-zoom-in-icon';
+exports.SELECTOR_DOC_FIRST_PAGE = '.page[data-page-number="1"]';
+exports.SELECTOR_BOX_PREVIEW_NEXT_PAGE = '.bp-next-page';
+exports.SELECTOR_BOX_PREVIEW_PREVIOUS_PAGE = '.bp-previous-page';
+exports.SELECTOR_BOX_PREVIEW_NUM_INPUT = '.bp-page-num-input';
+exports.SELECTOR_BOX_PREVIEW_ENTER_FULLSCREEN_ICON = '.bp-enter-fullscreen-icon';
+exports.SELECTOR_BOX_PREVIEW_EXIT_FULLSCREEN_ICON = '.bp-exit-fullscreen-icon';
+exports.SELECTOR_BOX_PREVIEW_PAGE_NUM_WRAPPER = '.bp-page-num-wrapper';
+exports.SELECTOR_BOX_PREVIEW_ERROR = '.bp-error';
+exports.SELECTOR_BOX_PREVIEW_NAV_VISIBLE = '.bp-is-navigation-visible';

functional-tests/controls_test.js

@@ -0,0 +1,108 @@
+const {
+    SELECTOR_BOX_PREVIEW_LOADED,
+    SELECTOR_DOC_CURRENT_PAGE,
+    SELECTOR_BOX_PREVIEW_ZOOM_OUT,
+    SELECTOR_DOC_FIRST_PAGE,
+    SELECTOR_BOX_PREVIEW_ZOOM_IN,
+    SELECTOR_BOX_PREVIEW_NEXT_PAGE,
+    SELECTOR_BOX_PREVIEW_PREVIOUS_PAGE,
+    SELECTOR_BOX_PREVIEW_NUM_INPUT,
+    SELECTOR_BOX_PREVIEW_ENTER_FULLSCREEN_ICON,
+    SELECTOR_BOX_PREVIEW_EXIT_FULLSCREEN_ICON,
+    SELECTOR_BOX_PREVIEW_PAGE_NUM_WRAPPER
+} = require('./constants');
+const assert = require('assert');
+
+const { makeNavAppear, zoom, getIsFullscreen } = require('./helpers');
+
+const { CI } = process.env;
+
+Feature('Controls', { retries: CI ? 3 : 0 });
+
+Before((I) => {
+    I.amOnPage('/functional-tests/index.html');
+    I.waitForElement(SELECTOR_BOX_PREVIEW_LOADED);
+});
+
+Scenario('Check document preview zoom @ci @chrome @firefox @edge @ie @safari @android @ios', function*(I) {
+    // zoom out
+    const origWidth = yield I.grabAttributeFrom(SELECTOR_DOC_FIRST_PAGE, 'scrollWidth');
+    const origHeight = yield I.grabAttributeFrom(SELECTOR_DOC_FIRST_PAGE, 'scrollHeight');
+
+    zoom(I, SELECTOR_BOX_PREVIEW_ZOOM_OUT);
+
+    const zoomedOutWidth = yield I.grabAttributeFrom(SELECTOR_DOC_FIRST_PAGE, 'scrollWidth');
+    const zoomedOutHeight = yield I.grabAttributeFrom(SELECTOR_DOC_FIRST_PAGE, 'scrollHeight');
+
+    assert.ok(parseInt(origWidth, 10) > parseInt(zoomedOutWidth, 10));
+    assert.ok(parseInt(origHeight, 10) > parseInt(zoomedOutHeight, 10));
+
+    // zoom in
+    zoom(I, SELECTOR_BOX_PREVIEW_ZOOM_IN);
+
+    const zoomedInWidth = yield I.grabAttributeFrom(SELECTOR_DOC_FIRST_PAGE, 'scrollWidth');
+    const zoomedInHeight = yield I.grabAttributeFrom(SELECTOR_DOC_FIRST_PAGE, 'scrollHeight');
+
+    assert.ok(parseInt(zoomedOutWidth, 10) < parseInt(zoomedInWidth, 10));
+    assert.ok(parseInt(zoomedOutHeight, 10) < parseInt(zoomedInHeight, 10));
+});
+
+Scenario('Check document preview navigation @ci @chrome @firefox @edge @ie @safari @android @ios', function*(I) {
+    const FIRST_PAGE = '#bp-page-1';
+    const SECOND_PAGE = '#bp-page-2';
+
+    makeNavAppear(I);
+
+    // go to page 2
+    I.waitForVisible(SELECTOR_BOX_PREVIEW_NEXT_PAGE);
+    const origPage = yield I.grabTextFrom(SELECTOR_DOC_CURRENT_PAGE);
+    assert.equal(origPage, '1');
+    I.seeElement(FIRST_PAGE);
+    const isPreviousDisabled = yield I.grabAttributeFrom(SELECTOR_BOX_PREVIEW_PREVIOUS_PAGE, 'disabled');
+    assert.ok(isPreviousDisabled);
+    I.click(SELECTOR_BOX_PREVIEW_NEXT_PAGE);
+    let newPage = yield I.grabTextFrom(SELECTOR_DOC_CURRENT_PAGE);
+    assert.equal(newPage, '2');
+    I.seeElement(SECOND_PAGE);
+
+    // go to page 1
+    makeNavAppear(I);
+    const isNextDisabled = yield I.grabAttributeFrom(SELECTOR_BOX_PREVIEW_NEXT_PAGE, 'disabled');
+    assert.ok(isNextDisabled);
+    I.click(SELECTOR_BOX_PREVIEW_PREVIOUS_PAGE);
+    newPage = yield I.grabTextFrom(SELECTOR_DOC_CURRENT_PAGE);
+    assert.equal(newPage, '1');
+    I.seeElement(FIRST_PAGE);
+
+    // go to page 2 by typing into input
+    makeNavAppear(I);
+    I.click(SELECTOR_BOX_PREVIEW_PAGE_NUM_WRAPPER);
+    I.waitForVisible(SELECTOR_BOX_PREVIEW_NUM_INPUT);
+    I.fillField(SELECTOR_BOX_PREVIEW_NUM_INPUT, '2');
+    I.pressKey('Enter');
+    I.waitForVisible(SELECTOR_BOX_PREVIEW_NEXT_PAGE);
+    I.seeElement(SECOND_PAGE);
+});
+
+Scenario('Check document preview fullscreen @ci @chrome @firefox @edge @ie @safari @android @ios', function*(I) {
+    makeNavAppear(I);
+
+    // Enter fullscreem
+    I.waitForVisible(SELECTOR_BOX_PREVIEW_ENTER_FULLSCREEN_ICON);
+    I.click(SELECTOR_BOX_PREVIEW_ENTER_FULLSCREEN_ICON);
+    I.waitForInvisible(SELECTOR_BOX_PREVIEW_ENTER_FULLSCREEN_ICON);
+
+    let isFullscreen = yield I.executeScript(getIsFullscreen);
+
+    assert.ok(isFullscreen);
+
+    makeNavAppear(I);
+
+    // Exit fullscreem
+    I.waitForVisible(SELECTOR_BOX_PREVIEW_EXIT_FULLSCREEN_ICON);
+    I.click(SELECTOR_BOX_PREVIEW_EXIT_FULLSCREEN_ICON);
+    isFullscreen = yield I.executeScript(getIsFullscreen);
+    I.waitForInvisible(SELECTOR_BOX_PREVIEW_EXIT_FULLSCREEN_ICON);
+
+    assert.equal(!!isFullscreen, false);
+});

functional-tests/fileOptions_test.js

@@ -7,10 +7,11 @@ const {
     SELECTOR_BOX_PREVIEW_DOC,
     SELECTOR_BOX_PREVIEW_MP3,
     SELECTOR_BOX_PREVIEW_DASH,
-    SELECTOR_BOX_PREVIEW_MP4
+    SELECTOR_BOX_PREVIEW_MP4,
+    SELECTOR_BOX_PREVIEW_ERROR
 } = require('./constants');
 
-const { navigateToNextItem, makeNavAppear, navigateToPrevItem } = require('./helpers');
+const { navigateToNextItem, makeNavAppear, navigateToPrevItem, waitForLoad } = require('./helpers');
 
 const { CI } = process.env;
 const DOC_START = '2';
@@ -23,14 +24,15 @@ Feature('File Options', { retries: CI ? 3 : 0 });
 
 Before((I) => {
     I.amOnPage('/functional-tests/file-options.html');
-    I.waitForElement(SELECTOR_BOX_PREVIEW_LOADED);
     I.waitForElement(SELECTOR_BOX_PREVIEW_LOGO);
+    waitForLoad(I);
     I.waitForElement(SELECTOR_BOX_PREVIEW_DOC);
 });
 
 // Excludes ie
 Scenario(
     'Check preview starts at correct spot for all file types @ci @chrome @firefox @edge @safari @android @ios',
+    { retries: 5 },
     (I) => {
         // document
         makeNavAppear(I);
@@ -39,14 +41,15 @@ Scenario(
         navigateToNextItem(I);
 
         // video (dash)
-        I.waitForElement(SELECTOR_BOX_PREVIEW_LOADED);
+        waitForLoad(I);
         I.waitForElement(SELECTOR_BOX_PREVIEW_DASH);
         makeNavAppear(I, SELECTOR_VIDEO);
         I.waitForVisible(SELECTOR_MEDIA_TIMESTAMP);
         I.seeTextEquals(DASH_START, SELECTOR_MEDIA_TIMESTAMP);
         navigateToNextItem(I);
 
         // mp3
+        waitForLoad(I);
         I.waitForElement(SELECTOR_BOX_PREVIEW_MP3);
         makeNavAppear(I);
         I.waitForVisible(SELECTOR_MEDIA_TIMESTAMP);
@@ -59,7 +62,7 @@ Scenario(
         });
         I.waitForElement(CLASS_BOX_PREVIEW_LOADING_WRAPPER);
         /* eslint-enable prefer-arrow-callback */
-        I.waitForElement(SELECTOR_BOX_PREVIEW_LOADED);
+        waitForLoad(I);
         I.waitForElement(SELECTOR_BOX_PREVIEW_MP4);
 
         makeNavAppear(I, SELECTOR_VIDEO);
@@ -69,14 +72,15 @@ Scenario(
 );
 
 // Sacuelabs ie11 doesn't like audio files
-Scenario('Check preview starts at correct spot for all file types @ci @ie', (I) => {
+Scenario('Check preview starts at correct spot for all file types @ci @ie', { retries: 5 }, (I) => {
     // document
     makeNavAppear(I);
     I.waitForVisible(SELECTOR_DOC_CURRENT_PAGE);
     I.seeTextEquals(DOC_START, SELECTOR_DOC_CURRENT_PAGE);
     navigateToNextItem(I);
 
     // video (dash)
+    waitForLoad(I);
     I.waitForElement(SELECTOR_BOX_PREVIEW_DASH);
     makeNavAppear(I, SELECTOR_VIDEO);
     I.waitForVisible(SELECTOR_MEDIA_TIMESTAMP);
@@ -86,14 +90,14 @@ Scenario('Check preview starts at correct spot for all file types @ci @ie', (I)
     navigateToPrevItem(I);
     // video (mp4)
     /* eslint-disable prefer-arrow-callback */
-    I.waitForElement(SELECTOR_BOX_PREVIEW_LOADED);
+    waitForLoad(I);
 
     I.executeScript(function() {
         window.disableDash();
     });
     /* eslint-enable prefer-arrow-callback */
 
-    I.waitForElement(SELECTOR_BOX_PREVIEW_LOADED);
+    waitForLoad(I);
     I.waitForElement(SELECTOR_BOX_PREVIEW_MP4);
 
     makeNavAppear(I, SELECTOR_VIDEO);

functional-tests/helpers.js

@@ -1,59 +1,86 @@
-const { SELECTOR_BOX_PREVIEW, CLASS_BOX_PREVIEW_LOADING_WRAPPER } = require('./constants');
+const {
+    SELECTOR_BOX_PREVIEW,
+    CLASS_BOX_PREVIEW_LOADING_WRAPPER,
+    SELECTOR_BOX_PREVIEW_ERROR,
+    SELECTOR_BOX_PREVIEW_LOADED,
+    SELECTOR_BOX_PREVIEW_NAV_VISIBLE
+} = require('./constants');
+
+const { BROWSER_PLATFORM } = process.env;
+
+const isMobile = BROWSER_PLATFORM === 'iOS' || BROWSER_PLATFORM === 'Android';
 
 /**
  * Makes the navigation arrows appear in preview
  * This currently doesnt work in firefox
  *
- * @param {Object} I the codeceptjs I
+ * @param {Object} I - the codeceptjs I
+ * @param {string} selector - the selector to use
  *
  * @return {void}
  */
 function makeNavAppear(I, selector = SELECTOR_BOX_PREVIEW) {
     I.waitForElement(selector);
 
     /* eslint-disable prefer-arrow-callback, no-var */
-    I.executeScript(function(sel) {
-        var count = 0;
-        var el = document.querySelector(sel);
+    I.executeScript(
+        function(sel, isMobileBrowser, navSelector) {
+            var count = 0;
+            var NUM_TIMES_TO_RUN = 5;
+            var el = document.querySelector(sel);
 
-        /**
-         * Simulates click and mousemove events for mobile & desktop browsers for
-         * controls to appear
-         *
-         * @return {void}
-         */
-        function simulateEvents() {
             /**
-             * Cross browswer event creation
-             * @param {string} eventName the event name
-             * @return {Event} the event
+             * Simulates click and mousemove events for mobile & desktop browsers for
+             * controls to appear
+             *
+             * @return {void}
              */
-            function createNewEvent(eventName) {
-                var event;
-                if (typeof Event === 'function') {
-                    event = new Event(eventName, { bubbles: true });
-                } else {
-                    event = document.createEvent('Event');
-                    event.initEvent(eventName, true, true);
-                }
+            function simulateEvents() {
+                /**
+                 * Cross browswer event creation
+                 * @param {string} eventName the event name
+                 * @return {Event} the event
+                 */
+                function createNewEvent(eventName) {
+                    var event;
+                    if (typeof Event === 'function') {
+                        event = new Event(eventName, { bubbles: true });
+                    } else {
+                        event = document.createEvent('Event');
+                        event.initEvent(eventName, true, true);
+                    }
 
-                return event;
-            }
+                    return event;
+                }
 
-            el.dispatchEvent(createNewEvent('mousemove'));
-            el.dispatchEvent(createNewEvent('click'));
+                el.dispatchEvent(createNewEvent('mousemove'));
+                if (isMobileBrowser) {
+                    el.dispatchEvent(createNewEvent('click'));
+                }
 
-            count += 1;
-            if (count < 5) {
-                simulateEvents();
+                count += 1;
+                if (!document.querySelector(navSelector) && count < NUM_TIMES_TO_RUN) {
+                    simulateEvents();
+                }
             }
-        }
 
-        setTimeout(simulateEvents, 500);
-        simulateEvents();
-    }, selector);
+            simulateEvents();
+        },
+        selector,
+        isMobile,
+        SELECTOR_BOX_PREVIEW_NAV_VISIBLE
+    );
 }
 
+exports.getIsFullscreen = function() {
+    return (
+        document.fullscreenElement ||
+        document.webkitFullscreenElement ||
+        document.mozFullScreenElement ||
+        document.msFullscreenElement
+    );
+};
+
 exports.makeNavAppear = makeNavAppear;
 exports.navigateToNextItem = (I) => {
     I.executeScript(function() {
@@ -68,3 +95,14 @@ exports.navigateToPrevItem = (I) => {
     I.waitForElement(CLASS_BOX_PREVIEW_LOADING_WRAPPER);
 };
 /* eslint-enable prefer-arrow-callback, no-var */
+
+exports.zoom = (I, selector) => {
+    makeNavAppear(I);
+    I.waitForVisible(selector);
+    I.click(selector);
+};
+
+exports.waitForLoad = (I) => {
+    I.waitForElement(SELECTOR_BOX_PREVIEW_LOADED);
+    I.dontSee('didn\'t load');
+};