test(cypress): Add E2E tests for selecting annotations (#549)

* test(cypress): Add E2E tests for selecting annotations

* test(cypress): Address feedbacks

Author: Mingze

test/integration/Region.e2e.test.js

@@ -18,27 +18,24 @@ describe('Regions', () => {
         // Enter region creation mode
         cy.getByTestId('bp-AnnotationsControls-regionBtn').click();
 
-        // Draw a 50x50 region on the first page starting at x50, y50
-        cy.getByTestId('ba-RegionCreator')
-            .first()
-            .trigger('mousedown', {
-                buttons: 1,
-                clientX: 50,
-                clientY: 50,
-            })
-            .trigger('mousemove', {
-                buttons: 1,
-                clientX: 100,
-                clientY: 100,
-            })
-            .trigger('mouseup');
-
-        // Type a message in the reply form and save the new annotation
-        cy.getByTestId('ba-ReplyField-editor').type('This is an automated test annotation.');
-        cy.getByTestId('ba-Popup-submit').click();
-
-        // Assert that at least one annotation is present on the image
-        cy.get('[data-testid^="ba-AnnotationTarget"]');
+        // Add a region annotation on the document
+        cy.drawRegion();
+        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');
+
+        // 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');
+
+        // Select annotation target
+        cy.get('[data-testid^="ba-AnnotationTarget"]').click();
+
+        // Assert that annotation target is active
+        cy.get('[data-testid^="ba-AnnotationTarget"]').should('have.class', 'is-active');
     });
 
     it('should create a new region on an image', () => {
@@ -55,27 +52,12 @@ describe('Regions', () => {
         // Enter region creation mode
         cy.getByTestId('bp-AnnotationsControls-regionBtn').click();
 
-        // Draw a 100x100 region on the image starting at (200, 200)
-        cy.getByTestId('ba-RegionCreator')
-            .first()
-            .trigger('mousedown', {
-                buttons: 1,
-                clientX: 200,
-                clientY: 200,
-            })
-            .trigger('mousemove', {
-                buttons: 1,
-                clientX: 300,
-                clientY: 300,
-            })
-            .trigger('mouseup');
-
-        // Type a message in the reply form and save the new annotation
-        cy.getByTestId('ba-ReplyField-editor').type('This is an automated test annotation.');
-        cy.getByTestId('ba-Popup-submit').click();
-
-        // Assert that at least one annotation is present on the image
-        cy.get('[data-testid^="ba-AnnotationTarget"]');
+        // Add a region annotation on the image
+        cy.drawRegion();
+        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');
     });
 
     it('should hide region button for rotated image', () => {

test/support/commands.js

@@ -9,3 +9,27 @@ Cypress.Commands.add('showPreview', (fileId, { token } = {}) => {
     cy.get('[data-testid="fileid"]').type(fileId);
     cy.get('[data-testid="fileid-set"]').click();
 });
+
+// Annotations-specific commands
+Cypress.Commands.add('drawRegion', ({ x = 200, y = 200, width = 100, height = 100 } = {}) => {
+    // Draw a width * height region starting at (x, y)
+    cy.getByTestId('ba-RegionCreator')
+        .first()
+        .trigger('mousedown', {
+            buttons: 1,
+            clientX: x,
+            clientY: y,
+        })
+        .trigger('mousemove', {
+            buttons: 1,
+            clientX: x + width,
+            clientY: y + height,
+        })
+        .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);
+    cy.getByTestId('ba-Popup-submit').click();
+});