Adds e2e tables test (#276)

* Adds tables test

* Include .env var

* Adds asElement on again

* Add further loading states

* Format

* Hope to not lose focus

* Adds ID to shared key and modifies value of input directly

* Fix tables test

* Format

* Try uploading screenshots

* indent

* Fixes connection string

* Try wildcard upload path

.github/workflows/ci.yml

@@ -150,6 +150,11 @@ jobs:
           PORTAL_RUNNER_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_SQL }}
           MONGO_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_MONGO }}
           CASSANDRA_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_CASSANDRA }}
+          TABLES_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_TABLE }}
+      - uses: actions/upload-artifact@v2
+        with:
+          name: screenshots
+          path: failed-*
   nuget:
     name: Publish Nuget
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')

src/Explorer/Panes/AddCollectionPane.html

@@ -390,7 +390,7 @@
                               range of values and is likely to have evenly distributed access patterns.</span>
                       </span>
                   </p>
-                  <input type="text" data-test="addCollection-partitionKeyValue" aria-required="true" size="40"
+                  <input type="text" id="partitionKeyValue" data-test="addCollection-partitionKeyValue" aria-required="true" size="40"
                       class="textfontclr collid" data-bind="textInput: partitionKey,
                                                 attr: {
                                                     placeholder: partitionKeyPlaceholder,

test/cassandra/container.spec.ts

@@ -80,11 +80,13 @@ describe("Collection Add and Delete Cassandra spec", () => {
       // click delete
       await frame.click('input[data-test="deleteDatabase"]');
       await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
+      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="${keyspaceId}"]`);
     } catch (error) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const testName = (expect as any).getState().currentTestName;
-      await page.screenshot({ path: `Test Failed ${testName}.png` });
+      await page.screenshot({ path: `failed-${testName}.jpg` });
       throw error;
     }
   });

test/mongo/container.spec.ts

@@ -101,11 +101,13 @@ describe("Collection Add and Delete Mongo spec", () => {
       // click delete
       await frame.click('input[data-test="deleteDatabase"]');
       await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
+      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="${dbId}"]`);
     } catch (error) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const testName = (expect as any).getState().currentTestName;
-      await page.screenshot({ path: `Test Failed ${testName}.png` });
+      await page.screenshot({ path: `failed-${testName}.jpg` });
       throw error;
     }
   });

test/sql/container.spec.ts

@@ -100,11 +100,13 @@ describe("Collection Add and Delete SQL spec", () => {
       // click delete
       await frame.click('input[data-test="deleteDatabase"]');
       await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
+      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="${dbId}"]`);
     } catch (error) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const testName = (expect as any).getState().currentTestName;
-      await page.screenshot({ path: `Test Failed ${testName}.jpg` });
+      await page.screenshot({ path: `failed-${testName}.jpg` });
       throw error;
     }
   });

test/tables/container.spec.ts

@@ -0,0 +1,71 @@
+import "expect-puppeteer";
+import { generateUniqueName, login } from "../utils/shared";
+
+jest.setTimeout(300000);
+const LOADING_STATE_DELAY = 2500;
+const RENDER_DELAY = 1000;
+
+describe("Collection Add and Delete Tables spec", () => {
+  it("creates a collection", async () => {
+    try {
+      const tableId = generateUniqueName("TestTable");
+      const frame = await login(process.env.TABLES_CONNECTION_STRING);
+
+      // create new collection
+      await frame.waitFor('button[data-test="New Table"]', { visible: true });
+      await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
+      await frame.click('button[data-test="New Table"]');
+
+      // 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(tableId);
+
+      // 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(`div[data-test="TablesDB"]`), { visible: true };
+      await frame.waitFor(LOADING_STATE_DELAY);
+      await frame.waitFor(`div[data-test="TablesDB"]`), { visible: true };
+      await frame.waitFor(LOADING_STATE_DELAY);
+      const button = await frame.$(`div[data-test="TablesDB"]`);
+      await button.focus();
+      await button.asElement().click();
+      await frame.waitFor(`div[data-test="${tableId}"]`, { visible: true });
+
+      // delete container
+
+      // click context menu for container
+      await frame.waitFor(`div[data-test="${tableId}"] > div > button`, { visible: true });
+      await frame.click(`div[data-test="${tableId}"] > 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[data-test="confirmCollectionId"]', { visible: true });
+      await frame.type('input[data-test="confirmCollectionId"]', tableId);
+
+      // click delete
+      await frame.waitFor('input[data-test="deleteCollection"]', { visible: true });
+      await frame.click('input[data-test="deleteCollection"]');
+      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="${tableId}"]`);
+    } 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/utils/shared.ts

@@ -3,7 +3,7 @@ import { Frame } from "puppeteer";
 
 export async function login(connectionString: string): Promise<Frame> {
   const prodUrl = "https://localhost:1234/hostedExplorer.html";
-  page.goto(prodUrl);
+  page.goto(prodUrl, { waitUntil: "networkidle2" });
 
   // log in with connection string
   const handle = await page.waitForSelector("iframe");