@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/components/UTShortcutPanel/layout.js

@@ -1 +1,35 @@
-import React from"react";import{bool,func,string,refType}from"prop-types";import{iconPropTypes}from"../../types/iconTypes";import GroupingPanel from"./components/GroupingPanel";const UTShortcutPanel=_ref=>{let{children:children,containerRef:containerRef,dataTestId:dataTestId,handleTogglePanel:handleTogglePanel,iconProps:iconProps,open:open,panelTitle:panelTitle,position:position}=_ref;return React.createElement(React.Fragment,null,React.createElement(GroupingPanel,{containerRef:containerRef,dataTestId:dataTestId,iconProps:iconProps,onClose:handleTogglePanel,open:open,panelTitle:panelTitle,position:position}),children)};UTShortcutPanel.propTypes={containerRef:refType,dataTestId:string,handleTogglePanel:func,iconProps:iconPropTypes,open:bool,panelTitle:string,position:string};export default UTShortcutPanel;
+import React from 'react';
+import { bool, func, string, refType } from 'prop-types';
+import { iconPropTypes } from '../../types/iconTypes';
+import GroupingPanel from './components/GroupingPanel';
+const UTShortcutPanel = _ref => {
+  let {
+    children,
+    containerRef,
+    dataTestId,
+    handleTogglePanel,
+    iconProps,
+    open,
+    panelTitle,
+    position
+  } = _ref;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GroupingPanel, {
+    containerRef: containerRef,
+    dataTestId: dataTestId,
+    iconProps: iconProps,
+    onClose: handleTogglePanel,
+    open: open,
+    panelTitle: panelTitle,
+    position: position
+  }), children);
+};
+UTShortcutPanel.propTypes = {
+  containerRef: refType,
+  dataTestId: string,
+  handleTogglePanel: func,
+  iconProps: iconPropTypes,
+  open: bool,
+  panelTitle: string,
+  position: string
+};
+export default UTShortcutPanel;

package/dist/esm/components/UTShortcutPanel/stories/UTShortcutPanel.stories.js

