Add e2e tests for diagrams and embeddings (#1025)

cypress/integration/diagrams.spec.ts

@@ -0,0 +1,74 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+describe('Diagram codeblock ', () => {
+  beforeEach(() => {
+    cy.visitTestEditor()
+  })
+
+  it('renders markmap', () => {
+    cy.codemirrorFill('```markmap\n- pro\n- contra\n```')
+    cy.getMarkdownBody()
+      .find('[data-cy=markmap]')
+      .children()
+      .should('be.visible')
+  })
+
+  it('renders vega-lite', () => {
+    cy.codemirrorFill('```vega-lite\n{"$schema":"https://vega.github.io/schema/vega-lite/v4.json","data":{"values":[{"a":"","b":28}]},"mark":"bar","encoding":{"x":{"field":"a"},"y":{"field":"b"}}}\n```')
+    cy.getMarkdownBody()
+      .find('.vega-embed')
+      .children()
+      .should('be.visible')
+  })
+
+  it('renders graphviz', () => {
+    cy.codemirrorFill('```graphviz\ngraph {\na -- b\n}\n```')
+    cy.getMarkdownBody()
+      .find('[data-cy=graphviz]')
+      .children()
+      .should('be.visible')
+  })
+
+  it('renders mermaid', () => {
+    cy.codemirrorFill('```mermaid\ngraph TD;\n    A-->B;\n```')
+    cy.getMarkdownBody()
+      .find('.mermaid')
+      .children()
+      .should('be.visible')
+  })
+
+  it('renders flowcharts', () => {
+    cy.codemirrorFill('```flow\nst=>start: Start\ne=>end: End\nst->e\n```')
+    cy.getMarkdownBody()
+      .find('[data-cy=flowchart]')
+      .children()
+      .should('be.visible')
+  })
+
+  it('renders abc scores', () => {
+    cy.codemirrorFill('```abc\nM:4/4\nK:G\n|:GABc dedB:|\n```')
+    cy.getMarkdownBody()
+      .find('.abcjs-score')
+      .children()
+      .should('be.visible')
+  })
+
+  it('renders csv as table', () => {
+    cy.codemirrorFill('```csv delimiter=; header\na;b;c;d\n1;2;3;4\n```')
+    cy.getMarkdownBody()
+      .find('.csv-html-table')
+      .should('be.visible')
+  })
+
+  it('renders plantuml', () => {
+    cy.codemirrorFill('```plantuml\nclass Example\n```')
+    cy.getMarkdownBody()
+      .find('img')
+      // PlantUML uses base64 encoded version of zip-deflated PlantUML code in the request URL.
+      .should('have.attr', 'src', 'http://mock-plantuml.local/svg/SoWkIImgAStDuKhEIImkLd2jICmjo4dbSaZDIm6A0W00')
+  })
+})

cypress/integration/linkEmbedder.spec.ts

@@ -0,0 +1,69 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+describe('Link gets replaced with embedding: ', () => {
+  beforeEach(() => {
+    cy.visitTestEditor()
+  })
+
+  // TODO Add general testing of one-click-embedding component. The tests below just test a specific use of the component.
+
+  it('GitHub Gist', () => {
+    cy.codemirrorFill('https://gist.github.com/schacon/1')
+    cy.getMarkdownBody()
+      .find('.one-click-embedding.gist-frame')
+      .click()
+    cy.getMarkdownBody()
+      .find('iframe[data-cy=gh-gist]')
+      .should('be.visible')
+  })
+
+  it('YouTube', () => {
+    cy.codemirrorFill('https://www.youtube.com/watch?v=YE7VzlLtp-4')
+    cy.getMarkdownBody()
+      .find('.one-click-embedding-preview')
+      .should('have.attr', 'src', 'https://i.ytimg.com/vi/YE7VzlLtp-4/maxresdefault.jpg')
+      .parent()
+      .click()
+    cy.getMarkdownBody()
+      .find('iframe')
+      .should('have.attr', 'src', 'https://www.youtube-nocookie.com/embed/YE7VzlLtp-4?autoplay=1')
+  })
+
+  it('Vimeo', () => {
+    cy.intercept({
+      method: 'GET',
+      url: 'https://vimeo.com/api/v2/video/23237102.json'
+    }, {
+      statusCode: 200,
+      headers: {
+        'content-type': 'application/json'
+      },
+      body: '[{"thumbnail_large": "https://i.vimeocdn.com/video/503631401_640.jpg"}]'
+    })
+    cy.codemirrorFill('https://vimeo.com/23237102')
+    cy.getMarkdownBody()
+      .find('.one-click-embedding-preview')
+      .should('have.attr', 'src', 'https://i.vimeocdn.com/video/503631401_640.jpg')
+      .parent()
+      .click()
+    cy.getMarkdownBody()
+      .find('iframe')
+      .should('have.attr', 'src', 'https://player.vimeo.com/video/23237102?autoplay=1')
+  })
+
+  it('Asciinema', () => {
+    cy.codemirrorFill('https://asciinema.org/a/117928')
+    cy.getMarkdownBody()
+      .find('.one-click-embedding-preview')
+      .should('have.attr', 'src', 'https://asciinema.org/a/117928.png')
+      .parent()
+      .click()
+    cy.getMarkdownBody()
+      .find('iframe')
+      .should('have.attr', 'src', 'https://asciinema.org/a/117928/embed?autoplay=1')
+  })
+})

cypress/integration/shortcodes.spec.ts

@@ -4,12 +4,12 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-describe('Short code', () => {
+describe('Short code gets replaced or rendered: ', () => {
   beforeEach(() => {
     cy.visitTestEditor()
   })
 
-  describe('for pdfs', () => {
+  describe('pdf', () => {
     it('renders a plain link', () => {
       cy.codemirrorFill(`{%pdf https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf %}`)
       cy.getMarkdownBody()
@@ -17,4 +17,30 @@ describe('Short code', () => {
         .should('have.attr', 'href', 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf')
     })
   })
+
+  describe('slideshare', () => {
+    it('renders a plain link', () => {
+      cy.codemirrorFill(`{%slideshare example/123456789 %}`)
+      cy.getMarkdownBody()
+        .find('a')
+        .should('have.attr', 'href', 'https://www.slideshare.net/example/123456789')
+    })
+  })
+
+  describe('speakerdeck', () => {
+    it('renders a plain link', () => {
+      cy.codemirrorFill(`{%speakerdeck example/123456789 %}`)
+      cy.getMarkdownBody()
+        .find('a')
+        .should('have.attr', 'href', 'https://speakerdeck.com/example/123456789')
+    })
+  })
+
+  describe('youtube', () => {
+    it('renders one-click-embedding', () => {
+      cy.codemirrorFill(`{%youtube YE7VzlLtp-4 %}`)
+      cy.getMarkdownBody()
+        .find('.one-click-embedding.embed-responsive-item')
+    })
+  })
 })

cypress/support/config.ts

@@ -45,6 +45,7 @@ beforeEach(() => {
         termsOfUse: 'https://example.com/termsOfUse',
         imprint: 'https://example.com/imprint'
       },
+      plantumlServer: 'http://mock-plantuml.local',
       version: {
         version: 'mock',
         sourceCodeUrl: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',

src/components/markdown-renderer/replace-components/flow/flowchart/flowchart.tsx

@@ -57,6 +57,6 @@ export const FlowChart: React.FC<FlowChartProps> = ({ code }) => {
         <Trans i18nKey={ 'renderer.flowchart.invalidSyntax' }/>
       </Alert>)
   } else {
-    return <div ref={ diagramRef } className={ 'text-center' }/>
+    return <div ref={ diagramRef } data-cy={ 'flowchart' } className={ 'text-center' }/>
   }
 }

src/components/markdown-renderer/replace-components/gist/gist-frame.tsx

@@ -66,6 +66,7 @@ export const GistFrame: React.FC<GistFrameProps> = ({ id }) => {
   return (
     <iframe
       sandbox="allow-scripts allow-top-navigation-by-user-activation allow-popups"
+      data-cy={ 'gh-gist' }
       width='100%'
       height={ `${ frameHeight }px` }
       frameBorder='0'

src/components/markdown-renderer/replace-components/graphviz/graphviz-frame.tsx

@@ -55,12 +55,14 @@ export const GraphvizFrame: React.FC<GraphvizFrameProps> = ({ code }) => {
       })
   }, [code, error, showError])
 
-  return <Fragment>
+  return (
-    <ShowIf condition={ !!error }>
+    <Fragment>
-      <Alert variant={ 'warning' }>{ error }</Alert>
+      <ShowIf condition={ !!error }>
-    </ShowIf>
+        <Alert variant={ 'warning' }>{ error }</Alert>
-    <div className={ 'text-center overflow-x-auto' } ref={ container }/>
+      </ShowIf>
-  </Fragment>
+      <div className={ 'text-center overflow-x-auto' } data-cy={ 'graphviz' } ref={ container }/>
+    </Fragment>
+  )
 }
 
 export default GraphvizFrame

src/components/markdown-renderer/replace-components/markmap/markmap-frame.tsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React, { Fragment, useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { LockButton } from '../../../common/lock-button/lock-button'
 import '../../utils/button-inside.scss'
@@ -64,12 +64,12 @@ export const MarkmapFrame: React.FC<MarkmapFrameProps> = ({ code }) => {
   }, [code])
 
   return (
-    <Fragment>
+    <div data-cy={ 'markmap' }>
       <div className={ 'text-center' } ref={ diagramContainer }/>
       <div className={ 'text-right button-inside' }>
         <LockButton locked={ disablePanAndZoom } onLockedChanged={ (newState => setDisablePanAndZoom(newState)) }
                     title={ disablePanAndZoom ? t('renderer.markmap.locked') : t('renderer.markmap.unlocked') }/>
       </div>
-    </Fragment>
+    </div>
   )
 }

src/components/markdown-renderer/replace-components/youtube/youtube-frame.tsx

@@ -15,9 +15,9 @@ export const YouTubeFrame: React.FC<YouTubeFrameProps> = ({ id }) => {
   return (
     <OneClickEmbedding containerClassName={ 'embed-responsive embed-responsive-16by9' }
                        previewContainerClassName={ 'embed-responsive-item' } hoverIcon={ 'youtube-play' }
-                       loadingImageUrl={ `//i.ytimg.com/vi/${ id }/maxresdefault.jpg` }>
+                       loadingImageUrl={ `https://i.ytimg.com/vi/${ id }/maxresdefault.jpg` }>
       <iframe className='embed-responsive-item' title={ `youtube video of ${ id }` }
-              src={ `//www.youtube-nocookie.com/embed/${ id }?autoplay=1` }
+              src={ `https://www.youtube-nocookie.com/embed/${ id }?autoplay=1` }
               allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"/>
     </OneClickEmbedding>
   )