323 lines
9.3 KiB
TypeScript
323 lines
9.3 KiB
TypeScript
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');
|
|
const instrumentId = window.btoa('InstrumentNode:2');
|
|
const instrumentSlug = 'my-instrument';
|
|
|
|
const getAddHighlight = (pageType: string = 'ContentBlockNode') => {
|
|
let page: { id: string; __typename: string; slug?: string };
|
|
if (pageType === 'InstrumentNode') {
|
|
page = {
|
|
id: instrumentId,
|
|
slug: instrumentSlug,
|
|
__typename: 'InstrumentNode',
|
|
};
|
|
} else {
|
|
page = {
|
|
id: contentBlockId,
|
|
__typename: 'ContentBlockNode',
|
|
};
|
|
}
|
|
console.log(page);
|
|
return ({ input: { highlight } }) => {
|
|
lastHighlight = {
|
|
...highlight,
|
|
id: 'new-highlight-id',
|
|
page,
|
|
};
|
|
return {
|
|
addHighlight: {
|
|
highlight: lastHighlight,
|
|
},
|
|
};
|
|
};
|
|
};
|
|
|
|
let lastHighlight;
|
|
const operations = {
|
|
...defaultModuleQueriesandMutations,
|
|
ModuleDetailsQuery: {
|
|
module: getModule(defaultContents),
|
|
},
|
|
AddHighlight: getAddHighlight(),
|
|
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();
|
|
});
|
|
};
|
|
|
|
const createHighlight = (text) => {
|
|
// 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', text);
|
|
|
|
// 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);
|
|
};
|
|
|
|
const updateHighlight = (text) => {
|
|
cy.getByDataCy('highlight-beta').click();
|
|
cy.wait('@UpdateHighlight');
|
|
cy.getByDataCy('highlight-mark').should('contain', text);
|
|
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);
|
|
};
|
|
|
|
const openSidebar = () => {
|
|
// 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);
|
|
};
|
|
|
|
const deleteHighlight = () => {
|
|
// delete the highlight
|
|
cy.getByDataCy('highlight-mark').click();
|
|
cy.getByDataCy('highlight-delete').click();
|
|
cy.getByDataCy('confirm-dialog').should('be.visible');
|
|
cy.getByDataCy('modal-save-button').click();
|
|
cy.wait('@DeleteHighlight');
|
|
|
|
cy.getByDataCy('highlight-popover').should('not.exist');
|
|
cy.getByDataCy('highlight-sidebar').should('not.exist');
|
|
cy.getByDataCy('highlight-mark').should('not.exist');
|
|
};
|
|
|
|
const addNote = () => {
|
|
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');
|
|
};
|
|
|
|
describe('Highlights', () => {
|
|
beforeEach(() => {
|
|
cy.setup();
|
|
});
|
|
|
|
it('visits a module and highlights a paragraph', () => {
|
|
cy.mockGraphqlOps({
|
|
operations,
|
|
});
|
|
cy.visit('/module/my-module');
|
|
|
|
markText();
|
|
|
|
const highlightedText = 'es ist ein';
|
|
createHighlight(highlightedText);
|
|
updateHighlight(highlightedText);
|
|
|
|
openSidebar();
|
|
|
|
// 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
|
|
|
|
deleteHighlight();
|
|
});
|
|
|
|
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');
|
|
|
|
addNote();
|
|
});
|
|
|
|
it('visits a module and highlights some text, clicks on the Note icon, then changes the color', () => {
|
|
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');
|
|
openSidebar();
|
|
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', () => {
|
|
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';
|
|
createHighlight(highlightedText);
|
|
updateHighlight(highlightedText);
|
|
addNote();
|
|
deleteHighlight();
|
|
});
|
|
});
|