Addressed PR comments

test/notebooks/notebookTestUtils.ts

@@ -1,5 +1,5 @@
 import { ElementHandle, Frame } from "puppeteer";
-import { TestExplorerParams } from "../../src/TestExplorerParams";
+import { TestExplorerParams } from "./testExplorer/TestExplorerParams";
 
 export const NOTEBOOK_OPERATION_DELAY = 5000;
 export const RENDER_DELAY = 1000;
@@ -18,16 +18,31 @@ export const getTestExplorerFrame = async (): Promise<Frame> => {
   const notebooksAccountSubscriptonId = process.env.NOTEBOOKS_ACCOUNT_SUBSCRIPTION_ID;
   const notebooksAccountResourceGroup = process.env.NOTEBOOKS_ACCOUNT_RESOURCE_GROUP;
 
-  const prodUrl = `https://localhost:1234/testExplorer.html?
-${TestExplorerParams.notebooksTestRunnerApplicationId}=${encodeURI(notebooksTestRunnerApplicationId)}&
-${TestExplorerParams.notebooksTestRunnerClientId}=${encodeURI(notebooksTestRunnerClientId)}&
-${TestExplorerParams.notebooksTestRunnerClientSecret}=${encodeURI(notebooksTestRunnerClientSecret)}&
-${TestExplorerParams.notebooksAccountName}=${encodeURI(notebooksAccountName)}&
-${TestExplorerParams.notebooksAccountKey}=${encodeURI(notebooksAccountKey)}&
-${TestExplorerParams.notebooksAccountSubscriptonId}=${encodeURI(notebooksAccountSubscriptonId)}&
-${TestExplorerParams.notebooksAccountResourceGroup}=${encodeURI(notebooksAccountResourceGroup)}`;
+  const testExplorerUrl = new URL("testExplorer.html", "https://localhost:1234");
+  testExplorerUrl.searchParams.append(
+    TestExplorerParams.notebooksTestRunnerApplicationId,
+    encodeURI(notebooksTestRunnerApplicationId)
+  );
+  testExplorerUrl.searchParams.append(
+    TestExplorerParams.notebooksTestRunnerClientId,
+    encodeURI(notebooksTestRunnerClientId)
+  );
+  testExplorerUrl.searchParams.append(
+    TestExplorerParams.notebooksTestRunnerClientSecret,
+    encodeURI(notebooksTestRunnerClientSecret)
+  );
+  testExplorerUrl.searchParams.append(TestExplorerParams.notebooksAccountName, encodeURI(notebooksAccountName));
+  testExplorerUrl.searchParams.append(TestExplorerParams.notebooksAccountKey, encodeURI(notebooksAccountKey));
+  testExplorerUrl.searchParams.append(
+    TestExplorerParams.notebooksAccountSubscriptonId,
+    encodeURI(notebooksAccountSubscriptonId)
+  );
+  testExplorerUrl.searchParams.append(
+    TestExplorerParams.notebooksAccountResourceGroup,
+    encodeURI(notebooksAccountResourceGroup)
+  );
 
-  await page.goto(prodUrl);
+  await page.goto(testExplorerUrl.toString());
 
   const handle = await page.waitForSelector("iframe");
   testExplorerFrame = await handle.contentFrame();

test/notebooks/testExplorer/TestExplorer.ts

@@ -0,0 +1,136 @@
+import { MessageTypes } from "../../../src/Contracts/ExplorerContracts";
+import "../../../less/hostedexplorer.less";
+import { TestExplorerParams } from "./TestExplorerParams";
+import { ClientSecretCredential } from "@azure/identity";
+import { DatabaseAccountsGetResponse } from "@azure/arm-cosmosdb/esm/models";
+import { CosmosDBManagementClient } from "@azure/arm-cosmosdb";
+import * as msRest from "@azure/ms-rest-js";
+import * as ViewModels from "../../../src/Contracts/ViewModels";
+
+class CustomSigner implements msRest.ServiceClientCredentials {
+  private token: string;
+  constructor(token: string) {
+    this.token = token;
+  }
+
+  async signRequest(webResource: msRest.WebResourceLike): Promise<msRest.WebResourceLike> {
+    webResource.headers.set("authorization", `bearer ${this.token}`);
+    return webResource;
+  }
+}
+
+const handleMessage = (event: MessageEvent): void => {
+  if (event.data.type === MessageTypes.InitTestExplorer) {
+    sendMessageToExplorerFrame(event.data);
+  }
+};
+
+const AADLogin = async (
+  notebooksTestRunnerApplicationId: string,
+  notebooksTestRunnerClientId: string,
+  notebooksTestRunnerClientSecret: string
+): Promise<string> => {
+  const credentials = new ClientSecretCredential(
+    notebooksTestRunnerApplicationId,
+    notebooksTestRunnerClientId,
+    notebooksTestRunnerClientSecret
+  );
+  const token = await credentials.getToken("https://management.core.windows.net/.default");
+  return token.token;
+};
+
+const getDatabaseAccount = async (
+  token: string,
+  notebooksAccountSubscriptonId: string,
+  notebooksAccountResourceGroup: string,
+  notebooksAccountName: string
+): Promise<DatabaseAccountsGetResponse> => {
+  const client = new CosmosDBManagementClient(new CustomSigner(token), notebooksAccountSubscriptonId);
+  return await client.databaseAccounts.get(notebooksAccountResourceGroup, notebooksAccountName);
+};
+
+const sendMessageToExplorerFrame = (data: unknown): void => {
+  const explorerFrame = document.getElementById("explorerMenu") as HTMLIFrameElement;
+
+  explorerFrame &&
+    explorerFrame.contentDocument &&
+    explorerFrame.contentDocument.referrer &&
+    explorerFrame.contentWindow.postMessage(
+      {
+        signature: "pcIframe",
+        data: data
+      },
+      explorerFrame.contentDocument.referrer || window.location.href
+    );
+};
+
+const initTestExplorer = async (): Promise<void> => {
+  window.addEventListener("message", handleMessage, false);
+
+  const urlSearchParams = new URLSearchParams(window.location.search);
+  const notebooksTestRunnerApplicationId = decodeURIComponent(
+    urlSearchParams.get(TestExplorerParams.notebooksTestRunnerApplicationId)
+  );
+  const notebooksTestRunnerClientId = decodeURIComponent(
+    urlSearchParams.get(TestExplorerParams.notebooksTestRunnerClientId)
+  );
+  const notebooksTestRunnerClientSecret = decodeURIComponent(
+    urlSearchParams.get(TestExplorerParams.notebooksTestRunnerClientSecret)
+  );
+  const notebooksAccountName = decodeURIComponent(urlSearchParams.get(TestExplorerParams.notebooksAccountName));
+  const notebooksAccountKey = decodeURIComponent(urlSearchParams.get(TestExplorerParams.notebooksAccountKey));
+  const notebooksAccountSubscriptonId = decodeURIComponent(
+    urlSearchParams.get(TestExplorerParams.notebooksAccountSubscriptonId)
+  );
+  const notebooksAccountResourceGroup = decodeURIComponent(
+    urlSearchParams.get(TestExplorerParams.notebooksAccountResourceGroup)
+  );
+
+  const token = await AADLogin(
+    notebooksTestRunnerApplicationId,
+    notebooksTestRunnerClientId,
+    notebooksTestRunnerClientSecret
+  );
+  const databaseAccount = await getDatabaseAccount(
+    token,
+    notebooksAccountSubscriptonId,
+    notebooksAccountResourceGroup,
+    notebooksAccountName
+  );
+
+  const initTestExplorerContent = {
+    type: MessageTypes.InitTestExplorer,
+    inputs: {
+      databaseAccount: databaseAccount,
+      subscriptionId: notebooksAccountSubscriptonId,
+      resourceGroup: notebooksAccountResourceGroup,
+      authorizationToken: `Bearer ${token}`,
+      features: {},
+      hasWriteAccess: true,
+      csmEndpoint: "https://management.azure.com",
+      dnsSuffix: "documents.azure.com",
+      serverId: "prod1",
+      extensionEndpoint: "/proxy",
+      subscriptionType: 3,
+      quotaId: "Internal_2014-09-01",
+      addCollectionDefaultFlight: "2",
+      isTryCosmosDBSubscription: false,
+      masterKey: notebooksAccountKey,
+      loadDatabaseAccountTimestamp: 1604663109836,
+      dataExplorerVersion: "1.0.1",
+      sharedThroughputMinimum: 400,
+      sharedThroughputMaximum: 1000000,
+      sharedThroughputDefault: 400,
+      defaultCollectionThroughput: {
+        storage: "100",
+        throughput: { fixed: 400, unlimited: 400, unlimitedmax: 100000, unlimitedmin: 400, shared: 400 }
+      },
+      // add UI test only when feature is not dependent on flights anymore
+      flights: []
+    } as ViewModels.DataExplorerInputsFrame
+  };
+
+  window.postMessage(initTestExplorerContent, window.location.href);
+};
+
+window.addEventListener("load", initTestExplorer);

test/notebooks/testExplorer/TestExplorerParams.ts

@@ -0,0 +1,9 @@
+export enum TestExplorerParams {
+  notebooksTestRunnerApplicationId = "notebooksTestRunnerApplicationId",
+  notebooksTestRunnerClientId = "notebooksTestRunnerClientId",
+  notebooksTestRunnerClientSecret = "notebooksTestRunnerClientSecret",
+  notebooksAccountName = "notebooksAccountName",
+  notebooksAccountKey = "notebooksAccountKey",
+  notebooksAccountSubscriptonId = "notebooksAccountSubscriptonId",
+  notebooksAccountResourceGroup = "notebooksAccountResourceGroup"
+}

test/notebooks/testExplorer/testExplorer.html

@@ -0,0 +1,18 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0" />
+    <title>Azure Cosmos DB</title>
+    <link rel="shortcut icon" href="images/CosmosDB_rgb_ui_lighttheme.ico" type="image/x-icon" />
+  </head>
+
+  <body>
+    <iframe
+      id="explorerMenu"
+      name="explorer"
+      class="iframe"
+      title="explorer"
+      src="explorer.html?v=1.0.1&platform=Portal"
+    ></iframe>
+  </body>
+</html>

test/notebooks/uploadOpenAndDeleteNotebook.spec.ts

@@ -1,29 +1,38 @@
 import "expect-puppeteer";
 import { deleteNotebook, getNotebookNode, getTestExplorerFrame, uploadNotebook } from "./notebookTestUtils";
 import * as path from "path";
+import { ElementHandle, Frame } from "puppeteer";
 
 jest.setTimeout(300000);
 
+const notebookName = "GettingStarted.ipynb";
+let frame: Frame;
+let uploadedNotebookNode: ElementHandle<Element>;
+
 describe("Notebook UI tests", () => {
+  beforeAll(async () => {
+    frame = await getTestExplorerFrame();
+    const uploadNotebookPath = path.join(__dirname, "testNotebooks", notebookName);
+    await uploadNotebook(frame, uploadNotebookPath);
+    uploadedNotebookNode = await getNotebookNode(frame, notebookName);
+  });
+
+  afterAll(async () => {
+    await deleteNotebook(frame, uploadedNotebookNode);
+    const deletedNotebookNode = await getNotebookNode(frame, notebookName);
+    if (deletedNotebookNode) {
+      throw new Error(`Deletion of notebook ${notebookName} failed`);
+    }
+  });
+
   it("Upload, Open and Delete Notebook", async () => {
     try {
-      const frame = await getTestExplorerFrame();
-      const uploadNotebookName = "GettingStarted.ipynb";
-      const uploadNotebookPath = path.join(__dirname, "testNotebooks", uploadNotebookName);
-
-      await uploadNotebook(frame, uploadNotebookPath);
-      const uploadedNotebookNode = await getNotebookNode(frame, uploadNotebookName);
-
       await uploadedNotebookNode.click();
       await frame.waitForSelector(".tabNavText");
       const tabTitle = await frame.$eval(".tabNavText", element => element.textContent);
-      expect(tabTitle).toEqual(uploadNotebookName);
+      expect(tabTitle).toEqual(notebookName);
       const closeIcon = await frame.waitForSelector(".close-Icon");
       await closeIcon.click();
-
-      await deleteNotebook(frame, uploadedNotebookNode);
-      const deletedNotebookNode = await getNotebookNode(frame, uploadNotebookName);
-      expect(deletedNotebookNode).toBeUndefined();
     } catch (error) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const testName = (expect as any).getState().currentTestName;