add user defined function playwright test

src/Common/dataAccess/deleteStoredProcedure.ts

@@ -28,6 +28,7 @@ export async function deleteStoredProcedure(
     } else {
       await client().database(databaseId).container(collectionId).scripts.storedProcedure(storedProcedureId).delete();
     }
+    logConsoleProgress(`Successfully deleted stored procedure ${storedProcedureId}`);
   } catch (error) {
     handleError(error, "DeleteStoredProcedure", `Error while deleting stored procedure ${storedProcedureId}`);
     throw error;

src/Common/dataAccess/deleteUserDefinedFunction.ts

@@ -24,6 +24,7 @@ export async function deleteUserDefinedFunction(databaseId: string, collectionId
     } else {
       await client().database(databaseId).container(collectionId).scripts.userDefinedFunction(id).delete();
     }
+    logConsoleProgress(`Successfully deleted user defined function ${id}`);
   } catch (error) {
     handleError(error, "DeleteUserDefinedFunction", `Error while deleting user defined function ${id}`);
     throw error;

src/Explorer/Tabs/StoredProcedureTab/StoredProcedureTabComponent.tsx

@@ -1,6 +1,7 @@
 import { Resource, StoredProcedureDefinition } from "@azure/cosmos";
 import { Pivot, PivotItem } from "@fluentui/react";
 import { KeyboardAction } from "KeyboardShortcuts";
+import { logConsoleInfo } from "Utils/NotificationConsoleUtils";
 import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
 import React from "react";
 import ExecuteQueryIcon from "../../../../images/ExecuteQuery.svg";
@@ -435,7 +436,7 @@ export default class StoredProcedureTabComponent extends React.Component<
             });
             useCommandBar.getState().setContextButtons(this.getTabsButtons());
           }, 100);
-
+          logConsoleInfo(`Sucessfully created stored procedure ${createdResource.id}`);
           return createdResource;
         },
         (createError) => {

src/Explorer/Tabs/UserDefinedFunctionTabContent.tsx

@@ -2,6 +2,7 @@ import { UserDefinedFunctionDefinition } from "@azure/cosmos";
 import { Label, TextField } from "@fluentui/react";
 import { FluentProvider, webDarkTheme, webLightTheme } from "@fluentui/react-components";
 import { KeyboardAction } from "KeyboardShortcuts";
+import { logConsoleInfo } from "Utils/NotificationConsoleUtils";
 import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
 import { useThemeStore } from "hooks/useTheme";
 import React, { Component } from "react";
@@ -170,6 +171,7 @@ export default class UserDefinedFunctionTabContent extends Component<
           startKey,
         );
         this.props.editorState(ViewModels.ScriptEditorState.existingNoEdits);
