137 lines
4.3 KiB
TypeScript
137 lines
4.3 KiB
TypeScript
import { defaultModuleQueriesandMutations } from '../../../support/helpers';
|
|
|
|
const contentBlockId = window.btoa('ContentBlockNode:1');
|
|
const operations = {
|
|
...defaultModuleQueriesandMutations,
|
|
ModuleDetailsQuery: {
|
|
module: {
|
|
chapters: [
|
|
{
|
|
title: 'A Chapter',
|
|
contentBlocks: [
|
|
{
|
|
title: 'A Content Block',
|
|
highlights: [],
|
|
id: contentBlockId,
|
|
contents: [
|
|
{
|
|
type: 'text_block',
|
|
id: 'some-content-component-id',
|
|
value: {
|
|
text: '<p>Dies ist ein Text mit ein paar Wörtern.</p>',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
},
|
|
AddHighlight: ({ input: { highlight } }) => {
|
|
return {
|
|
addHighlight: {
|
|
highlight: {
|
|
...highlight,
|
|
id: 'new-highlight-id',
|
|
contentBlock: {
|
|
id: contentBlockId,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
},
|
|
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));
|
|
};
|
|
|
|
describe('Highlights', () => {
|
|
beforeEach(() => {
|
|
cy.setup();
|
|
cy.mockGraphqlOps({
|
|
operations,
|
|
});
|
|
});
|
|
|
|
it('visits a module and highlights a paragraph', () => {
|
|
cy.visit('/module/my-module');
|
|
|
|
/*
|
|
* 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.getByDataCy('content-block-div').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();
|
|
});
|
|
|
|
// mark the text with yellow and check the text
|
|
cy.getByDataCy('highlight-alpha').click();
|
|
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);
|
|
|
|
// 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');
|
|
});
|
|
});
|