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>
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

View file

@ -10,12 +10,13 @@ import type { Variant } from 'react-bootstrap/types'
import { useTranslation } from 'react-i18next'
import { ForkAwesomeIcon } from '../../fork-awesome/fork-awesome-icon'
import { CopyOverlay } from '../copy-overlay'
import type { PropsWithDataCypressId } from '../../../../utils/cypress-attribute'
import { cypressId } from '../../../../utils/cypress-attribute'
export interface CopyToClipboardButtonProps {
export interface CopyToClipboardButtonProps extends PropsWithDataCypressId {
content: string
size?: 'sm' | 'lg'
variant?: Variant
'data-cy'?: string
}
export const CopyToClipboardButton: React.FC<CopyToClipboardButtonProps> = ({
@ -34,7 +35,7 @@ export const CopyToClipboardButton: React.FC<CopyToClipboardButtonProps> = ({
size={size}
variant={variant}
title={t('renderer.highlightCode.copyCode')}
data-cy={props['data-cy']}>
{...cypressId(props)}>
<ForkAwesomeIcon icon='files-o' />
</Button>
<CopyOverlay content={content} clickComponent={button} />

View file

@ -10,8 +10,10 @@ import { Trans, useTranslation } from 'react-i18next'
import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
import type { IconName } from '../fork-awesome/types'
import { ShowIf } from '../show-if/show-if'
import type { PropsWithDataCypressId } from '../../../utils/cypress-attribute'
import { cypressId } from '../../../utils/cypress-attribute'
export interface CommonModalProps {
export interface CommonModalProps extends PropsWithDataCypressId {
show: boolean
onHide?: () => void
titleI18nKey?: string
@ -20,7 +22,6 @@ export interface CommonModalProps {
icon?: IconName
size?: 'lg' | 'sm' | 'xl'
additionalClasses?: string
'data-cy'?: string
}
export const CommonModal: React.FC<CommonModalProps> = ({
@ -39,7 +40,7 @@ export const CommonModal: React.FC<CommonModalProps> = ({
return (
<Modal
data-cy={props['data-cy']}
{...cypressId(props)}
show={show}
onHide={onHide}
animation={true}

View file

@ -10,6 +10,7 @@ import { CommonModal } from '../modals/common-modal'
import { Trans, useTranslation } from 'react-i18next'
import { useApplicationState } from '../../../hooks/common/use-application-state'
import { dismissMotd } from '../../../redux/motd/methods'
import { cypressId } from '../../../utils/cypress-attribute'
/**
* Reads the motd from the global application state and shows it in a modal.
@ -47,10 +48,10 @@ export const MotdModal: React.FC = () => {
return null
} else {
return (
<CommonModal data-cy={'motd'} show={!!motdState} titleI18nKey={'motd.title'}>
<CommonModal {...cypressId('motd')} show={!!motdState} titleI18nKey={'motd.title'}>
<Modal.Body>{domContent}</Modal.Body>
<Modal.Footer>
<Button variant={'success'} onClick={dismiss} data-cy={'motd-dismiss'}>
<Button variant={'success'} onClick={dismiss} {...cypressId('motd-dismiss')}>
<Trans i18nKey={'common.dismiss'} />
</Button>
</Modal.Footer>