when disposing of database during playwright test, refresh tree to remove deleted database

.github/workflows/ci.yml

@@ -164,8 +164,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
-        shardTotal: [16]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
+        shardTotal: [20]
     steps:
       - uses: actions/checkout@v4
       - name: Use Node.js 18.x
@@ -198,18 +198,18 @@ jobs:
             GREMLIN_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-gremlin.documents.azure.com/.default" -o tsv --query accessToken)
             echo "::add-mask::$GREMLIN_TESTACCOUNT_TOKEN"
             echo GREMLIN_TESTACCOUNT_TOKEN=$GREMLIN_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            CASSANDRA_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-cassandra.documents.azure.com/.default" -o tsv --query accessToken)
-            echo "::add-mask::$CASSANDRA_TESTACCOUNT_TOKEN"
-            echo CASSANDRA_TESTACCOUNT_TOKEN=$CASSANDRA_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            MONGO_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo.documents.azure.com/.default" -o tsv --query accessToken)
-            echo "::add-mask::$MONGO_TESTACCOUNT_TOKEN"
-            echo MONGO_TESTACCOUNT_TOKEN=$MONGO_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            MONGO32_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo32.documents.azure.com/.default" -o tsv --query accessToken)
-            echo "::add-mask::$MONGO32_TESTACCOUNT_TOKEN"
-            echo MONGO32_TESTACCOUNT_TOKEN=$MONGO32_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            MONGO_READONLY_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo-readonly.documents.azure.com/.default" -o tsv --query accessToken)
-            echo "::add-mask::$MONGO_READONLY_TESTACCOUNT_TOKEN"
-            echo MONGO_READONLY_TESTACCOUNT_TOKEN=$MONGO_READONLY_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            # CASSANDRA_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-cassandra.documents.azure.com/.default" -o tsv --query accessToken)
+            # echo "::add-mask::$CASSANDRA_TESTACCOUNT_TOKEN"
+            # echo CASSANDRA_TESTACCOUNT_TOKEN=$CASSANDRA_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            # MONGO_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo.documents.azure.com/.default" -o tsv --query accessToken)
+            # echo "::add-mask::$MONGO_TESTACCOUNT_TOKEN"
+            # echo MONGO_TESTACCOUNT_TOKEN=$MONGO_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            # MONGO32_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo32.documents.azure.com/.default" -o tsv --query accessToken)
+            # echo "::add-mask::$MONGO32_TESTACCOUNT_TOKEN"
+            # echo MONGO32_TESTACCOUNT_TOKEN=$MONGO32_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            # MONGO_READONLY_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo-readonly.documents.azure.com/.default" -o tsv --query accessToken)
+            # echo "::add-mask::$MONGO_READONLY_TESTACCOUNT_TOKEN"
+            # echo MONGO_READONLY_TESTACCOUNT_TOKEN=$MONGO_READONLY_TESTACCOUNT_TOKEN >> $GITHUB_ENV
       - name: Run test shard ${{ matrix['shardIndex'] }} of ${{ matrix['shardTotal']}}
         run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --workers=3
       - name: Upload blob report to GitHub Actions Artifacts

package-lock.json

@@ -116,8 +116,8 @@
         "tinykeys": "2.1.0",
         "underscore": "1.12.1",
         "utility-types": "3.10.0",
-        "web-vitals": "4.2.4",
         "uuid": "9.0.0",
