Skip to content

Commit a35853d

Browse files
pramodsumpramodsum
authored
Chore: Add basic drawing annotations test (#169)
1 parent b8b29aa commit a35853d

File tree

5 files changed

+146
-7
lines changed

5 files changed

+146
-7
lines changed

‎functional-tests/helpers/constants.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ const CLASS_BOX_PREVIEW_BASE_HEADER = 'bp-base-header';
2121
exports.SELECTOR_BOX_PREVIEW_BASE_HEADER = `.${CLASS_BOX_PREVIEW_BASE_HEADER}`;
2222
const CLASS_ANNOTATION_BUTTON_POINT = 'bp-btn-annotate-point';
2323
exports.SELECTOR_ANNOTATION_BUTTON_POINT = `.${CLASS_ANNOTATION_BUTTON_POINT}`;
24+
const CLASS_ANNOTATION_BUTTON_DRAW = 'bp-btn-annotate-draw';
25+
exports.SELECTOR_ANNOTATION_BUTTON_DRAW = `.${CLASS_ANNOTATION_BUTTON_DRAW}`;
2426
const CLASS_ANNOTATION_BUTTON_DRAW_ENTER = 'bp-btn-annotate-draw-enter';
2527
exports.SELECTOR_ANNOTATION_BUTTON_DRAW_ENTER = `.${CLASS_ANNOTATION_BUTTON_DRAW_ENTER}`;
2628

@@ -159,8 +161,6 @@ exports.SELECTOR_ANNOTATION_LAYER_DRAW_IN_PROGRESS = `.${CLASS_ANNOTATION_LAYER_
159161
// Drawing CSS constants
160162
const CLASS_ANNOTATION_DRAW = 'ba-annotation-draw';
161163
exports.SELECTOR_ANNOTATION_DRAW = `.${CLASS_ANNOTATION_DRAW}`;
162-
const CLASS_ANNOTATION_BUTTON_DRAW = 'ba-btn-annotate-draw';
163-
exports.SELECTOR_ANNOTATION_BUTTON_DRAW = `.${CLASS_ANNOTATION_BUTTON_DRAW}`;
164164
const CLASS_ANNOTATION_BUTTON_DRAW_UNDO = 'ba-btn-annotate-draw-undo';
165165
exports.SELECTOR_ANNOTATION_BUTTON_DRAW_UNDO = `.${CLASS_ANNOTATION_BUTTON_DRAW_UNDO}`;
166166
const CLASS_ANNOTATION_BUTTON_DRAW_REDO = 'ba-btn-annotate-draw-redo';

‎functional-tests/helpers/mouseEvents.js‎

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
/* eslint-disable prefer-arrow-callback, no-var, func-names */
2+
13
/**
24
* Selects text on the document
35
*
@@ -51,4 +53,53 @@ function selectText(I, selector) {
5153
);
5254
}
5355

54-
exports.selectText = selectText;
56+
/**
57+
* Draw on the document
58+
*
59+
* @param {Object} I - the codeceptjs I
60+
* @param {string} selector - the selector to use
61+
*
62+
* @return {void}
63+
*/
64+
function draw(I, selector) {
65+
I.waitForElement(selector);
66+
67+
I.executeScript(
68+
function (sel) {
69+
const preview = document.querySelector('.bp-doc');
70+
const selectionEl = document.querySelector(sel);
71+
const start = selectionEl.firstElementChild;
72+
const end = selectionEl.lastElementChild;
73+
74+
/**
75+
* Cross browser event creation
76+
* @param {string} eventName the event name
77+
* @param {HTMLElement} el - the DOM element to use
78+
* @return {Event} the event
79+
*/
80+
function createNewEvent(eventName, el) {
81+
const x = el.offsetLeft + 2;
82+
const y = el.offsetTop + 2;
83+
84+
let event;
85+
if (typeof MouseEvent === 'function') {
86+
event = new MouseEvent(eventName, {
87+
bubbles: true,
88+
clientX: x,
89+
clientY: y
90+
});
91+
}
92+
93+
return event;
94+
}
95+
96+
preview.dispatchEvent(createNewEvent('mousedown', start));
97+
preview.dispatchEvent(createNewEvent('mousemove', end));
98+
preview.dispatchEvent(createNewEvent('mouseup', end));
99+
},
100+
selector
101+
);
102+
}
103+
104+
exports.selectText = selectText;
105+
exports.draw = draw;

‎functional-tests/tests/draw.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
const {
2+
SELECTOR_DISABLED,
3+
SELECTOR_ANNOTATIONS_LOADED,
4+
SELECTOR_ANNNOTATION_MODE_BACKGROUND,
5+
SELECTOR_ANNOTATION_BUTTON_DRAW,
6+
SELECTOR_ANNOTATION_BUTTON_DRAW_UNDO,
7+
SELECTOR_ANNOTATION_BUTTON_DRAW_REDO,
8+
SELECTOR_ANNOTATION_BUTTON_DRAW_POST,
9+
SELECTOR_ANNOTATION_BUTTON_DRAW_CANCEL,
10+
SELECTOR_ANNOTATION_LAYER_DRAW_IN_PROGRESS,
11+
SELECTOR_ANNOTATION_DRAWING_DIALOG,
12+
SELECTOR_ADD_DRAWING_BTN,
13+
SELECTOR_DELETE_DRAWING_BTN
14+
} = require('../helpers/constants');
15+
16+
const { draw } = require('../helpers/mouseEvents');
17+
18+
Feature('Draw Annotation Sanity');
19+
20+
Before((I) => {
21+
I.amOnPage('/');
22+
});
23+
24+
Scenario('Can enter/exit drawing mode properly @desktop @enabled', (I) => {
25+
I.waitForVisible(SELECTOR_ANNOTATIONS_LOADED);
26+
I.waitForVisible(SELECTOR_ANNOTATION_BUTTON_DRAW);
27+
28+
I.say('Enter draw annotation mode');
29+
I.click(SELECTOR_ANNOTATION_BUTTON_DRAW);
30+
I.waitForVisible('.bp-notification');
31+
I.waitForVisible(SELECTOR_ANNNOTATION_MODE_BACKGROUND);
32+
I.waitForVisible(SELECTOR_ANNOTATION_BUTTON_DRAW_POST);
33+
I.waitForVisible(SELECTOR_ANNOTATION_BUTTON_DRAW_CANCEL);
34+
35+
I.say('Undo/redo buttons should be disabled');
36+
I.waitForVisible(`${SELECTOR_ANNOTATION_BUTTON_DRAW_UNDO}${SELECTOR_DISABLED}`);
37+
I.waitForVisible(`${SELECTOR_ANNOTATION_BUTTON_DRAW_REDO}${SELECTOR_DISABLED}`);
38+
39+
I.say('Exit draw annotations mode');
40+
I.click(SELECTOR_ANNOTATION_BUTTON_DRAW_CANCEL);
41+
I.dontSeeElement(SELECTOR_ANNNOTATION_MODE_BACKGROUND);
42+
I.waitForVisible(SELECTOR_ANNOTATION_BUTTON_DRAW);
43+
});
44+
45+
Scenario('Cancel a new drawing annotation @desktop @enabled', (I) => {
46+
I.waitForVisible(SELECTOR_ANNOTATIONS_LOADED);
47+
I.waitForVisible(SELECTOR_ANNOTATION_BUTTON_DRAW);
48+
49+
I.say('Enter draw annotation mode');
50+
I.click(SELECTOR_ANNOTATION_BUTTON_DRAW);
51+
I.click('.textLayer');
52+
53+
draw(I, '.textLayer');
54+
I.waitForVisible(SELECTOR_ANNOTATION_LAYER_DRAW_IN_PROGRESS);
55+
I.waitForVisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
56+
57+
I.say('Undo/redo buttons should be disabled');
58+
I.waitForEnabled(SELECTOR_ANNOTATION_BUTTON_DRAW_UNDO);
59+
I.waitForVisible(`${SELECTOR_ANNOTATION_BUTTON_DRAW_REDO}${SELECTOR_DISABLED}`);
60+
61+
I.say('Cancel drawing');
62+
I.click(SELECTOR_DELETE_DRAWING_BTN);
63+
I.waitForInvisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
64+
});
65+
66+
Scenario('Create a drawing annotation @desktop @enabled', (I) => {
67+
I.waitForVisible(SELECTOR_ANNOTATIONS_LOADED);
68+
I.waitForVisible(SELECTOR_ANNOTATION_BUTTON_DRAW);
69+
70+
I.say('Enter draw annotation mode');
71+
I.click(SELECTOR_ANNOTATION_BUTTON_DRAW);
72+
I.click('.textLayer');
73+
74+
draw(I, '.textLayer');
75+
I.waitForVisible(SELECTOR_ANNOTATION_LAYER_DRAW_IN_PROGRESS);
76+
I.waitForVisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
77+
78+
I.say('Undo/redo buttons should be disabled');
79+
I.waitForEnabled(SELECTOR_ANNOTATION_BUTTON_DRAW_UNDO);
80+
I.waitForVisible(`${SELECTOR_ANNOTATION_BUTTON_DRAW_REDO}${SELECTOR_DISABLED}`);
81+
82+
I.say('Save drawing');
83+
I.click(SELECTOR_ADD_DRAWING_BTN);
84+
I.waitForInvisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
85+
});

‎src/constants.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ export const CLASS_BOX_PREVIEW_BASE_HEADER = 'bp-base-header';
2323
export const SELECTOR_BOX_PREVIEW_BASE_HEADER = `.${CLASS_BOX_PREVIEW_BASE_HEADER}`;
2424
export const CLASS_ANNOTATION_BUTTON_POINT = 'bp-btn-annotate-point';
2525
export const SELECTOR_ANNOTATION_BUTTON_POINT = `.${CLASS_ANNOTATION_BUTTON_POINT}`;
26+
export const CLASS_ANNOTATION_BUTTON_DRAW = 'bp-btn-annotate-draw';
27+
export const SELECTOR_ANNOTATION_BUTTON_DRAW = `.${CLASS_ANNOTATION_BUTTON_DRAW}`;
2628
export const CLASS_ANNOTATION_BUTTON_DRAW_ENTER = 'bp-btn-annotate-draw-enter';
2729
export const SELECTOR_ANNOTATION_BUTTON_DRAW_ENTER = `.${CLASS_ANNOTATION_BUTTON_DRAW_ENTER}`;
2830

@@ -161,8 +163,6 @@ export const SELECTOR_ANNOTATION_LAYER_DRAW_IN_PROGRESS = `.${CLASS_ANNOTATION_L
161163
// Drawing CSS constants
162164
export const CLASS_ANNOTATION_DRAW = 'ba-annotation-draw';
163165
export const SELECTOR_ANNOTATION_DRAW = `.${CLASS_ANNOTATION_DRAW}`;
164-
export const CLASS_ANNOTATION_BUTTON_DRAW = 'ba-btn-annotate-draw';
165-
export const SELECTOR_ANNOTATION_BUTTON_DRAW = `.${CLASS_ANNOTATION_BUTTON_DRAW}`;
166166
export const CLASS_ANNOTATION_BUTTON_DRAW_UNDO = 'ba-btn-annotate-draw-undo';
167167
export const SELECTOR_ANNOTATION_BUTTON_DRAW_UNDO = `.${CLASS_ANNOTATION_BUTTON_DRAW_UNDO}`;
168168
export const CLASS_ANNOTATION_BUTTON_DRAW_REDO = 'ba-btn-annotate-draw-redo';

‎src/doc/DocAnnotator.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,10 @@ class DocAnnotator extends Annotator {
158158
// If click isn't on a page, ignore
159159
const eventTarget = clientEvent.target;
160160
const pageInfo = util.getPageInfo(eventTarget);
161-
if (!pageInfo.pageEl) {
161+
const pageEl = pageInfo.pageEl
162+
? pageInfo.pageEl
163+
: this.annotatedElement.querySelector(`[data-page-number="${pageInfo.page}"]`);
164+
if (!pageEl) {
162165
return location;
163166
}
164167

@@ -174,7 +177,7 @@ class DocAnnotator extends Annotator {
174177
}
175178

176179
// Store coordinates at 100% scale in PDF space in PDF units
177-
const pageDimensions = pageInfo.pageEl.getBoundingClientRect();
180+
const pageDimensions = pageEl.getBoundingClientRect();
178181
const pageWidth = pageDimensions.width;
179182
const pageHeight = pageDimensions.height - PAGE_PADDING_TOP - PAGE_PADDING_BOTTOM;
180183
const browserCoordinates = [

0 commit comments

Comments
 (0)