test: add test ids to PTE toolbar component, fix failing ct test

sanity-io · Dec 19, 2023 · fcb0a10 · fcb0a10
1 parent 5fdc6ef
commit fcb0a10
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 18 deletions.
diff --git a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Toolbar.spec.tsx b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Toolbar.spec.tsx
@@ -17,11 +17,9 @@ test.describe('Portable Text Input', () => {
         // Adjust the viewport size to make the Inline Object button hidden
         await page.setViewportSize({width: 800, height: 1000})
 
-        const $contextMenuButton = $portableTextInput
-          .getByRole('button')
-          .locator('[data-sanity-icon="add"]')
+        const $contextMenuButton = $portableTextInput.getByTestId('insert-menu-button')
 
-        // Assertion: Check if the Add + button is showing
+        // Assertion: Check if the context menu button is showing
         await expect($contextMenuButton).toBeVisible()
 
         // Assertion: Check if the Inline Object button is now hidden

diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
@@ -7,6 +7,8 @@ import {
   usePortableTextEditorSelection,
 } from '@sanity/portable-text-editor'
 import {isKeySegment} from '@sanity/types'
+import {useTranslation} from 'react-i18next'
+import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
 import {CollapseMenu, CollapseMenuButton} from '../../../../components/collapseMenu'
 import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
 import {PTEToolbarAction, PTEToolbarActionGroup} from './types'
@@ -122,7 +124,11 @@ export const ActionMenu = memo(function ActionMenu(props: ActionMenuProps) {
   const menuButtonProps = useMemo(
     () => ({
       button: (
-        <ContextMenuButton disabled={disabled} tooltipProps={{placement: tooltipPlacement}} />
+        <ContextMenuButton
+          data-testid="action-menu-button"
+          disabled={disabled}
+          tooltipProps={{placement: tooltipPlacement}}
+        />
       ),
       popover: MENU_POPOVER_PROPS,
     }),

diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx
@@ -1,14 +1,12 @@
 import React, {memo, useCallback, useMemo} from 'react'
-import {AddIcon} from '@sanity/icons'
 import {PopoverProps} from '@sanity/ui'
 import {PortableTextEditor, usePortableTextEditor} from '@sanity/portable-text-editor'
 import {upperFirst} from 'lodash'
+import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
 import {useTranslation} from '../../../../i18n'
 import {CollapseMenu, CollapseMenuButton} from '../../../../components/collapseMenu'
-import {Button} from '../../../../../ui'
 import {BlockItem} from './types'
 import {useFocusBlock} from './hooks'
-import {ContextMenuButton} from '../../../../../ui/contextMenuButton'
 
 const CollapseMenuMemo = memo(CollapseMenu)
 
@@ -73,7 +71,11 @@ export const InsertMenu = memo(function InsertMenu(props: InsertMenuProps) {
   const menuButtonProps = useMemo(
     () => ({
       button: (
-        <ContextMenuButton disabled={disabled} tooltipProps={{placement: tooltipPlacement}} />
+        <ContextMenuButton
+          data-testid="insert-menu-button"
+          disabled={disabled}
+          tooltipProps={{placement: tooltipPlacement}}
+        />
       ),
       popover: MENU_POPOVER_PROPS,
     }),

diff --git a/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx b/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx
@@ -1,12 +1,5 @@
 import React from 'react'
-import {
-  CheckmarkCircleIcon,
-  UndoIcon,
-  EllipsisHorizontalIcon,
-  EditIcon,
-  TrashIcon,
-  LinkIcon,
-} from '@sanity/icons'
+import {CheckmarkCircleIcon, UndoIcon, EditIcon, TrashIcon, LinkIcon} from '@sanity/icons'
 import {
   MenuButtonProps,
   TooltipDelayGroupProvider,

diff --git a/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx b/packages/sanity/src/ui/contextMenuButton/ContextMenuButton.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-restricted-imports */
 import {EllipsisHorizontalIcon} from '@sanity/icons'
 import React, {HTMLProps, forwardRef} from 'react'
 import {Button, ButtonProps} from '../button'