Cypress-IDs and prettier for tests (#1634)

* Add cy.getById method and run prettier

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

src/components/markdown-renderer/markdown-extension/abcjs/abc-frame.tsx

@@ -8,6 +8,7 @@ import React, { useEffect, useRef } from 'react'
 import './abc.scss'
 import { Logger } from '../../../../utils/logger'
 import type { CodeProps } from '../../replace-components/code-block-component-replacer'
+import { cypressId } from '../../../../utils/cypress-attribute'
 
 const log = new Logger('AbcFrame')
 
@@ -28,5 +29,5 @@ export const AbcFrame: React.FC<CodeProps> = ({ code }) => {
       })
   }, [code])
 
-  return <div ref={container} className={'abcjs-score bg-white text-black svg-container'} />
+  return <div ref={container} className={'abcjs-score bg-white text-black svg-container'} {...cypressId('abcjs')} />
 }

src/components/markdown-renderer/markdown-extension/csv/csv-table.tsx

@@ -6,6 +6,7 @@
 
 import React, { useMemo } from 'react'
 import { parseCsv } from './csv-parser'
+import { cypressId } from '../../../../utils/cypress-attribute'
 
 export interface CsvTableProps {
   code: string
@@ -63,7 +64,7 @@ export const CsvTable: React.FC<CsvTableProps> = ({
   )
 
   return (
-    <table className={'csv-html-table table-striped'}>
+    <table className={'csv-html-table table-striped'} {...cypressId('csv-html-table')}>
       {renderTableHeader}
       {renderTableBody}
     </table>

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

@@ -66,7 +66,7 @@ export const HighlightedCode: React.FC<HighlightedCodeProps> = ({ code, language
   }, [code, language, startLineNumber])
 
   return (
-    <div className={'code-highlighter'}>
+    <div className={'code-highlighter'} {...cypressId('highlighted-code-block')}>
       <code className={`hljs ${startLineNumber !== undefined ? 'showGutter' : ''} ${wrapLines ? 'wrapLines' : ''}`}>
         {dom}
       </code>

src/components/markdown-renderer/markdown-extension/plantuml/plantuml-markdown-extension.ts

@@ -7,8 +7,8 @@
 import { MarkdownExtension } from '../markdown-extension'
 import type MarkdownIt from 'markdown-it'
 import plantuml from 'markdown-it-plantuml'
-import type Renderer from 'markdown-it/lib/renderer'
 import type { RenderRule } from 'markdown-it/lib/renderer'
+import type Renderer from 'markdown-it/lib/renderer'
 import type Token from 'markdown-it/lib/token'
 import type { Options } from 'markdown-it/lib'
 import type { ComponentReplacer } from '../../replace-components/component-replacer'