+        logConsoleInfo(`Sucessfully created user defined function ${createdResource.id}`);
       }
     } catch (createError) {
       this.props.isExecutionError(true);

test/fx.ts

@@ -325,6 +325,7 @@ type PanelOpenOptions = {
 
 export enum CommandBarButton {
   Save = "Save",
+  Execute = "Execute",
   ExecuteQuery = "Execute Query",
   UploadItem = "Upload Item",
 }

test/sql/scripts/storedProcedure.spec.ts

@@ -0,0 +1,75 @@
+import { expect, test } from "@playwright/test";
+import { CommandBarButton, DataExplorer, ONE_MINUTE_MS, TestAccount } from "../../fx";
+import { createTestSQLContainer, TestContainerContext } from "../../testData";
+
+test.describe("Stored Procedures", () => {
+  let context: TestContainerContext = null!;
+  let explorer: DataExplorer = null!;
+
+  test.beforeAll("Create Test Database", async () => {
+    context = await createTestSQLContainer(true);
+  });
+
+  test.beforeEach("Open container", async ({ page }) => {
+    explorer = await DataExplorer.open(page, TestAccount.SQL);
+  });
+
+  test.afterAll("Delete Test Database", async () => {
+    await context?.dispose();
+  });
+
+  test("Add, execute, and delete stored procedure", async () => {
+    // Open container context menu and click New Stored Procedure
+    const containerNode = await explorer.waitForContainerNode(context.database.id, context.container.id);
+    await containerNode.openContextMenu();
+    await containerNode.contextMenuItem("New Stored Procedure").click();
+
+    // Type stored procedure id and use stock procedure
+    const storedProcedureIdTextBox = explorer.frame.getByLabel("Stored procedure id");
+    await storedProcedureIdTextBox.isVisible();
+    const storedProcedureName = "stored-procedure-1";
+    await storedProcedureIdTextBox.fill(storedProcedureName);
+
+    const saveButton = explorer.commandBarButton(CommandBarButton.Save);
+    await expect(saveButton).toBeEnabled();
+    await saveButton.click();
+
+    await expect(explorer.getConsoleMessage()).toContainText(
+      `Sucessfully created stored procedure ${storedProcedureName}`,
+      {
+        timeout: ONE_MINUTE_MS,
+      },
+    );
+
+    // Execute stored procedure
+    const executeButton = explorer.commandBarButton(CommandBarButton.Execute);
+    await executeButton.click();
+    const executeSidePanelButton = explorer.frame.getByTestId("Panel/OkButton");
+    await executeSidePanelButton.click();
+
+    const executeStoredProcedureResult = explorer.frame.getByLabel("Execute stored procedure result");
+    await expect(executeStoredProcedureResult).toBeVisible();
+
+    // Delete stored procedure
+    await containerNode.expand();
+    const storedProceduresNode = await explorer.waitForNode(
+      `${context.database.id}/${context.container.id}/Stored Procedures`,
+    );
+    await storedProceduresNode.expand();
+    const storedProcedureNode = await explorer.waitForNode(
+      `${context.database.id}/${context.container.id}/Stored Procedures/${storedProcedureName}`,
+    );
+
+    await storedProcedureNode.openContextMenu();
+    await storedProcedureNode.contextMenuItem("Delete Stored Procedure").click();
+    const deleteStoredProcedureButton = explorer.frame.getByTestId("DialogButton:Delete");
+    await deleteStoredProcedureButton.click();
+
+    await expect(explorer.getConsoleMessage()).toContainText(
+      `Successfully deleted stored procedure ${storedProcedureName}`,
+      {
+        timeout: ONE_MINUTE_MS,
+      },
+    );
+  });
+});

test/sql/scripts/userDefinedFunction.spec.ts

@@ -0,0 +1,74 @@
+import { expect, test } from "@playwright/test";
+import { CommandBarButton, DataExplorer, ONE_MINUTE_MS, TestAccount } from "../../fx";
+import { createTestSQLContainer, TestContainerContext } from "../../testData";
+
+test.describe("User Defined Functions", () => {
+  let context: TestContainerContext = null!;
+  let explorer: DataExplorer = null!;
+  const udfBody = `function extractDocumentId(doc) {
+    return {
+        id: doc.id
+    };
+   }`;
+
+  test.beforeAll("Create Test Database", async () => {
+    context = await createTestSQLContainer(true);
+  });
+
+  test.beforeEach("Open container", async ({ page }) => {
+    explorer = await DataExplorer.open(page, TestAccount.SQL);
+  });
+
+  test.afterAll("Delete Test Database", async () => {
+    await context?.dispose();
+  });
+
+  test("Add, execute, and delete user defined function", async ({ page }) => {
+    // Open container context menu and click New UDF
+    const containerNode = await explorer.waitForContainerNode(context.database.id, context.container.id);
+    await containerNode.openContextMenu();
+    await containerNode.contextMenuItem("New UDF").click();
+
+    // Assign UDF id
+    const udfIdTextBox = explorer.frame.getByLabel("User Defined Function Id");
+    const udfName: string = "extractDocumentId";
+    await udfIdTextBox.fill(udfName);
+
+    // Create UDF body that extracts the document id from a document
+    const udfBodyTextArea = explorer.frame.getByTestId("EditorReact/Host/Loaded");
+    await udfBodyTextArea.click();
+
+    // Clear existing content
+    const isMac: boolean = process.platform === "darwin";
+    await page.keyboard.press(isMac ? "Meta+A" : "Control+A");
+    await page.keyboard.press("Backspace");
+
+    await page.keyboard.type(udfBody);
+
+    // Save changes
+    const saveButton = explorer.commandBarButton(CommandBarButton.Save);
+    await expect(saveButton).toBeEnabled();
+    await saveButton.click();
+    await expect(explorer.getConsoleMessage()).toContainText(`Sucessfully created user defined function ${udfName}`, {
+      timeout: ONE_MINUTE_MS,
+    });
+
+    // Delete UDF
+    await containerNode.expand();
+    const udfsNode = await explorer.waitForNode(
+      `${context.database.id}/${context.container.id}/User Defined Functions`,
+    );
+    await udfsNode.expand();
+    const udfNode = await explorer.waitForNode(
+      `${context.database.id}/${context.container.id}/User Defined Functions/${udfName}`,
+    );
+    await udfNode.openContextMenu();
+    await udfNode.contextMenuItem("Delete User Defined Function").click();
+    const deleteUserDefinedFunctionButton = explorer.frame.getByTestId("DialogButton:Delete");
+    await deleteUserDefinedFunctionButton.click();
+
+    await expect(explorer.getConsoleMessage()).toContainText(`Successfully deleted user defined function ${udfName}`, {
+      timeout: ONE_MINUTE_MS,
+    });
+  });
+});