test(designer): Scope actions E2E tests

apps/vs-code-designer/src/app/utils/tree/__test__/assets.test.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect, vi } from 'vitest';
+import { getIconPath, getThemedIconPath } from '../assets';
+
+vi.mock('../../../../extensionVariables', () => ({
+  ext: {
+    context: {
+      asAbsolutePath: vi.fn((relativePath: string) => `mocked/path/${relativePath}`),
+    },
+  },
+}));
+
+describe('assets utility functions', () => {
+  describe('getIconPath', () => {
+    it('should return the correct icon path', () => {
+      const iconName = 'testIcon';
+      const expectedPath = 'mocked/path/assets/testIcon.svg';
+      const result = getIconPath(iconName);
+      expect(result).toBe(expectedPath);
+    });
+  });
+
+  describe('getThemedIconPath', () => {
+    it('should return the correct themed icon path', () => {
+      const iconName = 'testIcon';
+      const expectedPath = {
+        light: 'mocked/path/assets/light/testIcon.svg',
+        dark: 'mocked/path/assets/dark/testIcon.svg',
+      };
+      const result = getThemedIconPath(iconName);
+      expect(result).toEqual(expectedPath);
+    });
+  });
+});

e2e/designer/scopeActions.spec.ts

@@ -0,0 +1,155 @@
+import { test, expect } from '@playwright/test';
+import { GoToMockWorkflow } from './utils/GoToWorkflow';
+
+test.describe(
+  'Scope actions tests',
+  {
+    tag: '@mock',
+  },
+  () => {
+    test('Should collapse condition actions', async ({ page }) => {
+      await page.goto('/');
+      await GoToMockWorkflow(page, 'All Scope Nodes');
+
+      // Check items inside conditions exist in true side are visible
+      await expect(page.getByTestId('card-terminate').getByRole('button', { name: 'Terminate' })).toBeVisible();
+      await expect(page.getByTestId('card-increment_variable_4').getByRole('button', { name: 'Increment variable' })).toBeVisible();
+
+      // Collapse true side
+      await page.getByLabel('True condition, collapse').click();
+
+      // Check no actions message is visible
+      await expect(page.getByTestId('subgraph-Condition-actions-#subgraph-no-actions')).toBeVisible();
+
+      // Check items inside true side are hidden
+      await expect(page.getByTestId('card-terminate').getByRole('button', { name: 'Terminate' })).not.toBeVisible();
+
+      // Check items inside conditions exist in false side are visible
+      await expect(page.getByTestId('card-terminate_2').getByRole('button', { name: 'Terminate' })).toBeVisible();
+
+      // Collapse false side
+      await page.getByLabel('False condition, collapse').click();
+
+      // Check no actions message is visible
+      await expect(page.getByTestId('subgraph-Condition-elseActions-#subgraph-no-actions')).toBeVisible();
+
+      // Check items inside false side are hidden
+      await expect(page.getByTestId('card-terminate 2').getByRole('button', { name: 'Terminate' })).not.toBeVisible();
+
+      // Collapse condition
+      await page.getByTestId('Condition-collapse-toggle').click();
+
+      // Check items inside condition are hidden
+      await expect(page.getByLabel('True condition, collapse')).not.toBeVisible();
+      await expect(page.getByLabel('False condition, collapse')).not.toBeVisible();
+
+      // Check no actions message is visible
+      await expect(page.getByTestId('scope-Condition-#scope-no-actions')).toBeVisible();
+    });
+
+    test('Should collapse for each actions', async ({ page }) => {
+      await page.goto('/');
+      await GoToMockWorkflow(page, 'All Scope Nodes');
+
+      // Collapse empty foreach
+      await page.getByTestId('ForEach_empty-collapse-toggle').click();
+
+      // Check items inside foreach actions are visible
+      await expect(page.getByTestId('card-foreach_action_1').getByRole('button', { name: 'ForEach Action' })).toBeVisible();
+      await expect(page.getByTestId('card-foreach_action_2').getByRole('button', { name: 'ForEach Action' })).toBeVisible();
+
+      // Collapse nested foreach
+      await page.getByTestId('ForEach_nested-collapse-toggle').click();
+
+      // Check items inside foreach actions are hidden
+      await expect(page.getByTestId('card-foreach_action_2').getByRole('button', { name: 'ForEach Action' })).not.toBeVisible();
+
+      // Collapse outer most foreach
+      await page.getByTestId('ForEach-collapse-toggle').click();
+
+      // Check items inside foreach actions non visible
+      await expect(page.getByTestId('card-foreach_action_1').getByRole('button', { name: 'ForEach Action' })).not.toBeVisible();
+      await expect(page.getByTestId('card-foreach_action_2').getByRole('button', { name: 'ForEach Action' })).not.toBeVisible();
+
+      // Expand outer most foreach
+      await page.getByTestId('ForEach-collapse-toggle').click();
+
+      // Check items inside foreach actions are visible and still collapsed
+      await expect(page.getByTestId('card-foreach_action_1').getByRole('button', { name: 'ForEach Action' })).toBeVisible();
+      await expect(page.getByLabel('ForEach nested operation')).toBeVisible();
+      await expect(page.getByLabel('ForEach empty operation')).toBeVisible();
+
+      // Check message no actions is visible
+      await expect(page.getByTestId('scope-ForEach_nested-#scope-no-actions')).toBeVisible();
+      await expect(page.getByTestId('scope-ForEach_empty-#scope-no-actions')).toBeVisible();
+    });
+
+    test('Should collapse do until actions', async ({ page }) => {
+      await page.goto('/');
+      await GoToMockWorkflow(page, 'All Scope Nodes');
+
+      // Check items inside do until actions are visible
+      await expect(page.getByTestId('card-until_action_1').getByRole('button', { name: 'Until Action' })).toBeVisible();
+      await expect(page.getByTestId('card-until_action_2').getByRole('button', { name: 'Until Action' })).toBeVisible();
+
+      // Collapse do until from do button
+      await page.getByTestId('Until-collapse-toggle-small').click();
+
+      // Check items inside do until actions are hidden
+      await expect(page.getByTestId('card-until_action_1').getByRole('button', { name: 'Until Action' })).not.toBeVisible();
+      await expect(page.getByTestId('card-until_action_2').getByRole('button', { name: 'Until Action' })).not.toBeVisible();
+
+      // Check no actions message is visible
+      await expect(page.getByTestId('subgraph-Until-#subgraph-no-actions')).toBeVisible();
+
+      // Check until box is visible
+      await expect(page.getByLabel('Until operation')).toBeVisible();
+
+      // Expand do until from until button
+      await page.getByTestId('card-until').getByTestId('Until-collapse-toggle').click();
+
+      // Check items inside do until actions are visible
+      await expect(page.getByTestId('card-until_action_1').getByRole('button', { name: 'Until Action' })).toBeVisible();
+      await expect(page.getByTestId('card-until_action_2').getByRole('button', { name: 'Until Action' })).toBeVisible();
+    });
+
+    test('Should collapse switch actions', async ({ page }) => {
+      await page.goto('/');
+      await GoToMockWorkflow(page, 'All Scope Nodes');
+
+      // Check items inside conditions exist in true side are visible
+      await expect(page.getByTestId('card-terminate').getByRole('button', { name: 'Terminate' })).toBeVisible();
+      await expect(page.getByTestId('card-increment_variable_4').getByRole('button', { name: 'Increment variable' })).toBeVisible();
+
+      // Collapse conditional case
+      await page.getByTestId('Conditional_Case-collapse-toggle').click();
+
+      // Check no actions message is visible in case
+      await expect(page.getByTestId('subgraph-Conditional_Case-#subgraph-no-actions')).toBeVisible();
+
+      // Check items inside default are visible
+      await expect(page.getByTestId('card-default_compose').getByRole('button', { name: 'Default-Compose' })).toBeVisible();
+
+      // Collapse default case
+      await page.getByTestId('Switch-defaultCase-collapse-toggle-small').click();
+
+      // Check items inside foreach actions are visible
+      await expect(page.getByTestId('card-foreach_action_1').getByRole('button', { name: 'ForEach Action' })).toBeVisible();
+      await expect(page.getByTestId('card-foreach_action_2').getByRole('button', { name: 'ForEach Action' })).toBeVisible();
+
+      // Check no actions message is visible in default case
+      await expect(page.getByTestId('subgraph-Switch-defaultCase-#subgraph-no-actions')).toBeVisible();
+
+      // Collapse whole switcha action
+      await page.getByTestId('Switch-collapse-toggle').click();
+
+      // Check items inside switch action are non visible
+      await expect(page.getByTestId('subgraph-Switch-defaultCase-#subgraph-no-actions')).not.toBeVisible();
+      await expect(page.getByTestId('card-foreach_action_2').getByRole('button', { name: 'ForEach Action' })).not.toBeVisible();
+      await expect(page.getByTestId('card-default_compose').getByRole('button', { name: 'Default-Compose' })).not.toBeVisible();
+
+      // Check no actions message is visible in switch action
+      await expect(page.getByTestId('scope-Switch-#scope-no-actions')).toBeVisible();
+    });
+  }
+);

