-
Notifications
You must be signed in to change notification settings - Fork 46
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
Showing
9 changed files
with
359 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.