chore(connections): Move expensive beforeEach test setup into before operation (#2591)

Author: Anemy

package-lock.json

@@ -83,14 +83,14 @@
     "chai": "^4.3.4",
     "depcheck": "^1.4.1",
     "eslint": "^7.25.0",
+    "get-port": "^5.1.1",
     "mocha": "^8.4.0",
     "mongodb-data-service": "^21.12.0",
     "mongodb-runner": "^4.8.3",
     "nyc": "^15.1.0",
     "prettier": "2.3.2",
     "rimraf": "^3.0.2",
     "sinon": "^9.2.3",
-    "storage-mixin": "^4.7.0",
     "xvfb-maybe": "^0.2.1"
   }
 }

packages/connections/package.json

@@ -1,6 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { TestBackend } = require('storage-mixin');
-
 import React from 'react';
 import {
   cleanup,
@@ -10,63 +7,43 @@ import {
   fireEvent,
 } from '@testing-library/react';
 import { expect } from 'chai';
-import fs from 'fs';
-import path from 'path';
-import os from 'os';
+import { ConnectionInfo } from 'mongodb-data-service';
 import { v4 as uuid } from 'uuid';
-import { convertConnectionInfoToModel } from 'mongodb-data-service';
 import sinon from 'sinon';
+import getPort from 'get-port';
 
 import Connections from './connections';
-
-function getConnectionFilePath(tmpDir: string, id: string): string {
-  const connectionsDir = path.join(tmpDir, 'Connections');
-  const filePath = path.join(connectionsDir, `${id}.json`);
-  return filePath;
-}
-
-// TODO: In typescript 4.5 we can just use Awaited and remove this.
-type Awaited<T> = T extends PromiseLike<infer U> ? U : T;
-
-function writeFakeConnection(
-  tmpDir: string,
-  legacyConnection: Partial<
-    Awaited<ReturnType<typeof convertConnectionInfoToModel>>
-  > & { _id: string }
-) {
-  const filePath = getConnectionFilePath(tmpDir, legacyConnection._id);
-  const connectionsDir = path.dirname(filePath);
-  fs.mkdirSync(connectionsDir, { recursive: true });
-  fs.writeFileSync(filePath, JSON.stringify(legacyConnection));
+import { ConnectionStore } from '../stores/connections-store';
+
+function getMockConnectionStorage(
+  mockConnections: ConnectionInfo[]
+): ConnectionStore {
+  return {
+    loadAll: () => {
+      return Promise.resolve(mockConnections);
+    },
+  };
 }
 
 describe('Connections Component', function () {
-  let tmpDir: string;
   let onConnectedSpy;
 
   beforeEach(function () {
     onConnectedSpy = sinon.spy();
-
-    tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'connections-tests'));
-    TestBackend.enable(tmpDir);
   });
 
   afterEach(function () {
-    TestBackend.disable();
-    try {
-      fs.rmdirSync(tmpDir, { recursive: true });
-    } catch (e) {
-      /* */
-    }
+    cleanup();
   });
 
   describe('when rendered', function () {
     beforeEach(function () {
-      render(<Connections onConnected={onConnectedSpy} />);
-    });
-
-    afterEach(function () {
-      cleanup();
+      render(
+        <Connections
+          onConnected={onConnectedSpy}
+          connectionStorage={getMockConnectionStorage([])}
+        />
+      );
     });
 
     it('renders the connect button from the connect-form', function () {
@@ -103,20 +80,25 @@ describe('Connections Component', function () {
 
     beforeEach(async function () {
       savedConnectionId = uuid();
-      writeFakeConnection(tmpDir, {
-        _id: savedConnectionId,
-        port: 27018,
-      });
 
-      render(<Connections onConnected={onConnectedSpy} />);
+      render(
+        <Connections
+          onConnected={onConnectedSpy}
+          connectionStorage={getMockConnectionStorage([
+            {
+              id: savedConnectionId,
+              connectionOptions: {
+                connectionString:
+                  'mongodb://localhost:27018/?readPreference=primary&ssl=false',
+              },
+            },
+          ])}
+        />
+      );
 
       await waitFor(() => expect(screen.queryByRole('listitem')).to.be.visible);
     });
 
-    afterEach(function () {
-      cleanup();
-    });
-
     it('should render the saved connections', function () {
       const listItems = screen.getAllByRole('listitem');
       expect(listItems.length).to.equal(1);
@@ -149,8 +131,16 @@ describe('Connections Component', function () {
         const connectButton = screen.getByText('Connect');
         fireEvent.click(connectButton);
 
+        // Wait for the connecting... modal to hide.
         await waitFor(
-          () => expect(screen.queryByTestId('connections-connected')).to.exist
+          () =>
+            expect(screen.queryByTestId('cancel-connection-attempt-button')).to
+              .not.exist
+        );
+        await waitFor(
+          () =>
+            expect(screen.queryByTestId('connections-disconnected')).to.not
+              .exist
         );
       });
 
@@ -179,29 +169,37 @@ describe('Connections Component', function () {
   describe('connecting to a connection that is not succeeding', function () {
     let savedConnectableId: string;
     let savedUnconnectableId: string;
+    let inactiveTestPort: number;
+
+    before(async function () {
+      inactiveTestPort = await getPort();
+    });
 
     beforeEach(async function () {
       savedConnectableId = uuid();
       savedUnconnectableId = uuid();
-      writeFakeConnection(tmpDir, {
-        _id: savedConnectableId,
-        port: 27018,
-      });
-      writeFakeConnection(
-        tmpDir,
-        await convertConnectionInfoToModel({
-          id: savedUnconnectableId,
-          connectionOptions: {
-            // Hopefully nothing is running on this port.
-            // Times out in 5000ms.
-            connectionString:
-              'mongodb://localhost:28099/?connectTimeoutMS=5000&serverSelectionTimeoutMS=5000',
-          },
-        })
+      render(
+        <Connections
+          onConnected={onConnectedSpy}
+          connectionStorage={getMockConnectionStorage([
+            {
+              id: savedConnectableId,
+              connectionOptions: {
+                connectionString:
+                  'mongodb://localhost:27018/?readPreference=primary&ssl=false',
+              },
+            },
+            {
+              id: savedUnconnectableId,
+              connectionOptions: {
+                // Times out in 5000ms.
+                connectionString: `mongodb://localhost:${inactiveTestPort}/?connectTimeoutMS=5000&serverSelectionTimeoutMS=5000`,
+              },
+            },
+          ])}
+        />
       );
 
-      render(<Connections onConnected={onConnectedSpy} />);
-
       await waitFor(
         () =>
           expect(
@@ -219,7 +217,7 @@ describe('Connections Component', function () {
       // Wait for the connection to load in the form.
       await waitFor(() =>
         expect(screen.queryByRole('textbox').textContent).to.equal(
-          'mongodb://localhost:28099/?connectTimeoutMS=5000&serverSelectionTimeoutMS=5000'
+          `mongodb://localhost:${inactiveTestPort}/?connectTimeoutMS=5000&serverSelectionTimeoutMS=5000`
         )
       );
 
@@ -229,15 +227,11 @@ describe('Connections Component', function () {
       // Wait for the connecting... modal to be shown.
       await waitFor(
         () =>
-          expect(screen.queryByTestId('cancel-connection-attempt-button')).to
-            .exist
+          expect(screen.queryByTestId('cancel-connection-attempt-button')).to.be
+            .visible
       );
     });
 
-    afterEach(function () {
-      cleanup();
-    });
-
     describe('when the connection attempt is cancelled', function () {
       beforeEach(async function () {
         const cancelButton = screen.getByTestId(
@@ -283,8 +277,16 @@ describe('Connections Component', function () {
           const connectButton = screen.getByText('Connect');
           fireEvent.click(connectButton);
 
+          // Wait for the connecting... modal to hide.
+          await waitFor(
+            () =>
+              expect(screen.queryByTestId('cancel-connection-attempt-button'))
+                .to.not.exist
+          );
           await waitFor(
-            () => expect(screen.queryByTestId('connections-connected')).to.exist
+            () =>
+              expect(screen.queryByTestId('connections-disconnected')).to.not
+                .exist
           );
         });
 

packages/connections/src/components/connections.spec.tsx

@@ -7,12 +7,16 @@ import {
   spacing,
 } from '@mongodb-js/compass-components';
 import ConnectForm from '@mongodb-js/connect-form';
-import { ConnectionInfo, DataService } from 'mongodb-data-service';
+import {
+  ConnectionInfo,
+  ConnectionStorage,
+  DataService,
+} from 'mongodb-data-service';
 
 import ResizableSidebar from './resizeable-sidebar';
 import FormHelp from './form-help/form-help';
 import Connecting from './connecting/connecting';
-import { useConnections } from '../stores/connections-store';
+import { ConnectionStore, useConnections } from '../stores/connections-store';
 
 const connectStyles = css({
   position: 'absolute',
@@ -51,11 +55,13 @@ const formContainerStyles = css({
 
 function Connections({
   onConnected,
+  connectionStorage = new ConnectionStorage(),
 }: {
   onConnected: (
     connectionInfo: ConnectionInfo,
     dataService: DataService
   ) => Promise<void>;
+  connectionStorage?: ConnectionStore;
 }): React.ReactElement {
   const [
     {
@@ -72,7 +78,7 @@ function Connections({
       createNewConnection,
       setActiveConnectionById,
     },
-  ] = useConnections(onConnected);
+  ] = useConnections(onConnected, connectionStorage);
 
   return (
     <div

packages/connections/src/components/connections.tsx

@@ -1,7 +1,6 @@
 import { v4 as uuidv4 } from 'uuid';
 import {
   ConnectionInfo,
-  ConnectionStorage,
   DataService,
   getConnectionTitle,
 } from 'mongodb-data-service';
@@ -21,6 +20,10 @@ export function createNewConnectionInfo(): ConnectionInfo {
   };
 }
 
+export interface ConnectionStore {
+  loadAll: () => Promise<ConnectionInfo[]>;
+}
+
 type State = {
   activeConnectionId?: string;
   activeConnectionInfo: ConnectionInfo;
@@ -126,10 +129,10 @@ async function loadConnections(
   dispatch: React.Dispatch<{
     type: 'set-connections';
     connections: ConnectionInfo[];
-  }>
+  }>,
+  connectionStorage: ConnectionStore
 ) {
   try {
-    const connectionStorage = new ConnectionStorage();
     const loadedConnections = await connectionStorage.loadAll();
 
     dispatch({
@@ -145,7 +148,8 @@ export function useConnections(
   onConnected: (
     connectionInfo: ConnectionInfo,
     dataService: DataService
-  ) => Promise<void>
+  ) => Promise<void>,
+  connectionStorage: ConnectionStore
 ): [
   State,
   {
@@ -155,7 +159,7 @@ export function useConnections(
     setActiveConnectionById(newConnectionId?: string | undefined): void;
   }
 ] {
-  const [state, dispatch] = useReducer(
+  const [state, dispatch]: [State, React.Dispatch<Action>] = useReducer(
     connectionsReducer,
     defaultConnectionsState()
   );
@@ -181,7 +185,7 @@ export function useConnections(
 
   useEffect(() => {
     // Load connections after first render.
-    void loadConnections(dispatch);
+    void loadConnections(dispatch, connectionStorage);
 
     return () => {
       // When unmounting, clean up any current connection attempts that have