mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-19 00:41:31 +00:00
Fix E2E tests. Add Playwright (#698)
This commit is contained in:
Steve Faulkner
GitHub
@@ -1,163 +1,39 @@
|
||||
import "expect-puppeteer";
|
||||
import { Frame } from "puppeteer";
|
||||
import { generateDatabaseName, generateUniqueName } from "../utils/shared";
|
||||
import { jest } from "@jest/globals";
|
||||
import "expect-playwright";
|
||||
import { safeClick } from "../utils/safeClick";
|
||||
import { generateUniqueName } from "../utils/shared";
|
||||
jest.setTimeout(120000);
|
||||
|
||||
jest.setTimeout(300000);
|
||||
const LOADING_STATE_DELAY = 2500;
|
||||
const RETRY_DELAY = 5000;
|
||||
const CREATE_DELAY = 10000;
|
||||
const RENDER_DELAY = 1000;
|
||||
test("SQL CRUD", async () => {
|
||||
const databaseId = generateUniqueName("db");
|
||||
const containerId = generateUniqueName("container");
|
||||
|
||||
describe("Collection Add and Delete SQL spec", () => {
|
||||
it("creates a collection", async () => {
|
||||
try {
|
||||
const dbId = generateDatabaseName();
|
||||
const collectionId = generateUniqueName("col");
|
||||
const sharedKey = `/skey${generateUniqueName()}`;
|
||||
await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-sql-runner");
|
||||
const handle = await page.waitForSelector("iframe");
|
||||
const frame = await handle.contentFrame();
|
||||
|
||||
// create new collection
|
||||
await frame.waitFor('button[data-test="New Container"]', { visible: true });
|
||||
await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
|
||||
await frame.click('button[data-test="New Container"]');
|
||||
|
||||
// check new database
|
||||
await frame.waitFor('input[data-test="addCollection-createNewDatabase"]');
|
||||
await frame.click('input[data-test="addCollection-createNewDatabase"]');
|
||||
|
||||
// check shared throughput
|
||||
await frame.waitFor('input[data-test="addCollectionPane-databaseSharedThroughput"]');
|
||||
await frame.click('input[data-test="addCollectionPane-databaseSharedThroughput"]');
|
||||
|
||||
// type database id
|
||||
await frame.waitFor('input[data-test="addCollection-newDatabaseId"]');
|
||||
const dbInput = await frame.$('input[data-test="addCollection-newDatabaseId"]');
|
||||
await dbInput.press("Backspace");
|
||||
await dbInput.type(dbId);
|
||||
|
||||
// type collection id
|
||||
await frame.waitFor('input[data-test="addCollection-collectionId"]');
|
||||
const input = await frame.$('input[data-test="addCollection-collectionId"]');
|
||||
await input.press("Backspace");
|
||||
await input.type(collectionId);
|
||||
|
||||
// type partition key value
|
||||
await frame.waitFor('input[data-test="addCollection-partitionKeyValue"]');
|
||||
const keyInput = await frame.$('input[data-test="addCollection-partitionKeyValue"]');
|
||||
await keyInput.press("Backspace");
|
||||
await keyInput.type(sharedKey);
|
||||
|
||||
// click submit
|
||||
await frame.waitFor("#submitBtnAddCollection");
|
||||
await frame.click("#submitBtnAddCollection");
|
||||
|
||||
// validate created
|
||||
// open database menu
|
||||
await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
|
||||
await frame.waitFor(CREATE_DELAY);
|
||||
await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
|
||||
const databases = await frame.$$(`div[class="databaseHeader main1 nodeItem "] > div[class="treeNodeHeader "]`);
|
||||
const selectedDbId = await frame.evaluate((element) => {
|
||||
return element.attributes["data-test"].textContent;
|
||||
}, databases[0]);
|
||||
|
||||
await frame.waitFor(`div[data-test="${selectedDbId}"]`), { visible: true };
|
||||
await frame.waitFor(CREATE_DELAY);
|
||||
await frame.waitFor("div[class='rowData'] > span[class='message']");
|
||||
|
||||
await frame.waitFor(`div[data-test="${selectedDbId}"]`), { visible: true };
|
||||
await frame.waitFor(LOADING_STATE_DELAY);
|
||||
|
||||
await clickDBMenu(selectedDbId, frame);
|
||||
|
||||
const collections = await frame.$$(
|
||||
`div[class="collectionHeader main2 nodeItem "] > div[class="treeNodeHeader "]`
|
||||
);
|
||||
|
||||
if (collections.length) {
|
||||
await frame.waitFor(`div[class="collectionHeader main2 nodeItem "] > div[class="treeNodeHeader "]`, {
|
||||
visible: true,
|
||||
});
|
||||
|
||||
const textId = await frame.evaluate((element) => {
|
||||
return element.attributes["data-test"].textContent;
|
||||
}, collections[0]);
|
||||
await frame.waitFor(`div[data-test="${textId}"]`, { visible: true });
|
||||
// delete container
|
||||
|
||||
// click context menu for container
|
||||
await frame.waitFor(`div[data-test="${textId}"] > div > button`, { visible: true });
|
||||
await frame.click(`div[data-test="${textId}"] > div > button`);
|
||||
|
||||
// click delete container
|
||||
await frame.waitFor(RENDER_DELAY);
|
||||
await frame.waitFor('span[class="treeComponentMenuItemLabel deleteCollectionMenuItemLabel"]');
|
||||
await frame.click('span[class="treeComponentMenuItemLabel deleteCollectionMenuItemLabel"]');
|
||||
|
||||
// confirm delete container
|
||||
await frame.waitFor('input[id="confirmCollectionId"]', { visible: true });
|
||||
await frame.type('input[id="confirmCollectionId"]', textId);
|
||||
|
||||
// click delete
|
||||
await frame.waitFor("button.genericPaneSubmitBtn", { visible: true });
|
||||
await frame.click("button.genericPaneSubmitBtn");
|
||||
await frame.waitFor(LOADING_STATE_DELAY);
|
||||
await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
|
||||
|
||||
await expect(page).not.toMatchElement(`div[data-test="${textId}"]`);
|
||||
}
|
||||
|
||||
// click context menu for database
|
||||
await frame.waitFor(`div[data-test="${selectedDbId}"] > div > button`);
|
||||
await frame.waitFor(CREATE_DELAY);
|
||||
const button = await frame.$(`div[data-test="${selectedDbId}"] > div > button`);
|
||||
await button.focus();
|
||||
await button.asElement().click();
|
||||
|
||||
// click delete database
|
||||
await frame.waitFor(CREATE_DELAY);
|
||||
await frame.waitFor('span[class="treeComponentMenuItemLabel deleteDatabaseMenuItemLabel"]');
|
||||
await frame.click('span[class="treeComponentMenuItemLabel deleteDatabaseMenuItemLabel"]');
|
||||
|
||||
// confirm delete database
|
||||
await frame.waitForSelector('input[id="confirmDatabaseId"]', { visible: true });
|
||||
await frame.waitFor(CREATE_DELAY);
|
||||
await frame.type('input[id="confirmDatabaseId"]', selectedDbId);
|
||||
|
||||
// click delete
|
||||
await frame.click('button[id="sidePanelOkButton"]');
|
||||
await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
|
||||
await frame.waitFor(CREATE_DELAY);
|
||||
await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
|
||||
await expect(page).not.toMatchElement(`div[data-test="${selectedDbId}"]`);
|
||||
} catch (error) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const testName = (expect as any).getState().currentTestName;
|
||||
await page.screenshot({ path: `failed-${testName}.jpg` });
|
||||
throw error;
|
||||
}
|
||||
await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-sql-runner");
|
||||
await page.waitForSelector("iframe");
|
||||
const explorer = page.frame({
|
||||
name: "explorer",
|
||||
});
|
||||
|
||||
await explorer.click('[data-test="New Container"]');
|
||||
await explorer.click('[data-test="addCollection-newDatabaseId"]');
|
||||
await explorer.fill('[data-test="addCollection-newDatabaseId"]', databaseId);
|
||||
await explorer.click('[data-test="addCollection-collectionId"]');
|
||||
await explorer.fill('[data-test="addCollection-collectionId"]', containerId);
|
||||
await explorer.click('[data-test="addCollection-collectionId"]');
|
||||
await explorer.fill('[data-test="addCollection-collectionId"]', containerId);
|
||||
await explorer.click('[data-test="addCollection-partitionKeyValue"]');
|
||||
await explorer.fill('[data-test="addCollection-partitionKeyValue"]', "/pk");
|
||||
await explorer.click('[data-test="addCollection-createCollection"]');
|
||||
await safeClick(explorer, `.nodeItem >> text=${databaseId}`);
|
||||
await safeClick(explorer, `[data-test="${containerId}"] [aria-label="More"]`);
|
||||
await safeClick(explorer, 'button[role="menuitem"]:has-text("Delete Container")');
|
||||
await explorer.fill('text=* Confirm by typing the container id >> input[type="text"]', containerId);
|
||||
await explorer.click('[aria-label="Submit"]');
|
||||
await explorer.click(`[data-test="${databaseId}"] [aria-label="More"]`);
|
||||
await explorer.click('button[role="menuitem"]:has-text("Delete Database")');
|
||||
await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
|
||||
await explorer.fill('text=* Confirm by typing the database id >> input[type="text"]', databaseId);
|
||||
await explorer.click("#sidePanelOkButton");
|
||||
await expect(explorer).not.toHaveText(".dataResourceTree", databaseId);
|
||||
await expect(explorer).not.toHaveText(".dataResourceTree", containerId);
|
||||
});
|
||||
|
||||
async function clickDBMenu(dbId: string, frame: Frame, retries = 0) {
|
||||
const button = await frame.$(`div[data-test="${dbId}"]`);
|
||||
await button.focus();
|
||||
const handler = await button.asElement();
|
||||
await handler.click();
|
||||
await ensureMenuIsOpen(dbId, frame, retries);
|
||||
return button;
|
||||
}
|
||||
|
||||
async function ensureMenuIsOpen(dbId: string, frame: Frame, retries: number) {
|
||||
await frame.waitFor(RETRY_DELAY);
|
||||
const button = await frame.$(`div[data-test="${dbId}"]`);
|
||||
const classList = await frame.evaluate((button) => {
|
||||
return button.parentElement.classList;
|
||||
}, button);
|
||||
if (!Object.values(classList).includes("selected") && retries < 5) {
|
||||
retries = retries + 1;
|
||||
await clickDBMenu(dbId, frame, retries);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,83 +1,46 @@
|
||||
/* eslint-disable jest/expect-expect */
|
||||
import "expect-puppeteer";
|
||||
import { Frame } from "puppeteer";
|
||||
import { generateDatabaseName, generateUniqueName } from "../utils/shared";
|
||||
import { CosmosClient, PermissionMode } from "@azure/cosmos";
|
||||
import { CosmosDBManagementClient } from "@azure/arm-cosmosdb";
|
||||
import { CosmosClient, PermissionMode } from "@azure/cosmos";
|
||||
import * as msRestNodeAuth from "@azure/ms-rest-nodeauth";
|
||||
import { jest } from "@jest/globals";
|
||||
import "expect-playwright";
|
||||
import { generateDatabaseName, generateUniqueName } from "../utils/shared";
|
||||
jest.setTimeout(120000);
|
||||
|
||||
const clientId = process.env["NOTEBOOKS_TEST_RUNNER_CLIENT_ID"];
|
||||
const clientId = "fd8753b0-0707-4e32-84e9-2532af865fb4";
|
||||
const secret = process.env["NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET"];
|
||||
const tenantId = "72f988bf-86f1-41af-91ab-2d7cd011db47";
|
||||
const subscriptionId = "69e02f2d-f059-4409-9eac-97e8a276ae2c";
|
||||
const resourceGroupName = "runners";
|
||||
|
||||
jest.setTimeout(300000);
|
||||
const RETRY_DELAY = 5000;
|
||||
const CREATE_DELAY = 10000;
|
||||
|
||||
describe("Collection Add and Delete SQL spec", () => {
|
||||
it("creates a collection", async () => {
|
||||
const credentials = await msRestNodeAuth.loginWithServicePrincipalSecret(clientId, secret, tenantId);
|
||||
const armClient = new CosmosDBManagementClient(credentials, subscriptionId);
|
||||
const account = await armClient.databaseAccounts.get(resourceGroupName, "portal-sql-runner");
|
||||
const keys = await armClient.databaseAccounts.listKeys(resourceGroupName, "portal-sql-runner");
|
||||
const dbId = generateDatabaseName();
|
||||
const collectionId = generateUniqueName("col");
|
||||
const client = new CosmosClient({
|
||||
endpoint: account.documentEndpoint,
|
||||
key: keys.primaryMasterKey,
|
||||
});
|
||||
const { database } = await client.databases.createIfNotExists({ id: dbId });
|
||||
const { container } = await database.containers.createIfNotExists({ id: collectionId });
|
||||
const { user } = await database.users.upsert({ id: "testUser" });
|
||||
const { resource: containerPermission } = await user.permissions.upsert({
|
||||
id: "partitionLevelPermission",
|
||||
permissionMode: PermissionMode.All,
|
||||
resource: container.url,
|
||||
});
|
||||
const resourceTokenConnectionString = `AccountEndpoint=${account.documentEndpoint};DatabaseId=${database.id};CollectionId=${container.id};${containerPermission._token}`;
|
||||
try {
|
||||
await page.goto(process.env.DATA_EXPLORER_ENDPOINT);
|
||||
await page.waitFor("div > p.switchConnectTypeText", { visible: true });
|
||||
await page.click("div > p.switchConnectTypeText");
|
||||
await page.type("input[class='inputToken']", resourceTokenConnectionString);
|
||||
await page.click("input[value='Connect']");
|
||||
const handle = await page.waitForSelector("iframe");
|
||||
const frame = await handle.contentFrame();
|
||||
// validate created
|
||||
// open database menu
|
||||
await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
|
||||
await frame.waitFor(CREATE_DELAY);
|
||||
await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
|
||||
await frame.$$(`div[class="databaseHeader main1 nodeItem "] > div[class="treeNodeHeader "]`);
|
||||
expect(await frame.$(`span[title="${collectionId}"]`)).toBeDefined();
|
||||
} catch (error) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const testName = (expect as any).getState().currentTestName;
|
||||
await page.screenshot({ path: `failed-${testName}.jpg` });
|
||||
throw error;
|
||||
}
|
||||
test("Resource token", async () => {
|
||||
const credentials = await msRestNodeAuth.loginWithServicePrincipalSecret(clientId, secret, tenantId);
|
||||
const armClient = new CosmosDBManagementClient(credentials, subscriptionId);
|
||||
const account = await armClient.databaseAccounts.get(resourceGroupName, "portal-sql-runner");
|
||||
const keys = await armClient.databaseAccounts.listKeys(resourceGroupName, "portal-sql-runner");
|
||||
const dbId = generateDatabaseName();
|
||||
const collectionId = generateUniqueName("col");
|
||||
const client = new CosmosClient({
|
||||
endpoint: account.documentEndpoint,
|
||||
key: keys.primaryMasterKey,
|
||||
});
|
||||
const { database } = await client.databases.createIfNotExists({ id: dbId });
|
||||
const { container } = await database.containers.createIfNotExists({ id: collectionId });
|
||||
const { user } = await database.users.upsert({ id: "testUser" });
|
||||
const { resource: containerPermission } = await user.permissions.upsert({
|
||||
id: "partitionLevelPermission",
|
||||
permissionMode: PermissionMode.All,
|
||||
resource: container.url,
|
||||
});
|
||||
const resourceTokenConnectionString = `AccountEndpoint=${account.documentEndpoint};DatabaseId=${database.id};CollectionId=${container.id};${containerPermission._token}`;
|
||||
|
||||
await page.goto("https://localhost:1234/hostedExplorer.html");
|
||||
await page.waitForSelector("div > p.switchConnectTypeText");
|
||||
await page.click("div > p.switchConnectTypeText");
|
||||
await page.type("input[class='inputToken']", resourceTokenConnectionString);
|
||||
await page.click("input[value='Connect']");
|
||||
await page.waitForSelector("iframe");
|
||||
const explorer = page.frame({
|
||||
name: "explorer",
|
||||
});
|
||||
await explorer.textContent(`css=.dataResourceTree >> "${collectionId}"`);
|
||||
});
|
||||
|
||||
async function clickDBMenu(dbId: string, frame: Frame, retries = 0) {
|
||||
const button = await frame.$(`div[data-test="${dbId}"]`);
|
||||
await button.focus();
|
||||
const handler = await button.asElement();
|
||||
await handler.click();
|
||||
await ensureMenuIsOpen(dbId, frame, retries);
|
||||
return button;
|
||||
}
|
||||
|
||||
async function ensureMenuIsOpen(dbId: string, frame: Frame, retries: number) {
|
||||
await frame.waitFor(RETRY_DELAY);
|
||||
const button = await frame.$(`div[data-test="${dbId}"]`);
|
||||
const classList = await frame.evaluate((button) => {
|
||||
return button.parentElement.classList;
|
||||
}, button);
|
||||
if (!Object.values(classList).includes("selected") && retries < 5) {
|
||||
retries = retries + 1;
|
||||
await clickDBMenu(dbId, frame, retries);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user