From 600e62304e3995ec1dd382e826c33c32962d3c87 Mon Sep 17 00:00:00 2001 From: Daniel DeMicco Date: Fri, 9 Mar 2018 09:43:19 -0800 Subject: [PATCH 1/3] Chore: document controls functional tests + improve reliability --- functional-tests/constants.js | 11 +++ functional-tests/controls_test.js | 108 +++++++++++++++++++++++++++ functional-tests/fileOptions_test.js | 20 +++-- functional-tests/helpers.js | 106 +++++++++++++++++--------- 4 files changed, 203 insertions(+), 42 deletions(-) create mode 100644 functional-tests/controls_test.js diff --git a/functional-tests/constants.js b/functional-tests/constants.js index c93c79485..e1755f292 100644 --- a/functional-tests/constants.js +++ b/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 = '.bp-doc-zoom-out-icon'; +exports.SELECTOR_BOX_PREVIEW_ZOOM_IN = '.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'; diff --git a/functional-tests/controls_test.js b/functional-tests/controls_test.js new file mode 100644 index 000000000..07b061bb0 --- /dev/null +++ b/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); +}); diff --git a/functional-tests/fileOptions_test.js b/functional-tests/fileOptions_test.js index 398a6a2af..39194df8f 100644 --- a/functional-tests/fileOptions_test.js +++ b/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,7 +41,7 @@ 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); @@ -47,6 +49,7 @@ Scenario( 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,7 +72,7 @@ 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); @@ -77,6 +80,7 @@ Scenario('Check preview starts at correct spot for all file types @ci @ie', (I) 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); diff --git a/functional-tests/helpers.js b/functional-tests/helpers.js index cac381b14..fa5f8792f 100644 --- a/functional-tests/helpers.js +++ b/functional-tests/helpers.js @@ -1,10 +1,21 @@ -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} */ @@ -12,48 +23,64 @@ 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'); +}; From 9d89b36ef819718cc8a0f629699d83af3c44ba98 Mon Sep 17 00:00:00 2001 From: Daniel DeMicco Date: Thu, 22 Mar 2018 15:04:17 -0700 Subject: [PATCH 2/3] Chore: update zoom constants --- functional-tests/constants.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/functional-tests/constants.js b/functional-tests/constants.js index e1755f292..9fe7209d0 100644 --- a/functional-tests/constants.js +++ b/functional-tests/constants.js @@ -13,8 +13,8 @@ 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 = '.bp-doc-zoom-out-icon'; -exports.SELECTOR_BOX_PREVIEW_ZOOM_IN = '.bp-doc-zoom-in-icon'; +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'; From 4188b64befb5d6e82e7bf128a62857fd8a9ce009 Mon Sep 17 00:00:00 2001 From: Daniel DeMicco Date: Thu, 22 Mar 2018 16:34:58 -0700 Subject: [PATCH 3/3] Chore: updates --- functional-tests/controls_test.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/functional-tests/controls_test.js b/functional-tests/controls_test.js index 07b061bb0..177531202 100644 --- a/functional-tests/controls_test.js +++ b/functional-tests/controls_test.js @@ -1,9 +1,9 @@ const { SELECTOR_BOX_PREVIEW_LOADED, SELECTOR_DOC_CURRENT_PAGE, - SELECTOR_BOX_PREVIEW_ZOOM_OUT, + SELECTOR_BOX_PREVIEW_ZOOM_OUT_BUTTON, SELECTOR_DOC_FIRST_PAGE, - SELECTOR_BOX_PREVIEW_ZOOM_IN, + SELECTOR_BOX_PREVIEW_ZOOM_IN_BUTTON, SELECTOR_BOX_PREVIEW_NEXT_PAGE, SELECTOR_BOX_PREVIEW_PREVIOUS_PAGE, SELECTOR_BOX_PREVIEW_NUM_INPUT, @@ -29,7 +29,7 @@ Scenario('Check document preview zoom @ci @chrome @firefox @edge @ie @safari @an 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); + zoom(I, SELECTOR_BOX_PREVIEW_ZOOM_OUT_BUTTON); const zoomedOutWidth = yield I.grabAttributeFrom(SELECTOR_DOC_FIRST_PAGE, 'scrollWidth'); const zoomedOutHeight = yield I.grabAttributeFrom(SELECTOR_DOC_FIRST_PAGE, 'scrollHeight'); @@ -38,7 +38,7 @@ Scenario('Check document preview zoom @ci @chrome @firefox @edge @ie @safari @an assert.ok(parseInt(origHeight, 10) > parseInt(zoomedOutHeight, 10)); // zoom in - zoom(I, SELECTOR_BOX_PREVIEW_ZOOM_IN); + zoom(I, SELECTOR_BOX_PREVIEW_ZOOM_IN_BUTTON); const zoomedInWidth = yield I.grabAttributeFrom(SELECTOR_DOC_FIRST_PAGE, 'scrollWidth'); const zoomedInHeight = yield I.grabAttributeFrom(SELECTOR_DOC_FIRST_PAGE, 'scrollHeight'); @@ -47,7 +47,7 @@ Scenario('Check document preview zoom @ci @chrome @firefox @edge @ie @safari @an assert.ok(parseInt(zoomedOutHeight, 10) < parseInt(zoomedInHeight, 10)); }); -Scenario('Check document preview navigation @ci @chrome @firefox @edge @ie @safari @android @ios', function*(I) { +Scenario('Check document preview navigation @ci @chrome @firefox @edge @ie @safari @android @ios @test', function*(I) { const FIRST_PAGE = '#bp-page-1'; const SECOND_PAGE = '#bp-page-2'; @@ -78,7 +78,8 @@ Scenario('Check document preview navigation @ci @chrome @firefox @edge @ie @safa 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.click(SELECTOR_BOX_PREVIEW_NUM_INPUT); + I.pressKey('2'); I.pressKey('Enter'); I.waitForVisible(SELECTOR_BOX_PREVIEW_NEXT_PAGE); I.seeElement(SECOND_PAGE);