Add Playwright E2E tests for Indexing Policy (#2358)

* Initial plan

* Add Playwright test for Indexing Policy

Co-authored-by: sakshigupta12feb <206070758+sakshigupta12feb@users.noreply.github.com>

* Refactor Indexing Policy test to use Editor helper class

Co-authored-by: sakshigupta12feb <206070758+sakshigupta12feb@users.noreply.github.com>

* Address code review feedback - add helper function and improve editor handling

Co-authored-by: sakshigupta12feb <206070758+sakshigupta12feb@users.noreply.github.com>

* Further simplify code by using helper function consistently

Co-authored-by: sakshigupta12feb <206070758+sakshigupta12feb@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: sakshigupta12feb <206070758+sakshigupta12feb@users.noreply.github.com>

.github/workflows/cleanup.yml

@@ -6,8 +6,8 @@ on:
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
   schedule:
-    # Once every two hours
-    - cron: "0 */2 * * *"
+    # Once every day at 7 AM PST
+    - cron: "0 13 * * *"
 
 permissions:
   id-token: write

test/fx.ts

@@ -378,9 +378,11 @@ type PanelOpenOptions = {
 
 export enum CommandBarButton {
   Save = "Save",
+  Delete = "Delete",
   Execute = "Execute",
   ExecuteQuery = "Execute Query",
   UploadItem = "Upload Item",
+  NewDocument = "New Document",
 }
 
 /** Helper class that provides locator methods for DataExplorer components, on top of a Frame */
@@ -478,7 +480,7 @@ export class DataExplorer {
     return await this.waitForNode(`${databaseId}/${containerId}/Documents`);
   }
 
-  async waitForCommandBarButton(label: string, timeout?: number): Promise<Locator> {
+  async waitForCommandBarButton(label: CommandBarButton, timeout?: number): Promise<Locator> {
     const commandBar = this.commandBarButton(label);
     await commandBar.waitFor({ state: "visible", timeout });
     return commandBar;
@@ -515,15 +517,6 @@ export class DataExplorer {
     const containerNode = await this.waitForContainerNode(context.database.id, context.container.id);
     await containerNode.expand();
 
-    // refresh tree to remove deleted database
-    const consoleMessages = await this.getNotificationConsoleMessages();
-    const refreshButton = this.frame.getByTestId("Sidebar/RefreshButton");
-    await refreshButton.click();
-    await expect(consoleMessages).toContainText("Successfully refreshed databases", {
-      timeout: ONE_MINUTE_MS,
-    });
-    await this.collapseNotificationConsole();
-
     const scaleAndSettingsButton = this.frame.getByTestId(
       `TreeNode:${context.database.id}/${context.container.id}/Scale & Settings`,
     );

test/mongo/document.spec.ts

@@ -1,7 +1,7 @@
 import { expect, test } from "@playwright/test";
 
 import { setupCORSBypass } from "../CORSBypass";
-import { DataExplorer, DocumentsTab, TestAccount } from "../fx";
+import { CommandBarButton, DataExplorer, DocumentsTab, TestAccount } from "../fx";
 import { retry, serializeMongoToJson, setPartitionKeys } from "../testData";
 import { documentTestCases } from "./testCases";
 
@@ -48,19 +48,20 @@ for (const { name, databaseId, containerId, documents } of documentTestCases) {
           expect(resultData?._id).not.toBeNull();
           expect(resultData?._id).toEqual(docId);
         });
-        test(`should be able to create and delete new document from ${docId}`, async () => {
+        test(`should be able to create and delete new document from ${docId}`, async ({ page }) => {
           const span = documentsTab.documentsListPane.getByText(docId, { exact: true }).nth(0);
           await span.waitFor();
           await expect(span).toBeVisible();
 
           await span.click();
+          await page.waitForTimeout(5000); // wait for 5 seconds to ensure document is fully loaded. waitforTimeout is not recommended generally but here we are working around flakiness in the test env
+
           let newDocumentId;
           await retry(async () => {
-            const newDocumentButton = await explorer.waitForCommandBarButton("New Document", 5000);
+            const newDocumentButton = await explorer.waitForCommandBarButton(CommandBarButton.NewDocument, 5000);
             await expect(newDocumentButton).toBeVisible();
             await expect(newDocumentButton).toBeEnabled();
             await newDocumentButton.click();
-
             await expect(documentsTab.resultsEditor.locator).toBeAttached({ timeout: 60 * 1000 });
 
             newDocumentId = `${Date.now().toString()}-delete`;
@@ -71,8 +72,9 @@ for (const { name, databaseId, containerId, documents } of documentTestCases) {
             };
 
             await documentsTab.resultsEditor.setText(JSON.stringify(newDocument));
-            const saveButton = await explorer.waitForCommandBarButton("Save", 5000);
+            const saveButton = await explorer.waitForCommandBarButton(CommandBarButton.Save, 5000);
             await saveButton.click({ timeout: 5000 });
+
             await expect(saveButton).toBeHidden({ timeout: 5000 });
           }, 3);
 
@@ -84,7 +86,7 @@ for (const { name, databaseId, containerId, documents } of documentTestCases) {
           await newSpan.click();
           await expect(documentsTab.resultsEditor.locator).toBeAttached({ timeout: 60 * 1000 });
 
-          const deleteButton = await explorer.waitForCommandBarButton("Delete", 5000);
+          const deleteButton = await explorer.waitForCommandBarButton(CommandBarButton.Delete, 5000);
           await deleteButton.click();
 
           const deleteDialogButton = await explorer.waitForDialogButton("Delete", 5000);

test/sql/document.spec.ts

@@ -136,9 +136,7 @@ test.describe.serial("Upload Item", () => {
     if (existsSync(uploadDocumentDirPath)) {
       rmdirSync(uploadDocumentDirPath);
     }
-    if (!process.env.CI) {
-      await context?.dispose();
-    }
+    await context?.dispose();
   });
 
   test.afterEach("Close Upload Items panel if still open", async () => {

test/sql/query.spec.ts

@@ -30,12 +30,9 @@ test.beforeEach("Open new query tab", async ({ page }) => {
   await explorer.frame.getByTestId("NotificationConsole/Contents").waitFor();
 });
 
-// Delete database only if not running in CI
-if (!process.env.CI) {
-  test.afterAll("Delete Test Database", async () => {
-    await context?.dispose();
-  });
-}
+test.afterAll("Delete Test Database", async () => {
+  await context?.dispose();
+});
 
 test("Query results", async () => {
   // Run the query and verify the results

test/sql/scaleAndSettings/changePartitionKey.spec.ts

@@ -23,12 +23,9 @@ test.describe("Change Partition Key", () => {
     await PartitionKeyTab.click();
   });
 
-  // Delete database only if not running in CI
-  if (!process.env.CI) {
-    test.afterEach("Delete Test Database", async () => {
-      await context?.dispose();
-    });
-  }
+  test.afterEach("Delete Test Database", async () => {
+    await context?.dispose();
+  });
 
   test("Change partition key path", async ({ page }) => {
     await expect(explorer.frame.getByText("/partitionKey")).toBeVisible();

test/sql/scaleAndSettings/indexingPolicy.spec.ts

@@ -0,0 +1,157 @@
+import { expect, test } from "@playwright/test";
+import { CommandBarButton, DataExplorer, Editor, ONE_MINUTE_MS, TestAccount } from "../../fx";
+import { createTestSQLContainer, TestContainerContext } from "../../testData";
+
+test.describe("Indexing Policy under Scale & Settings", () => {
+  let context: TestContainerContext = null!;
+  let explorer: DataExplorer = null!;
+
+  // Helper function to get the indexing policy editor
+  const getIndexingPolicyEditor = (): Editor => {
+    const editorContainer = explorer.frame.locator(".settingsV2Editor");
+    return new Editor(explorer.frame, editorContainer);
+  };
+
+  test.beforeAll("Create Test Database & Open Indexing Policy tab", async ({ browser }) => {
+    context = await createTestSQLContainer();
+    const page = await browser.newPage();
+    explorer = await DataExplorer.open(page, TestAccount.SQL);
+
+    // Click Scale & Settings and open Indexing Policy tab
+    await explorer.openScaleAndSettings(context);
+    const indexingPolicyTab = explorer.frame.getByTestId("settings-tab-header/IndexingPolicyTab");
+    await indexingPolicyTab.click();
+  });
+
+  test.afterAll("Delete Test Database", async () => {
+    await context?.dispose();
+  });
+
+  test("Verify Indexing Policy tab is visible", async () => {
+    const indexingPolicyTab = explorer.frame.getByTestId("settings-tab-header/IndexingPolicyTab");
+    await expect(indexingPolicyTab).toBeVisible();
+  });
+
+  test("Verify Indexing Policy editor is present", async () => {
+    // The Monaco editor is rendered in a div with class settingsV2Editor
+    const editorContainer = explorer.frame.locator(".settingsV2Editor");
+    await expect(editorContainer).toBeVisible();
+
+    // Verify the editor has content (default indexing policy) using Editor helper
+    const editor = getIndexingPolicyEditor();
+    const editorContent = await editor.text();
+    expect(editorContent).toBeTruthy();
+  });
+
+  test("Update Indexing Policy - Change automatic to false", async () => {
+    // Use helper function to get editor instance
+    const editor = getIndexingPolicyEditor();
+
+    // Verify the Monaco editor is visible
+    const editorElement = explorer.frame.locator(".settingsV2Editor").locator(".monaco-editor");
+    await expect(editorElement).toBeVisible();
+
+    // Get current indexing policy content
+    const currentContent = await editor.text();
+    expect(currentContent).toBeTruthy();
+    const indexingPolicy = JSON.parse(currentContent as string);
+
+    // Verify default policy structure
+    expect(indexingPolicy).toHaveProperty("automatic");
+    expect(indexingPolicy).toHaveProperty("indexingMode");
+
+    // Modify the indexing policy - change automatic to false
+    indexingPolicy.automatic = false;
+    const updatedContent = JSON.stringify(indexingPolicy, null, 4);
+
+    // Set the new content in the editor
+    await editor.setText(updatedContent);
+
+    // Verify the warning message appears for unsaved changes
+    const warningMessage = explorer.frame.locator(".ms-MessageBar--warning");
+    await expect(warningMessage).toBeVisible({ timeout: 5000 });
+
+    // Save the changes
+    await explorer.commandBarButton(CommandBarButton.Save).click();
+
+    // Verify success message
+    await expect(explorer.getConsoleHeaderStatus()).toContainText(
+      `Successfully updated container ${context.container.id}`,
+      {
+        timeout: 2 * ONE_MINUTE_MS,
+      },
+    );
+
+    // Verify warning message is no longer visible after save
+    await expect(warningMessage).not.toBeVisible({ timeout: 5000 });
+  });
+
+  test("Update Indexing Policy - Change indexingMode to lazy", async () => {
+    // Use helper function to get editor instance
+    const editor = getIndexingPolicyEditor();
+
+    // Verify the Monaco editor is visible
+    const editorElement = explorer.frame.locator(".settingsV2Editor").locator(".monaco-editor");
+    await expect(editorElement).toBeVisible();
+
+    // Get current indexing policy content
+    const currentContent = await editor.text();
+    expect(currentContent).toBeTruthy();
+    const indexingPolicy = JSON.parse(currentContent as string);
+
+    // Modify the indexing policy - change indexingMode to lazy
+    indexingPolicy.indexingMode = "lazy";
+    const updatedContent = JSON.stringify(indexingPolicy, null, 4);
+
+    // Set the new content in the editor
+    await editor.setText(updatedContent);
+
+    // Verify the warning message appears
+    const warningMessage = explorer.frame.locator(".ms-MessageBar--warning");
+    await expect(warningMessage).toBeVisible({ timeout: 5000 });
+
+    // Save the changes
+    await explorer.commandBarButton(CommandBarButton.Save).click();
+
+    // Verify success message
+    await expect(explorer.getConsoleHeaderStatus()).toContainText(
+      `Successfully updated container ${context.container.id}`,
+      {
+        timeout: 2 * ONE_MINUTE_MS,
+      },
+    );
+  });
+
+  test("Update Indexing Policy - Revert automatic to true", async () => {
+    // Use helper function to get editor instance
+    const editor = getIndexingPolicyEditor();
+
+    // Verify the Monaco editor is visible
+    const editorElement = explorer.frame.locator(".settingsV2Editor").locator(".monaco-editor");
+    await expect(editorElement).toBeVisible();
+
+    // Get current indexing policy content
+    const currentContent = await editor.text();
+    expect(currentContent).toBeTruthy();
+    const indexingPolicy = JSON.parse(currentContent as string);
+
+    // Revert the changes - set automatic back to true and indexingMode to consistent
+    indexingPolicy.automatic = true;
+    indexingPolicy.indexingMode = "consistent";
+    const updatedContent = JSON.stringify(indexingPolicy, null, 4);
+
+    // Set the new content in the editor
+    await editor.setText(updatedContent);
+
+    // Save the changes
+    await explorer.commandBarButton(CommandBarButton.Save).click();
+
+    // Verify success message
+    await expect(explorer.getConsoleHeaderStatus()).toContainText(
+      `Successfully updated container ${context.container.id}`,
+      {
+        timeout: 2 * ONE_MINUTE_MS,
+      },
+    );
+  });
+});

test/sql/scaleAndSettings/scale.spec.ts

@@ -118,7 +118,5 @@ async function openScaleTab(browser: Browser): Promise<SetupResult> {
 }
 
 async function cleanup({ context }: Partial<SetupResult>) {
-  if (!process.env.CI) {
-    await context?.dispose();
-  }
+  await context?.dispose();
 }

test/sql/scaleAndSettings/settings.spec.ts

@@ -17,12 +17,9 @@ test.describe("Settings under Scale & Settings", () => {
     await settingsTab.click();
   });
 
-  // Delete database only if not running in CI
-  if (!process.env.CI) {
-    test.afterAll("Delete Test Database", async () => {
-      await context?.dispose();
-    });
-  }
+  test.afterAll("Delete Test Database", async () => {
+    await context?.dispose();
+  });
 
   test("Update TTL to On (no default)", async () => {
     const ttlOnNoDefaultRadioButton = explorer.frame.getByRole("radio", { name: "ttl-on-no-default-option" });

test/sql/scripts/storedProcedure.spec.ts

@@ -43,7 +43,7 @@ test.describe("Stored Procedures", () => {
     );
 
     // Execute stored procedure
-    const executeButton = explorer.commandBarButton(CommandBarButton.Execute);
+    const executeButton = explorer.commandBarButton(CommandBarButton.Execute).first();
     await executeButton.click();
     const executeSidePanelButton = explorer.frame.getByTestId("Panel/OkButton");
     await executeSidePanelButton.click();

test/sql/scripts/trigger.spec.ts

@@ -26,11 +26,9 @@ test.describe("Triggers", () => {
     explorer = await DataExplorer.open(page, TestAccount.SQL);
   });
 
-  if (!process.env.CI) {
-    test.afterAll("Delete Test Database", async () => {
-      await context?.dispose();
-    });
-  }
+  test.afterAll("Delete Test Database", async () => {
+    await context?.dispose();
+  });
 
   test("Add and delete trigger", async ({ page }, testInfo) => {
     // Open container context menu and click New Trigger

test/sql/scripts/userDefinedFunction.spec.ts

@@ -19,11 +19,9 @@ test.describe("User Defined Functions", () => {
     explorer = await DataExplorer.open(page, TestAccount.SQL);
   });
 
-  if (!process.env.CI) {
-    test.afterAll("Delete Test Database", async () => {
-      await context?.dispose();
-    });
-  }
+  test.afterAll("Delete Test Database", async () => {
+    await context?.dispose();
+  });
 
   test("Add, execute, and delete user defined function", async ({ page }, testInfo) => {
     // Open container context menu and click New UDF