Add cypress id attribute only in test mode (#1566)

* Add function for test attribute

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

* Adjust components

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

* Fix naming of attribute

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

* Rename method

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

* Rename method, interface, attribute and use interface

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

* Lint and format fix

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

src/components/markdown-renderer/document-length-limit-reached-alert.tsx

@@ -8,6 +8,7 @@ import React from 'react'
 import { Alert } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import { useApplicationState } from '../../hooks/common/use-application-state'
+import { cypressId } from '../../utils/cypress-attribute'
 import { ShowIf } from '../common/show-if/show-if'
 import type { SimpleAlertProps } from '../common/simple-alert/simple-alert-props'
 
@@ -18,7 +19,7 @@ export const DocumentLengthLimitReachedAlert: React.FC<SimpleAlertProps> = ({ sh
 
   return (
     <ShowIf condition={show}>
-      <Alert variant='danger' dir={'auto'} data-cy={'limitReachedMessage'}>
+      <Alert variant='danger' dir={'auto'} {...cypressId('limitReachedMessage')}>
         <Trans i18nKey={'editor.error.limitReached.description'} values={{ maxLength }} />
       </Alert>
     </ShowIf>

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

@@ -9,6 +9,7 @@ import { Alert } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import { useIsDarkModeActivated } from '../../../../../hooks/common/use-is-dark-mode-activated'
 import { Logger } from '../../../../../utils/logger'
+import { cypressId } from '../../../../../utils/cypress-attribute'
 
 const log = new Logger('FlowChart')
 
@@ -60,6 +61,6 @@ export const FlowChart: React.FC<FlowChartProps> = ({ code }) => {
       </Alert>
     )
   } else {
-    return <div ref={diagramRef} data-cy={'flowchart'} className={'text-center'} />
+    return <div ref={diagramRef} {...cypressId('flowchart')} className={'text-center'} />
   }
 }

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

@@ -5,6 +5,7 @@
  */
 
 import React, { useCallback } from 'react'
+import { cypressId } from '../../../../utils/cypress-attribute'
 import './gist-frame.scss'
 import { useResizeGistFrame } from './use-resize-gist-frame'
 
@@ -31,7 +32,7 @@ export const GistFrame: React.FC<GistFrameProps> = ({ id }) => {
     <span>
       <iframe
         sandbox=''
-        data-cy={'gh-gist'}
+        {...cypressId('gh-gist')}
         width='100%'
         height={`${frameHeight}px`}
         frameBorder='0'

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

@@ -9,6 +9,7 @@ import { Alert } from 'react-bootstrap'
 import { ShowIf } from '../../../common/show-if/show-if'
 import { useFrontendBaseUrl } from '../../../../hooks/common/use-frontend-base-url'
 import { Logger } from '../../../../utils/logger'
+import { cypressId } from '../../../../utils/cypress-attribute'
 
 const log = new Logger('GraphvizFrame')
 
@@ -66,7 +67,7 @@ export const GraphvizFrame: React.FC<GraphvizFrameProps> = ({ code }) => {
       <ShowIf condition={!!error}>
         <Alert variant={'warning'}>{error}</Alert>
       </ShowIf>
-      <div className={'svg-container'} data-cy={'graphviz'} ref={container} />
+      <div className={'svg-container'} {...cypressId('graphviz')} ref={container} />
     </Fragment>
   )
 }

src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code.tsx

@@ -11,6 +11,7 @@ import { CopyToClipboardButton } from '../../../../common/copyable/copy-to-clipb
 import '../../../utils/button-inside.scss'
 import './highlighted-code.scss'
 import { Logger } from '../../../../../utils/logger'
+import { cypressId } from '../../../../../utils/cypress-attribute'
 
 const log = new Logger('HighlightedCode')
 
@@ -70,7 +71,7 @@ export const HighlightedCode: React.FC<HighlightedCodeProps> = ({ code, language
         {dom}
       </code>
       <div className={'text-right button-inside'}>
-        <CopyToClipboardButton content={code} data-cy='copy-code-button' />
+        <CopyToClipboardButton content={code} {...cypressId('copy-code-button')} />
       </div>
     </div>
   )

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

@@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next'
 import { LockButton } from '../../../common/lock-button/lock-button'
 import '../../utils/button-inside.scss'
 import { Logger } from '../../../../utils/logger'
+import { cypressId } from '../../../../utils/cypress-attribute'
 
 const log = new Logger('MarkmapFrame')
 
@@ -66,7 +67,7 @@ export const MarkmapFrame: React.FC<MarkmapFrameProps> = ({ code }) => {
   }, [code])
 
   return (
-    <div data-cy={'markmap'} className={'position-relative'}>
+    <div {...cypressId('markmap')} className={'position-relative'}>
       <div className={'svg-container'} ref={diagramContainer} />
       <div className={'text-right button-inside'}>
         <LockButton

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

@@ -8,13 +8,14 @@ import React from 'react'
 import { Alert } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import links from '../../../../links.json'
+import { cypressId } from '../../../../utils/cypress-attribute'
 import { TranslatedExternalLink } from '../../../common/links/translated-external-link'
 
 export const DeprecationWarning: React.FC = () => {
   useTranslation()
 
   return (
-    <Alert data-cy={'yaml'} className={'mt-2'} variant={'warning'}>
+    <Alert {...cypressId('yaml')} className={'mt-2'} variant={'warning'}>
       <span className={'text-wrap'}>
         <Trans i18nKey={'renderer.sequence.deprecationWarning'} />
       </span>