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>

package.json

@@ -19,7 +19,7 @@
     "@nteract/commutable": "7.5.1",
     "@nteract/connected-components": "6.8.2",
     "@nteract/core": "15.1.9",
-    "@nteract/data-explorer": "8.2.12",
+    "@nteract/data-explorer": "8.0.3",
     "@nteract/directory-listing": "2.0.6",
     "@nteract/dropdown-menu": "1.0.1",
     "@nteract/editor": "10.1.12",
@@ -177,7 +177,7 @@
     "jest-html-loader": "1.0.0",
     "jest-react-hooks-shallow": "1.5.1",
     "jest-trx-results-processor": "3.0.2",
-    "less": "3.13.1",
+    "less": "3.8.1",
     "less-loader": "11.1.3",
     "less-vars-loader": "1.1.0",
     "mini-css-extract-plugin": "2.1.0",
@@ -195,7 +195,7 @@
     "typedoc": "0.26.2",
     "typescript": "4.9.5",
     "url-loader": "4.1.1",
-    "wait-on": "9.0.3",
+    "wait-on": "4.0.2",
     "webpack": "5.88.2",
     "webpack-bundle-analyzer": "4.9.1",
     "webpack-cli": "5.1.4",

test/fx.ts

@@ -58,9 +58,7 @@ export const defaultAccounts: Record<TestAccount, string> = {
 export const resourceGroupName = process.env.DE_TEST_RESOURCE_GROUP ?? "de-e2e-tests";
 export const subscriptionId = process.env.DE_TEST_SUBSCRIPTION_ID ?? "69e02f2d-f059-4409-9eac-97e8a276ae2c";
 export const TEST_AUTOSCALE_THROUGHPUT_RU = 1000;
-export const TEST_MANUAL_THROUGHPUT_RU = 800;
 export const TEST_AUTOSCALE_MAX_THROUGHPUT_RU_2K = 2000;
-export const TEST_AUTOSCALE_MAX_THROUGHPUT_RU_4K = 4000;
 export const TEST_MANUAL_THROUGHPUT_RU_2K = 2000;
 export const ONE_MINUTE_MS: number = 60 * 1000;
 

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/sharedThroughput.spec.ts

@@ -1,229 +0,0 @@
-import { Locator, expect, test } from "@playwright/test";
-import {
-  CommandBarButton,
-  DataExplorer,
-  ONE_MINUTE_MS,
-  TEST_AUTOSCALE_MAX_THROUGHPUT_RU_4K,
-  TEST_MANUAL_THROUGHPUT_RU,
-  TestAccount,
-} from "../../fx";
-import { TestDatabaseContext, createTestDB } from "../../testData";
-
-test.describe("Database with Shared Throughput", () => {
-  let dbContext: TestDatabaseContext = null!;
-  let explorer: DataExplorer = null!;
-  const containerId = "sharedcontainer";
-
-  // Helper methods
-  const getThroughputInput = (type: "manual" | "autopilot"): Locator => {
-    return explorer.frame.getByTestId(`${type}-throughput-input`);
-  };
-
-  test.afterEach("Delete Test Database", async () => {
-    await dbContext?.dispose();
-  });
-
-  test.describe("Manual Throughput Tests", () => {
-    test.beforeEach(async ({ page }) => {
-      explorer = await DataExplorer.open(page, TestAccount.SQL);
-    });
-
-    test("Create database with shared manual throughput and verify Scale node in UI", async () => {
-      test.setTimeout(120000); // 2 minutes timeout
-      // Create database with shared manual throughput (400 RU/s)
-      dbContext = await createTestDB({ throughput: 400 });
-
-      // Verify database node appears in the tree
-      const databaseNode = await explorer.waitForNode(dbContext.database.id);
-      expect(databaseNode).toBeDefined();
-
-      // Expand the database node to see child nodes
-      await databaseNode.expand();
-
-      // Verify that "Scale" node appears under the database
-      const scaleNode = await explorer.waitForNode(`${dbContext.database.id}/Scale`);
-      expect(scaleNode).toBeDefined();
-      await expect(scaleNode.element).toBeVisible();
-    });
-
-    test("Add container to shared database without dedicated throughput", async () => {
-      // Create database with shared manual throughput
-      dbContext = await createTestDB({ throughput: 400 });
-
-      // Wait for the database to appear in the tree
-      await explorer.waitForNode(dbContext.database.id);
-
-      // Add a container to the shared database via UI
-      const newContainerButton = await explorer.globalCommandButton("New Container");
-      await newContainerButton.click();
-
-      await explorer.whilePanelOpen(
-        "New Container",
-        async (panel, okButton) => {
-          // Select "Use existing" database
-          const useExistingRadio = panel.getByRole("radio", { name: /Use existing/i });
-          await useExistingRadio.click();
-
-          // Select the database from dropdown using the new data-testid
-          const databaseDropdown = panel.getByRole("combobox", { name: "Choose an existing database" });
-          await databaseDropdown.click();
-
-          await explorer.frame.getByRole("option", { name: dbContext.database.id }).click();
-          // Now you can target the specific database option by its data-testid
-          //await panel.getByTestId(`database-option-${dbContext.database.id}`).click();
-          // Fill container id
-          await panel.getByRole("textbox", { name: "Container id, Example Container1" }).fill(containerId);
-
-          // Fill partition key
-          await panel.getByRole("textbox", { name: "Partition key" }).fill("/pk");
-
-          // Ensure "Provision dedicated throughput" is NOT checked
-          const dedicatedThroughputCheckbox = panel.getByRole("checkbox", {
-            name: /Provision dedicated throughput for this container/i,
-          });
-
-          if (await dedicatedThroughputCheckbox.isVisible()) {
-            const isChecked = await dedicatedThroughputCheckbox.isChecked();
-            if (isChecked) {
-              await dedicatedThroughputCheckbox.uncheck();
-            }
-          }
-
-          await okButton.click();
-        },
-        { closeTimeout: 5 * ONE_MINUTE_MS },
-      );
-
-      // Verify container was created under the database
-      const containerNode = await explorer.waitForContainerNode(dbContext.database.id, containerId);
-      expect(containerNode).toBeDefined();
-    });
-
-    test("Scale shared database manual throughput", async () => {
-      // Create database with shared manual throughput (400 RU/s)
-      dbContext = await createTestDB({ throughput: 400 });
-
-      // Navigate to the scale settings by clicking the "Scale" node in the tree
-      const databaseNode = await explorer.waitForNode(dbContext.database.id);
-      await databaseNode.expand();
-      const scaleNode = await explorer.waitForNode(`${dbContext.database.id}/Scale`);
-      await scaleNode.element.click();
-
-      // Update manual throughput from 400 to 800
-      await getThroughputInput("manual").fill(TEST_MANUAL_THROUGHPUT_RU.toString());
-
-      // Save changes
-      await explorer.commandBarButton(CommandBarButton.Save).click();
-
-      // Verify success message
-      await expect(explorer.getConsoleHeaderStatus()).toContainText(
-        `Successfully updated offer for database ${dbContext.database.id}`,
-        {
-          timeout: 2 * ONE_MINUTE_MS,
-        },
-      );
-    });
-
-    test("Scale shared database from manual to autoscale", async () => {
-      // Create database with shared manual throughput (400 RU/s)
-      dbContext = await createTestDB({ throughput: 400 });
-
-      // Open database settings by clicking the "Scale" node
-      const databaseNode = await explorer.waitForNode(dbContext.database.id);
-      await databaseNode.expand();
-      const scaleNode = await explorer.waitForNode(`${dbContext.database.id}/Scale`);
-      await scaleNode.element.click();
-
-      // Switch to Autoscale
-      const autoscaleRadio = explorer.frame.getByText("Autoscale", { exact: true });
-      await autoscaleRadio.click();
-
-      // Set autoscale max throughput to 1000
-      //await getThroughputInput("autopilot").fill(TEST_AUTOSCALE_THROUGHPUT_RU.toString());
-
-      // Save changes
-      await explorer.commandBarButton(CommandBarButton.Save).click();
-
-      await expect(explorer.getConsoleHeaderStatus()).toContainText(
-        `Successfully updated offer for database ${dbContext.database.id}`,
-        {
-          timeout: 2 * ONE_MINUTE_MS,
-        },
-      );
-    });
-  });
-
-  test.describe("Autoscale Throughput Tests", () => {
-    test.beforeEach(async ({ page }) => {
-      explorer = await DataExplorer.open(page, TestAccount.SQL);
-    });
-
-    test("Create database with shared autoscale throughput and verify Scale node in UI", async () => {
-      test.setTimeout(120000); // 2 minutes timeout
-
-      // Create database with shared autoscale throughput (max 1000 RU/s)
-      dbContext = await createTestDB({ maxThroughput: 1000 });
-
-      // Verify database node appears
-      const databaseNode = await explorer.waitForNode(dbContext.database.id);
-      expect(databaseNode).toBeDefined();
-
-      // Expand the database node to see child nodes
-      await databaseNode.expand();
-
-      // Verify that "Scale" node appears under the database
-      const scaleNode = await explorer.waitForNode(`${dbContext.database.id}/Scale`);
-      expect(scaleNode).toBeDefined();
-      await expect(scaleNode.element).toBeVisible();
-    });
-
-    test("Scale shared database autoscale throughput", async () => {
-      // Create database with shared autoscale throughput (max 1000 RU/s)
-      dbContext = await createTestDB({ maxThroughput: 1000 });
-
-      // Open database settings
-      const databaseNode = await explorer.waitForNode(dbContext.database.id);
-      await databaseNode.expand();
-      const scaleNode = await explorer.waitForNode(`${dbContext.database.id}/Scale`);
-      await scaleNode.element.click();
-
-      // Update autoscale max throughput from 1000 to 4000
-      await getThroughputInput("autopilot").fill(TEST_AUTOSCALE_MAX_THROUGHPUT_RU_4K.toString());
-
-      // Save changes
-      await explorer.commandBarButton(CommandBarButton.Save).click();
-
-      // Verify success message
-      await expect(explorer.getConsoleHeaderStatus()).toContainText(
-        `Successfully updated offer for database ${dbContext.database.id}`,
-        {
-          timeout: 2 * ONE_MINUTE_MS,
-        },
-      );
-    });
-
-    test("Scale shared database from autoscale to manual", async () => {
-      // Create database with shared autoscale throughput (max 1000 RU/s)
-      dbContext = await createTestDB({ maxThroughput: 1000 });
-
-      // Open database settings
-      const databaseNode = await explorer.waitForNode(dbContext.database.id);
-      await databaseNode.expand();
-      const scaleNode = await explorer.waitForNode(`${dbContext.database.id}/Scale`);
-      await scaleNode.element.click();
-
-      // Switch to Manual
-      const manualRadio = explorer.frame.getByText("Manual", { exact: true });
-      await manualRadio.click();
-
-      // Save changes
-      await explorer.commandBarButton(CommandBarButton.Save).click();
-
-      // Verify success message
-      await expect(explorer.getConsoleHeaderStatus()).toContainText(
-        `Successfully updated offer for database ${dbContext.database.id}`,
-        { timeout: 2 * ONE_MINUTE_MS },
-      );
-    });
-  });
-});

test/testData.ts

@@ -82,75 +82,6 @@ export class TestContainerContext {
   }
 }
 
