chore: Browser E2E tests for compass-web sandbox COMPASS-7598 COMPASS…

…-7599 (#5439)

* test-web

* add test-web-sandbox to CI

* undo a change that was accidentally overridden

* skip at the top level

* explicitly exit

* try why-is-node-running

* shutdown driver

* error while copying logs that don't exist

* kill nicely?

* more killing

* print pid and drop the negative

* use tree-kill

* some TODOs

* ticket number

* remove the node 18+ hack

* remove why-is-node-running again

* unused import

* re-shrinkwrap

* drive-by debugging

* add unhandled rejection handler

* Revert "add unhandled rejection handler"

This reverts commit 855371b.

* disconnect by redirecting

* fix disconnect

* disable chrome tests for now as webdriverio is unable to download chromedriver

.evergreen/buildvariants.yml

@@ -90,6 +90,8 @@ buildvariants:
       - name: test-packaged-app-latest
         depends_on: package-compass
 
+      - name: test-web-sandbox-firefox
+
   - name: windows
     display_name: Windows 10 (Test and Package)
     run_on: windows-vsCurrent-large

.evergreen/config.json

@@ -12,7 +12,8 @@
       "test",
       ["test-electron", { "gui": true }],
       "package",
-      ["test-packaged-app", { "gui": true, "depends_on": "package-compass" }]
+      ["test-packaged-app", { "gui": true, "depends_on": "package-compass" }],
+      ["test-web-sandbox", { "gui": true }]
     ]
   },
   "tasks": {
@@ -137,6 +138,16 @@
           },
           "skip_on": ["macos-1100", "macos-1100-arm64", "rhel76-large"]
         }
+      ],
+      "test-web-sandbox": [
+        {
+          "name": "firefox",
+          "vars": {
+            "mongodb_version": "latest-alpha-enterprise",
+            "browser_name": "firefox"
+          },
+          "skip_on": ["macos-1100", "macos-1100-arm64", "rhel76-large", "windows-vsCurrent-large"]
+        }
       ]
     }
   },

.evergreen/functions.yml

@@ -534,6 +534,28 @@ functions:
 
           npm run --unsafe-perm --workspace compass-e2e-tests test-packaged-ci
 
+  test-web-sandbox:
+    - command: shell.exec
+      # Fail the task if it's idle for 10 mins
+      timeout_secs: 600
+      params:
+        working_dir: src
+        shell: bash
+        env:
+          <<: *compass-env
+          COMPASS_APP_PATH_ORIGINAL: ${appPath}
+          COMPASS_APP_NAME: ${packagerOptions.name}
+          DEBUG: ${debug|}
+          MONGODB_VERSION: ${mongodb_version|}
+          MONGODB_RUNNER_VERSION: ${mongodb_version|}
+          BROWSER_NAME: ${browser_name}
+        script: |
+          set -e
+          # Load environment variables
+          eval $(.evergreen/print-compass-env.sh)
+          source .evergreen/start-docker-envs.sh
+          npm run --unsafe-perm --workspace compass-e2e-tests test-web
+
   test-connectivity:
     - command: shell.exec
       # Fail the task if it's idle for 10 mins

.evergreen/tasks.in.yml

@@ -114,8 +114,8 @@ tasks:
       - func: save-all-artifacts
         vars:
           compass_distribution: <% out(packageTask.vars.compass_distribution) %>
-<% };
-for (const testPackagedTask of tasks['test-packaged-app']) { %>
+<% } %>
+<% for (const testPackagedTask of tasks['test-packaged-app']) { %>
   - name: <% out(testPackagedTask.name) %>
     tags: ['required-for-publish', 'run-on-pr']
     commands:
@@ -135,4 +135,22 @@ for (const testPackagedTask of tasks['test-packaged-app']) { %>
           <% out(`${key}: '${value}'`) } %>
           compass_distribution: compass
           debug: 'compass-e2e-tests*,electron*,hadron*,mongo*'
+<% } %>
+<% for (const testPackagedTask of tasks['test-web-sandbox']) { %>
+  - name: <% out(testPackagedTask.name) %>
+    tags: ['required-for-publish', 'run-on-pr']
+    commands:
+      - func: prepare
+      - func: install
+      - func: bootstrap
+        vars:
+          scope: 'compass-e2e-tests'
+      - func: apply-compass-target-expansion
+        vars:
+          compass_distribution: compass
+      - func: test-web-sandbox
+        vars: <% for (const [key, value] of Object.entries(testPackagedTask.vars)) { %>
+          <% out(`${key}: '${value}'`) } %>
+          compass_distribution: compass
+          debug: 'compass-e2e-tests*,electron*,hadron*,mongo*'
 <% } %>

