chore(testing-library, sidebar): make preload skip interface more explicit in test helpers; extend the test to check for disabled elements

Author: gribnoysup

configs/testing-library-compass/src/index.tsx

@@ -82,10 +82,11 @@ type TestConnectionsOptions = {
   preferences?: Partial<AllPreferences>;
   /**
    * Initial list of connections to be "loaded" to the application. Empty list
-   * by default. You can explicitly pass `null` to disable initial preloading of
-   * the connections
+   * by default. You can explicitly pass `no-preload` to disable initial
+   * preloading of the connections, otherwise connections are always preloaded
+   * before rendering when using helper methods
    */
-  connections?: ConnectionInfo[] | null;
+  connections?: ConnectionInfo[] | 'no-preload';
   /**
    * Connection function that returns DataService when connecting to a
    * connection with the connections store. Second argument is a constructor
@@ -247,6 +248,12 @@ const EmptyWrapper = ({ children }: { children: React.ReactElement }) => {
   return <>{children}</>;
 };
 
+function getConnectionsFromConnectionsOption(
+  connections: TestConnectionsOptions['connections']
+): Exclude<TestConnectionsOptions['connections'], 'no-preload'> {
+  return connections === 'no-preload' ? undefined : connections ?? [];
+}
+
 const TEST_ENV_CURRENT_CONNECTION = {
   info: {
     id: 'TEST',
@@ -268,9 +275,7 @@ function createWrapper(
   TestingLibraryWrapper: ComponentWithChildren = EmptyWrapper,
   container?: HTMLElement
 ) {
-  const connections =
-    options.connections === null ? undefined : options.connections ?? [];
-
+  const connections = getConnectionsFromConnectionsOption(options.connections);
   const wrapperState = {
     globalAppRegistry: new AppRegistry(),
     localAppRegistry: new AppRegistry(),
@@ -421,7 +426,9 @@ function renderWithConnections(
     hydrate,
   });
   expect(
-    (connectionsOptions.connections ?? []).every((info) => {
+    (
+      getConnectionsFromConnectionsOption(connectionsOptions.connections) ?? []
+    ).every((info) => {
       return !!wrapperState.connectionsStore.getState().connections.byId[
         info.id
       ];
@@ -515,7 +522,10 @@ async function renderWithActiveConnection(
   const renderResult = renderWithConnections(ui, {
     ...options,
     wrapper: ConnectionInfoWrapper,
-    connections: [connectionInfo, ...(connections ?? [])],
+    connections: [
+      connectionInfo,
+      ...(getConnectionsFromConnectionsOption(connections) ?? []),
+    ],
   });
   await waitForConnect(renderResult.connectionsStore, connectionInfo);
   return renderResult;
@@ -537,7 +547,10 @@ async function renderHookWithActiveConnection<HookProps, HookResult>(
   const renderHookResult = renderHookWithConnections(cb, {
     ...options,
     wrapper: ConnectionInfoWrapper,
-    connections: [connectionInfo, ...(connections ?? [])],
+    connections: [
+      connectionInfo,
+      ...(getConnectionsFromConnectionsOption(connections) ?? []),
+    ],
   });
   await waitForConnect(renderHookResult.connectionsStore, connectionInfo);
   return renderHookResult;

packages/compass-connections/src/index.tsx

@@ -85,20 +85,17 @@ const CompassConnectionsPlugin = registerHadronPlugin(
       { logger, preferences, connectionStorage, track, globalAppRegistry },
       { addCleanup, cleanup }
     ) {
-      const store = configureStore(
-        initialProps.preloadStorageConnectionInfos ?? null,
-        {
-          logger,
-          preferences,
-          connectionStorage,
-          track,
-          getExtraConnectionData: initialProps.onExtraConnectionDataRequest,
-          appName: initialProps.appName,
-          connectFn: initialProps.connectFn,
-          globalAppRegistry,
-          onFailToLoadConnections: initialProps.onFailToLoadConnections,
-        }
-      );
+      const store = configureStore(initialProps.preloadStorageConnectionInfos, {
+        logger,
+        preferences,
+        connectionStorage,
+        track,
+        getExtraConnectionData: initialProps.onExtraConnectionDataRequest,
+        appName: initialProps.appName,
+        connectFn: initialProps.connectFn,
+        globalAppRegistry,
+        onFailToLoadConnections: initialProps.onFailToLoadConnections,
+      });
 
       setTimeout(() => {
         void store.dispatch(loadConnections());

packages/compass-connections/src/stores/connections-store-redux.spec.tsx

@@ -67,7 +67,7 @@ describe('CompassConnections store', function () {
         .rejects(new Error('loadAll failed'));
 
       renderCompassConnections({
-        connections: null,
+        connections: 'no-preload',
         connectionStorage,
         onFailToLoadConnections: onFailToLoadConnectionsSpy,
       });

packages/compass-connections/src/stores/connections-store-redux.ts

@@ -469,7 +469,7 @@ const INITIAL_STATE: State = {
 };
 
 export function getInitialConnectionsStateForConnectionInfos(
-  connectionInfos: ConnectionInfo[] | null
+  connectionInfos?: ConnectionInfo[]
 ): State['connections'] {
   if (!connectionInfos) {
     // Keep initial state if we're not preloading any connections
@@ -2134,7 +2134,7 @@ export const openSettingsModal = (
 };
 
 export function configureStore(
-  preloadConnectionInfos: ConnectionInfo[] | null,
+  preloadConnectionInfos: ConnectionInfo[] | undefined,
   thunkArg: ThunkExtraArg
 ) {
   return createStore(

packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx

@@ -5,7 +5,6 @@ import type { RenderWithConnectionsHookResult } from '@mongodb-js/testing-librar
 import {
   createPluginTestHelpers,
   screen,
-  cleanup,
   waitFor,
   within,
   userEvent,
@@ -94,7 +93,7 @@ describe('Multiple Connections Sidebar Component', function () {
 
   function doRender(
     activeWorkspace: WorkspaceTab | null = null,
-    connections: ConnectionInfo[] | null = [savedFavoriteConnection],
+    connections: ConnectionInfo[] | 'no-preload' = [savedFavoriteConnection],
     atlasClusterConnectionsOnly: boolean | undefined = undefined
   ) {
     workspace = sinon.spy({
@@ -153,7 +152,6 @@ describe('Multiple Connections Sidebar Component', function () {
   }
 
   afterEach(function () {
-    cleanup();
     sinon.restore();
   });
 
@@ -236,8 +234,15 @@ describe('Multiple Connections Sidebar Component', function () {
 
   describe('connections list', function () {
     it('should display a loading state while connections are not loaded yet', function () {
-      doRender(null, null);
+      doRender(null, 'no-preload');
       expect(screen.getByTestId('connections-placeholder')).to.be.visible;
+      expect(screen.getByRole('searchbox', { name: 'Search' })).to.have.attr(
+        'aria-disabled',
+        'true'
+      );
+      expect(
+        screen.getByRole('button', { name: 'Filter connections' })
+      ).to.have.attr('aria-disabled', 'true');
     });
 
     context('when there are no connections', function () {