Add new tests for module and chapter highlights

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

@@ -2,9 +2,12 @@ import { defaultModuleQueriesandMutations } from '../../../support/helpers';
 
 const getModule = (contents) => {
   return {
+    intro: '<p>Introducing this great paragraph!</p>',
+    highlights: [],
     chapters: [
       {
         title: 'A Chapter',
+        description: 'This is something else',
         contentBlocks: [
           {
             title: 'A Content Block',
@@ -47,8 +50,39 @@ const contentListContents = [
 const contentBlockId = window.btoa('ContentBlockNode:1');
 const instrumentId = window.btoa('InstrumentNode:2');
 const instrumentSlug = 'my-instrument';
+const chapterId = window.btoa('ChapterNode:3');
+const moduleId = window.btoa('ModuleNode:3');
+const moduleSlug = 'my-module';
 
-const getAddHighlight = (pageType: string = 'ContentBlockNode') => {
+const getAddHighlight = (pageType: string = 'ModuleNode') => {
+  let page: { id: string; __typename: string; slug?: string };
+  if (pageType === 'ChapterNode') {
+    page = {
+      id: chapterId,
+      __typename: 'ChapterNode',
+    };
+  } else {
+    page = {
+      id: moduleId,
+      slug: moduleSlug,
+      __typename: 'ModuleNode',
+    };
+  }
+  return ({ input: { highlight } }) => {
+    lastHighlight = {
+      ...highlight,
+      id: 'new-highlight-id',
+      page,
+    };
+    return {
+      addHighlight: {
+        highlight: lastHighlight,
+      },
+    };
+  };
+};
+
+const getAddContentHighlight = (pageType: string = 'ContentBlockNode') => {
   let page: { id: string; __typename: string; slug?: string };
   if (pageType === 'InstrumentNode') {
     page = {
@@ -70,7 +104,7 @@ const getAddHighlight = (pageType: string = 'ContentBlockNode') => {
       page,
     };
     return {
-      addHighlight: {
+      addContentHighlight: {
         highlight: lastHighlight,
       },
     };
@@ -78,12 +112,19 @@ const getAddHighlight = (pageType: string = 'ContentBlockNode') => {
 };
 
 let lastHighlight;
+const defaultModule = getModule(defaultContents);
 const operations = {
   ...defaultModuleQueriesandMutations,
   ModuleDetailsQuery: {
-    module: getModule(defaultContents),
+    module: defaultModule,
+  },
+  UpdateLastModule: {
+    updateLastModule: {
+      lastModule: defaultModule,
+    },
   },
   AddHighlight: getAddHighlight(),
+  AddContentHighlight: getAddContentHighlight(),
   UpdateHighlight: ({ input: { note, color } }) => {
     lastHighlight = {
       ...lastHighlight,
@@ -110,11 +151,11 @@ const selectText = (elm: Node, start: number, end: number) => {
   cy.window().then((win) => win.getSelection().addRange(range));
 };
 
-const markText = () => {
+const markText = (dataCy = 'text-block') => {
   /*
    * Mark the text (programmatically, as Cypress has no API for this)
    */
-  cy.getByDataCy('text-block').then(($elm) => {
+  cy.getByDataCy(dataCy).then(($elm) => {
     const textBlock = $elm[0];
     const paragraph = textBlock.querySelector('p');
     selectText(paragraph.childNodes[0], 2, 12);
@@ -136,12 +177,16 @@ const markText = () => {
   });
 };
 
-const createHighlight = (text) => {
+const createHighlight = (text: string, content = false) => {
   // delete doesn't make sense before the highlight exists
   cy.getByDataCy('highlight-delete').should('not.exist');
   // mark the text with yellow and check the text
   cy.getByDataCy('highlight-alpha').click();
+  if (content) {
+    cy.wait('@AddContentHighlight');
+  } else {
     cy.wait('@AddHighlight');
+  }
   cy.getByDataCy('highlight-mark').should('contain', text);
 
   // we only want to have one of each element and not accidentally create multiple
@@ -211,7 +256,7 @@ describe('Highlights', () => {
     markText();
 
     const highlightedText = 'es ist ein';
-    createHighlight(highlightedText);
+    createHighlight(highlightedText, true);
     updateHighlight(highlightedText);
 
     openSidebar(highlightedText);
@@ -264,7 +309,7 @@ describe('Highlights', () => {
 
     markText();
     cy.getByDataCy('highlight-note').click();
-    cy.wait('@AddHighlight');
+    cy.wait('@AddContentHighlight');
 
     addNote();
   });
@@ -278,6 +323,39 @@ describe('Highlights', () => {
     markText();
     const highlightedText = 'es ist ein';
 
+    // delete doesn't make sense before the highlight exists
+    cy.getByDataCy('highlight-delete').should('not.exist');
+    openSidebar(highlightedText);
+    cy.wait('@AddContentHighlight');
+    updateHighlight(highlightedText);
+    cy.getByDataCy('highlight-mark').should('have.length', 1);
+  });
+
+  it.skip('visits a module and highlights the chapter description', () => {
+    cy.mockGraphqlOps({
+      operations,
+    });
+    cy.visit('/module/my-module');
+
+    markText('chapter-intro');
+    const highlightedText = 'is is somet';
+
+    // delete doesn't make sense before the highlight exists
+    cy.getByDataCy('highlight-delete').should('not.exist');
+    openSidebar(highlightedText);
+    cy.wait('@AddHighlight');
+    updateHighlight(highlightedText);
+    cy.getByDataCy('highlight-mark').should('have.length', 1);
+  });
+  it('visits a module and highlights the module description', () => {
+    cy.mockGraphqlOps({
+      operations,
+    });
+    cy.visit('/module/my-module');
+
+    markText('module-intro');
+    const highlightedText = 'troducing';
+
     // delete doesn't make sense before the highlight exists
     cy.getByDataCy('highlight-delete').should('not.exist');
     openSidebar(highlightedText);
@@ -290,7 +368,7 @@ describe('Highlights', () => {
     cy.mockGraphqlOps({
       operations: {
         ...operations,
-        AddHighlight: getAddHighlight('InstrumentNode'),
+        AddContentHighlight: getAddContentHighlight('InstrumentNode'),
         InstrumentQuery: {
           instrument: {
             title: 'My Instrument',
@@ -314,7 +392,7 @@ describe('Highlights', () => {
     cy.wait('@InstrumentQuery');
     markText();
     const highlightedText = 'llo my bea';
-    createHighlight(highlightedText);
+    createHighlight(highlightedText, true);
     updateHighlight(highlightedText);
     addNote();
     deleteHighlight();
@@ -324,7 +402,7 @@ describe('Highlights', () => {
     cy.mockGraphqlOps({
       operations: {
         ...operations,
-        AddHighlight: getAddHighlight('InstrumentNode'),
+        AddContentHighlight: getAddContentHighlight('InstrumentNode'),
         InstrumentQuery: {
           instrument: {
             title: 'My Instrument',
@@ -349,7 +427,7 @@ describe('Highlights', () => {
     markText();
     const highlightedText = 'llo my bea';
     openSidebar(highlightedText);
-    cy.wait('@AddHighlight');
+    cy.wait('@AddContentHighlight');
     updateHighlight(highlightedText);
     deleteHighlight();
   });

client/cypress/fixtures/mocks.ts

@@ -88,9 +88,11 @@ export default {
     slug: 'some-slug',
     metaTitle: 'Meta Title',
     heroImage: '',
+    heroSource: '',
     teaser: '',
     intro: '',
     assignments: [],
+    highlights: [],
     objectiveGroups: [],
     id: getModuleId(),
     bookmark: null,

client/src/components/Chapter.vue

@@ -38,6 +38,7 @@
     <div
       :class="{ 'hideable-element--greyed-out': descriptionGreyedOut }"
       class="chapter__intro intro hideable-element"
+      data-cy="chapter-intro"
       v-if="!descriptionHidden"
     >
       <visibility-action
@@ -46,7 +47,10 @@
         type="chapter-description"
         v-if="editMode"
       />
-      <p class="chapter__description">
+      <p
+        data-cy="chapter-description"
+        class="chapter__description"
+      >
         {{ chapter.description }}
       </p>
     </div>