Fixes e2e test input focus swapping (#262)

* Remove redundant E2E tests

* Remove deps

* Fixes e2e tests hopefully

Co-authored-by: Steve Faulkner <471400+southpolesteve@users.noreply.github.com>
Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>

.github/workflows/ci.yml

@@ -105,74 +105,6 @@ jobs:
           EMULATOR_ENDPOINT: https://0.0.0.0:8081/
           NODE_TLS_REJECT_UNAUTHORIZED: 0
           CYPRESS_CACHE_FOLDER: ~/.cache/Cypress
-  endtoendsql:
-    name: "End To End Tests | SQL"
-    needs: [lint, format, compile, unittest]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
-      - name: Restore Cypress Binary Cache
-        uses: actions/cache@v2
-        with:
-          path: ~/.cache/Cypress
-          key: ${{ runner.os }}-cypress-binary-cache
-      - run: npm ci
-      - name: End to End Tests
-        run: |
-          npm start &
-          cd cypress
-          npm ci
-          node cleanup.js
-          npm run wait-for-server
-          npx cypress run --browser chrome --headless --spec "./integration/dataexplorer/SQL/*"
-        shell: bash
-        env:
-          NODE_TLS_REJECT_UNAUTHORIZED: 0
-          CYPRESS_CACHE_FOLDER: ~/.cache/Cypress
-          CYPRESS_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_SQL }}
-      - uses: actions/upload-artifact@v2
-        name: videos
-        if: ${{ failure() }}
-        with:
-          path: "**/*.mp4"
-  endtoendmongo:
-    name: "End To End Tests | Mongo"
-    needs: [lint, format, compile, unittest]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
-      - name: Restore Cypress Binary Cache
-        uses: actions/cache@v2
-        with:
-          path: ~/.cache/Cypress
-          key: ${{ runner.os }}-cypress-binary-cache
-      - name: End to End Tests
-        run: |
-          npm ci
-          npm start &
-          cd cypress
-          npm ci
-          node cleanup.js
-          npm run wait-for-server
-          npx cypress run --browser chrome --headless --spec "./integration/dataexplorer/MONGO/*"
-        shell: bash
-        env:
-          NODE_TLS_REJECT_UNAUTHORIZED: 0
-          CYPRESS_CACHE_FOLDER: ~/.cache/Cypress
-          CYPRESS_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_MONGO }}
-      - uses: actions/upload-artifact@v2
-        if: ${{ failure() }}
-        name: videos
-        with:
-          path: "**/*.mp4"
   accessibility:
     name: "Accessibility | Hosted"
     needs: [lint, format, compile, unittest]
@@ -221,7 +153,7 @@ jobs:
   nuget:
     name: Publish Nuget
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendsql, endtoendmongo]
+    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendpuppeteer]
     runs-on: ubuntu-latest
     env:
       NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
@@ -245,7 +177,7 @@ jobs:
   nugetmpac:
     name: Publish Nuget MPAC
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendsql, endtoendmongo]
+    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendpuppeteer]
     runs-on: ubuntu-latest
     env:
       NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}

jest-puppeteer.config.js

