From 23698a432b0d4084ac9c50c5ed14b6b7470bfe7d Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 7 Mar 2024 10:48:26 +0100
Subject: [PATCH] Update sidebar on color change

Resolves MS-894 #complete
---
 client/cypress/e2e/frontend/modules/highlights.cy.ts  | 9 +++++----
 client/src/components/highlights/HighlightPopover.vue | 1 +
 client/src/helpers/highlight.ts                       | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/client/cypress/e2e/frontend/modules/highlights.cy.ts b/client/cypress/e2e/frontend/modules/highlights.cy.ts
index 5fee435d..ae0360fd 100644
--- a/client/cypress/e2e/frontend/modules/highlights.cy.ts
+++ b/client/cypress/e2e/frontend/modules/highlights.cy.ts
@@ -195,11 +195,11 @@ const createHighlight = (text: string, content = false) => {
   cy.getByDataCy('highlight-mark').should('have.length', 1);
 };
 
-const updateHighlight = (text) => {
-  cy.getByDataCy('highlight-beta').click();
+const updateHighlight = (text, color = 'beta') => {
+  cy.getByDataCy(`highlight-${color}`).click();
   cy.wait('@UpdateHighlight');
   cy.getByDataCy('highlight-mark').should('contain', text);
-  cy.getByDataCy('highlight-mark').should('have.class', 'highlight--beta');
+  cy.getByDataCy('highlight-mark').should('have.class', `highlight--${color}`);
   //
   // we only want to have one of each element and not accidentally create multiple
   cy.getByDataCy('highlight-popover').should('have.length', 1); // there should only be one popover
@@ -274,7 +274,8 @@ describe('Highlights', () => {
     cy.getByDataCy('highlight-popover').should('be.visible');
     cy.getByDataCy('highlight-sidebar').should('be.visible');
 
-    // todo: change the color
+    updateHighlight(highlightedText, 'gamma');
+    cy.getByDataCy('highlight-in-sidebar').should('have.class', 'highlight--gamma');
     // todo: write a note
     // todo: click the note icon without first setting a color
 
diff --git a/client/src/components/highlights/HighlightPopover.vue b/client/src/components/highlights/HighlightPopover.vue
index 3de89843..4992affe 100644
--- a/client/src/components/highlights/HighlightPopover.vue
+++ b/client/src/components/highlights/HighlightPopover.vue
@@ -16,6 +16,7 @@
       ></div>
       <div
         class="highlight-popover__color highlight-popover__color--blue"
+        data-cy="highlight-gamma"
         @click="$emit('choose-color', 'gamma')"
       ></div>
     </section>
diff --git a/client/src/helpers/highlight.ts b/client/src/helpers/highlight.ts
index de6aefdf..81cf77e9 100644
--- a/client/src/helpers/highlight.ts
+++ b/client/src/helpers/highlight.ts
@@ -316,7 +316,7 @@ const markClickListenerCurry =
 
           // we need to refresh the sidebar
           highlightSidebar.open({
-            highlight,
+            highlight: newHighlight,
             onUpdateText: onUpdateTextCurry(newHighlight),
           });
         } catch (error) {