Add e2e tests for diagrams and embeddings (#1025)

This commit is contained in:
Erik Michelson 2021-02-22 22:27:59 +01:00 committed by GitHub
parent c2664b68f0
commit f9809a4edf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 187 additions and 14 deletions

View file

@ -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' }/>
}
}

View file

@ -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'

View file

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

View file

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

View file

@ -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>
)