Chore: Add tests to select/delete drawing

functional-tests/helpers/constants.js

@@ -1,3 +1,5 @@
+exports.SELECTOR_TEXT_LAYER = '.textLayer';
+
 // Preview CSS constants
 const CLASS_ACTIVE = 'bp-is-active';
 exports.SELECTOR_ACTIVE = `.${CLASS_ACTIVE}`;

functional-tests/helpers/mouseEvents.js

@@ -12,7 +12,6 @@ function selectText(I, selector) {
     I.waitForElement(selector);
 
     I.executeScript(
-        /* eslint-disable prefer-arrow-callback, no-var, func-names */
         function (sel) {
             const preview = document.querySelector('.bp-doc');
             const selectionEl = document.querySelector(sel);
@@ -54,22 +53,23 @@ function selectText(I, selector) {
 }
 
 /**
- * Draw on the document
+ * Selects text on the document
  *
  * @param {Object} I - the codeceptjs I
+ * @param {string} action - mouseEvent action type
  * @param {string} selector - the selector to use
+ * @param {number} offset - mouseEvent offset
  *
  * @return {void}
  */
-function draw(I, selector) {
+function executeMouseEvent(I, action, selector, offset) {
     I.waitForElement(selector);
 
     I.executeScript(
-        function (sel) {
+        function (sel, mouseEvt, off) {
             const preview = document.querySelector('.bp-doc');
             const selectionEl = document.querySelector(sel);
-            const start = selectionEl.firstElementChild;
-            const end = selectionEl.lastElementChild;
+            const element = selectionEl.firstElementChild ? selectionEl.firstElementChild : selectionEl;
 
             /**
              * Cross browser event creation
@@ -78,8 +78,8 @@ function draw(I, selector) {
              * @return {Event} the event
              */
             function createNewEvent(eventName, el) {
-                const x = el.offsetLeft + 2;
-                const y = el.offsetTop + 2;
+                const x = el.offsetLeft + off;
+                const y = el.offsetTop + off;
 
                 let event;
                 if (typeof MouseEvent === 'function') {
@@ -93,13 +93,30 @@ function draw(I, selector) {
                 return event;
             }
 
-            preview.dispatchEvent(createNewEvent('mousedown', start));
-            preview.dispatchEvent(createNewEvent('mousemove', end));
-            preview.dispatchEvent(createNewEvent('mouseup', end));
+            preview.dispatchEvent(createNewEvent(mouseEvt, element));
         },
-        selector
+        selector,
+        action,
+        offset
     );
 }
 
+exports.executeMouseEvent = executeMouseEvent;
 exports.selectText = selectText;
-exports.draw = draw;
+
+exports.draw = function(I, selector, offset) {
+    var pos = 0;
+    const MAX_OFFSET = 300;
+
+    executeMouseEvent(I, 'mousedown', selector, 0);
+
+    for(pos = 0; pos <= MAX_OFFSET; pos += offset) {
+        executeMouseEvent(I, 'mousemove', selector, pos);
+    }
+
+    executeMouseEvent(I, 'mouseup', selector, MAX_OFFSET);
+};
+
+exports.clickAtLocation = function(I, selector, offset) {
+    executeMouseEvent(I, 'click', selector, offset);
+};

functional-tests/tests/draw.js

@@ -1,4 +1,5 @@
 const {
+    SELECTOR_TEXT_LAYER,
     SELECTOR_DISABLED,
     SELECTOR_ANNOTATIONS_LOADED,
     SELECTOR_ANNNOTATION_MODE_BACKGROUND,
@@ -10,10 +11,11 @@ const {
     SELECTOR_ANNOTATION_LAYER_DRAW_IN_PROGRESS,
     SELECTOR_ANNOTATION_DRAWING_DIALOG,
     SELECTOR_ADD_DRAWING_BTN,
+    SELECTOR_ANNOTATION_DRAWING_LABEL,
     SELECTOR_DELETE_DRAWING_BTN
 } = require('../helpers/constants');
 
-const { draw } = require('../helpers/mouseEvents');
+const { draw, clickAtLocation } = require('../helpers/mouseEvents');
 
 Feature('Draw Annotation Sanity');
 
@@ -48,9 +50,9 @@ Scenario('Cancel a new drawing annotation @desktop', (I) => {
 
     I.say('Enter draw annotation mode');
     I.click(SELECTOR_ANNOTATION_BUTTON_DRAW);
-    I.click('.textLayer');
+    I.click(SELECTOR_TEXT_LAYER);
 
-    draw(I, '.textLayer');
+    draw(I, SELECTOR_TEXT_LAYER);
     I.waitForVisible(SELECTOR_ANNOTATION_LAYER_DRAW_IN_PROGRESS);
     I.waitForVisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
 
@@ -63,23 +65,58 @@ Scenario('Cancel a new drawing annotation @desktop', (I) => {
     I.waitForInvisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
 });
 
-Scenario('Create a drawing annotation @desktop', (I) => {
+Scenario('Create/Delete a drawing annotation w/ drawing dialog @desktop', (I) => {
     I.waitForVisible(SELECTOR_ANNOTATIONS_LOADED);
     I.waitForVisible(SELECTOR_ANNOTATION_BUTTON_DRAW);
 
     I.say('Enter draw annotation mode');
     I.click(SELECTOR_ANNOTATION_BUTTON_DRAW);
-    I.click('.textLayer');
+    I.click(SELECTOR_TEXT_LAYER);
 
-    draw(I, '.textLayer');
+    draw(I, SELECTOR_TEXT_LAYER, 100);
     I.waitForVisible(SELECTOR_ANNOTATION_LAYER_DRAW_IN_PROGRESS);
     I.waitForVisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
 
-    I.say('Undo/redo buttons should be disabled');
+    I.say('Undo/redo buttons should be appropriately disabled');
     I.waitForEnabled(SELECTOR_ANNOTATION_BUTTON_DRAW_UNDO);
     I.waitForVisible(`${SELECTOR_ANNOTATION_BUTTON_DRAW_REDO}${SELECTOR_DISABLED}`);
+    I.click(SELECTOR_ANNOTATION_BUTTON_DRAW_UNDO);
+    I.waitForVisible(`${SELECTOR_ANNOTATION_BUTTON_DRAW_UNDO}${SELECTOR_DISABLED}`);
+    I.waitForEnabled(SELECTOR_ANNOTATION_BUTTON_DRAW_REDO);
+    I.click(SELECTOR_ANNOTATION_BUTTON_DRAW_REDO);
 
     I.say('Save drawing');
     I.click(SELECTOR_ADD_DRAWING_BTN);
     I.waitForInvisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
+    I.click(SELECTOR_ANNOTATION_BUTTON_DRAW_POST);
+
+    I.say('Select drawing')
+    clickAtLocation(I, SELECTOR_TEXT_LAYER, 300);
+    I.scrollTo(SELECTOR_ANNOTATION_DRAWING_DIALOG);
+    I.waitForVisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
+
+    I.say('Drawing should have a boundary and dialog should appear');
+    I.waitForText('Kanye West drew', 9, SELECTOR_ANNOTATION_DRAWING_LABEL);
+    I.waitForEnabled(SELECTOR_DELETE_DRAWING_BTN);
+
+    I.say('Delete drawing');
+    I.click(SELECTOR_DELETE_DRAWING_BTN);
+    I.waitForInvisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
+});
+
+Scenario('Create a drawing annotation by exiting mode @desktop', (I) => {
+    I.waitForVisible(SELECTOR_ANNOTATIONS_LOADED);
+    I.waitForVisible(SELECTOR_ANNOTATION_BUTTON_DRAW);
+
+    I.say('Enter draw annotation mode');
+    I.click(SELECTOR_ANNOTATION_BUTTON_DRAW);
+    I.click(SELECTOR_TEXT_LAYER);
+
+    draw(I, SELECTOR_TEXT_LAYER, 50);
+    I.waitForVisible(SELECTOR_ANNOTATION_LAYER_DRAW_IN_PROGRESS);
+    I.waitForVisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
+
+    I.say('Save drawing');
+    I.click(SELECTOR_ANNOTATION_BUTTON_DRAW_POST);
+    I.waitForInvisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
 });

functional-tests/tests/plain_highlight.js

@@ -1,4 +1,5 @@
 const {
+    SELECTOR_TEXT_LAYER,
     SELECTOR_ANNOTATIONS_LOADED,
     SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG,
     SELECTOR_ANNOTATION_DIALOG,
@@ -18,7 +19,7 @@ Scenario('Create a new plain highlight annotation @desktop', (I) => {
     I.waitForVisible(SELECTOR_ANNOTATIONS_LOADED);
 
     I.say('Highlight dialog should appear after selecting text');
-    selectText(I, '.textLayer');
+    selectText(I, SELECTOR_TEXT_LAYER);
     I.waitForVisible(SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG);
 
     I.say('Highlight selected text');
@@ -34,7 +35,7 @@ Scenario('Delete the plain highlight annotation @desktop', (I) => {
     I.waitForVisible(SELECTOR_ANNOTATIONS_LOADED);
 
     I.say('Highlight dialog should appear on click');
-    I.click('.textLayer div');
+    I.click(`${SELECTOR_TEXT_LAYER} div`);
     I.waitForVisible(SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG);
 
     I.say('Delete the highlight annotation');