@@ -3,7 +3,7 @@ const isCI = require("is-ci");
 module.exports = {
   launch: {
     headless: isCI,
-    slowMo: 30,
+    slowMo: 55,
     defaultViewport: null,
     ignoreHTTPSErrors: true,
     args: ["--disable-web-security"]

test/mongo/container.spec.ts

@@ -29,15 +29,21 @@ describe("Collection Add and Delete Mongo spec", () => {
 
       // type database id
       await frame.waitFor('input[data-test="addCollection-newDatabaseId"]');
-      await frame.type('input[data-test="addCollection-newDatabaseId"]', dbId);
+      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"]');
-      await frame.type('input[data-test="addCollection-collectionId"]', 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"]');
-      await frame.type('input[data-test="addCollection-partitionKeyValue"]', sharedKey);
+      const keyInput = await frame.$('input[data-test="addCollection-partitionKeyValue"]');
+      await keyInput.press("Backspace");
+      await keyInput.type(sharedKey);
 
       // click submit
       await frame.waitFor("#submitBtnAddCollection");
@@ -45,12 +51,12 @@ describe("Collection Add and Delete Mongo spec", () => {
 
       // validate created
       // open database menu
-      await frame.waitFor(`span[title="${dbId}"]`);
       await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
 
+      await frame.waitFor(`div[data-test="${dbId}"]`), { visible: true };
+      await frame.waitFor(LOADING_STATE_DELAY);
       await frame.waitFor(`div[data-test="${dbId}"]`), { visible: true };
       await frame.click(`div[data-test="${dbId}"]`);
-      await frame.waitFor(RENDER_DELAY);
       await frame.waitFor(`div[data-test="${collectionId}"]`, { visible: true });
 
       // delete container
@@ -61,7 +67,7 @@ describe("Collection Add and Delete Mongo spec", () => {
 
       // click delete container
       await frame.waitFor(RENDER_DELAY);
-      await frame.waitFor('span[class="treeComponentMenuItemLabel deleteCollectionMenuItemLabel"]');
+      await frame.waitFor('span[class="treeComponentMenuItemLabel deleteCollectionMenuItemLabel"]', { visible: true });
       await frame.click('span[class="treeComponentMenuItemLabel deleteCollectionMenuItemLabel"]');
 
       // confirm delete container
@@ -83,6 +89,7 @@ describe("Collection Add and Delete Mongo spec", () => {
       await button.asElement().click();
 
       // click delete database
+      await frame.waitFor(RENDER_DELAY);
       await frame.waitFor('span[class="treeComponentMenuItemLabel deleteDatabaseMenuItemLabel"]');
       await frame.click('span[class="treeComponentMenuItemLabel deleteDatabaseMenuItemLabel"]');
 

test/sql/container.spec.ts

@@ -28,15 +28,21 @@ describe("Collection Add and Delete SQL spec", () => {
 
       // type database id
       await frame.waitFor('input[data-test="addCollection-newDatabaseId"]');
-      await frame.type('input[data-test="addCollection-newDatabaseId"]', dbId);
+      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"]');
-      await frame.type('input[data-test="addCollection-collectionId"]', 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"]');
-      await frame.type('input[data-test="addCollection-partitionKeyValue"]', sharedKey);
+      const keyInput = await frame.$('input[data-test="addCollection-partitionKeyValue"]');
+      await keyInput.press("Backspace");
+      await keyInput.type(sharedKey);
 
       // click submit
       await frame.waitFor("#submitBtnAddCollection");
@@ -44,12 +50,12 @@ describe("Collection Add and Delete SQL spec", () => {
 
       // validate created
       // open database menu
-      await frame.waitFor(`span[title="${dbId}"]`);
       await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
 
+      await frame.waitFor(`div[data-test="${dbId}"]`), { visible: true };
+      await frame.waitFor(LOADING_STATE_DELAY);
       await frame.waitFor(`div[data-test="${dbId}"]`), { visible: true };
       await frame.click(`div[data-test="${dbId}"]`);
-      await frame.waitFor(RENDER_DELAY);
       await frame.waitFor(`div[data-test="${collectionId}"]`, { visible: true });
 
       // delete container
@@ -65,7 +71,7 @@ describe("Collection Add and Delete SQL spec", () => {
 
       // confirm delete container
       await frame.waitFor('input[data-test="confirmCollectionId"]', { visible: true });
-      await frame.type('input[data-test="confirmCollectionId"]', collectionId.trim());
+      await frame.type('input[data-test="confirmCollectionId"]', collectionId);
 
       // click delete
       await frame.waitFor('input[data-test="deleteCollection"]', { visible: true });
@@ -82,6 +88,7 @@ describe("Collection Add and Delete SQL spec", () => {
       await button.asElement().click();
 
       // click delete database
+      await frame.waitFor(RENDER_DELAY);
       await frame.waitFor('span[class="treeComponentMenuItemLabel deleteDatabaseMenuItemLabel"]');
       await frame.click('span[class="treeComponentMenuItemLabel deleteDatabaseMenuItemLabel"]');