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

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

* test(cypress): Address comments

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

src/highlight/HighlightAnnotations.tsx

@@ -117,7 +117,7 @@ const HighlightAnnotations = (props: Props): JSX.Element => {
                 <div className="ba-HighlightAnnotations-target">
                     <HighlightCanvas shapes={staged.shapes} />
                     <HighlightSvg>
-                        <HighlightTarget ref={setHighlightRef} annotationId="staged" shapes={staged.shapes} />
+                        <HighlightTarget ref={setHighlightRef} annotationId="staged" isActive shapes={staged.shapes} />
                     </HighlightSvg>
                 </div>
             )}

src/highlight/HighlightList.tsx

@@ -82,6 +82,7 @@ export function HighlightList({ activeId = null, annotations, className, onSelec
                     <HighlightTarget
                         key={id}
                         annotationId={id}
+                        isActive={activeId === id}
                         onHover={handleTargetHover}
                         onSelect={onSelect}
                         shapes={target.shapes}

src/highlight/HighlightTarget.tsx

@@ -10,6 +10,7 @@ import './HighlightTarget.scss';
 type Props = {
     annotationId: string;
     className?: string;
+    isActive?: boolean;
     onHover?: (annotationId: string | null) => void;
     onSelect?: (annotationId: string) => void;
     shapes: Array<Rect>;
@@ -18,7 +19,7 @@ type Props = {
 export type HighlightTargetRef = HTMLAnchorElement;
 
 const HighlightTarget = (props: Props, ref: React.Ref<HighlightTargetRef>): JSX.Element => {
-    const { annotationId, className, onHover = noop, onSelect = noop, shapes } = props;
+    const { annotationId, className, isActive, onHover = noop, onSelect = noop, shapes } = props;
     const isCurrentFileVersion = ReactRedux.useSelector(getIsCurrentFileVersion);
 
     const handleClick = (event: React.MouseEvent<HighlightTargetRef>): void => {
@@ -64,7 +65,7 @@ const HighlightTarget = (props: Props, ref: React.Ref<HighlightTargetRef>): JSX.
         // eslint-disable-next-line jsx-a11y/anchor-is-valid
         <a
             ref={ref}
-            className={classNames('ba-HighlightTarget', className)}
+            className={classNames('ba-HighlightTarget', className, { 'is-active': isActive })}
             data-resin-iscurrent={isCurrentFileVersion}
             data-resin-itemid={annotationId}
             data-resin-target="highlightText"

src/highlight/__tests__/HighlightTarget-test.tsx

@@ -33,18 +33,20 @@ describe('HighlightTarget', () => {
 
     describe('render()', () => {
         test('should render anchor with provided rects', () => {
-            const wrapper = getWrapper();
-            const anchor = wrapper.find('a');
-            const rect = wrapper.find('rect');
-
-            expect(anchor.hasClass('is-active')).toBe(false);
-            expect(anchor.hasClass('is-hover')).toBe(false);
+            const rect = getWrapper().find('rect');
 
             expect(rect.prop('height')).toBe('10%');
             expect(rect.prop('width')).toBe('20%');
             expect(rect.prop('x')).toBe('5%');
             expect(rect.prop('y')).toBe('5%');
         });
+
+        test.each([true, false])('should render classNames correctly when isActive is %s', isActive => {
+            const wrapper = getWrapper({ isActive });
+
+            expect(wrapper.hasClass('ba-HighlightTarget')).toBe(true);
+            expect(wrapper.hasClass('is-active')).toBe(isActive);
+        });
     });
 
     describe('interactivity', () => {

test/integration/Highlight.e2e.test.js

@@ -21,10 +21,19 @@ describe('Highlights', () => {
         cy.selectText();
         cy.submitReply();
 
-        // Assert that at least one highlight annotation is present on the document
-        cy.get('.ba-HighlightTarget');
+        // Assert that at least one highlight annotation is present on the document and is active
+        cy.get('.ba-HighlightTarget').should('have.class', 'is-active');
 
         // Exit highlight creation mode
         cy.getByTestId('bp-AnnotationsControls-highlightBtn').click();
+
+        // Assert that annotation target is not active
+        cy.get('.ba-HighlightTarget').should('not.have.class', 'is-active');
+
+        // Select annotation target
+        cy.get('.ba-HighlightTarget-rect').click();
+
+        // Assert that annotation target is active
+        cy.get('.ba-HighlightTarget').should('have.class', 'is-active');
     });
 });