Add new test for instrument page and add onNote function

client/cypress/e2e/frontend/modules/highlights.cy.ts

@@ -160,12 +160,12 @@ const updateHighlight = (text) => {
   cy.getByDataCy('highlight-mark').should('have.length', 1);
 };
 
-const openSidebar = () => {
+const openSidebar = (text) => {
   // display the sidebar and popover and check them
   cy.getByDataCy('highlight-note').click();
   cy.getByDataCy('highlight-popover').should('be.visible');
   cy.getByDataCy('highlight-sidebar').should('be.visible');
-  cy.getByDataCy('highlight-in-sidebar').should('contain', 'es ist ein');
+  cy.getByDataCy('highlight-in-sidebar').should('contain', text);
 
   cy.getByDataCy('highlight-popover').should('have.length', 1); // there should only be one popover
   cy.getByDataCy('highlight-mark').should('have.length', 1);
@@ -214,7 +214,7 @@ describe('Highlights', () => {
     createHighlight(highlightedText);
     updateHighlight(highlightedText);
 
-    openSidebar();
+    openSidebar(highlightedText);
 
     // click outside the created components to make them disappear
     cy.getByDataCy('module-title').click();
@@ -276,17 +276,17 @@ describe('Highlights', () => {
     cy.visit('/module/my-module');
 
     markText();
+    const highlightedText = 'es ist ein';
 
     // delete doesn't make sense before the highlight exists
     cy.getByDataCy('highlight-delete').should('not.exist');
-    openSidebar();
+    openSidebar(highlightedText);
     cy.wait('@AddHighlight');
-    const highlightedText = 'es ist ein';
     updateHighlight(highlightedText);
     cy.getByDataCy('highlight-mark').should('have.length', 1);
   });
 
-  it.only('visits an instrument and highlights some text', () => {
+  it('visits an instrument and highlights some text', () => {
     cy.mockGraphqlOps({
       operations: {
         ...operations,
@@ -319,4 +319,38 @@ describe('Highlights', () => {
     addNote();
     deleteHighlight();
   });
+
+  it('visits an instrument and writes a note', () => {
+    cy.mockGraphqlOps({
+      operations: {
+        ...operations,
+        AddHighlight: getAddHighlight('InstrumentNode'),
+        InstrumentQuery: {
+          instrument: {
+            title: 'My Instrument',
+            id: instrumentId,
+            slug: instrumentSlug,
+            highlights: [],
+            contents: [
+              {
+                type: 'text_block',
+                id: 'some-other-content-component-id',
+                value: {
+                  text: '<p>Hello my beautiful World!</p>',
+                },
+              },
+            ],
+          },
+        },
+      },
+    });
+    cy.visit(`/instrument/${instrumentSlug}`);
+    cy.wait('@InstrumentQuery');
+    markText();
+    const highlightedText = 'llo my bea';
+    openSidebar(highlightedText);
+    cy.wait('@AddHighlight');
+    updateHighlight(highlightedText);
+    deleteHighlight();
+  });
 });

client/src/pages/instrument.vue

@@ -39,7 +39,8 @@ import { useQuery } from '@vue/apollo-composable';
 import { computed } from '@vue/reactivity';
 import { AddHighlightArgument, InstrumentNode } from '@/__generated__/graphql';
 import { getSelectionHandler, replacePopover, SelectionHandlerOptions } from '@/helpers/highlight';
-import { doCreateHighlight } from '@/graphql/mutations';
+import { doCreateHighlight, doUpdateHighlight } from '@/graphql/mutations';
+import highlightSidebar from '@/helpers/highlight-sidebar';
 
 const instrumentDiv = ref<HTMLElement | null>(null);
 
@@ -107,7 +108,7 @@ const instrumentHighlightsFragment = graphql(`
 
 // todo: merge with other createHighlight function over in ContentBlock.vue
 const createHighlight = (highlight: AddHighlightArgument) => {
-  doCreateHighlight(
+  return doCreateHighlight(
     {
       input: {
         highlight,
@@ -163,6 +164,23 @@ onResult(() => {
       onChangeColor: (newHighlight: AddHighlightArgument) => {
         createHighlight(newHighlight);
       },
+      onCreateNote: (newHighlight: AddHighlightArgument) => {
+        // todo: the same as the other one in ContentBlock.vue, possible to merge
+        // we also open the sidebar when clicking on the note icon
+        createHighlight(newHighlight).then((highlight) => {
+          highlightSidebar.open({
+            highlight,
+            onUpdateText: (text: string) => {
+              doUpdateHighlight({
+                input: {
+                  note: text,
+                  id: highlight.id,
+                },
+              });
+            },
+          });
+        });
+      },
     };
     selectionHandler = getSelectionHandler(options);
     element.addEventListener('mouseup', selectionHandler);