mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-29 06:15:29 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

Browse source 
* 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>
This commit is contained in:
Tilman Vatteroth 2021-10-17 21:20:23 +02:00 • committed by GitHub
parent 2abe40ef1d
commit a398660c18
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
48 changed files with 229 additions and 167 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker-button.tsx
View file

@ -11,6 +11,7 @@ import { useTranslation } from 'react-i18next'
import { ForkAwesomeIcon } from '../../../../common/fork-awesome/fork-awesome-icon'
import { addEmoji } from '../utils/toolbarButtonUtils'
import { EmojiPicker } from './emoji-picker'
import { cypressId } from '../../../../../utils/cypress-attribute'
export interface EmojiPickerButtonProps {
editor: CodeMirror.Editor
@ -31,7 +32,7 @@ export const EmojiPickerButton: React.FC<EmojiPickerButtonProps> = ({ editor })
onDismiss={() => setShowEmojiPicker(false)}
/>
<Button
data-cy={'show-emoji-picker'}
{...cypressId('show-emoji-picker')}
variant='light'
onClick={() => setShowEmojiPicker((old) => !old)}
title={t('editor.editorToolbar.emoji')}>

3
src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker-button.tsx
View file

@ -11,6 +11,7 @@ import { useTranslation } from 'react-i18next'
import { ForkAwesomeIcon } from '../../../../common/fork-awesome/fork-awesome-icon'
import { addTable } from '../utils/toolbarButtonUtils'
import { TablePicker } from './table-picker'
import { cypressId } from '../../../../../utils/cypress-attribute'
export interface TablePickerButtonProps {
editor: CodeMirror.Editor
@ -31,7 +32,7 @@ export const TablePickerButton: React.FC<TablePickerButtonProps> = ({ editor })
}}
/>
<Button
data-cy={'show-table-overlay'}
{...cypressId('show-table-overlay')}
variant='light'
onClick={() => setShowTablePicker((old) => !old)}
title={t('editor.editorToolbar.table.title')}>

3
src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.tsx
View file

