From 4ad503180324e532325ff0edbc30612292f39f69 Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Wed, 21 Feb 2024 21:40:57 +0100 Subject: [PATCH] Add new tests for module and chapter highlights --- .../e2e/frontend/modules/highlights.cy.ts | 104 +++++++++++++++--- client/cypress/fixtures/mocks.ts | 2 + client/src/components/Chapter.vue | 6 +- 3 files changed, 98 insertions(+), 14 deletions(-) diff --git a/client/cypress/e2e/frontend/modules/highlights.cy.ts b/client/cypress/e2e/frontend/modules/highlights.cy.ts index 15bae948..d5cbbe80 100644 --- a/client/cypress/e2e/frontend/modules/highlights.cy.ts +++ b/client/cypress/e2e/frontend/modules/highlights.cy.ts @@ -2,9 +2,12 @@ import { defaultModuleQueriesandMutations } from '../../../support/helpers'; const getModule = (contents) => { return { + intro: '

Introducing this great paragraph!

', + 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(); - cy.wait('@AddHighlight'); + 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(); }); diff --git a/client/cypress/fixtures/mocks.ts b/client/cypress/fixtures/mocks.ts index 32d4e82a..36d44787 100644 --- a/client/cypress/fixtures/mocks.ts +++ b/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, diff --git a/client/src/components/Chapter.vue b/client/src/components/Chapter.vue index ed5373b5..12b1d87c 100644 --- a/client/src/components/Chapter.vue +++ b/client/src/components/Chapter.vue @@ -38,6 +38,7 @@
-

+

{{ chapter.description }}