Improve tests (#944)

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

src/components/common/modals/common-modal.tsx

@@ -26,7 +26,7 @@ export const CommonModal: React.FC<CommonModalProps> = ({ show, onHide, titleI18
   useTranslation()
 
   return (
-    <Modal show={show} onHide={onHide} animation={true} dialogClassName={`text-dark ${additionalClasses ?? ''}`} size={size}>
+    <Modal data-cy={'limitReachedModal'} show={show} onHide={onHide} animation={true} dialogClassName={`text-dark ${additionalClasses ?? ''}`} size={size}>
       <Modal.Header closeButton={!!closeButton}>
         <Modal.Title>
           <ShowIf condition={!!icon}>

src/components/editor/document-renderer-pane/document-render-pane.tsx

@@ -6,20 +6,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 import { TocAst } from 'markdown-it-toc-done-right'
 import React, { RefObject, useRef, useState } from 'react'
-import { Alert, Dropdown } from 'react-bootstrap'
-import { Trans } from 'react-i18next'
+import { Dropdown } from 'react-bootstrap'
 import { useSelector } from 'react-redux'
 import useResizeObserver from 'use-resize-observer'
-import links from '../../../links.json'
 import { ApplicationState } from '../../../redux'
 import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
-import { TranslatedExternalLink } from '../../common/links/translated-external-link'
 import { ShowIf } from '../../common/show-if/show-if'
 import { FullMarkdownRenderer } from '../../markdown-renderer/full-markdown-renderer'
 import { LineMarkerPosition } from '../../markdown-renderer/types'
 import { TableOfContents } from '../table-of-contents/table-of-contents'
 import { YAMLMetaData } from '../yaml-metadata/yaml-metadata'
 import { useAdaptedLineMarkerCallback } from './use-adapted-line-markers-callback'
+import { YamlArrayDeprecationAlert } from './yaml-array-deprecation-alert'
 
 export interface DocumentRenderPaneProps {
   extraClasses?: string
@@ -58,11 +56,7 @@ export const DocumentRenderPane: React.FC<DocumentRenderPaneProps> = ({
       <div className={'col-md'}/>
       <div className={'bg-light flex-fill'}>
         <ShowIf condition={yamlDeprecatedTags}>
-          <Alert variant='warning' dir='auto'>
-            <Trans i18nKey='editor.deprecatedTags' />
-            <br/>
-            <TranslatedExternalLink i18nKey={'common.readForMoreInfo'} href={links.faq} className={'text-primary'}/>
-          </Alert>
+          <YamlArrayDeprecationAlert/>
         </ShowIf>
         <div >
         <FullMarkdownRenderer

src/components/editor/document-renderer-pane/yaml-array-deprecation-alert.tsx

@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React from 'react'
+import { Alert } from 'react-bootstrap'
+import { Trans } from 'react-i18next';
+import { TranslatedExternalLink } from '../../common/links/translated-external-link'
+import links from '../../../links.json'
+
+export const YamlArrayDeprecationAlert: React.FC = () => {
+    return (
+      <Alert data-cy={'yamlArrayDeprecationAlert'} variant='warning' dir='auto'>
+        <Trans i18nKey='editor.deprecatedTags' />
+        <br/>
+        <TranslatedExternalLink i18nKey={'common.readForMoreInfo'} href={links.faq} className={'text-primary'}/>
+      </Alert>
+    );
+}

src/components/editor/editor-modals/max-length-warning-modal.tsx

@@ -19,8 +19,8 @@ export const MaxLengthWarningModal: React.FC<MaxLengthWarningModalProps> = ({ sh
   useTranslation()
 
   return (
-    <CommonModal show={show} onHide={onHide} titleI18nKey={'editor.error.limitReached.title'} closeButton={true}>
-      <Modal.Body className={'limit-warning'}>
+    <CommonModal data-cy={'limitReachedModal'} show={show} onHide={onHide} titleI18nKey={'editor.error.limitReached.title'} closeButton={true}>
+      <Modal.Body>
         <Trans i18nKey={'editor.error.limitReached.description'} values={{ maxLength }} />
         <strong className='mt-2 d-block'><Trans i18nKey={'editor.error.limitReached.advice'}/></strong>
       </Modal.Body>

src/components/editor/editor-pane/status-bar/status-bar.tsx

@@ -67,6 +67,7 @@ export const StatusBar: React.FC<StatusBarInfo> = ({ position, selectedColumns,
         <span>{t('editor.statusBar.lines', { lines: linesInDocument })}</span>
         &nbsp;–&nbsp;
         <span
+          data-cy={'remainingCharacters'}
           title={getLengthTooltip}
           className={remainingCharacters <= 0 ? 'text-danger' : remainingCharacters <= 100 ? 'text-warning' : ''}
         >

src/components/markdown-renderer/basic-markdown-renderer.tsx

@@ -62,7 +62,7 @@ export const BasicMarkdownRenderer: React.FC<BasicMarkdownRendererProps & Additi
   return (
     <div className={`${className || ''} d-flex flex-column align-items-center ${wide ? 'wider' : ''}`}>
       <ShowIf condition={content.length > maxLength}>
-        <Alert variant='danger' dir={'auto'}>
+        <Alert variant='danger' dir={'auto'} data-cy={'limitReachedMessage'}>
           <Trans i18nKey={'editor.error.limitReached.description'} values={{ maxLength }}/>
         </Alert>
       </ShowIf>

src/components/markdown-renderer/replace-components/sequence-diagram/deprecation-warning.tsx

@@ -14,7 +14,7 @@ export const DeprecationWarning: React.FC = () => {
   useTranslation()
 
   return (
-    <Alert className={'mt-2'} variant={'warning'}>
+    <Alert data-cy={'yaml'} className={'mt-2'} variant={'warning'}>
       <Trans i18nKey={'renderer.sequence.deprecationWarning'}/>
       &nbsp;
       <TranslatedExternalLink i18nKey={'common.readForMoreInfo'} className={'text-primary'} href={links.faq}/>

src/index.tsx

@@ -82,7 +82,7 @@ ReactDOM.render(
 )
 
 if (isTestMode()) {
-  console.log("This build runs in test mode")
+  console.log("This build runs in test mode. This means:\n - No default content in the editor")
 }
 
 // If you want your app to work offline and load faster, you can change