New: Add functional tests for image files

.travis.yml

@@ -16,27 +16,56 @@ aliases:
         addons:
           sauce_connect: true
         script: travis_retry yarn run functional-tests-ci
-    - &sauce-labs-desktop
-      <<: *sauce-labs
-      script: travis_retry yarn run functional-tests-ci --grep @desktop
+    - &sauce-labs-doc-desktop
+      <<: *sauce-labs-desktop
+      script: travis_retry yarn run functional-tests-ci --grep (@desktop)(@doc)
+    - &sauce-labs-image-desktop
+      <<: *sauce-labs-desktop
+      script: travis_retry yarn run functional-tests-ci --grep (@desktop)(@image)
     - &sauce-labs-ie
       <<: *sauce-labs
       script: travis_retry yarn run functional-tests-ci --grep @ie
 jobs:
   include:
   - script: yarn run ci
+  #
+  # DOCUMENT FUNCTIONAL TESTS
+  #
   # Mac Chrome
-  - <<: *sauce-labs-desktop
+  - <<: *sauce-labs-doc-desktop
     env: BROWSER_PLATFORM="macOS 10.13" BROWSER_NAME="chrome" FILE_ID="285567874839" FILE_VERSION_ID="300496591287"
   # Mac Safari
-  - <<: *sauce-labs-desktop
+  - <<: *sauce-labs-doc-desktop
     env: BROWSER_PLATFORM="macOS 10.13" BROWSER_NAME="safari" FILE_ID="285569765346" FILE_VERSION_ID="300498497346"
   # Mac Firefox
-  - <<: *sauce-labs-desktop
+  - <<: *sauce-labs-doc-desktop
     env: BROWSER_PLATFORM="macOS 10.13" BROWSER_NAME="firefox" FILE_ID="285568802145" FILE_VERSION_ID="300497533713"
   # Windows Edge
-  - <<: *sauce-labs-desktop
+  - <<: *sauce-labs-doc-desktop
     env: BROWSER_PLATFORM="Windows 10" BROWSER_NAME="MicrosoftEdge" FILE_ID="285567976309" FILE_VERSION_ID="300496707445"
   # Windows IE
   - <<: *sauce-labs-ie
-    env: BROWSER_PLATFORM="Windows 10" BROWSER_NAME="internet explorer" FILE_ID="285568624824" FILE_VERSION_ID="300497342136"
+    env: BROWSER_PLATFORM="Windows 10" BROWSER_NAME="internet explorer" FILE_ID="285568624824" FILE_VERSION_ID="300497342136"
+
+  #
+  # IMAGE FUNCTIONAL TESTS
+  #
+  # Mac Chrome
+  - <<: *sauce-labs-image-desktop
+    env: BROWSER_PLATFORM="macOS 10.13" BROWSER_NAME="chrome" FILE_ID="303892614178" FILE_VERSION_ID="320034441058"
+  # Mac Safari
+  - <<: *sauce-labs-image-desktop
+    env: BROWSER_PLATFORM="macOS 10.13" BROWSER_NAME="safari" FILE_ID="303895192017" FILE_VERSION_ID="320037121713"
+  # Mac Firefox
+  - <<: *sauce-labs-image-desktop
+    env: BROWSER_PLATFORM="macOS 10.13" BROWSER_NAME="firefox" FILE_ID="303892847838" FILE_VERSION_ID="320034759822"
+  # Windows Edge
+  - <<: *sauce-labs-image-desktop
+    env: BROWSER_PLATFORM="Windows 10" BROWSER_NAME="MicrosoftEdge" FILE_ID="303895492882" FILE_VERSION_ID="320037438562"
+
+  #
+  # MULTI-PAGE IMAGE FUNCTIONAL TESTS
+  #
+  # Mac Chrome
+  - <<: *sauce-labs-image-desktop
+    env: BROWSER_PLATFORM="macOS 10.13" BROWSER_NAME="chrome" FILE_ID="303903703739" FILE_VERSION_ID="320047230971"

functional-tests/helpers/actions.js

