diff --git a/package-lock.json b/package-lock.json index 9efa053d593..548f42af30d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -42532,13 +42532,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", @@ -45423,12 +45421,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", @@ -45646,12 +45642,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", "mocha": "^10.2.0", "nyc": "^15.1.0", "react-dom": "^17.0.2", @@ -55042,7 +55036,6 @@ "@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", "bson": "^6.10.3", @@ -55050,7 +55043,6 @@ "compass-preferences-model": "^2.39.0", "depcheck": "^1.4.1", "electron-mocha": "^12.2.0", - "enzyme": "^3.11.0", "hadron-app-registry": "^9.4.10", "hadron-document": "^8.8.10", "hadron-type-checker": "^7.4.9", @@ -57117,14 +57109,12 @@ "@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", "bson": "^6.10.3", "chai": "^4.2.0", "compass-preferences-model": "^2.39.0", "depcheck": "^1.4.1", "electron": "^32.3.3", "electron-mocha": "^12.2.0", - "enzyme": "^3.11.0", "hadron-app-registry": "^9.4.10", "hadron-ipc": "^3.4.9", "javascript-stringify": "^2.0.1", @@ -57455,14 +57445,12 @@ "@mongosh/browser-repl": "^3.10.3", "@mongosh/logging": "^3.7.2", "@mongosh/node-runtime-worker-thread": "^3.3.8", - "@types/enzyme": "^3.10.14", "bson": "^6.10.3", "chai": "^4.2.0", "compass-preferences-model": "^2.39.0", "depcheck": "^1.4.1", "electron": "^32.3.3", "electron-mocha": "^12.2.0", - "enzyme": "^3.11.0", "hadron-app-registry": "^9.4.10", "mocha": "^10.2.0", "nyc": "^15.1.0", diff --git a/packages/compass-aggregations/package.json b/packages/compass-aggregations/package.json index a710f76f96d..886ece71a41 100644 --- a/packages/compass-aggregations/package.json +++ b/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", diff --git a/packages/compass-aggregations/src/components/saving-pipeline-modal/saving-pipeline-modal.spec.ts b/packages/compass-aggregations/src/components/saving-pipeline-modal/saving-pipeline-modal.spec.ts deleted file mode 100644 index c2fb423c839..00000000000 --- a/packages/compass-aggregations/src/components/saving-pipeline-modal/saving-pipeline-modal.spec.ts +++ /dev/null @@ -1,38 +0,0 @@ -// import React from 'react'; -// import { mount } from 'enzyme'; - -// import SavingPipelineModal from '../saving-pipeline-modal'; - -// import styles from './saving-pipeline-modal.module.less'; - -// describe('SavingPipelineModal [Component]', () => { -// context('when the component is rendered', () => { -// let component; - -// const savingPipelineNameChangedSpy = sinon.spy(); -// const savingPipelineApplySpy = sinon.spy(); -// const savingPipelineCancelSpy = sinon.spy(); -// const saveCurrentPipelineSpy = sinon.spy(); - -// beforeEach(() => { -// component = mount( -// -// ); -// }); - -// afterEach(() => { -// component = null; -// }); -// }); -// describe('Save As', () => { -// it('should have the name input prepopulated'); -// it('should have a relative title'); -// }); -// }); diff --git a/packages/compass-aggregations/src/components/settings/settings.spec.tsx b/packages/compass-aggregations/src/components/settings/settings.spec.tsx index a8bee4d414b..824df8a9105 100644 --- a/packages/compass-aggregations/src/components/settings/settings.spec.tsx +++ b/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> = {}, + preferences: { + enableAggregationBuilderExtraOptions?: boolean; + } = {} +) { + return renderWithConnections( + {}} + 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; 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(); - 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(); - 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(); - 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(); - 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(); - expect(component.find('label[innerText="Limit"]')).to.not.exist; + expect(screen.queryByTestId(largeLimitOptionTestId)).to.not.exist; }); }); }); diff --git a/packages/compass-aggregations/src/components/settings/settings.tsx b/packages/compass-aggregations/src/components/settings/settings.tsx index a3e6a40ff6d..2e233a5f0a0 100644 --- a/packages/compass-aggregations/src/components/settings/settings.tsx +++ b/packages/compass-aggregations/src/components/settings/settings.tsx @@ -169,14 +169,14 @@ function Settings({ Settings