eduvia/workavia-drive
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add more test id to elements based on test case e2e

Browse Source
This commit is contained in:
lethemanh
2024-12-10 21:59:55 +07:00
parent 217e683269
commit 86e3661508
36 changed files with 128 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tdrive/frontend/src/app/components/buttons/button.jsx
+4 -1
View File
@@ -23,11 +23,14 @@ export default class Button extends React.Component {
) {
className += ' small';
}
const testId = this.props.testClassId ? `testid:${this.props.testClassId}` : '';
return (
<button
ref={this.props.refButton}
{...this.props}
className={'button no-tw ' + className + ` testid:${this.props.testClassId}`}
className={'button no-tw ' + className + ' ' + testId}
onClick={evt => {
evt.target.blur();
this.props.onClick && this.props.onClick(evt);
tdrive/frontend/src/app/components/file-uploads/pending-file-components/pending-file-row.tsx
+5 -1
View File
@@ -58,6 +58,7 @@ export default ({ pendingFileState, pendingFile }: PropsType) => {
}}
>
<Row
className="testid:pending-files-row"
justify="space-between"
align="middle"
wrap={false}
@@ -75,6 +76,7 @@ export default ({ pendingFileState, pendingFile }: PropsType) => {
maxWidth: isPendingFileStatusPause(pendingFile.status) ? 130 : 160,
verticalAlign: 'middle',
}}
className="testid:pending-file-name"
>
{capitalize(pendingFile?.originalFile.name)}
</Text>
@@ -156,6 +158,7 @@ export default ({ pendingFileState, pendingFile }: PropsType) => {
alignItems: 'center',
justifyContent: 'center',
}}
className="testid:pending-file-button-status"
/>
</Tooltip>
) : (
@@ -191,6 +194,7 @@ export default ({ pendingFileState, pendingFile }: PropsType) => {
icon={<Trash2 size={16} color={'var(--black)'} />}
onClick={() => cancelUpload(pendingFileState.id)}
style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
className="testid:pending-file-button-cancel"
/>
</Tooltip>
) : (
@@ -198,7 +202,7 @@ export default ({ pendingFileState, pendingFile }: PropsType) => {
)}
</Col>
</Row>
<div className="file-progress-bar-container">
<div className="file-progress-bar-container testid:pending-file-progress-bar">
<Progress
type="line"
className="file-progress-bar"
tdrive/frontend/src/app/components/inputs/input.jsx
+3 -1
View File
@@ -63,6 +63,8 @@ export default class Input extends Component {
);
}
const testId = this.props.testClassId ? `testid:${this.props.testClassId}` : '';
return (
<input
ref={node => {
@@ -76,7 +78,7 @@ export default class Input extends Component {
}
this.onKeyDown(evt);
}}
className={'input ' + (className || '') + ` testid:${this.props.testClassId}`}
className={'input ' + (className || '') + ' ' + testId}
onBlur={this.props.onBlur}
onChange={this.props.onChange}
/>
tdrive/frontend/src/app/components/menus/menu-component.jsx
+7 -6
View File
@@ -58,7 +58,7 @@ export default class MenuComponent extends React.Component {
ref={node => (this.original_menu = node)}
className={
'menu-list ' + (this.props.withFrame ? 'as_frame text-black bg-white dark:bg-zinc-900 dark:text-white rounded-lg ' : '') + this.props.animationClass + ' ' +
`testid:${this.props.testClassId}`
`${this.props.testClassId ? `testid:${this.props.testClassId}` : ''}`
}
>
{(this.props.menu || [])
@@ -77,7 +77,7 @@ export default class MenuComponent extends React.Component {
<div
key={'menu_' + index}
ref={node => (item.ref = node)}
className={'menu-text ' + item.className}
className={'menu-text ' + item.className + ' testid:menu-item'}
onMouseEnter={evt => {
this.hoverMenu(item.ref, item);
}}
@@ -87,14 +87,14 @@ export default class MenuComponent extends React.Component {
{typeof item.icon === 'string' ? <Icon type={item.icon} /> : item.icon}
</div>
)}
<div className="text">{item.text}</div>
<div className={`text testid:menu-item-${item.id}`}>{item.text}</div>
</div>
);
} else if (item.type == 'react-element') {
return (
<div
key={'menu_' + index}
className={'menu-custom ' + item.className}
className={'menu-custom ' + item.className + ' testid:menu-item'}
onClick={item.onClick}
>
{typeof item.reactElement == 'function'
@@ -115,7 +115,8 @@ export default class MenuComponent extends React.Component {
this.last_hovered == item
? 'hovered '
: '') +
(item.selected ? 'selected ' : '')
(item.selected ? 'selected ' : '') +
' testid:menu-item'
}
onMouseEnter={evt => {
this.hoverMenu(item.ref, item);
@@ -134,7 +135,7 @@ export default class MenuComponent extends React.Component {
<Emojione type={item.emoji} />
</div>
)}
<div className="text">{item.text}</div>
<div className={`text testid:menu-item-${item.id}`}>{item.text}</div>
<div className="more">
{item.rightIcon && <Icon type={item.rightIcon} />}
{item.submenu && !item.submenu_replace && <Icon type="angle-right" />}
tdrive/frontend/src/app/components/search-popup/parts/drive-item-result.tsx
+2 -1
View File
@@ -51,7 +51,7 @@ export default (props: { driveItem: DriveItem & { user?: UserType }}) => {
textToHighlight={name}
/>
</Text.Base>
<Text.Info className="block">
<Text.Info className="block testid:drive-item-file">
{extension?.toLocaleUpperCase()} • {formatDate(parseInt(file?.last_modified))} •{' '}
{formatSize(file?.size)}
</Text.Info>
@@ -69,6 +69,7 @@ export default (props: { driveItem: DriveItem & { user?: UserType }}) => {
theme="outline"
className="w-9 !p-0 flex items-center justify-center ml-2 rounded-full border-none"
onClick={() => onDriveItemDownloadClick(file)}
testClassId="drive-item-button-download"
>
<DownloadIcon className="text-blue-500 w-6 h-6" />
</Button>
tdrive/frontend/src/app/components/search-popup/parts/result-context.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import { UserType } from '@features/users/types/user';
export default ({ user }: { user?: UserType }) => {
return (
<div className="flex overflow-hidden whitespace-nowrap text-ellipsis">
<div className="flex overflow-hidden whitespace-nowrap text-ellipsis testid:result-context">
{!!user && <>{UsersService.getFullName(user)}</>}
</div>
);
tdrive/frontend/src/app/components/search-popup/search-input.tsx
+1
View File
@@ -38,6 +38,7 @@ export const SearchInput = () => {
value={input.query}
className={className}
placeholder={Languages.t('scenes.app.mainview.quick_search_placeholder')}
testClassId="search-input-quick-search"
/>
)}
/>
tdrive/frontend/src/app/components/search-popup/search-popup.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ export default () => {
const { open, setOpen } = useSearchModal();
return (
<Modal open={open} onClose={() => setOpen(false)} className="sm:w-[80vw] sm:max-w-4xl">
<Modal open={open} onClose={() => setOpen(false)} className="sm:w-[80vw] sm:max-w-4xl testid:search-popup">
<SearchBox/>
</Modal>
);
tdrive/frontend/src/app/components/search-popup/tabs/drive.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ export default () => {
return (
<div>
{!!isRecent && (
<Text.Subtitle className="block">
<Text.Subtitle className="block testid:drive-recent-files">
{Languages.t('components.searchpopup.recent_files')}
</Text.Subtitle>
)}
tdrive/frontend/src/app/components/uploads/upload-zone.tsx
+1 -1
View File
@@ -191,7 +191,7 @@ export default class UploadZone extends React.Component<PropsType, StateType> {
<div
ref={node => node && (this.node = node)}
style={this.props.style}
className={classNames('upload_drop_zone', this.props.className, `testid:${this.props.testClassId}`)}
className={classNames('upload_drop_zone', this.props.className, this.props.testClassId ? `testid:${this.props.testClassId}` : '')}
onClick={() => {
if (!this.props.disableClick) {
this.open();