New: Add basic UI tests for point & highlight comment annotations (#182)

- Create/Cancel/Reply/Delete a highlight comment annotation
- Create/Cancel/Reply/Delete a point annotation
- Enter/Exit point annotation mode
-  Move common validation/actions into helper methods
- Combine multiple scenarios to speed up functional tests

Author: pramodsum

functional-tests/helpers/actions.js

@@ -0,0 +1,43 @@
+/* eslint-disable prefer-arrow-callback, no-var, func-names */
+const {
+    SELECTOR_ANNOTATION_DIALOG,
+    SELECTOR_ANNOTATION_BUTTON_POST,
+    SELECTOR_ANNOTATION_BUTTON_CANCEL,
+    SELECTOR_ANNOTATION_COMMENT,
+    SELECTOR_DELETE_COMMENT_BTN,
+    SELECTOR_REPLY_TEXTAREA,
+    SELECTOR_REPLY_CONTAINER
+} = require('../helpers/constants');
+const { validateReply, validateDeleteConfirmation } = require('./validation');
+
+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}`);
+    validateReply(I, SELECTOR_ANNOTATION_DIALOG);
+    I.waitNumberOfVisibleElements(SELECTOR_ANNOTATION_COMMENT, 2);
+
+    I.say('Cancel a reply to a highlight comment annotation');
+    I.fillField(SELECTOR_REPLY_TEXTAREA, 'Sample canceled reply');
+    I.click(`${SELECTOR_REPLY_CONTAINER} ${SELECTOR_ANNOTATION_BUTTON_CANCEL}`);
+    I.waitNumberOfVisibleElements(SELECTOR_ANNOTATION_COMMENT, 2);
+}
+
+function deleteAnnotation(I, annotationCount) {
+    I.waitNumberOfVisibleElements(SELECTOR_ANNOTATION_COMMENT, annotationCount);
+
+    I.say('Delete the annotation');
+    I.click(SELECTOR_DELETE_COMMENT_BTN);
+    validateDeleteConfirmation(I);
+
+    I.say('Annotation should be deleted');
+    if (annotationCount > 1) {
+        I.waitNumberOfVisibleElements(SELECTOR_ANNOTATION_COMMENT, annotationCount - 1);
+        I.waitForVisible(SELECTOR_ANNOTATION_DIALOG);
+    } else {
+        I.waitForDetached(SELECTOR_ANNOTATION_DIALOG, 1);
+    }
+}
+
+exports.replyToThread = replyToThread;
+exports.deleteAnnotation = deleteAnnotation;

functional-tests/helpers/constants.js

@@ -1,5 +1,3 @@
-exports.SELECTOR_TEXT_LAYER = '.textLayer';
-
 // Preview CSS constants
 const CLASS_ACTIVE = 'bp-is-active';
 exports.SELECTOR_ACTIVE = `.${CLASS_ACTIVE}`;
@@ -32,6 +30,8 @@ const CLASS_BOX_PREVIEW = 'bp';
 exports.SELECTOR_BOX_PREVIEW = `.${CLASS_BOX_PREVIEW}`;
 const CLASS_PREVIEW_PRESENTATION = 'bp-doc-presentation';
 exports.SELECTOR_PREVIEW_PRESENTATION = `.${CLASS_PREVIEW_PRESENTATION}`;
+const CLASS_TEXT_LAYER = 'textLayer';
+exports.SELECTOR_TEXT_LAYER = `.${CLASS_TEXT_LAYER}`;
 
 // Annotation CSS constants
 const CLASS_ANNOTATED_ELEMENT = 'annotated-element';
@@ -68,11 +68,18 @@ const CLASS_ANNOTATION_BUTTON_POST = 'post-annotation-btn';
 exports.SELECTOR_ANNOTATION_BUTTON_POST = `.${CLASS_ANNOTATION_BUTTON_POST}`;
 const CLASS_DELETE_COMMENT_BTN = 'delete-comment-btn';
 exports.SELECTOR_DELETE_COMMENT_BTN = `.${CLASS_DELETE_COMMENT_BTN}`;
+
 const CLASS_DELETE_CONFIRM_MESSAGE = 'delete-confirmation-message';
 exports.SELECTOR_DELETE_CONFIRM_MESSAGE = `.${CLASS_DELETE_CONFIRM_MESSAGE}`;
+const CLASS_CANCEL_DELETE_BTN = 'cancel-delete-btn';
+exports.SELECTOR_CANCEL_DELETE_BTN = `.${CLASS_CANCEL_DELETE_BTN}`;
+const CLASS_CONFIRM_DELETE_BTN = 'confirm-delete-btn';
+exports.SELECTOR_CONFIRM_DELETE_BTN = `.${CLASS_CONFIRM_DELETE_BTN}`;
 
 const CLASS_ANNOTATION_CONTAINER = 'annotation-container';
 exports.SELECTOR_ANNOTATION_CONTAINER = `.${CLASS_ANNOTATION_CONTAINER}`;
+const CLASS_ANNOTATION_COMMENT = 'annotation-comment';
+exports.SELECTOR_ANNOTATION_COMMENT = `.${CLASS_ANNOTATION_COMMENT}`;
 const CLASS_ANNOTATION_COMMENT_TEXT = 'ba-annotation-comment-text';
 exports.SELECTOR_ANNOTATION_COMMENT_TEXT = `.${CLASS_ANNOTATION_COMMENT_TEXT}`;
 const CLASS_PROFILE_CONTAINER = 'profile-container';
@@ -84,6 +91,11 @@ exports.SELECTOR_USER_NAME = `.${CLASS_USER_NAME}`;
 const CLASS_COMMENT_DATE = 'comment-date';
 exports.SELECTOR_COMMENT_DATE = `.${CLASS_COMMENT_DATE}`;
 
+const CLASS_REPLY_CONTAINER = 'reply-container';
+exports.SELECTOR_REPLY_CONTAINER = `.${CLASS_REPLY_CONTAINER}`;
+const CLASS_REPLY_TEXTAREA = 'reply-textarea';
+exports.SELECTOR_REPLY_TEXTAREA = `.${CLASS_REPLY_TEXTAREA}`;
+
 const CLASS_CREATE_COMMENT = 'ba-create-comment';
 exports.SELECTOR_CREATE_COMMENT = `.${CLASS_CREATE_COMMENT}`;
 

functional-tests/helpers/validation.js

@@ -0,0 +1,89 @@
+/* eslint-disable prefer-arrow-callback, no-var, func-names */
+const {
+    SELECTOR_ANNOTATION_DIALOG,
+    SELECTOR_ACTIVE,
+    SELECTOR_ANNOTATION_BUTTON_POST,
+    SELECTOR_INVALID_INPUT,
+    SELECTOR_ANNOTATION_BUTTON_CANCEL,
+    SELECTOR_USER_NAME,
+    SELECTOR_ANNOTATION_CONTAINER,
+    SELECTOR_ANNOTATION_COMMENT,
+    SELECTOR_DELETE_COMMENT_BTN,
+    SELECTOR_PROFILE_IMG_CONTAINER,
+    SELECTOR_REPLY_TEXTAREA,
+    SELECTOR_DELETE_CONFIRM_MESSAGE,
+    SELECTOR_CONFIRM_DELETE_BTN,
+    SELECTOR_CANCEL_DELETE_BTN,
+    SELECTOR_REPLY_CONTAINER
+} = require('../helpers/constants');
+const { expect } = require('chai');
+
+async function validateIconColor(I, selector, color) {
+    I.waitForElement(selector);
+    const clr = await I.grabCssPropertyFrom(`${selector} svg`, 'fill');
+    expect(clr).to.equal(color);
+}
+
+function* validateTextarea(I, containerSel, textareaSel) {
+    I.say(`Validate ${containerSel} ${textareaSel}`);
+    I.waitForVisible(`${containerSel} ${textareaSel}${SELECTOR_ACTIVE}`);
+    I.waitForVisible(`${containerSel} ${SELECTOR_ANNOTATION_BUTTON_CANCEL}`);
+    I.waitForVisible(`${containerSel} ${SELECTOR_ANNOTATION_BUTTON_POST}`);
+    expect(yield I.grabValueFrom(`${containerSel} ${textareaSel}`)).to.equal('');
+
+    const message = textareaSel === SELECTOR_REPLY_CONTAINER ? 'Post a reply...' : 'Add a comment here...';
+    expect(yield I.grabAttributeFrom(`${containerSel} ${textareaSel}`, 'placeholder')).to.equal(message);
+
+    I.click(`${containerSel} ${SELECTOR_ANNOTATION_BUTTON_POST}`);
+    I.waitForVisible(`${containerSel} ${textareaSel}${SELECTOR_INVALID_INPUT}`);
+    I.waitForVisible(SELECTOR_ANNOTATION_DIALOG);
+}
+
+function validateAnnotation(I) {
+    I.say('Dialog should contain new annotation');
+    I.waitForVisible(SELECTOR_ANNOTATION_DIALOG);
+    I.see('Posting...', SELECTOR_USER_NAME);
+    I.waitForVisible(SELECTOR_ANNOTATION_CONTAINER);
+    I.waitNumberOfVisibleElements(SELECTOR_ANNOTATION_COMMENT, 1);
+    I.waitForEnabled(SELECTOR_DELETE_COMMENT_BTN);
+    I.waitForVisible(SELECTOR_PROFILE_IMG_CONTAINER);
+    I.waitForText('Kanye West', 10, SELECTOR_USER_NAME);
+
+    validateTextarea(I, SELECTOR_REPLY_CONTAINER, SELECTOR_REPLY_TEXTAREA);
+}
+
+function validateReply(I) {
+    I.say('Reply should be added to dialog');
+    I.waitForVisible(SELECTOR_ANNOTATION_DIALOG);
+    I.waitForVisible(SELECTOR_ANNOTATION_CONTAINER);
+    I.waitNumberOfVisibleElements(SELECTOR_ANNOTATION_COMMENT, 2);
+    I.waitForEnabled(SELECTOR_DELETE_COMMENT_BTN);
+    I.waitForVisible(SELECTOR_PROFILE_IMG_CONTAINER);
+    I.waitForText('Kanye West', 10, SELECTOR_USER_NAME);
+
+    validateTextarea(I, SELECTOR_REPLY_CONTAINER, SELECTOR_REPLY_TEXTAREA);
+}
+
+function validateDeleteConfirmation(I) {
+    I.say('Validate delete confirmation');
+    I.waitForText('Delete this annotation?', 10, SELECTOR_DELETE_CONFIRM_MESSAGE);
+    I.waitForVisible(SELECTOR_CONFIRM_DELETE_BTN);
+    I.waitForVisible(SELECTOR_CANCEL_DELETE_BTN);
+
+    // Cancel annotation delete
+    I.click(SELECTOR_CANCEL_DELETE_BTN);
+    I.waitForInvisible(SELECTOR_DELETE_CONFIRM_MESSAGE);
+
+    // Delete the annotation
+    I.click(SELECTOR_DELETE_COMMENT_BTN);
+
+    // Delete confirmation should appear
+    I.waitForVisible(SELECTOR_CONFIRM_DELETE_BTN);
+    I.click(SELECTOR_CONFIRM_DELETE_BTN);
+}
+
+exports.validateIconColor = validateIconColor;
+exports.validateAnnotation = validateAnnotation;
+exports.validateDeleteConfirmation = validateDeleteConfirmation;
+exports.validateReply = validateReply;
+exports.validateTextarea = validateTextarea;

functional-tests/tests/draw.js

@@ -1,3 +1,4 @@
+/* eslint-disable prefer-arrow-callback, no-var, func-names */
 const {
     SELECTOR_TEXT_LAYER,
     SELECTOR_DISABLED,
@@ -19,11 +20,14 @@ const { draw, clickAtLocation } = require('../helpers/mouseEvents');
 
 Feature('Draw Annotation Sanity');
 
-Before((I) => {
+Before(function(I) {
     I.amOnPage('/');
 });
 
-Scenario('Can enter/exit drawing mode properly @desktop', (I) => {
+Scenario('Create/Delete drawing @desktop', function(I) {
+    /*
+     * Can enter/exit drawing mode properly @desktop
+     */
     I.waitForVisible(SELECTOR_ANNOTATIONS_LOADED);
     I.waitForVisible(SELECTOR_ANNOTATION_BUTTON_DRAW);
 
@@ -42,12 +46,10 @@ Scenario('Can enter/exit drawing mode properly @desktop', (I) => {
     I.click(SELECTOR_ANNOTATION_BUTTON_DRAW_CANCEL);
     I.dontSeeElement(SELECTOR_ANNNOTATION_MODE_BACKGROUND);
     I.waitForVisible(SELECTOR_ANNOTATION_BUTTON_DRAW);
-});
-
-Scenario('Cancel a new drawing annotation @desktop', (I) => {
-    I.waitForVisible(SELECTOR_ANNOTATIONS_LOADED);
-    I.waitForVisible(SELECTOR_ANNOTATION_BUTTON_DRAW);
 
+    /*
+     * Cancel a new drawing annotation
+     */
     I.say('Enter draw annotation mode');
     I.click(SELECTOR_ANNOTATION_BUTTON_DRAW);
     I.click(SELECTOR_TEXT_LAYER);
@@ -63,16 +65,10 @@ Scenario('Cancel a new drawing annotation @desktop', (I) => {
     I.say('Cancel drawing');
     I.click(SELECTOR_DELETE_DRAWING_BTN);
     I.waitForInvisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
-});
-
-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(SELECTOR_TEXT_LAYER);
 
+    /*
+     * Create/Delete a drawing annotation w/ drawing dialog
+     */
     draw(I, SELECTOR_TEXT_LAYER, 100);
     I.waitForVisible(SELECTOR_ANNOTATION_LAYER_DRAW_IN_PROGRESS);
     I.waitForVisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
@@ -104,7 +100,7 @@ Scenario('Create/Delete a drawing annotation w/ drawing dialog @desktop', (I) =>
     I.waitForInvisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
 });
 
-Scenario('Create a drawing annotation by exiting mode @desktop', (I) => {
+Scenario('Create/Delete a drawing by exiting mode @desktop', function(I) {
     I.waitForVisible(SELECTOR_ANNOTATIONS_LOADED);
     I.waitForVisible(SELECTOR_ANNOTATION_BUTTON_DRAW);
 

functional-tests/tests/highlight_comment.js

@@ -0,0 +1,82 @@
+/* eslint-disable prefer-arrow-callback, no-var, func-names */
+const {
+    SELECTOR_TEXT_LAYER,
+    SELECTOR_ANNOTATIONS_LOADED,
+    SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG,
+    SELECTOR_ADD_HIGHLIGHT_BTN,
+    SELECTOR_ADD_HIGHLIGHT_COMMENT_BTN,
+    SELECTOR_CREATE_DIALOG,
+    SELECTOR_CREATE_COMMENT,
+    SELECTOR_ANNOTATION_TEXTAREA,
+    SELECTOR_ANNOTATION_BUTTON_POST,
+    SELECTOR_ANNOTATION_BUTTON_CANCEL,
+    SELECTOR_ANNOTATION_DIALOG,
+    SELECTOR_DELETE_COMMENT_BTN,
+    SELECTOR_ANNOTATION_COMMENT
+} = require('../helpers/constants');
+
+const { selectText } = require('../helpers/mouseEvents');
+const { validateTextarea, validateAnnotation } = require('../helpers/validation');
+const { replyToThread, deleteAnnotation } = require('../helpers/actions');
+
+Feature('Highlight Comment Annotation Sanity');
+
+Before(function(I) {
+    I.amOnPage('/');
+});
+
+Scenario('Create/Reply/Delete a new highlight comment annotation @desktop', function(I) {
+    I.waitForVisible(SELECTOR_ANNOTATIONS_LOADED);
+
+    I.say('Highlight dialog should appear after selecting text');
+    selectText(I, SELECTOR_TEXT_LAYER);
+    I.waitForVisible(SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG);
+    I.waitForVisible(SELECTOR_ADD_HIGHLIGHT_BTN);
+    I.waitForVisible(SELECTOR_ADD_HIGHLIGHT_COMMENT_BTN);
+
+    I.say('Create highlight comment annotation');
+    I.click(SELECTOR_ADD_HIGHLIGHT_COMMENT_BTN);
+    I.waitForVisible(SELECTOR_CREATE_DIALOG);
+    validateTextarea(I, SELECTOR_CREATE_COMMENT, SELECTOR_ANNOTATION_TEXTAREA);
+
+    I.say('Cancel highlight comment annotation');
+    I.click(SELECTOR_ANNOTATION_BUTTON_CANCEL);
+    I.waitForInvisible(SELECTOR_CREATE_COMMENT, 1);
+    I.waitForVisible(SELECTOR_ADD_HIGHLIGHT_BTN);
+    I.waitForVisible(SELECTOR_ADD_HIGHLIGHT_COMMENT_BTN);
+
+    /*
+     * Create/reply to a new highlight comment annotation
+     */
+    I.say('Highlight dialog should appear after selecting text');
+    selectText(I, SELECTOR_TEXT_LAYER);
+    I.waitForVisible(SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG);
+    I.waitForVisible(SELECTOR_ADD_HIGHLIGHT_BTN);
+    I.waitForVisible(SELECTOR_ADD_HIGHLIGHT_COMMENT_BTN);
+
+    I.say('Create highlight comment annotation');
+    I.click(SELECTOR_ADD_HIGHLIGHT_COMMENT_BTN);
+    I.waitForVisible(SELECTOR_CREATE_DIALOG);
+    validateTextarea(I, SELECTOR_CREATE_COMMENT, SELECTOR_ANNOTATION_TEXTAREA);
+
+    I.say('Post highlight comment annotation');
+    I.fillField(SELECTOR_ANNOTATION_TEXTAREA, 'Sample comment');
+    I.click(SELECTOR_ANNOTATION_BUTTON_POST);
+    validateAnnotation(I);
+    I.waitNumberOfVisibleElements(SELECTOR_ANNOTATION_COMMENT, 1);
+
+    replyToThread(I);
+
+    /*
+     * Delete the highlight comment annotation and reply
+     */
+    I.waitForVisible(SELECTOR_ANNOTATIONS_LOADED);
+
+    I.say('Highlight dialog should appear on click');
+    I.click(`${SELECTOR_TEXT_LAYER} div`);
+    I.waitForVisible(SELECTOR_ANNOTATION_DIALOG);
+    I.waitForEnabled(SELECTOR_DELETE_COMMENT_BTN);
+
+    deleteAnnotation(I, 2);
+    deleteAnnotation(I, 1);
+});

functional-tests/tests/plain_highlight.js

@@ -1,4 +1,6 @@
+/* eslint-disable prefer-arrow-callback, no-var, func-names */
 const {
+    SELECTOR_ACTIVE,
     SELECTOR_TEXT_LAYER,
     SELECTOR_ANNOTATIONS_LOADED,
     SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG,
@@ -8,16 +10,20 @@ const {
 } = require('../helpers/constants');
 
 const { selectText } = require('../helpers/mouseEvents');
+const { validateIconColor } = require('../helpers/validation');
 
 Feature('Plain Highlight Annotation Sanity');
 
-Before((I) => {
+Before(function(I) {
     I.amOnPage('/');
 });
 
-Scenario('Create a new plain highlight annotation @desktop', (I) => {
+Scenario('Create/Delete a new plain highlight annotation @desktop', function(I) {
     I.waitForVisible(SELECTOR_ANNOTATIONS_LOADED);
 
+    /*
+     * Create plain highlight annotation
+     */
     I.say('Highlight dialog should appear after selecting text');
     selectText(I, SELECTOR_TEXT_LAYER);
     I.waitForVisible(SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG);
@@ -29,11 +35,12 @@ Scenario('Create a new plain highlight annotation @desktop', (I) => {
     I.waitForVisible(SELECTOR_ANNOTATION_DIALOG);
     I.waitForText('Kanye West highlighted', 9, SELECTOR_HIGHLIGHT_LABEL);
     I.waitForEnabled(SELECTOR_ADD_HIGHLIGHT_BTN);
-});
 
-Scenario('Delete the plain highlight annotation @desktop', (I) => {
-    I.waitForVisible(SELECTOR_ANNOTATIONS_LOADED);
+    validateIconColor(I, `${SELECTOR_ADD_HIGHLIGHT_BTN}${SELECTOR_ACTIVE}`, 'rgb(255, 201, 0)');
 
+    /*
+     * Delete plain highlight annotation
+     */
     I.say('Highlight dialog should appear on click');
     I.click(`${SELECTOR_TEXT_LAYER} div`);
     I.waitForVisible(SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG);