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

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/sidebar/document-info-sidebar-entry.tsx
View file

@ -9,6 +9,7 @@ import { Trans, useTranslation } from 'react-i18next'
import { DocumentInfoModal } from '../document-bar/document-info/document-info-modal'
import { SidebarButton } from './sidebar-button'
import type { SpecificSidebarEntryProps } from './types'
import { cypressId } from '../../../utils/cypress-attribute'
export const DocumentInfoSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ className, hide }) => {
const [showModal, setShowModal] = useState(false)
@ -21,7 +22,7 @@ export const DocumentInfoSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({
className={className}
icon={'line-chart'}
onClick={() => setShowModal(true)}
data-cy={'sidebar-btn-document-info'}>
{...cypressId('sidebar-btn-document-info')}>
<Trans i18nKey={'editor.modal.documentInfo.title'} />
</SidebarButton>
<DocumentInfoModal show={showModal} onHide={() => setShowModal(false)} />

3
src/components/editor-page/sidebar/export-markdown-sidebar-entry.tsx
View file

@ -11,6 +11,7 @@ import { Trans, useTranslation } from 'react-i18next'
import { download } from '../../common/download/download'
import { SidebarButton } from './sidebar-button'
import { useNoteMarkdownContent } from '../../../hooks/common/use-note-markdown-content'
import { cypressId } from '../../../utils/cypress-attribute'
export const ExportMarkdownSidebarEntry: React.FC = () => {
const { t } = useTranslation()
@ -21,7 +22,7 @@ export const ExportMarkdownSidebarEntry: React.FC = () => {
}, [markdownContent, t])
return (
<SidebarButton data-cy={'menu-export-markdown'} onClick={onClick} icon={'file-text'}>
<SidebarButton {...cypressId('menu-export-markdown')} onClick={onClick} icon={'file-text'}>
<Trans i18nKey={'editor.export.markdown-file'} />
</SidebarButton>
)

3
src/components/editor-page/sidebar/export-menu-sidebar-menu.tsx
View file

@ -12,6 +12,7 @@ import { SidebarButton } from './sidebar-button'
import { SidebarMenu } from './sidebar-menu'
import type { SpecificSidebarMenuProps } from './types'
import { DocumentSidebarMenuSelection } from './types'
import { cypressId } from '../../../utils/cypress-attribute'
export const ExportMenuSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
className,
@ -30,7 +31,7 @@ export const ExportMenuSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
return (
<Fragment>
<SidebarButton
data-cy={'menu-export'}
{...cypressId('menu-export')}
hide={hide}
icon={expand ? 'arrow-left' : 'cloud-download'}
className={className}

5
src/components/editor-page/sidebar/import-markdown-sidebar-entry.tsx
View file

@ -10,6 +10,7 @@ import { useNoteMarkdownContent } from '../../../hooks/common/use-note-markdown-
import { setNoteContent } from '../../../redux/note-details/methods'
import { SidebarButton } from './sidebar-button'
import { UploadInput } from './upload-input'
import { cypressId } from '../../../utils/cypress-attribute'
export const ImportMarkdownSidebarEntry: React.FC = () => {
const markdownContent = useNoteMarkdownContent()
@ -42,12 +43,12 @@ export const ImportMarkdownSidebarEntry: React.FC = () => {
return (
<Fragment>
<SidebarButton data-cy={'menu-import-markdown'} icon={'file-text-o'} onClick={buttonClick}>
<SidebarButton {...cypressId('menu-import-markdown')} icon={'file-text-o'} onClick={buttonClick}>
<Trans i18nKey={'editor.import.file'} />
</SidebarButton>
<UploadInput
onLoad={onImportMarkdown}
data-cy={'menu-import-markdown-input'}
{...cypressId('menu-import-markdown-input')}
acceptedFiles={'.md, text/markdown, text/plain'}
onClickRef={clickRef}
/>

3
src/components/editor-page/sidebar/import-menu-sidebar-menu.tsx
View file

@ -11,6 +11,7 @@ import { SidebarButton } from './sidebar-button'
import { SidebarMenu } from './sidebar-menu'
import type { SpecificSidebarMenuProps } from './types'
import { DocumentSidebarMenuSelection } from './types'
import { cypressId } from '../../../utils/cypress-attribute'
export const ImportMenuSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
className,
@ -29,7 +30,7 @@ export const ImportMenuSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
return (
<Fragment>
<SidebarButton
data-cy={'menu-import'}
{...cypressId('menu-import')}
hide={hide}
icon={expand ? 'arrow-left' : 'cloud-upload'}
className={className}

4
src/components/editor-page/sidebar/types.ts
View file

@ -7,6 +7,7 @@
import type { RefObject } from 'react'
import type { IconName } from '../../common/fork-awesome/types'
import type { SidebarEntryVariant } from './sidebar-button'
import type { PropsWithDataCypressId } from '../../../utils/cypress-attribute'
export interface SpecificSidebarEntryProps {
className?: string
@ -14,14 +15,13 @@ export interface SpecificSidebarEntryProps {
onClick?: () => void
}
export interface SidebarEntryProps {
export interface SidebarEntryProps extends PropsWithDataCypressId {
icon?: IconName
variant?: SidebarEntryVariant
buttonRef?: RefObject<HTMLButtonElement>
hide?: boolean
className?: string
onClick?: () => void
'data-cy'?: string
}
export interface SidebarMenuProps {

9
src/components/editor-page/sidebar/upload-input.tsx
View file

@ -7,14 +7,15 @@
import type { MutableRefObject } from 'react'
import React, { useCallback, useEffect, useRef } from 'react'
import { Logger } from '../../../utils/logger'
import type { PropsWithDataCypressId } from '../../../utils/cypress-attribute'
import { cypressId } from '../../../utils/cypress-attribute'
const log = new Logger('UploadInput')
export interface UploadInputProps {
export interface UploadInputProps extends PropsWithDataCypressId {
onLoad: (file: File) => Promise<void>
acceptedFiles: string
onClickRef: MutableRefObject<(() => void) | undefined>
'data-cy'?: string
}
export const UploadInput: React.FC<UploadInputProps> = ({ onLoad, acceptedFiles, onClickRef, ...props }) => {
@ -44,7 +45,5 @@ export const UploadInput: React.FC<UploadInputProps> = ({ onLoad, acceptedFiles,
onClickRef.current = onClick
})
return (
<input data-cy={props['data-cy']} type='file' ref={fileInputReference} className='d-none' accept={acceptedFiles} />
)
return <input {...cypressId(props)} type='file' ref={fileInputReference} className='d-none' accept={acceptedFiles} />
}