@@ -0,0 +1,398 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useState } from 'react';
+import { fn } from '@storybook/test';
+import { joinArgTypes } from 'stories/utils';
+import UTBodyPlaceholder from '../../UTBodyPlaceholder';
+import UTShortcutPanel from '..';
+import { PANEL_POSITIONS } from '../constants';
+import { TEST_IDS } from '../../../constants/testIds';
+import propsSchema from './props.schema.json';
+import data from './constants.json';
+import styles from './styles.module.scss';
+import { UTShortcutPanelTests } from './tests';
+const {
+  filterGrouping
+} = TEST_IDS;
+export default {
+  args: {
+    categories: data.CATEGORIES,
+    categoriesConfig: data.CATEGORIES_CONFIG,
+    children: undefined,
+    classNames: undefined,
+    dataTestId: data.DATA_TEST_ID,
+    disableCollapsibleCategories: false,
+    handleSelectFilter: fn(),
+    hideAddFilterButton: false,
+    iconProps: undefined,
+    invalidParamsConfig: undefined,
+    noFiltersTitle: data.NO_FILTERS_TITLE,
+    noFiltersText: data.NO_FILTERS_TEXT,
+    onDeleteFilterGrouping: fn(),
+    onEditFilterGrouping: fn(),
+    onTogglePanel: fn(),
+    panelTitle: data.PANEL_TITLE,
+    position: data.POSITION,
+    searchResetKey: undefined,
+    selectedFilter: undefined,
+    scrollProps: undefined,
+    showActionsOnPinned: false,
+    startOpen: true,
+    tooltipsContentMap: data.TOOLTIPS_CONTENT_MAP
+  },
+  argTypes: {
+    categories: {
+      control: {
+        type: 'none'
+      },
+      description: 'Data necesaria para renderizar el contenido del panel',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'categoryType[]'
+        }
+      }
+    },
+    categoriesConfig: {
+      control: 'none',
+      description: 'Configuración de iconos y colores para el avatar de cada categoría',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Record<string, categoryConfigType>'
+        }
+      }
+    },
+    children: {
+      control: 'none',
+      description: 'Contenido wrappeado por el componente `UTShortcutPanel`.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'node'
+        }
+      }
+    },
+    classNames: {
+      control: 'none',
+      description: 'Clases personalizadas.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Record<string, string>'
+        }
+      }
+    },
+    classes: {
+      control: 'none',
+      description: 'Tema personalizado. Esta prop NO debería ser usada.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Record<string, string>'
+        }
+      }
+    },
+    dataTestId: {
+      control: 'text',
+      description: '`dataTestId` que se usará como base para generar los `ids` de los componentes internos.',
+      table: {
+        defaultValue: {
+          summary: filterGrouping.groupingPanel.collapsedPanelContent.expandButton
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    disableCollapsibleCategories: {
+      control: 'boolean',
+      description: 'Si es `true`, las categorías no se pueden colapsar.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    handleSelectFilter: {
+      action: 'hi',
+      control: 'none',
+      description: 'Función callback que se ejecuta cuando se selecciona un filtro.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Function'
+        }
+      }
+    },
+    hideAddFilterButton: {
+      control: 'boolean',
+      description: 'Si es `true`, el botón de agregar filtro no se muestra.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    iconProps: {
+      control: 'select',
+      options: ['default', 'IconX, gray, 18', 'IconHome, error, 30'],
+      mapping: {
+        default: undefined,
+        'IconX, gray, 18': {
+          name: 'IconX',
+          colorTheme: 'gray',
+          size: 18
+        },
+        'IconHome, error, 30': {
+          name: 'IconHome',
+          colorTheme: 'error',
+          size: 30
+        }
+      },
+      description: 'Props para renderizar un icono custom cuando el paner está cerrado.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'iconPropTypes'
+        }
+      }
+    },
+    invalidParamsConfig: {
+      control: 'object',
+      description: 'Configuración del ícono de advertencia que se muestra en ítems con `hasInvalidParams: true`. Si se pasa `tooltipText`, el ícono muestra un tooltip al hacer hover. `iconName` e `size` son opcionales (defaults: `IconAlertTriangle`, `16`).',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: '{ iconName?: string; size?: string; tooltipText?: string }'
+        }
+      }
+    },
+    noFiltersTitle: {
+      control: 'text',
+      description: 'Título para el componente de filtros vacíos.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    noFiltersText: {
+      control: 'text',
+      description: 'Texto para el componente de filtros vacíos.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    onDeleteFilterGrouping: {
+      control: 'none',
+      description: 'Función callback que se ejecuta cuando se presiona el botón de eliminar un filtro.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Function'
+        }
+      }
+    },
+    onEditFilterGrouping: {
+      control: 'none',
+      description: 'Función callback que se ejecuta cuando se presiona el botón de editar un filtro.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Function'
+        }
+      }
+    },
+    onTogglePanel: {
+      control: 'none',
+      description: 'Función callback que se ejecuta cuando se presiona el botón de toggle del panel.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Function'
+        }
+      }
+    },
+    panelTitle: {
+      control: 'text',
+      description: 'Título del panel.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    position: {
+      control: 'radio',
+      description: 'Posición del panel y la barra lateral.',
+      options: Object.values(PANEL_POSITIONS),
+      table: {
+        defaultValue: {
+          summary: 'left'
+        },
+        type: {
+          summary: joinArgTypes(Object.values(PANEL_POSITIONS))
+        }
+      }
+    },
+    scrollProps: {
+      control: 'none',
+      description: 'Props para el componente de scroll.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    searchResetKey: {
+      control: 'text',
+      description: 'Cuando cambia de valor, resetea el estado de búsqueda interna del panel. Útil para limpiar el input al cambiar de tab o categoría.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string | number'
+        }
+      }
+    },
+    selectedFilter: {
+      control: 'none',
+      description: 'Filtro seleccionado.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'filterType'
+        }
+      }
+    },
+    showActionsOnPinned: {
+      control: 'boolean',
+      description: 'Si es `true`, los botones de editar y eliminar se muestran también en ítems con `pinned: true`. Por defecto son ocultados en filtros pinned.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    startOpen: {
+      control: 'boolean',
+      description: 'Indica si el panel se renderiza abierto.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    tooltipsContentMap: {
+      control: 'none',
+      description: 'Mapa de contenido para los tooltips.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Record<string, string>'
+        }
+      }
+    }
+  },
+  component: UTShortcutPanel,
+  parameters: {
+    jsonschema: {
+      schema: propsSchema
+    },
+    controls: {
+      exclude: ['categories', 'categoriesConfig', 'children', 'classNames', 'classes', 'handleSelectFilter', 'onDeleteFilterGrouping', 'onEditFilterGrouping', 'onTogglePanel', 'scrollProps', 'selectedFilter', 'tooltipsContentMap']
+    },
+    docs: {
+      description: {
+        component: 'Panel de filtros rápidos, con búsqueda y acciones de edición y eliminación de filtros y categorías colapsables.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTShortcutPanel'
+};
+export const Playground = {
+  name: 'Playground',
+  parameters: {
+    backgrounds: {
+      default: 'Oscuro'
+    }
+  },
+  render: args => {
+    const [selectedFilter, setSelectedFilter] = useState(args.selectedFilter);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("section", {
+      className: styles.storyContainer
+    }, /*#__PURE__*/React.createElement(UTShortcutPanel, _extends({}, args, {
+      handleSelectFilter: filter => {
+        args.handleSelectFilter(filter);
+        setSelectedFilter(filter);
+      },
+      selectedFilter: selectedFilter
+    }), /*#__PURE__*/React.createElement("section", {
+      className: styles.defaultContainer
+    }, /*#__PURE__*/React.createElement(UTBodyPlaceholder, {
+      classNames: {
+        bodyPlaceholder: styles.bodyPlaceholder
+      }
+    })))), /*#__PURE__*/React.createElement("div", {
+      "data-testid": "testingShield"
+    }));
+  }
+};
+export const TestingSite = {
+  ...Playground,
+  name: 'Test Site',
+  play: UTShortcutPanelTests
+};

package/dist/esm/components/UTShortcutPanel/stories/fixtures.js

@@ -1 +1,154 @@
-import{expect,screen,userEvent}from"@storybook/test";import{ID_CONSTANTS}from"../../../constants/testIds";import constants from"./constants.json";import{delay}from"./utils";const{CLIENT_FILTER:CLIENT_FILTER,DELETE_BUTTON:DELETE_BUTTON,DELETE_BUTTON_TOOLTIP:DELETE_BUTTON_TOOLTIP,EDIT_BUTTON:EDIT_BUTTON,EDIT_BUTTON_TOOLTIP:EDIT_BUTTON_TOOLTIP,NAME:NAME,NAME_CONTAINER:NAME_CONTAINER,PINNED:PINNED,USER_FILTER:USER_FILTER}=ID_CONSTANTS,{MISC:MISC}=constants,{HOVERABLE_KEY:HOVERABLE_KEY,HOVERABLE_VALUE:HOVERABLE_VALUE,HTML_ELEMENTS:HTML_ELEMENTS}=MISC,{ARTICLE:ARTICLE,DIV:DIV}=HTML_ELEMENTS;export const filterItemsFixture=async _ref=>{let{args:args,canvas:canvas,category:category,existingIds:existingIds,filters:filters,step:step,suiteTitle:suiteTitle,testIds:testIds,tooltipsContentMap:tooltipsContentMap}=_ref;const{handleSelectFilter:handleSelectFilter,onDeleteFilterGrouping:onDeleteFilterGrouping,onEditFilterGrouping:onEditFilterGrouping}=args,{popperLabel:popperLabel,popperTitle:popperTitle}=testIds,{deleteButton:deleteButton,editButton:editButton}=tooltipsContentMap;await step(suiteTitle,async()=>{if(0!==filters.length)for(let index=0;index<filters.length;index++){const filter=filters[index],{description:description,name:itemName,pinned:pinned}=filter;await step("Item: ".concat(itemName),async()=>{const targetItemName=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(pinned?CLIENT_FILTER:USER_FILTER)&&id.includes(NAME)&&id.includes(index)&&!id.includes(NAME_CONTAINER)));await step("Initial content",async()=>{if(pinned){const targetPinnedIcon=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(PINNED)&&id.includes(index)));expect(targetPinnedIcon).toBeInTheDocument()}expect(targetItemName.innerText).toBe(itemName),expect(targetItemName).toBeInTheDocument()});const targetItemNameContainer=targetItemName.closest(ARTICLE),targetItemTitleContainer=targetItemName.closest(DIV);if(await step("Select item",async()=>{await userEvent.click(targetItemTitleContainer),expect(handleSelectFilter).toHaveBeenCalled(),expect(handleSelectFilter).toHaveBeenCalledWith(filter)}),!pinned){targetItemNameContainer.setAttribute(HOVERABLE_KEY,HOVERABLE_VALUE),await delay(500);const targetEditButton=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(USER_FILTER)&&id.includes(EDIT_BUTTON)&&id.includes(index))),targetDeleteButton=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(USER_FILTER)&&id.includes(DELETE_BUTTON)&&id.includes(index)));await step("Actions",async()=>{await step("Edit",async()=>{await userEvent.click(targetEditButton),expect(targetEditButton).toBeVisible(),expect(onEditFilterGrouping).toHaveBeenCalled(),expect(onEditFilterGrouping).toHaveBeenCalledWith(filter)}),await step("Delete",async()=>{await userEvent.click(targetDeleteButton),expect(targetDeleteButton).toBeVisible(),expect(onDeleteFilterGrouping).toHaveBeenCalled(),expect(onDeleteFilterGrouping).toHaveBeenCalledWith(filter)})})}await step("Hovers",async()=>{if((description||itemName.length>20)&&await step("Popper hover",async()=>{let targetPopperLabel;await userEvent.hover(targetItemName),await delay(500),description&&(targetPopperLabel=screen.getByTestId(popperLabel),expect(targetPopperLabel).toBeVisible(),expect(targetPopperLabel.innerText).toBe(description));const targetPopperTitle=screen.getByTestId(popperTitle);expect(targetPopperTitle).toBeVisible(),expect(targetPopperTitle.innerText).toBe(itemName),await userEvent.unhover(targetItemName),expect(targetPopperTitle).not.toBeVisible(),description&&expect(targetPopperLabel).not.toBeVisible()}),!pinned){const targetEditButton=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(USER_FILTER)&&id.includes(EDIT_BUTTON)&&id.includes(index))),targetDeleteButton=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(USER_FILTER)&&id.includes(DELETE_BUTTON)&&id.includes(index)));await step("Actions hover",async()=>{await step("Edit",async()=>{await userEvent.hover(targetEditButton),await delay(500);const targetEditButtonTooltip=screen.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(USER_FILTER)&&id.includes(EDIT_BUTTON_TOOLTIP)&&id.includes(index)));expect(targetEditButtonTooltip).toBeVisible(),expect(targetEditButtonTooltip.innerText).toBe(editButton),await userEvent.unhover(targetEditButton),await delay(500),expect(targetEditButtonTooltip).not.toBeVisible()}),await step("Delete",async()=>{await userEvent.hover(targetDeleteButton),await delay(500);const targetDeleteButtonTooltip=screen.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(USER_FILTER)&&id.includes(DELETE_BUTTON_TOOLTIP)&&id.includes(index)));expect(targetDeleteButtonTooltip).toBeVisible(),expect(targetDeleteButtonTooltip.innerText).toBe(deleteButton),await userEvent.unhover(targetDeleteButton),await delay(500),expect(targetDeleteButtonTooltip).not.toBeVisible()})})}}),targetItemNameContainer.removeAttribute(HOVERABLE_KEY)})}})};
+import { expect, screen, userEvent } from '@storybook/test';
+import { ID_CONSTANTS } from '../../../constants/testIds';
+import constants from './constants.json';
+import { delay } from './utils';
+const {
+  CLIENT_FILTER,
+  DELETE_BUTTON,
+  DELETE_BUTTON_TOOLTIP,
+  EDIT_BUTTON,
+  EDIT_BUTTON_TOOLTIP,
+  NAME,
+  NAME_CONTAINER,
+  PINNED,
+  USER_FILTER
+} = ID_CONSTANTS;
+const {
+  MISC
+} = constants;
+const {
+  HOVERABLE_KEY,
+  HOVERABLE_VALUE,
+  HTML_ELEMENTS
+} = MISC;
+const {
+  ARTICLE,
+  DIV
+} = HTML_ELEMENTS;
+export const filterItemsFixture = async _ref => {
+  let {
+    args,
+    canvas,
+    category,
+    existingIds,
+    filters,
+    step,
+    suiteTitle,
+    testIds,
+    tooltipsContentMap
+  } = _ref;
+  const {
+    handleSelectFilter,
+    onDeleteFilterGrouping,
+    onEditFilterGrouping
+  } = args;
+  const {
+    popperLabel,
+    popperTitle
+  } = testIds;
+  const {
+    deleteButton,
+    editButton
+  } = tooltipsContentMap;
+  await step(suiteTitle, async () => {
+    if (filters.length === 0) {
+      return;
+    }
+    for (let index = 0; index < filters.length; index++) {
+      const filter = filters[index];
+      const {
+        description,
+        name: itemName,
+        pinned
+      } = filter;
+      // eslint-disable-next-line no-await-in-loop
+      await step("Item: ".concat(itemName), async () => {
+        const targetItemName = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(pinned ? CLIENT_FILTER : USER_FILTER) && id.includes(NAME) && id.includes(index) && !id.includes(NAME_CONTAINER)));
+        await step('Initial content', async () => {
+          if (pinned) {
+            const targetPinnedIcon = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(PINNED) && id.includes(index)));
+            expect(targetPinnedIcon).toBeInTheDocument();
+          }
+          expect(targetItemName.innerText).toBe(itemName);
+          expect(targetItemName).toBeInTheDocument();
+        });
+        const targetItemNameContainer = targetItemName.closest(ARTICLE);
+        const targetItemTitleContainer = targetItemName.closest(DIV);
+        await step('Select item', async () => {
+          await userEvent.click(targetItemTitleContainer);
+          expect(handleSelectFilter).toHaveBeenCalled();
+          expect(handleSelectFilter).toHaveBeenCalledWith(filter);
+        });
+        if (!pinned) {
+          targetItemNameContainer.setAttribute(HOVERABLE_KEY, HOVERABLE_VALUE);
+          await delay(500);
+          const targetEditButton = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(USER_FILTER) && id.includes(EDIT_BUTTON) && id.includes(index)));
+          const targetDeleteButton = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(USER_FILTER) && id.includes(DELETE_BUTTON) && id.includes(index)));
+          await step('Actions', async () => {
+            await step('Edit', async () => {
+              await userEvent.click(targetEditButton);
+              expect(targetEditButton).toBeVisible();
+              expect(onEditFilterGrouping).toHaveBeenCalled();
+              expect(onEditFilterGrouping).toHaveBeenCalledWith(filter);
+            });
+            await step('Delete', async () => {
+              await userEvent.click(targetDeleteButton);
+              expect(targetDeleteButton).toBeVisible();
+              expect(onDeleteFilterGrouping).toHaveBeenCalled();
+              expect(onDeleteFilterGrouping).toHaveBeenCalledWith(filter);
+            });
+          });
+        }
+        await step('Hovers', async () => {
+          if (description || itemName.length > 20) {
+            await step('Popper hover', async () => {
+              await userEvent.hover(targetItemName);
+              await delay(500);
+              let targetPopperLabel;
+              if (description) {
+                targetPopperLabel = screen.getByTestId(popperLabel);
+                expect(targetPopperLabel).toBeVisible();
+                expect(targetPopperLabel.innerText).toBe(description);
+              }
+              const targetPopperTitle = screen.getByTestId(popperTitle);
+              expect(targetPopperTitle).toBeVisible();
+              expect(targetPopperTitle.innerText).toBe(itemName);
+              await userEvent.unhover(targetItemName);
+              expect(targetPopperTitle).not.toBeVisible();
+              if (description) {
+                expect(targetPopperLabel).not.toBeVisible();
+              }
+            });
+          }
+          if (!pinned) {
+            const targetEditButton = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(USER_FILTER) && id.includes(EDIT_BUTTON) && id.includes(index)));
+            const targetDeleteButton = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(USER_FILTER) && id.includes(DELETE_BUTTON) && id.includes(index)));
+            await step('Actions hover', async () => {
+              await step('Edit', async () => {
+                await userEvent.hover(targetEditButton);
+                await delay(500);
+                const targetEditButtonTooltip = screen.getByTestId(existingIds.find(id => id.includes(category) && id.includes(USER_FILTER) && id.includes(EDIT_BUTTON_TOOLTIP) && id.includes(index)));
+                expect(targetEditButtonTooltip).toBeVisible();
+                expect(targetEditButtonTooltip.innerText).toBe(editButton);
+                await userEvent.unhover(targetEditButton);
+                await delay(500);
+                expect(targetEditButtonTooltip).not.toBeVisible();
+              });
+              await step('Delete', async () => {
+                await userEvent.hover(targetDeleteButton);
+                await delay(500);
+                const targetDeleteButtonTooltip = screen.getByTestId(existingIds.find(id => id.includes(category) && id.includes(USER_FILTER) && id.includes(DELETE_BUTTON_TOOLTIP) && id.includes(index)));
+                expect(targetDeleteButtonTooltip).toBeVisible();
+                expect(targetDeleteButtonTooltip.innerText).toBe(deleteButton);
+                await userEvent.unhover(targetDeleteButton);
+                await delay(500);
+                expect(targetDeleteButtonTooltip).not.toBeVisible();
+              });
+            });
+          }
+        });
+        targetItemNameContainer.removeAttribute(HOVERABLE_KEY);
+      });
+    }
+  });
+};