Fix renderer type test (#1647)

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

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", () => {

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')
   })
 })

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<Element>
+    getIframeBody(rendererType?: RendererType): Chainable<Element>
+
     getReveal(): Chainable<Element>
+
     getMarkdownBody(): Chainable<Element>
   }
 }
 
-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')
 })

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<RenderIframeProps> = ({
         ref={frameReference}
         referrerPolicy={'no-referrer'}
         className={`border-0 ${frameClasses ?? ''}`}
-        data-content-ready={rendererReady}
+        {...cypressAttribute('renderer-ready', rendererReady ? 'true' : 'false')}
+        {...cypressAttribute('renderer-type', rendererType)}
       />
     </Fragment>
   )

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 {

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<string, string> | undefined => {
+  if (!isTestMode()) {
+    return
+  }
+
+  return {
+    [`data-cypress-${attribute}`]: value
+  }
+}