-export class TestDatabaseContext {
-  constructor(
-    public armClient: CosmosDBManagementClient,
-    public client: CosmosClient,
-    public database: Database,
-  ) {}
-
-  async dispose() {
-    await this.database.delete();
-  }
-}
-
-export interface CreateTestDBOptions {
-  throughput?: number;
-  maxThroughput?: number; // For autoscale
-}
-
-// Helper function to create ARM client and Cosmos client for SQL account
-async function createCosmosClientForSQLAccount(
-  accountType: TestAccount.SQL | TestAccount.SQLContainerCopyOnly = TestAccount.SQL,
-): Promise<{ armClient: CosmosDBManagementClient; client: CosmosClient }> {
-  const credentials = getAzureCLICredentials();
-  const adaptedCredentials = new AzureIdentityCredentialAdapter(credentials);
-  const armClient = new CosmosDBManagementClient(adaptedCredentials, subscriptionId);
-  const accountName = getAccountName(accountType);
-  const account = await armClient.databaseAccounts.get(resourceGroupName, accountName);
-
-  const clientOptions: CosmosClientOptions = {
-    endpoint: account.documentEndpoint!,
-  };
-
-  const rbacToken =
-    accountType === TestAccount.SQL
-      ? process.env.NOSQL_TESTACCOUNT_TOKEN
-      : accountType === TestAccount.SQLContainerCopyOnly
-      ? process.env.NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN
-      : "";
-
-  if (rbacToken) {
-    clientOptions.tokenProvider = async (): Promise<string> => {
-      const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
-      const authorizationToken = `${AUTH_PREFIX}${rbacToken}`;
-      return authorizationToken;
-    };
-  } else {
-    const keys = await armClient.databaseAccounts.listKeys(resourceGroupName, accountName);
-    clientOptions.key = keys.primaryMasterKey;
-  }
-
-  const client = new CosmosClient(clientOptions);
-
-  return { armClient, client };
-}
-
-export async function createTestDB(options?: CreateTestDBOptions): Promise<TestDatabaseContext> {
-  const databaseId = generateUniqueName("db");
-  const { armClient, client } = await createCosmosClientForSQLAccount();
-
-  // Create database with provisioned throughput (shared throughput)
-  // This checks the "Provision database throughput" option
-  const { database } = await client.databases.create({
-    id: databaseId,
-    throughput: options?.throughput, // Manual throughput (e.g., 400)
-    maxThroughput: options?.maxThroughput, // Autoscale max throughput (e.g., 1000)
-  });
-
-  return new TestDatabaseContext(armClient, client, database);
-}
-
 type createTestSqlContainerConfig = {
   includeTestData?: boolean;
   partitionKey?: string;
@@ -173,7 +104,34 @@ export async function createMultipleTestContainers({
   const creationPromises: Promise<TestContainerContext>[] = [];
 
   const databaseId = databaseName ? databaseName : generateUniqueName("db");
-  const { armClient, client } = await createCosmosClientForSQLAccount(accountType);
+  const credentials = getAzureCLICredentials();
+  const adaptedCredentials = new AzureIdentityCredentialAdapter(credentials);
+  const armClient = new CosmosDBManagementClient(adaptedCredentials, subscriptionId);
+  const accountName = getAccountName(accountType);
+  const account = await armClient.databaseAccounts.get(resourceGroupName, accountName);
+
+  const clientOptions: CosmosClientOptions = {
+    endpoint: account.documentEndpoint!,
+  };
+
+  const rbacToken =
+    accountType === TestAccount.SQL
+      ? process.env.NOSQL_TESTACCOUNT_TOKEN
+      : accountType === TestAccount.SQLContainerCopyOnly
+      ? process.env.NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN
+      : "";
+  if (rbacToken) {
+    clientOptions.tokenProvider = async (): Promise<string> => {
+      const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
+      const authorizationToken = `${AUTH_PREFIX}${rbacToken}`;
+      return authorizationToken;
+    };
+  } else {
+    const keys = await armClient.databaseAccounts.listKeys(resourceGroupName, accountName);
+    clientOptions.key = keys.primaryMasterKey;
+  }
+
+  const client = new CosmosClient(clientOptions);
   const { database } = await client.databases.createIfNotExists({ id: databaseId });
 
   try {
@@ -200,8 +158,29 @@ export async function createTestSQLContainer({
 }: createTestSqlContainerConfig = {}) {
   const databaseId = databaseName ? databaseName : generateUniqueName("db");
   const containerId = "testcontainer"; // A unique container name isn't needed because the database is unique
-  const { armClient, client } = await createCosmosClientForSQLAccount();
+  const credentials = getAzureCLICredentials();
+  const adaptedCredentials = new AzureIdentityCredentialAdapter(credentials);
+  const armClient = new CosmosDBManagementClient(adaptedCredentials, subscriptionId);
+  const accountName = getAccountName(TestAccount.SQL);
+  const account = await armClient.databaseAccounts.get(resourceGroupName, accountName);
 
+  const clientOptions: CosmosClientOptions = {
+    endpoint: account.documentEndpoint!,
+  };
+
+  const nosqlAccountRbacToken = process.env.NOSQL_TESTACCOUNT_TOKEN;
+  if (nosqlAccountRbacToken) {
+    clientOptions.tokenProvider = async (): Promise<string> => {
+      const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
+      const authorizationToken = `${AUTH_PREFIX}${nosqlAccountRbacToken}`;
+      return authorizationToken;
+    };
+  } else {
+    const keys = await armClient.databaseAccounts.listKeys(resourceGroupName, accountName);
+    clientOptions.key = keys.primaryMasterKey;
+  }
+
+  const client = new CosmosClient(clientOptions);
   const { database } = await client.databases.createIfNotExists({ id: databaseId });
   try {
     const { container } = await database.containers.createIfNotExists({