@widergy/energy-ui 3.172.1 → 3.172.3

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

@@ -1,35 +1 @@
-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;
+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;

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

@@ -1,154 +1 @@
-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);
-      });
-    }
-  });
-};
+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)})}})};

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

@@ -1,242 +1 @@
-/* eslint-disable no-await-in-loop */
-/* eslint-disable no-restricted-syntax */
-
-import { expect, screen, userEvent, within } from '@storybook/test';
-import { ID_CONSTANTS } from '../../../constants/testIds';
-import constants from './constants.json';
-import { createExistingIds, delay, idBelongsToCollapsedItem, idBelongsToHoverableItem, idBelongsToNonStartItem } from './utils';
-import { filterItemsFixture } from './fixtures';
-const {
-  AVATAR,
-  CLIENT_FILTER,
-  COLLAPSE_BUTTON,
-  DESCRIPTION,
-  EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY,
-  ICON,
-  LABEL,
-  NAME,
-  NAME_CONTAINER,
-  PERSISTENT_FILTER,
-  TITLE
-} = ID_CONSTANTS;
-const {
-  CATEGORIES,
-  MISC,
-  TEST_IDS,
-  TOOLTIPS_CONTENT_MAP
-} = constants;
-const {
-  HOVERABLE_KEY,
-  HOVERABLE_VALUE,
-  HTML_ELEMENTS,
-  SEARCH_STRING,
-  SHIELD_KEY,
-  SHIELD_VALUE,
-  TESTING_SHIELD
-} = MISC;
-const {
-  HEADER
-} = HTML_ELEMENTS;
-const {
-  expandButton,
-  headerCollapseButton,
-  headerCollapseButtonTooltip,
-  headerSearchButton,
-  headerSearchButtonTooltip,
-  headerSearchField,
-  headerSearchFieldCustomAction,
-  headerTitle
-} = TEST_IDS;
-export const UTShortcutPanelTests = async _ref => {
-  let {
-    args,
-    canvasElement,
-    step
-  } = _ref;
-  const testingShield = screen.getByTestId(TESTING_SHIELD);
-  testingShield.setAttribute(SHIELD_KEY, SHIELD_VALUE);
-  const existingIds = createExistingIds(CATEGORIES, TEST_IDS);
-  const canvas = within(canvasElement);
-  await delay(500);
-  await step('Verify initial state', async () => {
-    const filteredIds = [...existingIds].filter(id => !idBelongsToHoverableItem(id) && !idBelongsToCollapsedItem(id) && !idBelongsToNonStartItem(id));
-    for (const id of filteredIds) {
-      const element = canvas.getByTestId(id);
-      expect(element).toBeInTheDocument();
-    }
-  });
-  await step('Header', async () => {
-    const title = canvas.getByTestId(headerTitle);
-    const hoverableParent = title.closest(HEADER);
-    hoverableParent.setAttribute(HOVERABLE_KEY, HOVERABLE_VALUE);
-    await delay(500);
-    await step('Hovers', async () => {
-      const searchTargetElement = canvas.getByTestId(headerSearchButton);
-      const collapseTargetElement = canvas.getByTestId(headerCollapseButton);
-      await step('Main hover', async () => {
-        await expect(searchTargetElement).toBeVisible();
-        await expect(collapseTargetElement).toBeVisible();
-      });
-      await step('Actions Hover', async () => {
-        await step('Search', async () => {
-          await userEvent.hover(searchTargetElement);
-          await delay(500);
-          const searchTargetTooltip = canvas.getByTestId(headerSearchButtonTooltip);
-          await expect(searchTargetTooltip).toBeVisible();
-          await userEvent.unhover(searchTargetElement);
-        });
-        await step('Collapse', async () => {
-          await userEvent.hover(collapseTargetElement);
-          await delay(500);
-          const collapseTargetTooltip = canvas.getByTestId(headerCollapseButtonTooltip);
-          await expect(collapseTargetTooltip).toBeVisible();
-          await userEvent.unhover(collapseTargetElement);
-        });
-      });
-    });
-    await step('Actions', async () => {
-      await step('Search action', async () => {
-        const randomFilterId = existingIds.find(id => id.includes(CLIENT_FILTER) && id.includes(NAME));
-        const targetClientFilter = canvas.getByTestId(randomFilterId);
-        const targetClientFilterText = targetClientFilter.innerText;
-        const searchTargetElement = canvas.getByTestId(headerSearchButton);
-        await userEvent.click(searchTargetElement);
-        const targetField = canvas.getByTestId(headerSearchField);
-        expect(targetField).toBeVisible();
-        await userEvent.type(targetField, SEARCH_STRING);
-        await delay(500);
-        expect(targetClientFilter).not.toBeInTheDocument();
-        await userEvent.clear(targetField);
-        await userEvent.type(targetField, targetClientFilterText);
-        expect(canvas.getByTestId(randomFilterId)).toBeInTheDocument();
-        const customAction = canvas.getByTestId(headerSearchFieldCustomAction);
-        await userEvent.click(customAction);
-        expect(targetField).not.toBeInTheDocument();
-        expect(canvas.getByTestId(randomFilterId)).toBeInTheDocument();
-      });
-      await step('Collapse action', async () => {
-        const collapseTargetElement = canvas.getByTestId(headerCollapseButton);
-        await userEvent.click(collapseTargetElement);
-        const targetExpandButton = canvas.getByTestId(expandButton);
-        expect(targetExpandButton).toBeInTheDocument();
-      });
-    });
-    hoverableParent.removeAttribute(HOVERABLE_KEY);
-  });
-  await step('Collapsed panel', async () => {
-    const targetExpandButton = canvas.getByTestId(expandButton);
-    await step('Content exists', async () => {
-      expect(targetExpandButton).toBeInTheDocument();
-    });
-    await step('Action', async () => {
-      await userEvent.click(targetExpandButton);
-      await delay(500);
-      const collapseButton = canvas.getByTestId(headerCollapseButton);
-      expect(targetExpandButton).not.toBeInTheDocument();
-      expect(collapseButton).toBeInTheDocument();
-    });
-  });
-  for (const {
-    category,
-    filters,
-    name
-  } of CATEGORIES) {
-    await step("Category: ".concat(category), async () => {
-      await step('Header', async () => {
-        const targetAvatar = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(AVATAR)));
-        const targetTitle = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(LABEL)));
-        const targetAvatarParent = targetAvatar.closest(HEADER);
-        await step('Initial content', async () => {
-          expect(targetAvatar).toBeInTheDocument();
-          expect(targetTitle.innerText).toBe(name);
-          expect(targetTitle).toBeInTheDocument();
-        });
-        userEvent.hover(targetAvatarParent);
-        await delay(500);
-        const targetCollapseCategoryButton = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(COLLAPSE_BUTTON)));
-        await step('Category hover', async () => {
-          expect(targetCollapseCategoryButton).toBeInTheDocument();
-        });
-        await step('Category collapse', async () => {
-          await userEvent.click(targetCollapseCategoryButton);
-          const targetUserFilter = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(CLIENT_FILTER) && id.includes(NAME)));
-          await delay(500);
-          expect(targetUserFilter).not.toBeVisible();
-          await userEvent.click(targetCollapseCategoryButton);
-          await delay(500);
-          expect(targetUserFilter).toBeVisible();
-        });
-        userEvent.unhover(targetAvatarParent);
-      });
-      const clientFilters = filters.filter(_ref2 => {
-        let {
-          pinned
-        } = _ref2;
-        return pinned;
-      });
-      const userFilters = filters.filter(_ref3 => {
-        let {
-          pinned
-        } = _ref3;
-        return !pinned;
-      });
-      await filterItemsFixture({
-        args,
-        canvas,
-        category,
-        existingIds,
-        filters: clientFilters,
-        step,
-        suiteTitle: 'Client filters',
-        testIds: TEST_IDS,
-        tooltipsContentMap: TOOLTIPS_CONTENT_MAP
-      });
-      await filterItemsFixture({
-        args,
-        canvas,
-        category,
-        existingIds,
-        filters: userFilters,
-        step,
-        suiteTitle: 'User filters',
-        testIds: TEST_IDS,
-        tooltipsContentMap: TOOLTIPS_CONTENT_MAP
-      });
-      if (filters.filter(_ref4 => {
-        let {
-          pinned
-        } = _ref4;
-        return pinned;
-      }).length === 0) {
-        await step('Category without user filters', async () => {
-          const targetEmptyCategoryIcon = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY) && id.includes(ICON)));
-          const targetEmptyCategoryTitle = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY) && id.includes(TITLE)));
-          const targetEmptyCategoryDescription = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY) && id.includes(DESCRIPTION)));
-          expect(targetEmptyCategoryIcon).toBeVisible();
-          expect(targetEmptyCategoryTitle).toBeVisible();
-          expect(targetEmptyCategoryDescription).toBeVisible();
-        });
-      }
-      await step('Collapsed category with selected item', async () => {
-        const targetAvatar = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(AVATAR)));
-        const targetAvatarParent = targetAvatar.closest(HEADER);
-        const selectedClientFilter = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(CLIENT_FILTER) && id.includes(NAME_CONTAINER) && id.includes('0')));
-        await userEvent.click(selectedClientFilter);
-        await userEvent.hover(targetAvatarParent);
-        await delay(500);
-        const targetCollapseCategoryButton = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(COLLAPSE_BUTTON)));
-        await userEvent.click(targetCollapseCategoryButton);
-        await delay(500);
-        const persistentClientFilter = canvas.getByTestId(existingIds.find(id => id.includes(PERSISTENT_FILTER) && id.includes(category)));
-        expect(selectedClientFilter).not.toBeVisible();
-        expect(persistentClientFilter).toBeVisible();
-        await userEvent.click(targetCollapseCategoryButton);
-        await delay(500);
-        expect(selectedClientFilter).toBeVisible();
-        expect(persistentClientFilter).not.toBeVisible();
-        await userEvent.unhover(targetAvatarParent);
-      });
-    });
-  }
-  testingShield.removeAttribute(SHIELD_KEY);
-};
+import{expect,screen,userEvent,within}from"@storybook/test";import{ID_CONSTANTS}from"../../../constants/testIds";import constants from"./constants.json";import{createExistingIds,delay,idBelongsToCollapsedItem,idBelongsToHoverableItem,idBelongsToNonStartItem}from"./utils";import{filterItemsFixture}from"./fixtures";const{AVATAR:AVATAR,CLIENT_FILTER:CLIENT_FILTER,COLLAPSE_BUTTON:COLLAPSE_BUTTON,DESCRIPTION:DESCRIPTION,EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY:EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY,ICON:ICON,LABEL:LABEL,NAME:NAME,NAME_CONTAINER:NAME_CONTAINER,PERSISTENT_FILTER:PERSISTENT_FILTER,TITLE:TITLE}=ID_CONSTANTS,{CATEGORIES:CATEGORIES,MISC:MISC,TEST_IDS:TEST_IDS,TOOLTIPS_CONTENT_MAP:TOOLTIPS_CONTENT_MAP}=constants,{HOVERABLE_KEY:HOVERABLE_KEY,HOVERABLE_VALUE:HOVERABLE_VALUE,HTML_ELEMENTS:HTML_ELEMENTS,SEARCH_STRING:SEARCH_STRING,SHIELD_KEY:SHIELD_KEY,SHIELD_VALUE:SHIELD_VALUE,TESTING_SHIELD:TESTING_SHIELD}=MISC,{HEADER:HEADER}=HTML_ELEMENTS,{expandButton:expandButton,headerCollapseButton:headerCollapseButton,headerCollapseButtonTooltip:headerCollapseButtonTooltip,headerSearchButton:headerSearchButton,headerSearchButtonTooltip:headerSearchButtonTooltip,headerSearchField:headerSearchField,headerSearchFieldCustomAction:headerSearchFieldCustomAction,headerTitle:headerTitle}=TEST_IDS;export const UTShortcutPanelTests=async _ref=>{let{args:args,canvasElement:canvasElement,step:step}=_ref;const testingShield=screen.getByTestId(TESTING_SHIELD);testingShield.setAttribute(SHIELD_KEY,SHIELD_VALUE);const existingIds=createExistingIds(CATEGORIES,TEST_IDS),canvas=within(canvasElement);await delay(500),await step("Verify initial state",async()=>{const filteredIds=[...existingIds].filter(id=>!idBelongsToHoverableItem(id)&&!idBelongsToCollapsedItem(id)&&!idBelongsToNonStartItem(id));for(const id of filteredIds){const element=canvas.getByTestId(id);expect(element).toBeInTheDocument()}}),await step("Header",async()=>{const hoverableParent=canvas.getByTestId(headerTitle).closest(HEADER);hoverableParent.setAttribute(HOVERABLE_KEY,HOVERABLE_VALUE),await delay(500),await step("Hovers",async()=>{const searchTargetElement=canvas.getByTestId(headerSearchButton),collapseTargetElement=canvas.getByTestId(headerCollapseButton);await step("Main hover",async()=>{await expect(searchTargetElement).toBeVisible(),await expect(collapseTargetElement).toBeVisible()}),await step("Actions Hover",async()=>{await step("Search",async()=>{await userEvent.hover(searchTargetElement),await delay(500);const searchTargetTooltip=canvas.getByTestId(headerSearchButtonTooltip);await expect(searchTargetTooltip).toBeVisible(),await userEvent.unhover(searchTargetElement)}),await step("Collapse",async()=>{await userEvent.hover(collapseTargetElement),await delay(500);const collapseTargetTooltip=canvas.getByTestId(headerCollapseButtonTooltip);await expect(collapseTargetTooltip).toBeVisible(),await userEvent.unhover(collapseTargetElement)})})}),await step("Actions",async()=>{await step("Search action",async()=>{const randomFilterId=existingIds.find(id=>id.includes(CLIENT_FILTER)&&id.includes(NAME)),targetClientFilter=canvas.getByTestId(randomFilterId),targetClientFilterText=targetClientFilter.innerText,searchTargetElement=canvas.getByTestId(headerSearchButton);await userEvent.click(searchTargetElement);const targetField=canvas.getByTestId(headerSearchField);expect(targetField).toBeVisible(),await userEvent.type(targetField,SEARCH_STRING),await delay(500),expect(targetClientFilter).not.toBeInTheDocument(),await userEvent.clear(targetField),await userEvent.type(targetField,targetClientFilterText),expect(canvas.getByTestId(randomFilterId)).toBeInTheDocument();const customAction=canvas.getByTestId(headerSearchFieldCustomAction);await userEvent.click(customAction),expect(targetField).not.toBeInTheDocument(),expect(canvas.getByTestId(randomFilterId)).toBeInTheDocument()}),await step("Collapse action",async()=>{const collapseTargetElement=canvas.getByTestId(headerCollapseButton);await userEvent.click(collapseTargetElement);const targetExpandButton=canvas.getByTestId(expandButton);expect(targetExpandButton).toBeInTheDocument()})}),hoverableParent.removeAttribute(HOVERABLE_KEY)}),await step("Collapsed panel",async()=>{const targetExpandButton=canvas.getByTestId(expandButton);await step("Content exists",async()=>{expect(targetExpandButton).toBeInTheDocument()}),await step("Action",async()=>{await userEvent.click(targetExpandButton),await delay(500);const collapseButton=canvas.getByTestId(headerCollapseButton);expect(targetExpandButton).not.toBeInTheDocument(),expect(collapseButton).toBeInTheDocument()})});for(const{category:category,filters:filters,name:name}of CATEGORIES)await step("Category: ".concat(category),async()=>{await step("Header",async()=>{const targetAvatar=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(AVATAR))),targetTitle=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(LABEL))),targetAvatarParent=targetAvatar.closest(HEADER);await step("Initial content",async()=>{expect(targetAvatar).toBeInTheDocument(),expect(targetTitle.innerText).toBe(name),expect(targetTitle).toBeInTheDocument()}),userEvent.hover(targetAvatarParent),await delay(500);const targetCollapseCategoryButton=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(COLLAPSE_BUTTON)));await step("Category hover",async()=>{expect(targetCollapseCategoryButton).toBeInTheDocument()}),await step("Category collapse",async()=>{await userEvent.click(targetCollapseCategoryButton);const targetUserFilter=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(CLIENT_FILTER)&&id.includes(NAME)));await delay(500),expect(targetUserFilter).not.toBeVisible(),await userEvent.click(targetCollapseCategoryButton),await delay(500),expect(targetUserFilter).toBeVisible()}),userEvent.unhover(targetAvatarParent)});const clientFilters=filters.filter(_ref2=>{let{pinned:pinned}=_ref2;return pinned}),userFilters=filters.filter(_ref3=>{let{pinned:pinned}=_ref3;return!pinned});await filterItemsFixture({args:args,canvas:canvas,category:category,existingIds:existingIds,filters:clientFilters,step:step,suiteTitle:"Client filters",testIds:TEST_IDS,tooltipsContentMap:TOOLTIPS_CONTENT_MAP}),await filterItemsFixture({args:args,canvas:canvas,category:category,existingIds:existingIds,filters:userFilters,step:step,suiteTitle:"User filters",testIds:TEST_IDS,tooltipsContentMap:TOOLTIPS_CONTENT_MAP}),0===filters.filter(_ref4=>{let{pinned:pinned}=_ref4;return pinned}).length&&await step("Category without user filters",async()=>{const targetEmptyCategoryIcon=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY)&&id.includes(ICON))),targetEmptyCategoryTitle=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY)&&id.includes(TITLE))),targetEmptyCategoryDescription=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY)&&id.includes(DESCRIPTION)));expect(targetEmptyCategoryIcon).toBeVisible(),expect(targetEmptyCategoryTitle).toBeVisible(),expect(targetEmptyCategoryDescription).toBeVisible()}),await step("Collapsed category with selected item",async()=>{const targetAvatarParent=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(AVATAR))).closest(HEADER),selectedClientFilter=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(CLIENT_FILTER)&&id.includes(NAME_CONTAINER)&&id.includes("0")));await userEvent.click(selectedClientFilter),await userEvent.hover(targetAvatarParent),await delay(500);const targetCollapseCategoryButton=canvas.getByTestId(existingIds.find(id=>id.includes(category)&&id.includes(COLLAPSE_BUTTON)));await userEvent.click(targetCollapseCategoryButton),await delay(500);const persistentClientFilter=canvas.getByTestId(existingIds.find(id=>id.includes(PERSISTENT_FILTER)&&id.includes(category)));expect(selectedClientFilter).not.toBeVisible(),expect(persistentClientFilter).toBeVisible(),await userEvent.click(targetCollapseCategoryButton),await delay(500),expect(selectedClientFilter).toBeVisible(),expect(persistentClientFilter).not.toBeVisible(),await userEvent.unhover(targetAvatarParent)})});testingShield.removeAttribute(SHIELD_KEY)};

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