.evergreen/tasks.yml

@@ -157,6 +157,7 @@ tasks:
         vars:
           compass_distribution: compass-isolated
 
+
   - name: test-packaged-app-40x-community
     tags: ['required-for-publish', 'run-on-pr']
     commands:
@@ -416,3 +417,22 @@ tasks:
           mongodb_version: 'latest-alpha-enterprise'
           compass_distribution: compass
           debug: 'compass-e2e-tests*,electron*,hadron*,mongo*'
+
+
+  - name: test-web-sandbox-firefox
+    tags: ['required-for-publish', 'run-on-pr']
+    commands:
+      - func: prepare
+      - func: install
+      - func: bootstrap
+        vars:
+          scope: 'compass-e2e-tests'
+      - func: apply-compass-target-expansion
+        vars:
+          compass_distribution: compass
+      - func: test-web-sandbox
+        vars: 
+          mongodb_version: 'latest-alpha-enterprise'
+          browser_name: 'firefox'
+          compass_distribution: compass
+          debug: 'compass-e2e-tests*,electron*,hadron*,mongo*'

packages/compass-e2e-tests/helpers/commands/connect-with-connection-string.ts

@@ -8,7 +8,7 @@ export async function connectWithConnectionString(
   connectionStatus: 'success' | 'failure' | 'either' = 'success',
   timeout?: number
 ): Promise<void> {
-  const sidebar = await browser.$(Selectors.SidebarTitle);
+  const sidebar = await browser.$(Selectors.Sidebar);
   if (await sidebar.isDisplayed()) {
     await browser.disconnect();
   }

packages/compass-e2e-tests/helpers/commands/disconnect.ts

@@ -1,8 +1,18 @@
+import { TEST_COMPASS_WEB } from '../compass';
 import type { CompassBrowser } from '../compass-browser';
 import delay from '../delay';
 import * as Selectors from '../selectors';
 
 export async function disconnect(browser: CompassBrowser): Promise<void> {
+  if (TEST_COMPASS_WEB) {
+    const url = new URL(await browser.getUrl());
+    url.pathname = '/';
+    await browser.navigateTo(url.toString());
+    const element = await browser.$('textarea[title="Connection string"]');
+    await element.waitForDisplayed();
+    return;
+  }
+
   const cancelConnectionButtonElement = await browser.$(
     Selectors.CancelConnectionButton
   );

packages/compass-e2e-tests/helpers/commands/wait-for-connection-result.ts

@@ -1,3 +1,4 @@
+import { TEST_COMPASS_WEB } from '../compass';
 import type { CompassBrowser } from '../compass-browser';
 import * as Selectors from '../selectors';
 
@@ -8,13 +9,19 @@ export async function waitForConnectionResult(
 ): Promise<undefined | string> {
   let selector: string;
   if (connectionStatus === 'either') {
-    // For the rare cases where we don't care whether it fails or succeeds
+    // TODO(COMPASS-7600): this doesn't support compass-web yet, but also isn't
+    // encountered yet For the rare cases where we don't care whether it fails
+    // or succeeds
     selector = `${Selectors.DatabasesTable},${Selectors.ConnectionFormErrorMessage}`;
   } else if (connectionStatus === 'success') {
     // First meaningful thing on the screen after being connected, good enough
     // indicator that we are connected to the server
-    selector = Selectors.MyQueriesList;
+    selector = TEST_COMPASS_WEB
+      ? '[data-testid="workspace-tab-button"][title=Databases]'
+      : Selectors.MyQueriesList;
   } else {
+    // TODO(COMPASS-7600): this doesn't support compass-web yet, but also isn't
+    // encountered yet
     selector = Selectors.ConnectionFormErrorMessage;
   }
   const element = await browser.$(selector);

packages/compass-e2e-tests/helpers/commands/wait-for-connection-screen.ts

@@ -1,9 +1,13 @@
+import { TEST_COMPASS_WEB } from '../compass';
 import type { CompassBrowser } from '../compass-browser';
 import * as Selectors from '../selectors';
 
 export async function waitForConnectionScreen(
   browser: CompassBrowser
 ): Promise<void> {
-  const connectScreenElement = await browser.$(Selectors.ConnectSection);
+  const selector = TEST_COMPASS_WEB
+    ? 'textarea[title="Connection string"]'
+    : Selectors.ConnectSection;
+  const connectScreenElement = await browser.$(selector);
   await connectScreenElement.waitForDisplayed();
 }