test(cypress): Add E2E tests for creating highlight annotations on doc (

#618)

* test(cypress): Add E2E tests for creating highlight annotations on doc

* test(cypress): Remove constants

test/index.html

@@ -3,10 +3,10 @@
         <meta name="viewport" content="width=device-width" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
         <link rel="stylesheet" href="./styles.css" />
-        <link rel="stylesheet" href="https://cdn01.boxcdn.net/platform/preview/2.51.0/en-US/preview.css" />
+        <link rel="stylesheet" href="https://cdn01.boxcdn.net/platform/preview/2.53.0/en-US/preview.css" />
         <link rel="stylesheet" href="./annotations.css" />
         <script src="https://cdn01.boxcdn.net/polyfills/core-js/2.5.3/core.min.js"></script>
-        <script src="https://cdn01.boxcdn.net/platform/preview/2.51.0/en-US/preview.js"></script>
+        <script src="https://cdn01.boxcdn.net/platform/preview/2.53.0/en-US/preview.js"></script>
         <script src="./annotations.js"></script>
     </head>
 
@@ -56,7 +56,7 @@
                 }
 
                 /* global BoxAnnotations */
-                var annotations = new BoxAnnotations();
+                var annotations = new BoxAnnotations(null, { features: { highlightText: true } });
 
                 /* global Box */
                 var preview = new Box.Preview();
@@ -66,6 +66,7 @@
                     boxAnnotations: annotations,
                     showAnnotations: true,
                     showAnnotationsControls: true,
+                    showAnnotationsHighlightText: true,
                 });
             }
 

test/integration/Highlight.e2e.test.js

@@ -0,0 +1,30 @@
+// <reference types="Cypress" />
+describe('Highlight', () => {
+    beforeEach(() => {
+        cy.visit('/');
+    });
+
+    it('should create a new highlight on a document', () => {
+        // Show the preview
+        cy.showPreview(Cypress.env('FILE_ID_DOC'));
+
+        // Wait for the empty highlight layer to be present
+        cy.getByTestId('ba-Layer--highlight');
+
+        // Assert that no highlight annotations are present
+        cy.get('.ba-HighlightTarget').should('not.exist');
+
+        // Enter highlight creation mode
+        cy.getByTestId('bp-AnnotationsControls-highlightBtn').click();
+
+        // Add a highlight annotation on the document
+        cy.selectText();
+        cy.submitReply();
+
+        // Assert that at least one highlight annotation is present on the document
+        cy.get('.ba-HighlightTarget');
+
+        // Exit highlight creation mode
+        cy.getByTestId('bp-AnnotationsControls-highlightBtn').click();
+    });
+});

test/integration/Region.e2e.test.js

@@ -13,7 +13,7 @@ describe('Regions', () => {
 
         // Assert that the region creator does not exist and no annotations are present
         cy.getByTestId('ba-RegionCreator').should('not.exist');
-        cy.get('[data-testid^="ba-AnnotationTarget"]').should('not.exist');
+        cy.get('.ba-RegionAnnotation').should('not.exist');
 
         // Enter region creation mode
         cy.getByTestId('bp-AnnotationsControls-regionBtn').click();
@@ -23,19 +23,19 @@ describe('Regions', () => {
         cy.submitReply();
 
         // Assert that at least one annotation is present on the document and is active
-        cy.get('[data-testid^="ba-AnnotationTarget"]').should('have.class', 'is-active');
+        cy.get('.ba-RegionAnnotation').should('have.class', 'is-active');
 
         // Exit region creation mode
         cy.getByTestId('bp-AnnotationsControls-regionBtn').click();
 
         // Assert that annotation target is not active
-        cy.get('[data-testid^="ba-AnnotationTarget"]').should('not.have.class', 'is-active');
+        cy.get('.ba-RegionAnnotation').should('not.have.class', 'is-active');
 
         // Select annotation target
-        cy.get('[data-testid^="ba-AnnotationTarget"]').click();
+        cy.get('.ba-RegionAnnotation').click();
 
         // Assert that annotation target is active
-        cy.get('[data-testid^="ba-AnnotationTarget"]').should('have.class', 'is-active');
+        cy.get('.ba-RegionAnnotation').should('have.class', 'is-active');
     });
 
     it('should create a new region on an image', () => {
@@ -47,7 +47,7 @@ describe('Regions', () => {
 
         // Assert that the region creator does not exist and no annotations are present
         cy.getByTestId('ba-RegionCreator').should('not.exist');
-        cy.get('[data-testid^="ba-AnnotationTarget"]').should('not.exist');
+        cy.get('.ba-RegionAnnotation').should('not.exist');
 
         // Enter region creation mode
         cy.getByTestId('bp-AnnotationsControls-regionBtn').click();
@@ -57,7 +57,7 @@ describe('Regions', () => {
         cy.submitReply();
 
         // Assert that at least one annotation is present on the image and is active
-        cy.get('[data-testid^="ba-AnnotationTarget"]').should('have.class', 'is-active');
+        cy.get('.ba-RegionAnnotation').should('have.class', 'is-active');
     });
 
     it('should hide region button for rotated image', () => {

test/support/commands.js

@@ -28,6 +28,24 @@ Cypress.Commands.add('drawRegion', ({ x = 200, y = 200, width = 100, height = 10
         .trigger('mouseup');
 });
 
+Cypress.Commands.add('selectText', ({ page = 1, block = 1 } = {}) => {
+    cy.get('.textLayer')
+        .eq(Math.max(0, page - 1))
+        .children()
+        .eq(Math.max(0, block - 1))
+        .trigger('mousedown')
+        .then($el => {
+            const el = $el[0];
+            const document = el.ownerDocument;
+            const range = document.createRange();
+            const selection = document.getSelection();
+            range.selectNodeContents(el);
+            selection.removeAllRanges();
+            selection.addRange(range);
+        })
+        .trigger('mouseup');
+});
+
 Cypress.Commands.add('submitReply', (message = 'Automated test annotations') => {
     // Type a message in the reply form and save the new annotation
     cy.getByTestId('ba-ReplyField-editor').type(message);