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

import { defaultModuleQueriesandMutations } from '../../../support/helpers';

const getModule = (contents) => {
  return {
    chapters: [
      {
        title: 'A Chapter',
        contentBlocks: [
          {
            title: 'A Content Block',
            highlights: [],
            id: contentBlockId,
            contents,
          },
        ],
      },
    ],
  };
};

const defaultContents = [
  {
    type: 'text_block',
    id: 'some-content-component-id',
    value: {
      text: '<p>Dies ist ein Text mit ein paar Wörtern.</p>',
    },
  },
];

const contentListContents = [
  {
    id: '16ea6f8a-99bc-4366-9f32-d7c3e7e39765',
    type: 'content_list_item',
    value: [
      {
        id: '73f571e9-c049-41e7-8927-c4badbfb9b93',
        type: 'text_block',
        value: {
          text: '<p data-block-key="qykuf">Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo<br/><br/> Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo Hallo</p>',
        },
      },
    ],
  },
];

const contentBlockId = window.btoa('ContentBlockNode:1');
let lastHighlight;
const operations = {
  ...defaultModuleQueriesandMutations,
  ModuleDetailsQuery: {
    module: getModule(defaultContents),
  },
  AddHighlight: ({ input: { highlight } }) => {
    lastHighlight = {
      ...highlight,
      id: 'new-highlight-id',
      contentBlock: {
        id: contentBlockId,
      },
    };
    return {
      addHighlight: {
        highlight: lastHighlight,
      },
    };
  },
  UpdateHighlight: ({ input: { note, color } }) => {
    lastHighlight = {
      ...lastHighlight,
      note,
      color,
    };
    return {
      updateHighlight: {
        highlight: lastHighlight,
      },
    };
  },
  DeleteHighlight: {
    deleteHighlight: {
      success: true,
    },
  },
};

const selectText = (elm: Node, start: number, end: number) => {
  const range = document.createRange();
  range.setStart(elm, start);
  range.setEnd(elm, end);
  cy.window().then((win) => win.getSelection().addRange(range));
};

const markText = () => {
  /*
   * Mark the text (programmatically, as Cypress has no API for this)
   */
  cy.getByDataCy('text-block').then(($elm) => {
    const textBlock = $elm[0];
    const paragraph = textBlock.querySelector('p');
    selectText(paragraph.childNodes[0], 2, 12);
    /*
     * Also trigger the events manually
     */
    cy.document().trigger('selectionchange');
    cy.wrap(paragraph.parentNode).trigger('mouseup');
  });
  cy.getByDataCy('highlight-popover').should('be.visible');
  cy.getByDataCy('highlight-popover').should('have.length', 1); // there should only be one popover

  /*
   * manually remove the selection, because cypress does not do that on a click, unlike a real browser
   */
  cy.window().then((win) => {
    const selection = win.getSelection();
    selection.removeAllRanges();
  });
};

describe('Highlights', () => {
  beforeEach(() => {
    cy.setup();
  });

  it('visits a module and highlights a paragraph', () => {
    cy.mockGraphqlOps({
      operations,
    });
    cy.visit('/module/my-module');

    markText();

    // 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();
    cy.wait('@AddHighlight');
    cy.getByDataCy('highlight-mark').should('contain', 'es ist ein');

    // 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
    cy.getByDataCy('highlight-mark').should('have.length', 1);

    // mark the text with yellow and check the text
    cy.getByDataCy('highlight-beta').click();
    cy.wait('@UpdateHighlight');
    cy.getByDataCy('highlight-mark').should('contain', 'es ist ein');
    cy.getByDataCy('highlight-mark').should('have.class', 'highlight--beta');
    //
    // 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
    cy.getByDataCy('highlight-mark').should('have.length', 1);

    // 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-popover').should('have.length', 1); // there should only be one popover
    cy.getByDataCy('highlight-mark').should('have.length', 1);

    // click outside the created components to make them disappear
    cy.getByDataCy('module-title').click();
    cy.getByDataCy('highlight-popover').should('not.exist');
    cy.getByDataCy('highlight-sidebar').should('not.exist');

    cy.getByDataCy('highlight-mark').should('have.length', 1);

    // click on the highlighted text to make the menus appear again
    cy.getByDataCy('highlight-mark').click();
    cy.getByDataCy('highlight-popover').should('be.visible');
    cy.getByDataCy('highlight-sidebar').should('be.visible');

    // todo: change the color
    // todo: write a note
    // todo: click the note icon without first setting a color

    // delete the highlight
    cy.getByDataCy('highlight-delete').click();
    cy.getByDataCy('confirm-dialog').should('be.visible');
    cy.getByDataCy('modal-save-button').click();

    cy.getByDataCy('highlight-popover').should('not.exist');
    cy.getByDataCy('highlight-sidebar').should('not.exist');
    cy.getByDataCy('highlight-mark').should('not.exist');
  });

  it('visits a module with a ContentListItem and highlights some text', () => {
    cy.mockGraphqlOps({
      operations: {
        ...operations,
        ModuleDetailsQuery: {
          module: getModule(contentListContents),
        },
      },
    });

    cy.visit('/module/my-module');

    markText();
  });

  it('visits a module and highlights some text, then adds a note', () => {
    cy.mockGraphqlOps({
      operations: {
        ...operations,
        ModuleDetailsQuery: {
          module: getModule(defaultContents),
        },
      },
    });

    cy.visit('/module/my-module');

    markText();
    cy.getByDataCy('highlight-note').click();
    cy.wait('@AddHighlight');
    const textPart = 'Some noteworthy stuff with a link to ';
    const urlPart = 'https://hep.ch';
    const note = `${textPart}${urlPart}`;
    cy.getByDataCy('highlight-note-input').should('have.value', '').type(note);
    cy.getByDataCy('highlight-note-save').click();
    cy.wait('@UpdateHighlight');

    cy.getByDataCy('highlight-note-save').should('not.exist');
    cy.getByDataCy('highlight-note-text').should('contain.text', textPart);
    cy.get(`[href="${urlPart}"]`).should('exist');
  });
});