From a96b06c95b20ccb9076a5e6cb54ff39f2599c2c0 Mon Sep 17 00:00:00 2001 From: Tilman Vatteroth Date: Sun, 21 Nov 2021 12:48:30 +0100 Subject: [PATCH] Fix renderer type test (#1647) Signed-off-by: Tilman Vatteroth --- cypress/integration/intro.spec.ts | 2 +- cypress/integration/renderer-mode.spec.ts | 5 ----- cypress/support/get-iframe-content.ts | 19 ++++++++++++++----- .../renderer-pane/render-iframe.tsx | 5 +++-- .../rendering-message.ts | 6 +++--- src/utils/cypress-attribute.ts | 19 +++++++++++++++++++ 6 files changed, 40 insertions(+), 16 deletions(-) diff --git a/cypress/integration/intro.spec.ts b/cypress/integration/intro.spec.ts index 9faf66b54..ea41b09c0 100644 --- a/cypress/integration/intro.spec.ts +++ b/cypress/integration/intro.spec.ts @@ -13,7 +13,7 @@ describe('Intro page', () => { describe('customizable content', () => { it('fetches and shows the correct intro page content', () => { - cy.getMarkdownBody().contains('test content') + cy.getIntroBody().contains('test content') }) it("won't show anything if no content was found", () => { diff --git a/cypress/integration/renderer-mode.spec.ts b/cypress/integration/renderer-mode.spec.ts index 47d08012d..c309ca72c 100644 --- a/cypress/integration/renderer-mode.spec.ts +++ b/cypress/integration/renderer-mode.spec.ts @@ -11,27 +11,22 @@ describe('Renderer mode', () => { it("should be 'document' without type specified", () => { cy.getMarkdownBody().should('exist') - cy.getReveal().should('not.exist') }) it("should be 'reveal.js' with type 'slide'", () => { cy.setCodemirrorContent('---\ntype: slide\n---\n') - cy.getMarkdownBody().should('not.exist') cy.getReveal().should('exist') }) it("should be 'document' with invalid type", () => { cy.setCodemirrorContent('---\ntype: EinDokument\n---\n') cy.getMarkdownBody().should('exist') - cy.getReveal().should('not.exist') }) it("should change from 'reveal.js' to 'document' if changed from 'slide' to something else", () => { cy.setCodemirrorContent('---\ntype: slide\n---\n') - cy.getMarkdownBody().should('not.exist') cy.getReveal().should('exist') cy.setCodemirrorContent('') cy.getMarkdownBody().should('exist') - cy.getReveal().should('not.exist') }) }) diff --git a/cypress/support/get-iframe-content.ts b/cypress/support/get-iframe-content.ts index e07d2e9eb..20e8a66f5 100644 --- a/cypress/support/get-iframe-content.ts +++ b/cypress/support/get-iframe-content.ts @@ -4,17 +4,22 @@ * SPDX-License-Identifier: AGPL-3.0-only */ +import { RendererType } from '../../src/components/render-page/window-post-message-communicator/rendering-message' + declare namespace Cypress { interface Chainable { - getIframeBody(): Chainable + getIframeBody(rendererType?: RendererType): Chainable + getReveal(): Chainable + getMarkdownBody(): Chainable } } -Cypress.Commands.add('getIframeBody', () => { +Cypress.Commands.add('getIframeBody', (rendererType?: RendererType) => { + const renderTypeAttribute = rendererType ? `[data-cypress-renderer-type="${rendererType}"]` : '' return cy - .get(`iframe[data-cypress-id="documentIframe"][data-content-ready="true"]`) + .get(`iframe[data-cypress-id="documentIframe"][data-cypress-renderer-ready="true"]${renderTypeAttribute}`) .should('be.visible') .its('0.contentDocument') .should('exist') @@ -24,9 +29,13 @@ Cypress.Commands.add('getIframeBody', () => { }) Cypress.Commands.add('getReveal', () => { - return cy.getIframeBody().find('.reveal') + return cy.getIframeBody(RendererType.SLIDESHOW).find('.reveal') }) Cypress.Commands.add('getMarkdownBody', () => { - return cy.getIframeBody().find('.markdown-body') + return cy.getIframeBody(RendererType.DOCUMENT).find('.markdown-body') +}) + +Cypress.Commands.add('getIntroBody', () => { + return cy.getIframeBody(RendererType.INTRO).find('.markdown-body') }) diff --git a/src/components/editor-page/renderer-pane/render-iframe.tsx b/src/components/editor-page/renderer-pane/render-iframe.tsx index ab537b014..68ab6763e 100644 --- a/src/components/editor-page/renderer-pane/render-iframe.tsx +++ b/src/components/editor-page/renderer-pane/render-iframe.tsx @@ -26,7 +26,7 @@ import { useSendScrollState } from './hooks/use-send-scroll-state' import { useApplicationState } from '../../../hooks/common/use-application-state' import { Logger } from '../../../utils/logger' import { useEffectOnRenderTypeChange } from './hooks/use-effect-on-render-type-change' -import { cypressId } from '../../../utils/cypress-attribute' +import { cypressAttribute, cypressId } from '../../../utils/cypress-attribute' export interface RenderIframeProps extends RendererProps { rendererType: RendererType @@ -148,7 +148,8 @@ export const RenderIframe: React.FC = ({ ref={frameReference} referrerPolicy={'no-referrer'} className={`border-0 ${frameClasses ?? ''}`} - data-content-ready={rendererReady} + {...cypressAttribute('renderer-ready', rendererReady ? 'true' : 'false')} + {...cypressAttribute('renderer-type', rendererType)} /> ) diff --git a/src/components/render-page/window-post-message-communicator/rendering-message.ts b/src/components/render-page/window-post-message-communicator/rendering-message.ts index 46a509471..ea2ea6b2e 100644 --- a/src/components/render-page/window-post-message-communicator/rendering-message.ts +++ b/src/components/render-page/window-post-message-communicator/rendering-message.ts @@ -120,9 +120,9 @@ export type RendererToEditorMessageType = | CommunicationMessageType.ON_WORD_COUNT_CALCULATED export enum RendererType { - DOCUMENT, - INTRO, - SLIDESHOW + DOCUMENT = 'document', + INTRO = 'intro', + SLIDESHOW = 'slideshow' } export interface BaseConfiguration { diff --git a/src/utils/cypress-attribute.ts b/src/utils/cypress-attribute.ts index e62f6a8cc..8685852bb 100644 --- a/src/utils/cypress-attribute.ts +++ b/src/utils/cypress-attribute.ts @@ -31,3 +31,22 @@ export const cypressId = ( return { 'data-cypress-id': attributeContent } } } + +/** + * Returns an object with an attribute that starts with "data-cypress-" and the given attribute name. + * It is used to check additional data during integration tests. + * This works only if the runtime is built in test mode. + * + * @param attribute The attribute name + * @param value The attribute content + * @return An object if in test mode, undefined otherwise. + */ +export const cypressAttribute = (attribute: string, value: string): Record | undefined => { + if (!isTestMode()) { + return + } + + return { + [`data-cypress-${attribute}`]: value + } +}