From c249fcd3138a13c96a533bfa12d1a8d15482ebb5 Mon Sep 17 00:00:00 2001 From: Carlos Emiliano Castro Trejo Date: Thu, 16 Jan 2025 16:58:21 -0800 Subject: [PATCH 1/5] Add tests --- .../src/app/utils/getCoreNodeModule.ts | 26 --------------- .../app/utils/tree/__test__/assets.test.ts | 33 +++++++++++++++++++ 2 files changed, 33 insertions(+), 26 deletions(-) delete mode 100644 apps/vs-code-designer/src/app/utils/getCoreNodeModule.ts create mode 100644 apps/vs-code-designer/src/app/utils/tree/__test__/assets.test.ts diff --git a/apps/vs-code-designer/src/app/utils/getCoreNodeModule.ts b/apps/vs-code-designer/src/app/utils/getCoreNodeModule.ts deleted file mode 100644 index f67302f5259..00000000000 --- a/apps/vs-code-designer/src/app/utils/getCoreNodeModule.ts +++ /dev/null @@ -1,26 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Microsoft Corporation. All rights reserved. - * Licensed under the MIT License. See LICENSE.md in the project root for license information. - *--------------------------------------------------------------------------------------------*/ -import * as vscode from 'vscode'; - -/** - * GReturns a node module installed with VSCode, or undefined if it fails. - * @param {string} moduleName - Module name to check. - * @returns {T | undefined} If finds the module returns the module, otherwise returns undefined. - */ -export function getCoreNodeModule(moduleName: string): T | undefined { - try { - return require(`${vscode.env.appRoot}/node_modules.asar/${moduleName}`); - } catch (err) { - // ignore - } - - try { - return require(`${vscode.env.appRoot}/node_modules/${moduleName}`); - } catch (err) { - // ignore - } - - return undefined; -} diff --git a/apps/vs-code-designer/src/app/utils/tree/__test__/assets.test.ts b/apps/vs-code-designer/src/app/utils/tree/__test__/assets.test.ts new file mode 100644 index 00000000000..d9e0992efa7 --- /dev/null +++ b/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); + }); + }); +}); From ae2a6483d76cff81724d1ec74345ac8e4fa34ad5 Mon Sep 17 00:00:00 2001 From: Carlos Emiliano Castro Trejo Date: Thu, 16 Jan 2025 20:28:08 -0800 Subject: [PATCH 2/5] Add scope card test cases --- e2e/designer/scopeActions.spec.ts | 73 +++++++++++++++++++ .../src/lib/card/scopeCard/index.tsx | 8 +- .../src/lib/card/subgraphCard/index.tsx | 4 +- .../src/lib/nodeCollapseToggle/index.tsx | 4 +- .../src/lib/ui/CustomNodes/ScopeCardNode.tsx | 6 +- .../lib/ui/CustomNodes/SubgraphCardNode.tsx | 6 +- 6 files changed, 90 insertions(+), 11 deletions(-) create mode 100644 e2e/designer/scopeActions.spec.ts diff --git a/e2e/designer/scopeActions.spec.ts b/e2e/designer/scopeActions.spec.ts new file mode 100644 index 00000000000..2cd641df874 --- /dev/null +++ b/e2e/designer/scopeActions.spec.ts @@ -0,0 +1,73 @@ +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 + // True side + 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(); + 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(); + // await expect(page.getByTestId('card-Increment variable 4').getByRole('button', { name: 'Increment variable' })).toBeVisible(); + + // False side + await expect(page.getByTestId('card-terminate_2').getByRole('button', { name: 'Terminate' })).toBeVisible(); + //Collapse false side + await page.getByLabel('False condition, collapse').click(); + 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(); + await expect(page.getByLabel('True condition, collapse')).not.toBeVisible(); + await expect(page.getByLabel('False condition, collapse')).not.toBeVisible(); + 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 + 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(); + 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(); + + await expect(page.getByTestId('scope-ForEach_nested-#scope-no-actions')).toBeVisible(); + await expect(page.getByTestId('scope-ForEach_empty-#scope-no-actions')).toBeVisible(); + }); + } +); diff --git a/libs/designer-ui/src/lib/card/scopeCard/index.tsx b/libs/designer-ui/src/lib/card/scopeCard/index.tsx index 7b88e65c608..ad391856d11 100644 --- a/libs/designer-ui/src/lib/card/scopeCard/index.tsx +++ b/libs/designer-ui/src/lib/card/scopeCard/index.tsx @@ -87,11 +87,7 @@ export const ScopeCard: React.FC = ({ 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 ? ( = ({ {errorMessage ? : null} - + {badges.length > 0 && (
diff --git a/libs/designer-ui/src/lib/card/subgraphCard/index.tsx b/libs/designer-ui/src/lib/card/subgraphCard/index.tsx index 89181d41ca0..3e5565da791 100644 --- a/libs/designer-ui/src/lib/card/subgraphCard/index.tsx +++ b/libs/designer-ui/src/lib/card/subgraphCard/index.tsx @@ -166,7 +166,7 @@ export const SubgraphCard: React.FC = ({
{data.title}
{errorMessage ? : null} - +
); } @@ -185,7 +185,7 @@ export const SubgraphCard: React.FC = ({ >
{data.title}
- +
); diff --git a/libs/designer-ui/src/lib/nodeCollapseToggle/index.tsx b/libs/designer-ui/src/lib/nodeCollapseToggle/index.tsx index 92d896b12e2..8624d72634e 100644 --- a/libs/designer-ui/src/lib/nodeCollapseToggle/index.tsx +++ b/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`} > diff --git a/libs/designer/src/lib/ui/CustomNodes/ScopeCardNode.tsx b/libs/designer/src/lib/ui/CustomNodes/ScopeCardNode.tsx index 6133fa931e3..33bbbe465e6 100644 --- a/libs/designer/src/lib/ui/CustomNodes/ScopeCardNode.tsx +++ b/libs/designer/src/lib/ui/CustomNodes/ScopeCardNode.tsx @@ -338,7 +338,11 @@ const ScopeCardNode = ({ data, targetPosition = Position.Top, sourcePosition = P - {graphCollapsed && !isFooter ?

{collapsedText}

: null} + {graphCollapsed && !isFooter ? ( +

+ {collapsedText} +

+ ) : null} {showEmptyGraphComponents ? ( readOnly ? (

No Actions

diff --git a/libs/designer/src/lib/ui/CustomNodes/SubgraphCardNode.tsx b/libs/designer/src/lib/ui/CustomNodes/SubgraphCardNode.tsx index 641f41a4371..8a2da652726 100644 --- a/libs/designer/src/lib/ui/CustomNodes/SubgraphCardNode.tsx +++ b/libs/designer/src/lib/ui/CustomNodes/SubgraphCardNode.tsx @@ -163,7 +163,11 @@ const SubgraphCardNode = ({ targetPosition = Position.Top, sourcePosition = Posi - {graphCollapsed ?

{collapsedText}

: null} + {graphCollapsed ? ( +

+ {collapsedText} +

+ ) : null} {showEmptyGraphComponents ? ( readOnly ? (

No Actions

From 6e78e2d24faa658e5b140328a7ed721be62e02cc Mon Sep 17 00:00:00 2001 From: Carlos Emiliano Castro Trejo Date: Fri, 17 Jan 2025 09:22:18 -0800 Subject: [PATCH 3/5] Update comments and text --- e2e/designer/scopeActions.spec.ts | 30 ++++++++++++++++++++++-------- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/e2e/designer/scopeActions.spec.ts b/e2e/designer/scopeActions.spec.ts index 2cd641df874..0a2206df2e3 100644 --- a/e2e/designer/scopeActions.spec.ts +++ b/e2e/designer/scopeActions.spec.ts @@ -7,65 +7,79 @@ test.describe( tag: '@mock', }, () => { - test('Should collapse condition actions ', async ({ page }) => { + test('Should collapse condition actions', async ({ page }) => { await page.goto('/'); await GoToMockWorkflow(page, 'All Scope Nodes'); - // Check items inside conditions exist - // True side + // 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(); - // await expect(page.getByTestId('card-Increment variable 4').getByRole('button', { name: 'Increment variable' })).toBeVisible(); - // False side + // 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 + + // 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 }) => { + 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 + // 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(); }); From 0b4caf5d50dc6f8f796fe1ac2c10a679e2775813 Mon Sep 17 00:00:00 2001 From: Carlos Emiliano Castro Trejo Date: Fri, 17 Jan 2025 09:54:23 -0800 Subject: [PATCH 4/5] Add switch action tests --- e2e/designer/scopeActions.spec.ts | 43 ++++++++++++++++++- .../src/lib/card/subgraphCard/index.tsx | 1 + 2 files changed, 43 insertions(+), 1 deletion(-) diff --git a/e2e/designer/scopeActions.spec.ts b/e2e/designer/scopeActions.spec.ts index 0a2206df2e3..a779514c40e 100644 --- a/e2e/designer/scopeActions.spec.ts +++ b/e2e/designer/scopeActions.spec.ts @@ -47,7 +47,7 @@ test.describe( await expect(page.getByTestId('scope-Condition-#scope-no-actions')).toBeVisible(); }); - test('Should collapse for each actions', async ({ page }) => { + test('Should collapse switch actions', async ({ page }) => { await page.goto('/'); await GoToMockWorkflow(page, 'All Scope Nodes'); @@ -83,5 +83,46 @@ test.describe( 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 for each 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(); + + console.log(await page.innerHTML('body')); + + // 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(); + }); } ); diff --git a/libs/designer-ui/src/lib/card/subgraphCard/index.tsx b/libs/designer-ui/src/lib/card/subgraphCard/index.tsx index 3e5565da791..23846feb94d 100644 --- a/libs/designer-ui/src/lib/card/subgraphCard/index.tsx +++ b/libs/designer-ui/src/lib/card/subgraphCard/index.tsx @@ -182,6 +182,7 @@ export const SubgraphCard: React.FC = ({ onClick={handleCollapse} onKeyDown={collapseKeyboardInteraction.keyUp} onKeyUp={collapseKeyboardInteraction.keyDown} + data-automation-id={`${id}-collapse-toggle-small`} >
{data.title}
From 7eb677d2fd1eebfb39ebcaa6a42ce044c75c850c Mon Sep 17 00:00:00 2001 From: Carlos Emiliano Castro Trejo Date: Fri, 17 Jan 2025 10:36:51 -0800 Subject: [PATCH 5/5] Add unit tests for do until actions --- e2e/designer/scopeActions.spec.ts | 35 +++++++++++++++++++++++++++---- 1 file changed, 31 insertions(+), 4 deletions(-) diff --git a/e2e/designer/scopeActions.spec.ts b/e2e/designer/scopeActions.spec.ts index a779514c40e..854b6a7b423 100644 --- a/e2e/designer/scopeActions.spec.ts +++ b/e2e/designer/scopeActions.spec.ts @@ -47,7 +47,7 @@ test.describe( await expect(page.getByTestId('scope-Condition-#scope-no-actions')).toBeVisible(); }); - test('Should collapse switch actions', async ({ page }) => { + test('Should collapse for each actions', async ({ page }) => { await page.goto('/'); await GoToMockWorkflow(page, 'All Scope Nodes'); @@ -84,7 +84,36 @@ test.describe( await expect(page.getByTestId('scope-ForEach_empty-#scope-no-actions')).toBeVisible(); }); - test('Should collapse for each actions', async ({ page }) => { + 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'); @@ -101,8 +130,6 @@ test.describe( // Check items inside default are visible await expect(page.getByTestId('card-default_compose').getByRole('button', { name: 'Default-Compose' })).toBeVisible(); - console.log(await page.innerHTML('body')); - // Collapse default case await page.getByTestId('Switch-defaultCase-collapse-toggle-small').click();