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>

test/sql/scaleAndSettings/dataMasking.spec.ts

@@ -1,131 +0,0 @@
-import { expect, test, type Page } from "@playwright/test";
-import { DataExplorer, TestAccount } from "../../fx";
-import { createTestSQLContainer, TestContainerContext } from "../../testData";
-
-/**
- * Tests for Dynamic Data Masking (DDM) feature.
- *
- * Prerequisites:
- * - Test account must have the EnableDynamicDataMasking capability enabled
- * - If the capability is not enabled, the DataMaskingTab will not be visible and tests will be skipped
- *
- * Important Notes:
- * - Once DDM is enabled on a container, it cannot be disabled (isPolicyEnabled cannot be set to false)
- * - Tests focus on enabling DDM and modifying the masking policy configuration
- */
-
-let testContainer: TestContainerContext;
-let DATABASE_ID: string;
-let CONTAINER_ID: string;
-
-test.beforeAll(async () => {
-  testContainer = await createTestSQLContainer();
-  DATABASE_ID = testContainer.database.id;
-  CONTAINER_ID = testContainer.container.id;
-});
-
-// Clean up test database after all tests
-test.afterAll(async () => {
-  if (testContainer) {
-    await testContainer.dispose();
-  }
-});
-
-// Helper function to navigate to Data Masking tab
-async function navigateToDataMaskingTab(page: Page, explorer: DataExplorer): Promise<boolean> {
-  // Refresh the tree to see the newly created database
-  const refreshButton = explorer.frame.getByTestId("Sidebar/RefreshButton");
-  await refreshButton.click();
-  await page.waitForTimeout(3000);
-
-  // Expand database and container nodes
-  const databaseNode = await explorer.waitForNode(DATABASE_ID);
-  await databaseNode.expand();
-  await page.waitForTimeout(2000);
-
-  const containerNode = await explorer.waitForNode(`${DATABASE_ID}/${CONTAINER_ID}`);
-  await containerNode.expand();
-  await page.waitForTimeout(1000);
-
-  // Click Scale & Settings or Settings (depending on container type)
-  let settingsNode = explorer.frame.getByTestId(`TreeNode:${DATABASE_ID}/${CONTAINER_ID}/Scale & Settings`);
-  const isScaleAndSettings = await settingsNode.isVisible().catch(() => false);
-
-  if (!isScaleAndSettings) {
-    settingsNode = explorer.frame.getByTestId(`TreeNode:${DATABASE_ID}/${CONTAINER_ID}/Settings`);
-  }
-
-  await settingsNode.click();
-  await page.waitForTimeout(2000);
-
-  // Check if Data Masking tab is available
-  const dataMaskingTab = explorer.frame.getByTestId("settings-tab-header/DataMaskingTab");
-  const isTabVisible = await dataMaskingTab.isVisible().catch(() => false);
-
-  if (!isTabVisible) {
-    return false;
-  }
-
-  await dataMaskingTab.click();
-  await page.waitForTimeout(1000);
-  return true;
-}
-
-test.describe("Data Masking under Scale & Settings", () => {
-  test("Data Masking tab should be visible and show JSON editor", async ({ page }) => {
-    const explorer = await DataExplorer.open(page, TestAccount.SQL);
-    const isTabAvailable = await navigateToDataMaskingTab(page, explorer);
-
-    if (!isTabAvailable) {
-      test.skip(
-        true,
-        "Data Masking tab is not available. Test account may not have EnableDynamicDataMasking capability.",
-      );
-    }
-
-    // Verify the Data Masking editor is visible
-    const dataMaskingEditor = explorer.frame.locator(".settingsV2Editor");
-    await expect(dataMaskingEditor).toBeVisible();
-  });
-
-  test("Data Masking editor should contain default policy structure", async ({ page }) => {
-    const explorer = await DataExplorer.open(page, TestAccount.SQL);
-    const isTabAvailable = await navigateToDataMaskingTab(page, explorer);
-
-    if (!isTabAvailable) {
-      test.skip(
-        true,
-        "Data Masking tab is not available. Test account may not have EnableDynamicDataMasking capability.",
-      );
-    }
-
-    // Verify the editor contains the expected JSON structure fields
-    const editorContent = explorer.frame.locator(".settingsV2Editor");
-    await expect(editorContent).toBeVisible();
-
-    // Check that the editor contains key policy fields (default policy has empty arrays)
-    await expect(editorContent).toContainText("includedPaths");
-    await expect(editorContent).toContainText("excludedPaths");
-    await expect(editorContent).toContainText("isPolicyEnabled");
-  });
-
-  test("Data Masking editor should have correct default policy values", async ({ page }) => {
-    const explorer = await DataExplorer.open(page, TestAccount.SQL);
-    const isTabAvailable = await navigateToDataMaskingTab(page, explorer);
-
-    if (!isTabAvailable) {
-      test.skip(
-        true,
-        "Data Masking tab is not available. Test account may not have EnableDynamicDataMasking capability.",
-      );
-    }
-
-    const editorContent = explorer.frame.locator(".settingsV2Editor");
-    await expect(editorContent).toBeVisible();
-
-    // Default policy should have isPolicyEnabled set to true
-    await expect(editorContent).toContainText("true");
-    // Default policy should have empty includedPaths and excludedPaths arrays
-    await expect(editorContent).toContainText("[]");
-  });
-});

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,
+      },
+    );
+  });
+});