+        "web-vitals": "4.2.4",
         "zustand": "3.5.0"
       },
       "devDependencies": {

playwright.config.ts

@@ -11,8 +11,8 @@ export default defineConfig({
   reporter: process.env.CI ? "blob" : "html",
   timeout: 10 * 60 * 1000,
   use: {
-    trace: "off",
-    video: "off",
+    trace: "on-all-retries",
+    video: "on-first-retry",
     screenshot: "on",
     testIdAttribute: "data-test",
     contextOptions: {

src/Main.tsx

@@ -125,10 +125,7 @@ const App = (): JSX.Element => {
       <KeyboardShortcutRoot>
         <div className="flexContainer" aria-hidden="false">
           {userContext.features.enableContainerCopy && userContext.apiType === "SQL" ? (
-            <>
-              <ContainerCopyPanel explorer={explorer} />
-              <SidePanel />
-            </>
+            <ContainerCopyPanel explorer={explorer} />
           ) : (
             <DivExplorer explorer={explorer} />
           )}

test/cassandra/container.spec.ts

@@ -8,7 +8,8 @@ test("Cassandra keyspace and table CRUD", async ({ page }) => {
 
   const explorer = await DataExplorer.open(page, TestAccount.Cassandra);
 
-  await explorer.globalCommandButton("New Table").click();
+  const newTableButton = await explorer.globalCommandButton("New Table");
+  await newTableButton.click();
   await explorer.whilePanelOpen(
     "Add Table",
     async (panel, okButton) => {

test/fx.ts

@@ -352,8 +352,9 @@ export class DataExplorer {
    *
    * There's only a single "primary" button, but we still require you to pass the label to confirm you're selecting the right button.
    */
-  globalCommandButton(label: string): Locator {
-    return this.frame.getByTestId("GlobalCommands").getByText(label);
+  async globalCommandButton(label: string): Promise<Locator> {
+    await this.frame.getByTestId("GlobalCommands").click();
+    return this.frame.getByRole("menuitem", { name: label });
   }
 
   /** Select the command bar button with the specified label */

test/gremlin/container.spec.ts

@@ -9,7 +9,8 @@ test("Gremlin graph CRUD", async ({ page }) => {
   const explorer = await DataExplorer.open(page, TestAccount.Gremlin);
 
   // Create new database and graph
-  await explorer.globalCommandButton("New Graph").click();
+  const newGraphButton = await explorer.globalCommandButton("New Graph");
+  await newGraphButton.click();
   await explorer.whilePanelOpen(
     "New Graph",
     async (panel, okButton) => {

test/mongo/container.spec.ts

@@ -14,7 +14,8 @@ import { DataExplorer, TEST_AUTOSCALE_THROUGHPUT_RU, TestAccount, generateUnique
 
     const explorer = await DataExplorer.open(page, accountType);
 
-    await explorer.globalCommandButton("New Collection").click();
+    const newCollectionButton = await explorer.globalCommandButton("New Collection");
+    await newCollectionButton.click();
     await explorer.whilePanelOpen(
       "New Collection",
       async (panel, okButton) => {

test/sql/container.spec.ts

@@ -8,7 +8,8 @@ test("SQL database and container CRUD", async ({ page }) => {
 
   const explorer = await DataExplorer.open(page, TestAccount.SQL);
 
-  await explorer.globalCommandButton("New Container").click();
+  const newContainerButton = await explorer.globalCommandButton("New Container");
+  await newContainerButton.click();
   await explorer.whilePanelOpen(
     "New Container",
     async (panel, okButton) => {

test/sql/scaleAndSettings/changePartitionKey.spec.ts

@@ -24,7 +24,7 @@ test.describe("Change Partition Key", () => {
   });
 
   test.afterAll("Delete Test Database", async () => {
-    await context?.dispose();
+    await context?.dispose(explorer);
   });
 
   test("Change partition key path", async () => {

test/sql/scaleAndSettings/scale.spec.ts

@@ -13,11 +13,8 @@ test.describe("Autoscale and Manual throughput", () => {
   let context: TestContainerContext = null!;
   let explorer: DataExplorer = null!;
 
-  test.beforeAll("Create Test Database", async () => {
-    context = await createTestSQLContainer({ includeTestData: true });
-  });
-
-  test.beforeEach("Open container settings", async ({ page }) => {
+  test.beforeEach("Create Test Database & Open container settings", async ({ page }) => {
+    context = await createTestSQLContainer();
     explorer = await DataExplorer.open(page, TestAccount.SQL);
 
     // Click Scale & Settings and open Scale tab
@@ -26,8 +23,8 @@ test.describe("Autoscale and Manual throughput", () => {
     await scaleTab.click();
   });
 
-  test.afterAll("Delete Test Database", async () => {
-    await context?.dispose();
+  test.afterEach("Delete Test Database", async () => {
+    await context?.dispose(explorer);
   });
 
   test("Update autoscale max throughput", async () => {
@@ -126,4 +123,4 @@ test.describe("Autoscale and Manual throughput", () => {
       },
     );
   };
-});
+});

test/sql/scaleAndSettings/settings.spec.ts

@@ -7,7 +7,7 @@ test.describe("Settings under Scale & Settings", () => {
   let explorer: DataExplorer = null!;
 
   test.beforeAll("Create Test Database", async () => {
-    context = await createTestSQLContainer({ includeTestData: true });
+    context = await createTestSQLContainer();
   });
 
   test.beforeEach("Open Settings tab under Scale & Settings", async ({ page }) => {

test/tables/container.spec.ts

@@ -7,7 +7,8 @@ test("Tables CRUD", async ({ page }) => {
 
   const explorer = await DataExplorer.open(page, TestAccount.Tables);
 
-  await explorer.globalCommandButton("New Table").click();
+  const newTableButton = explorer.frame.getByTestId("GlobalCommands").getByRole("button", { name: "New Table" });
+  await newTableButton.click();
   await explorer.whilePanelOpen(
     "New Table",
     async (panel, okButton) => {

test/testData.ts

@@ -5,6 +5,7 @@ import { BulkOperationType, Container, CosmosClient, CosmosClientOptions, Databa
 import { AzureIdentityCredentialAdapter } from "@azure/ms-rest-js";
 
 import {
+  DataExplorer,
   generateUniqueName,
   getAccountName,
   getAzureCLICredentials,
@@ -69,8 +70,14 @@ export class TestContainerContext {
     public testData: Map<string, TestItem>,
   ) {}
 
-  async dispose() {
+  async dispose(explorer: DataExplorer) {
     await this.database.delete();
+
+    // refresh tree to remove deleted database
+    if (explorer) {
+      const refreshButton = explorer.frame.getByTestId("Sidebar/RefreshButton");
+      await refreshButton.click();
+    }
   }
 }