@@ -1,166 +1 @@
-import { ID_CONSTANTS } from '../../../constants/testIds';
-import constants from './constants.json';
-const {
-  CLIENT_FILTER,
-  COLLAPSE_BUTTON,
-  COLLAPSE_BUTTON_TOOLTIP,
-  CUSTOM_SEARCH_ACTION,
-  DELETE_BUTTON,
-  DELETE_BUTTON_TOOLTIP,
-  EDIT_BUTTON,
-  EDIT_BUTTON_TOOLTIP,
-  EXPANDED_PANEL_CONTENT_CATEGORY,
-  EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY,
-  EXPAND_BUTTON,
-  PERSISTENT_FILTER,
-  POPPER,
-  SEARCH_BUTTON,
-  SEARCH_BUTTON_TOOLTIP,
-  SEARCH_FIELD,
-  USER_FILTER
-} = ID_CONSTANTS;
-const {
-  MISC
-} = constants;
-const {
-  INDEX_PLACEHOLDER
-} = MISC;
-
-/**
- * @fileoverview Utility functions for UTShortcutPanel stories
- * @module UTShortcutPanel/stories/utils
- */
-
-/**
- * Formats a test ID string by replacing template placeholders with actual values
- *
- * @function testIdQuickFormat
- * @param {string} testId - The test ID string containing placeholders in the format {{key}}
- * @param {Object} replaceOptions - An object containing key-value pairs for replacement
- * @returns {string} The formatted test ID with placeholders replaced by actual values
- *
- * @example
- * testIdQuickFormat('filter.{{category}}.{{index}}', { category: 'energy', index: '0' })
- * // Returns: 'filter.energy.0'
- */
-const testIdQuickFormat = (testId, replaceOptions) => {
-  const idElementsArray = testId.split('.');
-  Object.entries(replaceOptions).forEach(_ref => {
-    let [key, value] = _ref;
-    if (idElementsArray.includes("{{".concat(key, "}}"))) {
-      const keyIndex = idElementsArray.indexOf("{{".concat(key, "}}"));
-      idElementsArray.splice(keyIndex, 1, value);
-    }
-  });
-  const finalId = idElementsArray.join('.');
-  return finalId;
-};
-
-/**
- * Creates a promise that resolves after a specified delay
- *
- * @function delay
- * @param {number} ms - The number of milliseconds to delay
- * @returns {Promise<void>} A promise that resolves after the specified delay
- *
- * @example
- * await delay(1000);
- */
-
-export const delay = ms => new Promise(resolve => {
-  setTimeout(resolve, ms);
-});
-
-/**
- * Creates a flattened collection of test IDs based on categories and ID templates.
- * For each category and ID template, generates IDs with filter indices. If all generated
- * IDs for a template are identical (no {{index}} placeholder), returns a single ID string;
- * otherwise returns an array of indexed IDs.
- *
- * @function createExistingIds
- * @param {Array<Object>} categories - Array of category objects, each containing:
- * @param {Object<string, string>} idsList - Object containing ID template strings with placeholders
- *   (e.g., {{category}}, {{index}})
- * @returns {Array<string|Array<string>>} Flattened array containing single ID strings
- *
- * @example
- * const categories = [
- *   { category: 'energy', filters: [{}, {}] },
- *   { category: 'water', filters: [{}] }
- * ];
- * const idsList = {
- *   checkbox: 'filter.{{category}}.checkbox.{{index}}',
- *   label: 'filter.{{category}}.label'
- * };
- * createExistingIds(categories, idsList)
- * // Returns: [
- * //   'filter.energy.label',
- * //   'filter.water.checkbox.0',
- * //   'filter.water.label'
- * // ]
- */
-export const createExistingIds = (categories, idsList) => {
-  const test = categories.map(_ref2 => {
-    let {
-      category,
-      filters
-    } = _ref2;
-    return Object.values(idsList).map(value => {
-      if (!value.includes(INDEX_PLACEHOLDER)) {
-        return testIdQuickFormat(value, {
-          category
-        });
-      }
-      const clientIdsWithIndex = [...filters].filter(_ref3 => {
-        let {
-          pinned
-        } = _ref3;
-        return pinned;
-      }).map((_, i) => value.includes(CLIENT_FILTER) ? testIdQuickFormat(value, {
-        category,
-        index: i
-      }) : false);
-      const userIdsWithIndex = [...filters].filter(_ref4 => {
-        let {
-          pinned
-        } = _ref4;
-        return !pinned;
-      }).map((_, i) => value.includes(USER_FILTER) ? testIdQuickFormat(value, {
-        category,
-        index: i
-      }) : false);
-      return [...clientIdsWithIndex, ...userIdsWithIndex];
-    });
-  }).flat(Infinity).filter(Boolean);
-  return test;
-};
-
-/**
- * Determines if a test ID belongs to an item that requires hovering to be visible or interactive.
- * This includes tooltips, poppers, and certain buttons that appear on hover.
- *
- * @function idBelongsToHoverableItem
- * @param {string} item - The test ID string to check
- * @returns {boolean} True if the item requires hovering, false otherwise
- */
-export const idBelongsToHoverableItem = item => item.includes(POPPER) || item.includes(DELETE_BUTTON) || item.includes(EDIT_BUTTON) || item.includes(COLLAPSE_BUTTON) || item.includes(SEARCH_BUTTON) || item.includes(DELETE_BUTTON_TOOLTIP) || item.includes(EDIT_BUTTON_TOOLTIP) || item.includes(COLLAPSE_BUTTON_TOOLTIP) || item.includes(SEARCH_BUTTON_TOOLTIP) || item.includes(CUSTOM_SEARCH_ACTION) || item.includes(COLLAPSE_BUTTON) && item.includes(EXPANDED_PANEL_CONTENT_CATEGORY);
-
-/**
- * Determines if a test ID belongs to a collapsed item that needs to be expanded.
- * Specifically checks for expand button elements.
- *
- * @function idBelongsToCollapsedItem
- * @param {string} item - The test ID string to check
- * @returns {boolean} True if the item is an expand button, false otherwise
- */
-export const idBelongsToCollapsedItem = item => item.includes(EXPAND_BUTTON);
-
-/**
- * Determines if a test ID belongs to an item that is not in its initial/start state.
- * Currently checks for search field elements which may not be visible initially.
- *
- * @function idBelongsToNonStartItem
- * @param {string} item - The test ID string to check
- * @returns {boolean} True if the item is not in start state, false otherwise
- */
-export const idBelongsToNonStartItem = item => item.includes(SEARCH_FIELD) || item.includes(EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY) || item.includes(PERSISTENT_FILTER);
+import{ID_CONSTANTS}from"../../../constants/testIds";import constants from"./constants.json";const{CLIENT_FILTER:CLIENT_FILTER,COLLAPSE_BUTTON:COLLAPSE_BUTTON,COLLAPSE_BUTTON_TOOLTIP:COLLAPSE_BUTTON_TOOLTIP,CUSTOM_SEARCH_ACTION:CUSTOM_SEARCH_ACTION,DELETE_BUTTON:DELETE_BUTTON,DELETE_BUTTON_TOOLTIP:DELETE_BUTTON_TOOLTIP,EDIT_BUTTON:EDIT_BUTTON,EDIT_BUTTON_TOOLTIP:EDIT_BUTTON_TOOLTIP,EXPANDED_PANEL_CONTENT_CATEGORY:EXPANDED_PANEL_CONTENT_CATEGORY,EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY:EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY,EXPAND_BUTTON:EXPAND_BUTTON,PERSISTENT_FILTER:PERSISTENT_FILTER,POPPER:POPPER,SEARCH_BUTTON:SEARCH_BUTTON,SEARCH_BUTTON_TOOLTIP:SEARCH_BUTTON_TOOLTIP,SEARCH_FIELD:SEARCH_FIELD,USER_FILTER:USER_FILTER}=ID_CONSTANTS,{MISC:MISC}=constants,{INDEX_PLACEHOLDER:INDEX_PLACEHOLDER}=MISC,testIdQuickFormat=(testId,replaceOptions)=>{const idElementsArray=testId.split(".");Object.entries(replaceOptions).forEach(_ref=>{let[key,value]=_ref;if(idElementsArray.includes("{{".concat(key,"}}"))){const keyIndex=idElementsArray.indexOf("{{".concat(key,"}}"));idElementsArray.splice(keyIndex,1,value)}});return idElementsArray.join(".")};export const delay=ms=>new Promise(resolve=>{setTimeout(resolve,ms)});export const createExistingIds=(categories,idsList)=>categories.map(_ref2=>{let{category:category,filters:filters}=_ref2;return Object.values(idsList).map(value=>{if(!value.includes(INDEX_PLACEHOLDER))return testIdQuickFormat(value,{category:category});return[...[...filters].filter(_ref3=>{let{pinned:pinned}=_ref3;return pinned}).map((_,i)=>!!value.includes(CLIENT_FILTER)&&testIdQuickFormat(value,{category:category,index:i})),...[...filters].filter(_ref4=>{let{pinned:pinned}=_ref4;return!pinned}).map((_,i)=>!!value.includes(USER_FILTER)&&testIdQuickFormat(value,{category:category,index:i}))]})}).flat(1/0).filter(Boolean);export const idBelongsToHoverableItem=item=>item.includes(POPPER)||item.includes(DELETE_BUTTON)||item.includes(EDIT_BUTTON)||item.includes(COLLAPSE_BUTTON)||item.includes(SEARCH_BUTTON)||item.includes(DELETE_BUTTON_TOOLTIP)||item.includes(EDIT_BUTTON_TOOLTIP)||item.includes(COLLAPSE_BUTTON_TOOLTIP)||item.includes(SEARCH_BUTTON_TOOLTIP)||item.includes(CUSTOM_SEARCH_ACTION)||item.includes(COLLAPSE_BUTTON)&&item.includes(EXPANDED_PANEL_CONTENT_CATEGORY);export const idBelongsToCollapsedItem=item=>item.includes(EXPAND_BUTTON);export const idBelongsToNonStartItem=item=>item.includes(SEARCH_FIELD)||item.includes(EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY)||item.includes(PERSISTENT_FILTER);