chore: bump the xvfb screen size to our default window size, add back…

… min-width on workspaces (#5655)

* bump the xvfb screen size to our default window size

* firefox-compatible maximise resize

* disable the devserver overlay when testing

* log the DISPLAY env var for xvfb debugging

* how did that get there

* try without --auto-servernum

* just remove the options

* Revert "try without --auto-servernum"

This reverts commit 3436331.

* also debug xvfb-maybe

* don't send xvfb-run output to /dev/null

* more resizing hacks

* redhat does not like this

* wrap the whole action in the waitUntil loop

* add the attempt number

* add back the minWidth

* loop around both clicks, don't open the menu twice

.evergreen/xvfb-service.sh

@@ -3,7 +3,7 @@
 set -e
 
 XVFB=/usr/bin/Xvfb
-XVFBARGS=":1 -screen 0 1024x768x24 -ac +extension GLX +render -noreset"
+XVFBARGS=":1 -screen 0 1432x840x24 -ac +extension GLX +render -noreset"
 PIDFILE=/var/run/xvfb.pid
 case "$1" in
   start)

packages/compass-e2e-tests/helpers/commands/add-collection.ts

@@ -70,29 +70,67 @@ export async function addCollection(
     )) {
       const valStr = value.toString();
 
-      await browser.clickVisible(
-        Selectors.createCollectionCustomCollationFieldButton(key)
-      );
-      const menu = browser.$(
-        Selectors.createCollectionCustomCollationFieldMenu(key)
-      );
-      await menu.waitForDisplayed();
-      const option = menu.$(`li[value="${valStr}"]`);
-
       let clickAttempt = 1;
 
       // Just continue clicking until the value is selected ...
       await browser.waitUntil(
         async () => {
+          // open the menu if it isn't open yet
+          console.log(`customCollation ${key} attempt ${clickAttempt}`);
+          if (
+            (await browser
+              .$(Selectors.createCollectionCustomCollationFieldMenu(key))
+              .isDisplayed()) === false
+          ) {
+            console.log(
+              'customCollation clickVisible',
+              Selectors.createCollectionCustomCollationFieldButton(key)
+            );
+            await browser.clickVisible(
+              Selectors.createCollectionCustomCollationFieldButton(key)
+            );
+          }
+
+          const menu = browser.$(
+            Selectors.createCollectionCustomCollationFieldMenu(key)
+          );
+          console.log(
+            `customCollation ${key} attempt ${clickAttempt} waitForDisplayed`,
+            Selectors.createCollectionCustomCollationFieldMenu(key)
+          );
+          await menu.waitForDisplayed();
+
+          const option = menu.$(`li[value="${valStr}"]`);
+          console.log(
+            `customCollation ${key} attempt ${clickAttempt} clickVisible`,
+            `li[value="${valStr}"]`
+          );
           await browser.clickVisible(option, {
             scroll: true,
           });
           clickAttempt++;
-          const button = await browser.$(
+          const button = browser.$(
+            Selectors.createCollectionCustomCollationFieldButton(key)
+          );
+          console.log(
+            `customCollation ${key} attempt ${clickAttempt} getAttribute`,
             Selectors.createCollectionCustomCollationFieldButton(key)
           );
           const selectedValue = await button.getAttribute('value');
 
+          if (selectedValue !== valStr) {
+            console.log(
+              `${key}: ${selectedValue} !== ${valStr} (${clickAttempt})`
+            );
+          }
+
+          // make sure the menu disappears before moving on to the next thing
+          console.log(
+            `customCollation ${key} attempt ${clickAttempt} waitForDisplayed (reverse)`,
+            Selectors.createCollectionCustomCollationFieldMenu(key)
+          );
+          await menu.waitForDisplayed({ reverse: true, timeout: 1000 }); // short timeout in case the click did nothing
+
           return selectedValue === valStr;
         },
         {
@@ -101,9 +139,6 @@ export async function addCollection(
       );
 
       await browser.screenshot(`custom-collation-${key}-${valStr}.png`);
-
-      // make sure the menu disappears before moving on to the next thing
-      await menu.waitForDisplayed({ reverse: true });
     }
 
     // scroll to the locale one so the screenshot will include it.

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

@@ -994,9 +994,19 @@ export async function init(
   const { browser } = compass;
 
   // larger window for more consistent results
-  await browser.execute(() => {
+  const [width, height] = await browser.execute(() => {
+    // in case setWindowSize() below doesn't work
     window.resizeTo(window.screen.availWidth, window.screen.availHeight);
+
+    return [window.screen.availWidth, window.screen.availHeight];
   });
+  debug(`available width=${width}, height=${height}`);
+  try {
+    // window.resizeTo() doesn't work on firefox
+    await browser.setWindowSize(width, height);
+  } catch (err: any) {
+    console.error(err?.stack);
+  }
 
   if (compass.needsCloseWelcomeModal) {
     await browser.closeWelcomeModal();

packages/compass-e2e-tests/index.ts

@@ -49,6 +49,8 @@ const FIRST_TEST = 'tests/time-to-first-query.test.ts';
 let compassWeb: ChildProcessWithoutNullStreams;
 
 async function setup() {
+  debug('X DISPLAY', process.env.DISPLAY);
+
   const disableStartStop = process.argv.includes('--disable-start-stop');
   const shouldTestCompassWeb = process.argv.includes('--test-compass-web');
 
@@ -67,6 +69,7 @@ async function setup() {
           env: {
             ...process.env,
             OPEN_BROWSER: 'false', // tell webpack dev server not to open the default browser
+            DISABLE_DEVSERVER_OVERLAY: 'true',
           },
         }
       );

packages/compass-e2e-tests/package.json

@@ -11,7 +11,7 @@
     "depcheck": "depcheck",
     "check": "npm run lint && npm run depcheck",
     "pretest": "npm run unzip-fixtures",
-    "test": "xvfb-maybe --auto-servernum --server-args=\"-screen 0 1024x768x24\" -- ts-node index.ts",
+    "test": "xvfb-maybe --auto-servernum --server-args=\"-screen 0 1432x840x24\" -- ts-node index.ts",
     "test-ci": "npm run test",
     "posttest-ci": "npm run coverage-report",
     "test-packaged": "npm run test -- -- --test-packaged-app",
@@ -20,10 +20,10 @@
     "start-server": "mongodb-runner start --id=e2e --topology=replset --secondaries=0 -- --port 27091",
     "stop-server": "mongodb-runner stop --id=e2e",
     "unzip-fixtures": "ts-node ./scripts/gunzip.ts fixtures/*.gz",
-    "test-noserver": "env DEBUG=hadron*,mongo*,compass* npm run test -- --disable-start-stop --bail",
-    "test-noserver-nocompile": "env DEBUG=hadron*,mongo*,compass* npm run test -- --no-native-modules --no-compile --disable-start-stop --bail",
-    "test-web": "env DEBUG=hadron*,mongo*,compass* npm run test -- --test-compass-web",
-    "test-web-noserver": "env DEBUG=hadron*,mongo*,compass* npm run test -- --test-compass-web --disable-start-stop --bail",
+    "test-noserver": "env DEBUG=hadron*,mongo*,compass*,xvfb-maybe* npm run test -- --disable-start-stop --bail",
+    "test-noserver-nocompile": "env DEBUG=hadron*,mongo*,compass*,xvfb-maybe* npm run test -- --no-native-modules --no-compile --disable-start-stop --bail",
+    "test-web": "env DEBUG=hadron*,mongo*,compass*,xvfb-maybe* npm run test -- --test-compass-web",
+    "test-web-noserver": "env DEBUG=hadron*,mongo*,compass*,xvfb-maybe* npm run test -- --test-compass-web --disable-start-stop --bail",
     "coverage-merge": "nyc merge .log/coverage .nyc_output/coverage.json",
     "coverage-report": "npm run coverage-merge && nyc report",
     "server-info": "ts-node ./scripts/server-info.ts"

packages/compass-web/webpack.config.js

@@ -109,7 +109,10 @@ module.exports = async (env, args) => {
           publicPath: '/',
         },
         client: {
-          overlay: { warnings: false, errors: true, runtimeErrors: true },
+          overlay:
+            process.env.DISABLE_DEVSERVER_OVERLAY === 'true'
+              ? false
+              : { warnings: false, errors: true, runtimeErrors: true },
         },
       },
       resolve: {

packages/compass-workspaces/src/components/index.tsx

@@ -77,6 +77,7 @@ const horizontalSplitStyles = css({
 const workspacesStyles = css({
   minHeight: 0,
   overflow: 'hidden',
+  minWidth: '750px', // roughly the minimum needed for the CRUD toolbars
 });
 
 const sidebarStyles = css({