libs/designer-ui/src/lib/card/scopeCard/index.tsx

@@ -87,11 +87,7 @@ export const ScopeCard: React.FC<ScopeCardProps> = ({
           draggable={draggable}
           style={colorVars}
           onContextMenu={onContextMenu}
-          className={css(
-            'msla-scope-v2--header msla-scope-card-wrapper',
-            !active && 'msla-card-inactive',
-          )}
-
+          className={css('msla-scope-v2--header msla-scope-card-wrapper', !active && 'msla-card-inactive')}
         >
           {isMonitoringView && active ? (
             <StatusPill
@@ -123,7 +119,7 @@ export const ScopeCard: React.FC<ScopeCardProps> = ({
               </div>
               {errorMessage ? <ErrorBanner errorLevel={errorLevel} errorMessage={errorMessage} /> : null}
             </button>
-            <NodeCollapseToggle collapsed={collapsed} handleCollapse={handleCollapse} tabIndex={nodeIndex} />
+            <NodeCollapseToggle id={id} collapsed={collapsed} handleCollapse={handleCollapse} tabIndex={nodeIndex} />
           </div>
           {badges.length > 0 && (
             <div className="msla-card-v2-footer" onClick={handleClick}>

libs/designer-ui/src/lib/card/subgraphCard/index.tsx

@@ -166,7 +166,7 @@ export const SubgraphCard: React.FC<SubgraphCardProps> = ({
           <div className="msla-subgraph-title-text">{data.title}</div>
           {errorMessage ? <ErrorBanner errorLevel={errorLevel} errorMessage={errorMessage} /> : null}
         </button>
-        <NodeCollapseToggle collapsed={collapsed} handleCollapse={handleCollapse} tabIndex={nodeIndex} />
+        <NodeCollapseToggle id={id} collapsed={collapsed} handleCollapse={handleCollapse} tabIndex={nodeIndex} />
       </div>
     );
   }
@@ -182,10 +182,11 @@ export const SubgraphCard: React.FC<SubgraphCardProps> = ({
           onClick={handleCollapse}
           onKeyDown={collapseKeyboardInteraction.keyUp}
           onKeyUp={collapseKeyboardInteraction.keyDown}
+          data-automation-id={`${id}-collapse-toggle-small`}
         >
           <div className={css('msla-selection-box', 'white-outline', selectionMode)} tabIndex={-1} />
           <div className="msla-subgraph-title msla-subgraph-title-text">{data.title}</div>
-          <NodeCollapseToggle disabled collapsed={collapsed} onSmallCard />
+          <NodeCollapseToggle id={id} disabled collapsed={collapsed} onSmallCard />
         </div>
       </div>
     );

libs/designer-ui/src/lib/nodeCollapseToggle/index.tsx

@@ -9,10 +9,11 @@ interface NodeCollapseToggleProps {
   onSmallCard?: boolean;
   handleCollapse?: () => void;
   tabIndex?: number;
+  id: string;
 }
 
 const NodeCollapseToggle = (props: NodeCollapseToggleProps) => {
-  const { disabled = false, collapsed = false, onSmallCard = false, handleCollapse, tabIndex } = props;
+  const { disabled = false, collapsed = false, onSmallCard = false, handleCollapse, tabIndex, id } = props;
 
   const intl = useIntl();
   const EXPAND_TEXT = intl.formatMessage({
@@ -42,6 +43,7 @@ const NodeCollapseToggle = (props: NodeCollapseToggleProps) => {
         onKeyDown={keyboardInteraction.keyDown}
         onKeyUp={keyboardInteraction.keyUp}
         tabIndex={disabled ? -1 : tabIndex}
+        data-automation-id={`${id}-collapse-toggle`}
       >
         <Icon iconName={iconName} styles={{ root: { fontSize: FontSizes.small } }} />
       </button>

libs/designer/src/lib/ui/CustomNodes/ScopeCardNode.tsx

@@ -338,7 +338,11 @@ const ScopeCardNode = ({ data, targetPosition = Position.Top, sourcePosition = P
           <Handle className="node-handle bottom" type="source" position={sourcePosition} isConnectable={false} />
         </div>
       </div>
-      {graphCollapsed && !isFooter ? <p className="no-actions-text">{collapsedText}</p> : null}
+      {graphCollapsed && !isFooter ? (
+        <p className="no-actions-text" data-automation-id={`scope-${id}-no-actions`}>
+          {collapsedText}
+        </p>
+      ) : null}
       {showEmptyGraphComponents ? (
         readOnly ? (
           <p className="no-actions-text">No Actions</p>

libs/designer/src/lib/ui/CustomNodes/SubgraphCardNode.tsx

@@ -163,7 +163,11 @@ const SubgraphCardNode = ({ targetPosition = Position.Top, sourcePosition = Posi
           <Handle className="node-handle bottom" type="source" position={sourcePosition} isConnectable={false} />
         </div>
       </div>
-      {graphCollapsed ? <p className="no-actions-text">{collapsedText}</p> : null}
+      {graphCollapsed ? (
+        <p className="no-actions-text" data-automation-id={`subgraph-${id}-no-actions`}>
+          {collapsedText}
+        </p>
+      ) : null}
       {showEmptyGraphComponents ? (
         readOnly ? (
           <p className="no-actions-text">No Actions</p>