@@ -6,19 +6,25 @@ const {
     SELECTOR_ANNOTATION_COMMENT,
     SELECTOR_DELETE_COMMENT_BTN,
     SELECTOR_REPLY_TEXTAREA,
-    SELECTOR_REPLY_CONTAINER
+    SELECTOR_REPLY_CONTAINER,
+    SELECTOR_ANNOTATION_POINT_MARKER,
+    SELECTOR_ANNOTATION_TEXTAREA,
+    SELECTOR_ANNNOTATION_MODE_BACKGROUND,
+    SELECTOR_ANNOTATION_BUTTON_POINT,
+    SELECTOR_ANNOTATION_BUTTON_POINT_EXIT,
+    SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG,
+    SELECTOR_POINT_MODE_HEADER
 } = require('../helpers/constants');
-const { validateReply, validateDeleteConfirmation } = require('./validation');
+const { validateReply, validateDeleteConfirmation, validateTextarea, validateAnnotation } = require('./validation');
 
 /**
  * Replies to an annotation thread
  *
  * @param {Object} I - the codeceptjs I
- * @param {string} selector - annotation CSS selector
  *
  * @return {void}
  */
-function replyToThread(I, selector) {
+function replyToThread(I) {
     I.say('Reply to highlight comment annotation');
     I.fillField(SELECTOR_REPLY_TEXTAREA, 'Sample reply');
     I.click(`${SELECTOR_REPLY_CONTAINER} ${SELECTOR_ANNOTATION_BUTTON_POST}`);
@@ -57,5 +63,77 @@ function deleteAnnotation(I, annotationCount, selector = SELECTOR_ANNOTATION_COM
     }
 }
 
+/**
+ * Enter point annotation mode
+ *
+ * @param {Object} I - the codeceptjs I
+ *
+ * @return {void}
+ */
+function enterPointMode(I) {
+    I.say('Enter point annotation mode');
+    I.click(SELECTOR_ANNOTATION_BUTTON_POINT);
+    I.dontSeeElement(SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG);
+    I.waitForVisible('.bp-notification');
+    I.waitForVisible(SELECTOR_ANNNOTATION_MODE_BACKGROUND);
+    I.waitForVisible(SELECTOR_POINT_MODE_HEADER);
+    I.waitForVisible(SELECTOR_ANNOTATION_BUTTON_POINT_EXIT);
+}
+
+/**
+ * Cancel a point annotation
+ *
+ * @param {Object} I - the codeceptjs I
+ *
+ * @return {void}
+ */
+function cancelPointAnnotation(I) {
+    I.waitForVisible(SELECTOR_ANNOTATION_POINT_MARKER);
+
+    I.say('Annotation dialog should appear with focus on the textarea');
+    I.waitForVisible(SELECTOR_ANNOTATION_DIALOG);
+    validateTextarea(I, '[data-section="create"]', SELECTOR_ANNOTATION_TEXTAREA);
+
+    I.say('Cancel point annotation');
+    I.click(`[data-section="create"] ${SELECTOR_ANNOTATION_BUTTON_CANCEL}`);
+    I.waitForInvisible(SELECTOR_ANNOTATION_DIALOG, 1);
+    I.waitForInvisible(SELECTOR_ANNOTATION_POINT_MARKER, 1);
+}
+
+
+/**
+ * Create/Reply to/Delete a point annotation
+ *
+ * @param {Object} I - the codeceptjs I
+ *
+ * @return {void}
+ */
+function createReplyDeletePoint(I) {
+    /*
+     * Create/reply to a new point annotation
+     */
+    I.waitForVisible(SELECTOR_ANNOTATION_POINT_MARKER);
+
+    I.say('Post point annotation');
+    I.fillField(`[data-section="create"] ${SELECTOR_ANNOTATION_TEXTAREA}`, 'Sample comment');
+    I.click(`[data-section="create"] ${SELECTOR_ANNOTATION_BUTTON_POST}`);
+    validateAnnotation(I);
+    I.waitNumberOfVisibleElements(SELECTOR_ANNOTATION_COMMENT, 1);
+
+    /*
+     * Delete the point annotation
+     */
+    deleteAnnotation(I, 1);
+    I.waitForDetached(SELECTOR_ANNOTATION_POINT_MARKER, 1);
+
+    I.say('Exit point annotation mode');
+    I.click(SELECTOR_ANNOTATION_BUTTON_POINT_EXIT);
+    I.dontSeeElement(SELECTOR_ANNNOTATION_MODE_BACKGROUND);
+    I.waitForVisible(SELECTOR_ANNOTATION_BUTTON_POINT);
+}
+
 exports.replyToThread = replyToThread;
-exports.deleteAnnotation = deleteAnnotation;
+exports.deleteAnnotation = deleteAnnotation;
+exports.enterPointMode = enterPointMode;
+exports.cancelPointAnnotation = cancelPointAnnotation;
+exports.createReplyDeletePoint = createReplyDeletePoint;

functional-tests/tests/draw.js

@@ -30,9 +30,9 @@ After(function() {
     cleanupAnnotations();
 });
 
-Scenario('Create/Delete drawing @desktop', function(I) {
+Scenario('Create/Delete drawing @desktop @doc', function(I) {
     /*
-     * Can enter/exit drawing mode properly @desktop
+     * Can enter/exit drawing mode properly
      */
     I.waitForVisible(SELECTOR_ANNOTATIONS_LOADED);
     I.waitForVisible(SELECTOR_ANNOTATION_BUTTON_DRAW);
@@ -111,7 +111,7 @@ Scenario('Create/Delete drawing @desktop', function(I) {
     I.waitForInvisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
 });
 
-Scenario('Create/Delete a drawing by exiting mode @desktop', function(I) {
+Scenario('Create/Delete a drawing by exiting mode @desktop @doc', function(I) {
     I.waitForVisible(SELECTOR_ANNOTATIONS_LOADED);
     I.waitForVisible(SELECTOR_ANNOTATION_BUTTON_DRAW);
 

functional-tests/tests/highlight_comment.js

@@ -28,7 +28,7 @@ After(function() {
     cleanupAnnotations();
 });
 
-Scenario('Create/Delete a new highlight comment annotation @desktop', function(I) {
+Scenario('Create/Delete a new highlight comment annotation @desktop @doc', function(I) {
     I.waitForVisible(SELECTOR_ANNOTATIONS_LOADED);
 
     I.say('Highlight dialog should appear after selecting text');

functional-tests/tests/plain_highlight.js

@@ -23,7 +23,7 @@ After(function() {
     cleanupAnnotations();
 });
 
-Scenario('Create/Delete a new plain highlight annotation @desktop', function(I) {
+Scenario('Create/Delete a new plain highlight annotation @desktop @doc', function(I) {
     I.waitForVisible(SELECTOR_ANNOTATIONS_LOADED);
 
     /*

functional-tests/tests/point.js

@@ -2,22 +2,17 @@
 const {
     SELECTOR_TEXT_LAYER,
     SELECTOR_ANNOTATIONS_LOADED,
-    SELECTOR_ANNNOTATION_MODE_BACKGROUND,
-    SELECTOR_POINT_MODE_HEADER,
     SELECTOR_ANNOTATION_BUTTON_POINT,
-    SELECTOR_ANNOTATION_BUTTON_POINT_EXIT,
-    SELECTOR_ANNOTATION_POINT_MARKER,
-    SELECTOR_ANNOTATION_DIALOG,
-    SELECTOR_ANNOTATION_TEXTAREA,
-    SELECTOR_ANNOTATION_BUTTON_POST,
-    SELECTOR_ANNOTATION_BUTTON_CANCEL,
-    SELECTOR_ANNOTATION_COMMENT,
     SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG
 } = require('../helpers/constants');
 
+const {
+    enterPointMode,
+    cancelPointAnnotation,
+    createReplyDeletePoint
+} = require('../helpers/actions');
+
 const { clickAtLocation, selectText } = require('../helpers/mouseEvents');
-const { validateTextarea, validateAnnotation } = require('../helpers/validation');
-const { deleteAnnotation } = require('../helpers/actions');
 const { cleanupAnnotations } = require('../helpers/cleanup');
 
 Feature('Point Annotation Sanity');
@@ -30,59 +25,36 @@ After(function() {
     cleanupAnnotations();
 });
 
-Scenario('Create/Delete point annotation @desktop', function(I) {
+Scenario('Create/Delete point annotation @desktop @doc', function(I) {
     I.waitForVisible(SELECTOR_ANNOTATIONS_LOADED);
     I.waitForVisible(SELECTOR_ANNOTATION_BUTTON_POINT);
 
     I.say('Selected text will be cleared on entering point mode');
     selectText(I, SELECTOR_TEXT_LAYER);
     I.waitForVisible(SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG);
 
-    I.say('Enter point annotation mode');
-    I.click(SELECTOR_ANNOTATION_BUTTON_POINT);
-    I.dontSeeElement(SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG);
-    I.waitForVisible('.bp-notification');
-    I.waitForVisible(SELECTOR_ANNNOTATION_MODE_BACKGROUND);
-    I.waitForVisible(SELECTOR_POINT_MODE_HEADER);
-    I.waitForVisible(SELECTOR_ANNOTATION_BUTTON_POINT_EXIT);
+    enterPointMode(I);
 
-    /*
-     * Cancel a new point annotation
-     */
     I.say('Create point annotation');
     clickAtLocation(I, SELECTOR_TEXT_LAYER);
-    I.waitForVisible(SELECTOR_ANNOTATION_POINT_MARKER);
-
-    I.say('Annotation dialog should appear with focus on the textarea');
-    I.waitForVisible(SELECTOR_ANNOTATION_DIALOG);
-    validateTextarea(I, '[data-section="create"]', SELECTOR_ANNOTATION_TEXTAREA);
+    cancelPointAnnotation(I);
 
-    I.say('Cancel point annotation');
-    I.click(`[data-section="create"] ${SELECTOR_ANNOTATION_BUTTON_CANCEL}`);
-    I.waitForInvisible(SELECTOR_ANNOTATION_DIALOG, 1);
-    I.waitForInvisible(SELECTOR_ANNOTATION_POINT_MARKER, 1);
-
-    /*
-     * Create/reply to a new point annotation
-     */
     I.say('Create point annotation');
     clickAtLocation(I, SELECTOR_TEXT_LAYER);
-    I.waitForVisible(SELECTOR_ANNOTATION_POINT_MARKER);
+    createReplyDeletePoint(I);
+});
 
-    I.say('Post point annotation');
-    I.fillField(`[data-section="create"] ${SELECTOR_ANNOTATION_TEXTAREA}`, 'Sample comment');
-    I.click(`[data-section="create"] ${SELECTOR_ANNOTATION_BUTTON_POST}`);
-    validateAnnotation(I);
-    I.waitNumberOfVisibleElements(SELECTOR_ANNOTATION_COMMENT, 1);
+Scenario('Create/Delete point annotation @desktop @image', function(I) {
+    I.waitForVisible(SELECTOR_ANNOTATIONS_LOADED);
+    I.waitForVisible(SELECTOR_ANNOTATION_BUTTON_POINT);
 
-    /*
-     * Delete the point annotation
-     */
-    deleteAnnotation(I, 1);
-    I.waitForDetached(SELECTOR_ANNOTATION_POINT_MARKER, 1);
+    enterPointMode(I);
 
-    I.say('Exit point annotation mode');
-    I.click(SELECTOR_ANNOTATION_BUTTON_POINT_EXIT);
-    I.dontSeeElement(SELECTOR_ANNNOTATION_MODE_BACKGROUND);
-    I.waitForVisible(SELECTOR_ANNOTATION_BUTTON_POINT);
+    I.say('Create point annotation');
+    I.click('.bp-image');
+    cancelPointAnnotation(I);
+
+    I.say('Create point annotation');
+    I.click('.bp-image');
+    createReplyDeletePoint(I);
 });

functional-tests/views/index.pug

@@ -18,6 +18,12 @@ html
       var options = {
           Document: {
               enabledTypes: ['point', 'highlight', 'highlight-comment', 'draw']
+          },
+          Image: {
+              enabledTypes: ['point']
+          },
+          MultiImage: {
+              enabledTypes: ['point']
           }
       };
       var boxAnnotations = new BoxAnnotations(options);