Adjust field name and test id for more clear

This commit is contained in:
lethemanh
2024-12-11 11:06:34 +07:00
parent 86e3661508
commit 6d3be1fa28
11 changed files with 55 additions and 54 deletions
@@ -87,7 +87,7 @@ export default class MenuComponent extends React.Component {
{typeof item.icon === 'string' ? <Icon type={item.icon} /> : item.icon}
</div>
)}
<div className={`text testid:menu-item-${item.id}`}>{item.text}</div>
<div className={`text testid:menu-item-${item.testClassId}`}>{item.text}</div>
</div>
);
} else if (item.type == 'react-element') {
@@ -135,7 +135,7 @@ export default class MenuComponent extends React.Component {
<Emojione type={item.emoji} />
</div>
)}
<div className={`text testid:menu-item-${item.id}`}>{item.text}</div>
<div className={`text testid:menu-item-${item.testClassId}`}>{item.text}</div>
<div className="more">
{item.rightIcon && <Icon type={item.rightIcon} />}
{item.submenu && !item.submenu_replace && <Icon type="angle-right" />}
@@ -63,7 +63,7 @@ export default class Menu extends React.Component {
this.props.menu,
elementRect,
this.props.position,
{},
undefined,
this.props.testClassId
);
this.setState({ isMenuOpen: true }, () => this.open = true);
@@ -210,7 +210,7 @@ export default class MenusBodyLayer extends React.Component {
: 'skew_in_right_nobounce'
: 'fade_in'
}
testClassId={item.dataMenuId}
testClassId={item.menuTestClassId}
/>
</div>
</OutsideClickHandler>
@@ -57,7 +57,7 @@ class MenusManager extends Observable {
this.notify();
}
async openMenu(menu, domRect, positionType, options, dataMenuId) {
async openMenu(menu, domRect, positionType, options, menuTestClassId) {
this.isOpen = 1;
if(typeof menu === 'function') {
menu = await menu();
@@ -85,7 +85,7 @@ class MenusManager extends Observable {
level: 0,
id: Number.unid(),
allowClickOut: options.allowClickOut !== undefined ? options.allowClickOut : true,
dataMenuId,
menuTestClassId,
});
this.last_opened_id = Number.unid();
this.notify();
@@ -38,7 +38,7 @@ export default (props: { driveItem: DriveItem & { user?: UserType }}) => {
return (
<div
className="flex items-center p-2 hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-md cursor-pointer"
className="flex items-center p-2 hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-md cursor-pointer testid:drive-item-result"
onClick={() => {history.push(RouterServices.generateRouteFromState({companyId: company, itemId: file.id})); openDoc(file)}}
>
<FileResultMedia file={file} className="w-16 h-16 mr-3" />
@@ -55,7 +55,7 @@ export default (props: { driveItem: DriveItem & { user?: UserType }}) => {
{extension?.toLocaleUpperCase()} {formatDate(parseInt(file?.last_modified))} {' '}
{formatSize(file?.size)}
</Text.Info>
<ResultContext user={file.user} />
<ResultContext user={file.user} testClassId="search-result-context" />
</div>
{!file.is_directory && (
<div
@@ -2,9 +2,10 @@
import UsersService from '@features/users/services/current-user-service';
import { UserType } from '@features/users/types/user';
export default ({ user }: { user?: UserType }) => {
export default ({ user, testClassId }: { user?: UserType; testClassId?: string }) => {
const testId = testClassId ? `testid:${testClassId}` : ''
return (
<div className="flex overflow-hidden whitespace-nowrap text-ellipsis testid:result-context">
<div className={`flex overflow-hidden whitespace-nowrap text-ellipsis ${testId}`}>
{!!user && <>{UsersService.getFullName(user)}</>}
</div>
);
@@ -375,7 +375,7 @@ export default memo(
buildFileTypeContextMenu(),
{ x: evt.clientX, y: evt.clientY },
'center',
{},
undefined,
"browser-share-with-me-menu-file-type"
);
}}
@@ -398,7 +398,7 @@ export default memo(
buildPeopleContextMen(),
{ x: evt.clientX, y: evt.clientY },
'center',
{},
undefined,
"browser-share-with-me-menu-people"
);
}}
@@ -418,7 +418,7 @@ export default memo(
buildDateContextMenu(),
{ x: evt.clientX, y: evt.clientY },
'center',
{},
undefined,
"browser-share-with-me-menu-last-modified"
);
}}
@@ -465,9 +465,9 @@ export default memo(
</Button>
</Menu>
{viewId !== 'shared_with_me' && (
<Menu menu={() => onBuildContextMenu(details)} testClassId="browser-menu-context">
<Menu menu={() => onBuildContextMenu(details)} testClassId="browser-menu-more">
{' '}
<Button theme="secondary" className="ml-4 flex flex-row items-center" testClassId="browser-button-context">
<Button theme="secondary" className="ml-4 flex flex-row items-center" testClassId="browser-button-more">
<span>
{selectedCount > 1
? `${selectedCount} items`
@@ -85,7 +85,7 @@ export const useOnBuildContextMenu = (
!FeatureTogglesService.isActiveFeatureName(FeatureNames.COMPANY_MANAGE_ACCESS);
const newMenuActions = [
{
id: 'share',
testClassId: 'share',
type: 'menu',
icon: 'share-alt',
text: Languages.t('components.item_context_menu.share'),
@@ -93,7 +93,7 @@ export const useOnBuildContextMenu = (
onClick: () => setPublicLinkModalState({ open: true, id: item.id }),
},
{
id: 'manage-access',
testClassId: 'manage-access',
type: 'menu',
icon: 'users-alt',
text: Languages.t('components.item_context_menu.manage_access'),
@@ -101,7 +101,7 @@ export const useOnBuildContextMenu = (
onClick: () => setAccessModalState({ open: true, id: item.id }),
},
{
id: 'rescan-document',
testClassId: 'rescan-document',
type: 'menu',
icon: 'shield-check',
text: Languages.t('components.item_context_menu.rescan_document'),
@@ -118,7 +118,7 @@ export const useOnBuildContextMenu = (
(notSafe && !(item.av_status === 'scan_failed')),
},
{
id: 'download',
testClassId: 'download',
type: 'menu',
icon: 'download-alt',
text: Languages.t('components.item_context_menu.download'),
@@ -145,7 +145,7 @@ export const useOnBuildContextMenu = (
}, // */
{ type: 'separator', hide: notSafe },
{
id: 'move',
testClassId: 'move',
type: 'menu',
icon: 'folder-question',
text: Languages.t('components.item_context_menu.move'),
@@ -171,7 +171,7 @@ export const useOnBuildContextMenu = (
}),
},
{
id: 'rename',
testClassId: 'rename',
type: 'menu',
icon: 'file-edit-alt',
text: Languages.t('components.item_context_menu.rename'),
@@ -179,7 +179,7 @@ export const useOnBuildContextMenu = (
onClick: () => setPropertiesModalState({ open: true, id: item.id, inPublicSharing }),
},
{
id: 'copy-link',
testClassId: 'copy-link',
type: 'menu',
icon: 'link',
text: Languages.t('components.item_context_menu.copy_link'),
@@ -196,7 +196,7 @@ export const useOnBuildContextMenu = (
},
},
{
id: 'version',
testClassId: 'version',
type: 'menu',
icon: 'history',
text: Languages.t('components.item_context_menu.versions'),
@@ -205,7 +205,7 @@ export const useOnBuildContextMenu = (
},
{ type: 'separator', hide: access !== 'manage' || inTrash || notSafe },
{
id: 'move-to-trash',
testClassId: 'move-to-trash',
type: 'menu',
icon: 'trash',
text: Languages.t('components.item_context_menu.move_to_trash'),
@@ -214,7 +214,7 @@ export const useOnBuildContextMenu = (
onClick: () => setConfirmTrashModalState({ open: true, items: [item] }),
},
{
id: 'restore',
testClassId: 'restore',
type: 'menu',
text: Languages.t('components.item_context_menu.restore'),
className: 'error',
@@ -225,7 +225,7 @@ export const useOnBuildContextMenu = (
},
},
{
id: 'delete',
testClassId: 'delete',
type: 'menu',
text: Languages.t('components.item_context_menu.delete'),
className: 'error',
@@ -242,7 +242,7 @@ export const useOnBuildContextMenu = (
// Add selected items related menus
const newMenuActions: any[] = [
{
id: 'move-multiple',
testClassId: 'move-multiple',
type: 'menu',
text: Languages.t('components.item_context_menu.move_multiple'),
hide: parent.access === 'read' || inTrash,
@@ -267,7 +267,7 @@ export const useOnBuildContextMenu = (
}),
},
{
id: 'download-multiple',
testClassId: 'download-multiple',
type: 'menu',
text: Languages.t('components.item_context_menu.download_multiple'),
hide: inTrash,
@@ -285,14 +285,14 @@ export const useOnBuildContextMenu = (
},
},
{
id: 'clear-selection',
testClassId: 'clear-selection',
type: 'menu',
text: Languages.t('components.item_context_menu.clear_selection'),
onClick: () => setChecked({}),
},
{ type: 'separator', hide: parent.access === 'read' || notSafe },
{
id: 'delete-multiple',
testClassId: 'delete-multiple',
type: 'menu',
text: Languages.t('components.item_context_menu.delete_multiple'),
hide: !inTrash || parent.access !== 'manage',
@@ -305,7 +305,7 @@ export const useOnBuildContextMenu = (
},
},
{
id: 'move-to-trash-multiple',
testClassId: 'move-to-trash-multiple',
type: 'menu',
text: Languages.t('components.item_context_menu.to_trash_multiple'),
hide: inTrash || parent.access !== 'manage',
@@ -326,7 +326,7 @@ export const useOnBuildContextMenu = (
const newMenuActions: any[] = inTrash
? [
{
id: 'empty-trash',
testClassId: 'empty-trash',
type: 'menu',
text: Languages.t('components.item_context_menu.trash.empty'),
className: 'error',
@@ -341,7 +341,7 @@ export const useOnBuildContextMenu = (
]
: [
{
id: 'add-documents',
testClassId: 'add-documents',
type: 'menu',
text: Languages.t('components.item_context_menu.add_documents'),
hide: inTrash || parent.access === 'read',
@@ -350,7 +350,7 @@ export const useOnBuildContextMenu = (
setUploadModalState({ open: true, parent_id: parent?.item?.id }),
},
{
id: 'download-folder',
testClassId: 'download-folder',
type: 'menu',
text: Languages.t('components.item_context_menu.download_folder'),
hide: inTrash,
@@ -368,7 +368,7 @@ export const useOnBuildContextMenu = (
},
},
{
id: 'copy-link',
testClassId: 'copy-link',
type: 'menu',
text: Languages.t('components.item_context_menu.copy_link'),
hide: !hasAnyPublicLinkAccess(item),
@@ -381,7 +381,7 @@ export const useOnBuildContextMenu = (
},
{ type: 'separator', hide: parent.item!.id != 'root' },
{
id: 'manage-users',
testClassId: 'manage-users',
type: 'menu',
text: Languages.t('components.item_context_menu.manage_users'),
hide: parent.item!.id != 'root',
@@ -440,7 +440,7 @@ export const useOnBuildFileTypeContextMenu = () => {
return useCallback(() => {
const menuItems = mimeTypes.map(item => {
return {
id: item.key,
testClassId: item.key,
type: 'menu',
text: item.key,
onClick: () => {
@@ -489,7 +489,7 @@ export const useOnBuildDateContextMenu = () => {
return useCallback(() => {
const menuItems = [
{
id: 'all-date',
testClassId: 'all-date',
type: 'menu',
text: Languages.t('components.item_context_menu.all'),
onClick: () => {
@@ -506,7 +506,7 @@ export const useOnBuildDateContextMenu = () => {
},
},
{
id: 'today',
testClassId: 'today',
type: 'menu',
text: Languages.t('components.item_context_menu.today'),
onClick: () => {
@@ -523,7 +523,7 @@ export const useOnBuildDateContextMenu = () => {
},
},
{
id: 'last-week',
testClassId: 'last-week',
type: 'menu',
text: Languages.t('components.item_context_menu.last_week'),
onClick: () => {
@@ -540,7 +540,7 @@ export const useOnBuildDateContextMenu = () => {
},
},
{
id: 'last-month',
testClassId: 'last-month',
type: 'menu',
text: Languages.t('components.item_context_menu.last_month'),
onClick: () => {
@@ -567,13 +567,13 @@ export const useOnBuildFileContextMenu = () => {
(item: DriveItem) => {
const menuItems = [
{
id: 'preview',
testClassId: 'preview',
type: 'menu',
text: Languages.t('components.item_context_menu.preview'),
onClick: () => preview(item),
},
{
id: 'download',
testClassId: 'download',
type: 'menu',
text: Languages.t('components.item_context_menu.download'),
onClick: () => {
@@ -592,7 +592,7 @@ export const useOnBuildSortContextMenu = () => {
return useCallback(() => {
const menuItems = [
{
id: 'sorting-by-date',
testClassId: 'sorting-by-date',
type: 'menu',
text: Languages.t('components.item_context_menu.sorting.by.date'),
icon: sortItem.by === 'date' ? 'check' : 'sort-check',
@@ -608,7 +608,7 @@ export const useOnBuildSortContextMenu = () => {
},
},
{
id: 'sorting-by-name',
testClassId: 'sorting-by-name',
type: 'menu',
text: Languages.t('components.item_context_menu.sorting.by.name'),
icon: sortItem.by === 'name' ? 'check' : 'sort-check',
@@ -623,7 +623,7 @@ export const useOnBuildSortContextMenu = () => {
},
},
{
id: 'sorting-by-size',
testClassId: 'sorting-by-size',
type: 'menu',
text: Languages.t('components.item_context_menu.sorting.by.size'),
icon: sortItem.by === 'size' ? 'check' : 'sort-check',
@@ -639,7 +639,7 @@ export const useOnBuildSortContextMenu = () => {
},
{type:"separator"},
{
id: 'sorting-order-asc',
testClassId: 'sorting-order-asc',
type: 'menu',
text: Languages.t('components.item_context_menu.sorting.order.asc'),
icon: sortItem.order === 'asc' ? 'check' : 'sort-check',
@@ -654,7 +654,7 @@ export const useOnBuildSortContextMenu = () => {
},
},
{
id: 'sorting-order-desc',
testClassId: 'sorting-order-desc',
type: 'menu',
text: Languages.t('components.item_context_menu.sorting.order.desc'),
icon: sortItem.order === 'desc' ? 'check' : 'sort-check',
@@ -28,7 +28,7 @@ export const ConfirmTrashModal = () => {
const [state, setState] = useRecoilState(ConfirmTrashModalAtom);
return (
<Modal className="confirm-trash-modal" open={state.open} onClose={() => setState({ ...state, open: false })}>
<Modal className="testid:confirm-trash-modal" open={state.open} onClose={() => setState({ ...state, open: false })}>
{!!state.items.length && <ConfirmTrashModalContent items={state.items} />}
</Modal>
);
@@ -23,13 +23,13 @@ export default (): JSX.Element => {
menu={[
// user name / email
{
id: 'username',
testClassId: 'username',
type: 'text',
className: "username",
text: currentUserService.getFullName(user),
},
{
id: 'email',
testClassId: 'email',
type: 'text',
text: user.email,
className: 'email',
@@ -38,7 +38,7 @@ export default (): JSX.Element => {
},
{ type: 'separator' },
{
id: 'account-setting',
testClassId: 'account-setting',
type: 'menu',
className: 'account-menu',
icon: <Icon type="user-circle" className="text-black dark:text-white" />,
@@ -49,7 +49,7 @@ export default (): JSX.Element => {
},
},
{
id: 'logout',
testClassId: 'logout',
type: 'menu',
className: 'account-menu',
icon: <Icon type="sign-out-alt" className="text-black dark:text-white" />,
@@ -53,7 +53,7 @@ const DiskUsage = () => {
<div style={{ width: used + '%',}} className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-yellow-500 testid:disk-usage-80-to-90"></div>
)}
<div style={{ width: (100 - used) + '%' }} className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-grey-500 testid:disk-usage-100"></div>
<div style={{ width: (100 - used) + '%' }} className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-grey-500 testid:disk-usage-free-space"></div>
</div>
{/*<div className="bg-blue-600 h-1.5 rounded-full dark:bg-blue-500" style={usedStyle}></div>*/}
<Base className="testid:disk-usage-text">