feat(vscode): Introducing unit testing codeful experience to vscode

apps/Standalone/src/designer/app/AzureLogicAppsDesigner/DesignerCommandBar.tsx

@@ -24,6 +24,9 @@ import {
   updateParameterValidation,
   openPanel,
   useNodesInitialized,
+  serializeUnitTestDefinition,
+  useAssertionsValidationErrors,
+  getNodeOutputOperations,
   getCustomCodeFilesWithData,
   resetDesignerDirtyState,
   collapsePanel,
@@ -69,6 +72,7 @@ export const DesignerCommandBar = ({
   showRunHistory,
   toggleRunHistory,
   enableCopilot,
+  isUnitTest,
   switchViews,
   saveWorkflowFromCode,
   toggleMonitoringView,
@@ -82,6 +86,7 @@ export const DesignerCommandBar = ({
   isDesignerView?: boolean;
   isMonitoringView?: boolean;
   isDarkMode: boolean;
+  isUnitTest: boolean;
   showConnectionsPanel?: boolean;
   showRunHistory?: boolean;
   toggleRunHistory: () => void;
@@ -135,6 +140,21 @@ export const DesignerCommandBar = ({
       }
     }
   });
+  const { isLoading: isSavingUnitTest, mutate: saveUnitTestMutate } = useMutation(async () => {
+    const designerState = DesignerStore.getState();
+    const definition = await serializeUnitTestDefinition(designerState);
+
+    console.log(definition);
+    alert('Check console for unit test serialization');
+  });
+
+  const { isLoading: isSavingBlankUnitTest, mutate: saveBlankUnitTestMutate } = useMutation(async () => {
+    const designerState = DesignerStore.getState();
+    const operationContents = await getNodeOutputOperations(designerState);
+
+    console.log(operationContents);
+    alert('Check console for blank unit test operationContents');
+  });
 
   const { isLoading: isDownloadingDocument, mutate: downloadDocument } = useMutation(async () => {
     const designerState = DesignerStore.getState();
@@ -183,10 +203,13 @@ export const DesignerCommandBar = ({
   });
   const allWorkflowParameterErrors = useWorkflowParameterValidationErrors();
   const haveWorkflowParameterErrors = Object.keys(allWorkflowParameterErrors ?? {}).length > 0;
+  const allAssertionsErrors = useAssertionsValidationErrors();
+  const haveAssertionErrors = Object.keys(allAssertionsErrors ?? {}).length > 0;
   const allSettingsErrors = useAllSettingsValidationErrors();
   const haveSettingsErrors = Object.keys(allSettingsErrors ?? {}).length > 0;
   const allConnectionErrors = useAllConnectionErrors();
   const haveConnectionErrors = Object.keys(allConnectionErrors ?? {}).length > 0;
+  const saveBlankUnitTestIsDisabled = !isUnitTest || isSavingBlankUnitTest || haveAssertionErrors;
 
   const haveErrors = useMemo(
     () => allInputErrors.length > 0 || haveWorkflowParameterErrors || haveSettingsErrors || haveConnectionErrors,
@@ -195,6 +218,7 @@ export const DesignerCommandBar = ({
 
   const saveIsDisabled = isSaving || allInputErrors.length > 0 || haveWorkflowParameterErrors || haveSettingsErrors || !designerIsDirty;
 
+  const saveUnitTestIsDisabled = !isUnitTest || isSavingUnitTest || haveAssertionErrors;
   const isUndoDisabled = !useCanUndo();
   const isRedoDisabled = !useCanRedo();
 
@@ -289,6 +313,36 @@ export const DesignerCommandBar = ({
           }
         },
       },
+      {
+        key: 'saveUnitTest',
+        text: 'Save Unit Test',
+        disabled: saveUnitTestIsDisabled,
+        onRenderIcon: () => {
+          return isSavingUnitTest ? (
+            <Spinner size={'extra-tiny'} />
+          ) : (
+            <FontIcon aria-label="Save" iconName="Save" className={saveUnitTestIsDisabled ? classNames.azureGrey : classNames.azureBlue} />
+          );
+        },
+        onClick: () => {
+          saveUnitTestMutate();
+        },
+      },
+      {
+        key: 'saveBlankUnitTest',
+        text: 'Save Blank Unit Test',
+        disabled: saveBlankUnitTestIsDisabled,
+        onRenderIcon: () => {
+          return isSavingBlankUnitTest ? (
+            <Spinner size="small" />
+          ) : (
+            <FontIcon aria-label="Save" iconName="Save" className={classNames.azureBlue} />
+          );
+        },
+        onClick: () => {
+          saveBlankUnitTestMutate();
+        },
+      },
       {
         key: 'discard',
         disabled: isSaving || !isDesignerView,
@@ -306,6 +360,15 @@ export const DesignerCommandBar = ({
         onClick: () => !!dispatch(openPanel({ panelMode: 'WorkflowParameters' })),
         onRenderText: (item: { text: string }) => <CustomCommandBarButton text={item.text} showError={haveWorkflowParameterErrors} />,
       },
+      {
+        key: 'Assertions',
+        text: 'Assertions',
+        ariaLabel: 'Assertions',
+        iconProps: { iconName: 'CheckMark' },
+        disabled: !isUnitTest,
+        onClick: () => !!dispatch(openPanel({ panelMode: 'Assertions' })),
+        onRenderText: (item: { text: string }) => <CustomCommandBarButton text={item.text} showError={haveAssertionErrors} />,
+      },
       {
         key: 'codeview',
         text: isDesignerView ? 'Code View' : 'Designer View',
@@ -395,9 +458,11 @@ export const DesignerCommandBar = ({
       isSaving,
       isDesignerView,
       showConnectionsPanel,
+      isSavingBlankUnitTest,
+      saveBlankUnitTestIsDisabled,
+      saveBlankUnitTestMutate,
       haveErrors,
       isDarkMode,
-      isCopilotReady,
       isUndoDisabled,
       isRedoDisabled,
       saveWorkflowMutate,
@@ -408,6 +473,12 @@ export const DesignerCommandBar = ({
       switchViews,
       haveConnectionErrors,
       enableCopilot,
+      isCopilotReady,
+      isUnitTest,
+      saveUnitTestMutate,
+      isSavingUnitTest,
+      saveUnitTestIsDisabled,
+      haveAssertionErrors,
       isDownloadingDocument,
       downloadDocument,
       baseEndItems,

apps/Standalone/src/designer/app/AzureLogicAppsDesigner/laDesigner.tsx

@@ -82,6 +82,7 @@ const DesignerEditor = () => {
   const {
     isReadOnly,
     isDarkMode,
+    isUnitTest,
     isMonitoringView,
     runId,
     appId,
@@ -397,6 +398,7 @@ const DesignerEditor = () => {
           isDarkMode,
           readOnly: isReadOnly,
           isMonitoringView,
+          isUnitTest,
           suppressDefaultNodeSelectFunctionality: suppressDefaultNodeSelect,
           hostOptions: {
             ...hostOptions,
@@ -444,6 +446,7 @@ const DesignerEditor = () => {
                   discard={discardAllChanges}
                   location={canonicalLocation}
                   isReadOnly={isReadOnly}
+                  isUnitTest={isUnitTest}
                   isDarkMode={isDarkMode}
                   isDesignerView={designerView}
                   showConnectionsPanel={showConnectionsPanel}

apps/Standalone/src/designer/app/AzureLogicAppsDesigner/laDesignerConsumption.tsx

@@ -327,6 +327,7 @@ const DesignerEditorConsumption = () => {
                   isReadOnly={readOnly}
                   isDarkMode={isDarkMode}
                   isDesignerView={designerView}
+                  isUnitTest={false}
                   isMonitoringView={isMonitoringView}
                   showConnectionsPanel={showConnectionsPanel}
                   enableCopilot={() => dispatch(setIsChatBotEnabled(!showChatBot))}

apps/Standalone/src/designer/app/SettingsSections/contextSettings.tsx

@@ -6,6 +6,7 @@ import {
   useIsReadOnly,
   useShowConnectionsPanel,
   useHostOptions,
+  useIsUnitTestView,
   useShowPerformanceDebug,
   useSuppressDefaultNodeSelect,
   useStringOverrides,
@@ -20,6 +21,7 @@ import {
   setAreCustomEditorsEnabled,
   setShowConnectionsPanel,
   setHostOptions,
+  setUnitTest,
   setShowPerformanceDebug,
   setSuppressDefaultNodeSelect,
   setStringOverrides,
@@ -33,6 +35,7 @@ import { useDispatch } from 'react-redux';
 const ContextSettings = () => {
   const isReadOnly = useIsReadOnly();
   const isMonitoringView = useIsMonitoringView();
+  const isUnitTest = useIsUnitTestView();
   const isDarkMode = useIsDarkMode();
   const showConnectionsPanel = useShowConnectionsPanel();
   const areCustomEditorsEnabled = useAreCustomEditorsEnabled();
@@ -54,6 +57,17 @@ const ContextSettings = () => {
     [dispatch]
   );
 
+  const changeUnitTestView = useCallback(
+    (_: unknown, checked?: boolean) => {
+      dispatch(setUnitTest(!!checked));
+      if (checked) {
+        dispatch(loadRun());
+        dispatch(loadWorkflow());
+      }
+    },
+    [dispatch]
+  );
+
   return (
     <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap' }}>
       <Checkbox
@@ -63,6 +77,7 @@ const ContextSettings = () => {
         onChange={(_, checked) => dispatch(setReadOnly(!!checked))}
       />
       <Checkbox label="Monitoring View" checked={isMonitoringView} onChange={changeMonitoringView} />
+      <Checkbox label="Unit Test View" checked={isUnitTest} onChange={changeUnitTestView} />
       <Checkbox label="Dark Mode" checked={isDarkMode} onChange={(_, checked) => dispatch(setDarkMode(!!checked))} />
       <Checkbox
         label="Custom Editors"

apps/Standalone/src/designer/state/historyHelpers.ts

@@ -14,6 +14,7 @@ export const setStateHistory = (state: WorkflowLoadingState): void => {
       isDarkMode: state.isDarkMode,
       isReadOnly: state.isReadOnly,
       isMonitoringView: state.isMonitoringView,
+      isUnitTest: state.isUnitTest,
     };
     window.localStorage.setItem('msla-standalone-stateHistory', JSON.stringify(filteredState));
   } catch (e) {

apps/Standalone/src/designer/state/workflowLoadingSelectors.ts

@@ -25,6 +25,10 @@ export const useIsMonitoringView = () => {
   return useSelector((state: RootState) => state.workflowLoader.isMonitoringView);
 };
 
+export const useIsUnitTestView = () => {
+  return useSelector((state: RootState) => state.workflowLoader.isUnitTest);
+};
+
 export const useResourcePath = () => {
   return useSelector((state: RootState) => state.workflowLoader.resourcePath);
 };

apps/Standalone/src/designer/state/workflowLoadingSlice.ts

@@ -22,6 +22,7 @@ export interface WorkflowLoadingState {
   isDarkMode: boolean;
   hostingPlan: HostingPlanTypes;
   isLocal: boolean;
+  isUnitTest: boolean;
   showChatBot?: boolean;
   showRunHistory?: boolean;
   parameters: Record<string, WorkflowParameter>;
@@ -51,6 +52,7 @@ const initialState: WorkflowLoadingState = {
   resourcePath: '',
   isReadOnly: false,
   isMonitoringView: false,
+  isUnitTest: false,
   isDarkMode: false,
   hostingPlan: 'standard',
   isLocal: false,
@@ -155,6 +157,12 @@ export const workflowLoadingSlice = createSlice({
         state.isReadOnly = true;
       }
     },
+    setUnitTest: (state, action: PayloadAction<boolean>) => {
+      state.isUnitTest = action.payload;
+      if (action.payload) {
+        state.isReadOnly = true;
+      }
+    },
     setDarkMode: (state, action: PayloadAction<boolean>) => {
       state.isDarkMode = action.payload;
     },
@@ -194,6 +202,7 @@ export const workflowLoadingSlice = createSlice({
       state.isDarkMode = lastWorkflow.isDarkMode;
       state.isReadOnly = lastWorkflow.isReadOnly;
       state.isMonitoringView = lastWorkflow.isMonitoringView;
+      state.isUnitTest = lastWorkflow.isUnitTest;
       // Clear these state values, they get built with the other values
       state.workflowDefinition = null;
       state.runInstance = null;
@@ -255,6 +264,7 @@ export const {
   clearWorkflowDetails,
   setReadOnly,
   setMonitoringView,
+  setUnitTest,
   setDarkMode,
   setHostingPlan,
   setIsLocalSelected,

apps/vs-code-designer/src/app/commands/generateDeploymentScripts/__test__/FileManagement.test.ts

@@ -0,0 +1,98 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import * as vscode from 'vscode';
+import { FileManagement } from '../iacGestureHelperFunctions';
+import { localize } from '../../../../localize';
+import { ext } from '../../../../extensionVariables';
+
+/**
+ * Helper to create a mock workspace folder.
+ * @param fsPath The folder path.
+ * @returns A mock WorkspaceFolder.
+ */
+function mockWorkspaceFolder(fsPath: string): vscode.WorkspaceFolder {
+  return {
+    uri: vscode.Uri.file(fsPath),
+    name: 'Test Folder',
+    index: 0,
+  } as vscode.WorkspaceFolder;
+}
+
+describe('FileManagement.addFolderToWorkspace', () => {
+  let updateWorkspaceFoldersSpy: ReturnType<typeof vi.spyOn>;
+  let appendLogSpy: ReturnType<typeof vi.spyOn>;
+  let showErrorMessageSpy: ReturnType<typeof vi.spyOn>;
+
+  const folderPathExisting = '/existing/folder';
+  const folderPathNew = '/new/folder';
+  const folderPathError = '/error/folder';
+
+  beforeEach(() => {
+    // Ensure that ext.outputChannel is defined before spying on it.
+    ext.outputChannel = {
+      name: 'OutputChannel',
+      appendLog: vi.fn(),
+      append: vi.fn(),
+      appendLine: vi.fn(),
+      replace: vi.fn(),
+      clear: vi.fn(),
+      show: vi.fn(),
+      hide: vi.fn(),
+      dispose: vi.fn(),
+    };
+
+    // Spy on the VS Code and extension logging methods.
+    updateWorkspaceFoldersSpy = vi.spyOn(vscode.workspace, 'updateWorkspaceFolders') as any;
+    appendLogSpy = vi.spyOn(ext.outputChannel, 'appendLog');
+    showErrorMessageSpy = vi.spyOn(vscode.window, 'showErrorMessage') as any;
+
+    // Ensure a clean workspaceFolders state.
+    (vscode.workspace as any).workspaceFolders = [];
+  });
+
+  afterEach(() => {
+    // Reset any modifications to the workspace folders.
+    (vscode.workspace as any).workspaceFolders = undefined;
+    vi.restoreAllMocks();
+  });
+
+  it('should log and not add the folder if it is already in the workspace', () => {
+    // Arrange: Create a workspace that already contains the folder.
+    const existingFolder = mockWorkspaceFolder(folderPathExisting);
+    (vscode.workspace as any).workspaceFolders = [existingFolder];
+
+    // Act
+    FileManagement.addFolderToWorkspace(folderPathExisting);
+
+    // Assert
+    // First, we log that we are attempting to add the folder.
+    expect(appendLogSpy).toHaveBeenCalledWith(localize('addingFolderToWorkspace', `Adding folder to workspace: ${folderPathExisting}`));
+    // Then, we log that the folder already exists.
+    expect(appendLogSpy).toHaveBeenCalledWith(
+      localize('folderAlreadyInWorkspace', `Folder is already in the workspace: ${folderPathExisting}`)
+    );
+    // And updateWorkspaceFolders should not have been called.
+    expect(updateWorkspaceFoldersSpy).not.toHaveBeenCalled();
+  });
+
+  it('should catch and handle errors thrown during folder addition', () => {
+    // Arrange: Set up an empty workspace.
+    (vscode.workspace as any).workspaceFolders = [];
+    const testError = new Error('Test error');
+    // Stub updateWorkspaceFolders to throw an error.
+    updateWorkspaceFoldersSpy.mockImplementation(() => {
+      throw testError;
+    });
+    const showErrorSpy = vi.spyOn(vscode.window, 'showErrorMessage').mockImplementation(async () => undefined);
+
+    // Act
+    FileManagement.addFolderToWorkspace(folderPathError);
+
+    // Assert
+    // Verify that the error is logged.
+    expect(appendLogSpy).toHaveBeenCalledWith(localize('errorAddingFolder', `Error in addFolderToWorkspace: ${testError}`));
+    // And an error message is shown to the user.
+    expect(showErrorSpy).toHaveBeenCalledWith(
+      localize('errorMessageAddingFolder', 'Failed to add folder to workspace: ') + testError.message
+    );
+  });
+});