chore(aggregations,schema-validation,shell): replace enzyme usage with react-testing-library

packages/compass-aggregations/package.json

@@ -38,13 +38,11 @@
     "@mongodb-js/testing-library-compass": "^1.3.1",
     "@mongodb-js/tsconfig-compass": "^1.2.8",
     "@types/babel__generator": "^7.6.8",
-    "@types/enzyme": "^3.10.14",
     "@types/lodash": "^4.14.188",
     "@types/semver": "^7.3.9",
     "chai": "^4.3.6",
     "depcheck": "^1.4.1",
     "electron-mocha": "^12.2.0",
-    "enzyme": "^3.11.0",
     "mocha": "^10.2.0",
     "nyc": "^15.1.0",
     "react-dom": "^17.0.2",

packages/compass-aggregations/src/components/settings/settings.spec.tsx

@@ -1,75 +1,90 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import {
+  renderWithConnections,
+  screen,
+  userEvent,
+} from '@mongodb-js/testing-library-compass';
 import sinon from 'sinon';
 import { expect } from 'chai';
 
 import Settings from './settings';
 import { INITIAL_STATE } from '../../modules/settings';
 
+function renderSettings(
+  props: Partial<React.ComponentProps<typeof Settings>> = {},
+  preferences: {
+    enableAggregationBuilderExtraOptions?: boolean;
+  } = {}
+) {
+  return renderWithConnections(
+    <Settings
+      isExpanded={false}
+      isCommenting={false}
+      applySettings={() => {}}
+      toggleSettingsIsExpanded={() => {}}
+      toggleSettingsIsCommentMode={() => {}}
+      setSettingsSampleSize={() => {}}
+      setSettingsLimit={() => {}}
+      limit={INITIAL_STATE.sampleSize}
+      largeLimit={INITIAL_STATE.limit}
+      settings={INITIAL_STATE}
+      {...props}
+    />,
+    {
+      preferences,
+    }
+  );
+}
+
+const largeLimitOptionTestId = 'aggregation-settings-limit-input';
+
 describe('Settings [Component]', function () {
-  let state: any;
-  let component: ReturnType<typeof mount>;
   let applySettingsSpy: sinon.SinonSpy;
   let toggleSettingsIsExpandedSpy: sinon.SinonSpy;
-  let toggleSettingsIsCommentModeSpy: sinon.SinonSpy;
-  let setSettingsSampleSizeSpy: sinon.SinonSpy;
-  let setSettingsLimitSpy: sinon.SinonSpy;
-  let runStageSpy: sinon.SinonSpy;
 
   context('when the component is not atlas deployed', function () {
-    beforeEach(function () {
-      applySettingsSpy = sinon.spy();
-      toggleSettingsIsExpandedSpy = sinon.spy();
-      toggleSettingsIsCommentModeSpy = sinon.spy();
-      setSettingsSampleSizeSpy = sinon.spy();
-      setSettingsLimitSpy = sinon.spy();
-      runStageSpy = sinon.spy();
-
-      state = {
-        ...INITIAL_STATE,
-        applySettings: applySettingsSpy,
-        toggleSettingsIsExpanded: toggleSettingsIsExpandedSpy,
-        toggleSettingsIsCommentMode: toggleSettingsIsCommentModeSpy,
-        setSettingsSampleSize: setSettingsSampleSizeSpy,
-        setSettingsLimit: setSettingsLimitSpy,
-        isCommenting: true,
-        limit: INITIAL_STATE.sampleSize,
-        largeLimit: INITIAL_STATE.limit,
-        runStage: runStageSpy,
-        settings: INITIAL_STATE,
-      };
-    });
-
     it('is hidden by default', function () {
-      component = mount(<Settings {...state} />);
-      expect(Object.keys(component).length).to.equal(0);
+      renderSettings();
+      expect(screen.queryByText('Settings')).to.not.exist;
     });
 
     it('is rendered when isExpanded=true', function () {
-      const props = { ...state, isExpanded: true };
-      component = mount(<Settings {...props} />);
-      expect(component.text()).to.contain('Settings');
+      renderSettings({
+        isExpanded: true,
+      });
+      expect(screen.getByText('Settings')).to.be.visible;
+    });
+
+    it('shows the large limit option', function () {
+      renderSettings({
+        isExpanded: true,
+      });
+      expect(screen.getByTestId(largeLimitOptionTestId)).to.be.visible;
     });
 
     describe('When opened', function () {
+      beforeEach(function () {
+        applySettingsSpy = sinon.spy();
+        toggleSettingsIsExpandedSpy = sinon.spy();
+      });
+
       it('should close when Cancel is clicked', function () {
-        const props = { ...state, isExpanded: true };
-        component = mount(<Settings {...props} />);
-        component
-          .find('#aggregations-settings-cancel')
-          .hostNodes()
-          .simulate('click');
+        renderSettings({
+          isExpanded: true,
+          applySettings: applySettingsSpy,
+          toggleSettingsIsExpanded: toggleSettingsIsExpandedSpy,
+        });
+        userEvent.click(screen.getByTestId('aggregation-settings-cancel'));
         expect(toggleSettingsIsExpandedSpy.calledOnce).to.equal(true);
       });
 
       it('should update the settings, re-run the pipeline, and Close', function () {
-        const props = { ...state, isExpanded: true };
-
-        component = mount(<Settings {...props} />);
-        component
-          .find('#aggregation-settings-apply')
-          .hostNodes()
-          .simulate('click');
+        renderSettings({
+          isExpanded: true,
+          applySettings: applySettingsSpy,
+          toggleSettingsIsExpanded: toggleSettingsIsExpandedSpy,
+        });
+        userEvent.click(screen.getByTestId('aggregation-settings-apply'));
 
         expect(applySettingsSpy.calledOnce).to.equal(true);
         expect(toggleSettingsIsExpandedSpy.calledOnce).to.equal(true);
@@ -79,32 +94,18 @@ describe('Settings [Component]', function () {
 
   context('when the component is atlas deployed', function () {
     beforeEach(function () {
-      applySettingsSpy = sinon.spy();
-      toggleSettingsIsExpandedSpy = sinon.spy();
-      toggleSettingsIsCommentModeSpy = sinon.spy();
-      setSettingsSampleSizeSpy = sinon.spy();
-      setSettingsLimitSpy = sinon.spy();
-      runStageSpy = sinon.spy();
-
-      state = {
-        ...INITIAL_STATE,
-        applySettings: applySettingsSpy,
-        toggleSettingsIsExpanded: toggleSettingsIsExpandedSpy,
-        toggleSettingsIsCommentMode: toggleSettingsIsCommentModeSpy,
-        setSettingsSampleSize: setSettingsSampleSizeSpy,
-        setSettingsLimit: setSettingsLimitSpy,
-        isCommenting: true,
-        limit: INITIAL_STATE.sampleSize,
-        largeLimit: INITIAL_STATE.limit,
-        runStage: runStageSpy,
-        settings: INITIAL_STATE,
-      };
+      renderSettings(
+        {
+          isExpanded: true,
+        },
+        {
+          enableAggregationBuilderExtraOptions: false,
+        }
+      );
     });
 
     it('hides the large limit option', function () {
-      const props = { ...state };
-      component = mount(<Settings {...props} />);
-      expect(component.find('label[innerText="Limit"]')).to.not.exist;
+      expect(screen.queryByTestId(largeLimitOptionTestId)).to.not.exist;
     });
   });
 });

packages/compass-aggregations/src/components/settings/settings.tsx

@@ -169,14 +169,14 @@ function Settings({
         <Body weight="medium">Settings</Body>
         <div className={headerButtonGroupStyles}>
           <Button
-            id="aggregations-settings-cancel"
+            data-testid="aggregation-settings-cancel"
             size="xsmall"
             onClick={toggleSettingsIsExpanded}
           >
             Cancel
           </Button>
           <Button
-            id="aggregation-settings-apply"
+            data-testid="aggregation-settings-apply"
             size="xsmall"
             variant="primary"
             onClick={onApplyClicked}
@@ -253,6 +253,7 @@ function Settings({
           </div>
           <div className={inputControlStyles}>
             <TextInput
+              data-testid="aggregation-settings-limit-input"
               id={aggregationLimitId}
               aria-labelledby={aggregationLimitLabelId}
               aria-describedby={aggregationLimitDescriptionId}

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

@@ -835,7 +835,8 @@ export const AggregationSettingsButton =
 export const AggregationPipelineName = '[data-testid="pipeline-name"]';
 export const AggregationCommentModeCheckbox = '#aggregation-comment-mode';
 export const AggregationSampleSizeInput = '#aggregation-sample-size';
-export const AggregationSettingsApplyButton = '#aggregation-settings-apply';
+export const AggregationSettingsApplyButton =
+  '[data-testid="aggregation-settings-apply"]';
 export const AddStageButton = '[data-testid="add-stage"]';
 export const ExportAggregationToLanguage =
   '[data-testid="pipeline-toolbar-export-button"]';

packages/compass-schema-validation/package.json

@@ -53,12 +53,10 @@
     "@mongodb-js/prettier-config-compass": "^1.2.8",
     "@mongodb-js/testing-library-compass": "^1.3.1",
     "@mongodb-js/tsconfig-compass": "^1.2.8",
-    "@types/enzyme": "^3.10.14",
     "chai": "^4.2.0",
     "depcheck": "^1.4.1",
     "electron": "^32.3.3",
     "electron-mocha": "^12.2.0",
-    "enzyme": "^3.11.0",
     "hadron-ipc": "^3.4.9",
     "mocha": "^10.2.0",
     "mongodb-instance-model": "^12.31.0",