@ -12,6 +12,7 @@ import { ForkAwesomeIcon } from '../../../../common/fork-awesome/fork-awesome-ic
import { createNumberRangeArray } from '../../../../common/number-range/number-range'
import { CustomTableSizeModal } from './custom-table-size-modal'
import './table-picker.scss'
import { cypressId } from '../../../../../utils/cypress-attribute'
export interface TablePickerProps {
show: boolean
@ -75,7 +76,7 @@ export const TablePicker: React.FC<TablePickerProps> = ({ show, onDismiss, onTab
)}
</div>
<div className='d-flex justify-content-center mt-2'>
<Button data-cy={'show-custom-table-modal'} className={'text-center'} onClick={() => setShowDialog(true)}>
<Button {...cypressId('show-custom-table-modal')} className={'text-center'} onClick={() => setShowDialog(true)}>
<ForkAwesomeIcon icon='table' />
&nbsp;{t('editor.editorToolbar.table.customSize')}
</Button>

35
src/components/editor-page/editor-pane/tool-bar/tool-bar.tsx
View file

@ -33,6 +33,7 @@ import {
superscriptSelection,
underlineSelection
} from './utils/toolbarButtonUtils'
import { cypressId } from '../../../../utils/cypress-attribute'
export interface ToolBarProps {
editor?: Editor
@ -49,42 +50,42 @@ export const ToolBar: React.FC<ToolBarProps> = ({ editor }) => {
<ButtonToolbar className='bg-light'>
<ButtonGroup className={'mx-1 flex-wrap'}>
<Button
data-cy={'format-bold'}
{...cypressId('format-bold')}
variant='light'
onClick={() => makeSelectionBold(editor)}
title={t('editor.editorToolbar.bold')}>
<ForkAwesomeIcon icon='bold' />
</Button>
<Button
data-cy={'format-italic'}
{...cypressId('format-italic')}
variant='light'
onClick={() => makeSelectionItalic(editor)}
title={t('editor.editorToolbar.italic')}>
<ForkAwesomeIcon icon='italic' />
</Button>
<Button
data-cy={'format-underline'}
{...cypressId('format-underline')}
variant='light'
onClick={() => underlineSelection(editor)}
title={t('editor.editorToolbar.underline')}>
<ForkAwesomeIcon icon='underline' />
</Button>
<Button
data-cy={'format-strikethrough'}
{...cypressId('format-strikethrough')}
variant='light'
onClick={() => strikeThroughSelection(editor)}
title={t('editor.editorToolbar.strikethrough')}>
<ForkAwesomeIcon icon='strikethrough' />
</Button>
<Button
data-cy={'format-subscript'}
{...cypressId('format-subscript')}
variant='light'
onClick={() => subscriptSelection(editor)}
title={t('editor.editorToolbar.subscript')}>
<ForkAwesomeIcon icon='subscript' />
</Button>
<Button
data-cy={'format-superscript'}
{...cypressId('format-superscript')}
variant='light'
onClick={() => superscriptSelection(editor)}
title={t('editor.editorToolbar.superscript')}>
@ -93,42 +94,42 @@ export const ToolBar: React.FC<ToolBarProps> = ({ editor }) => {
</ButtonGroup>
<ButtonGroup className={'mx-1 flex-wrap'}>
<Button
data-cy={'format-heading'}
{...cypressId('format-heading')}
variant='light'
onClick={() => addHeaderLevel(editor)}
title={t('editor.editorToolbar.header')}>
<ForkAwesomeIcon icon='header' />
</Button>
<Button
data-cy={'format-code-block'}
{...cypressId('format-code-block')}
variant='light'
onClick={() => addCodeFences(editor)}
title={t('editor.editorToolbar.code')}>
<ForkAwesomeIcon icon='code' />
</Button>
<Button
data-cy={'format-block-quote'}
{...cypressId('format-block-quote')}
variant='light'
onClick={() => addQuotes(editor)}
title={t('editor.editorToolbar.blockquote')}>
<ForkAwesomeIcon icon='quote-right' />
</Button>
<Button
data-cy={'format-unordered-list'}
{...cypressId('format-unordered-list')}
variant='light'
onClick={() => addList(editor)}
title={t('editor.editorToolbar.unorderedList')}>
<ForkAwesomeIcon icon='list' />
</Button>
<Button
data-cy={'format-ordered-list'}
{...cypressId('format-ordered-list')}
variant='light'
onClick={() => addOrderedList(editor)}
title={t('editor.editorToolbar.orderedList')}>
<ForkAwesomeIcon icon='list-ol' />
</Button>
<Button
data-cy={'format-check-list'}
{...cypressId('format-check-list')}
variant='light'
onClick={() => addTaskList(editor)}
title={t('editor.editorToolbar.checkList')}>
@ -137,14 +138,14 @@ export const ToolBar: React.FC<ToolBarProps> = ({ editor }) => {
</ButtonGroup>
<ButtonGroup className={'mx-1 flex-wrap'}>
<Button
data-cy={'format-link'}
{...cypressId('format-link')}
variant='light'
onClick={() => addLink(editor)}
title={t('editor.editorToolbar.link')}>
<ForkAwesomeIcon icon='link' />
</Button>
<Button
data-cy={'format-image'}
{...cypressId('format-image')}
variant='light'
onClick={() => addImage(editor)}
title={t('editor.editorToolbar.image')}>
@ -155,21 +156,21 @@ export const ToolBar: React.FC<ToolBarProps> = ({ editor }) => {
<ButtonGroup className={'mx-1 flex-wrap'}>
<TablePickerButton editor={editor} />
<Button
data-cy={'format-add-line'}
{...cypressId('format-add-line')}
variant='light'
onClick={() => addLine(editor)}
title={t('editor.editorToolbar.line')}>
<ForkAwesomeIcon icon='minus' />
</Button>
<Button
data-cy={'format-collapsable-block'}
{...cypressId('format-collapsable-block')}
variant='light'
onClick={() => addCollapsableBlock(editor)}
title={t('editor.editorToolbar.collapsableBlock')}>
<ForkAwesomeIcon icon='caret-square-o-down' />
</Button>
<Button
data-cy={'format-add-comment'}
{...cypressId('format-add-comment')}
variant='light'
onClick={() => addComment(editor)}
title={t('editor.editorToolbar.comment')}>