chore(compass-components): update LeafyGreen packages, update table u…

…sage COMPASS-7046 (#5400) * bump LG modal deps * bump typography and palette * deps: update leafygreen display components * package-lock * chore(deps): update leafygreen table usage and other smaller remaining lg deps * fixup: remove extra disabled testing prop * fixup: use xsmall instead of small for segmented control, remove unused comments * fixup: update disabled button tests to use aria-disabled property * fixup: use isSticky prop, update tests * chore: add custom event mock for jsdom eventtarget check * fixup: remove aria-label usage in text inputs as its no longer passed by LeafyGreen * fixup: downgrade focus-trap-react for fallback focus fix * deps * fixup: add tabbable display check override, more aria-disabled updates * fixup: update disabled check * fixup: aria-disabled checks and update selectors * fixup: modal loses focus on menu close so we click exit instead of escape button * chore(compass-components): bump leafygreen packages to latest * chore(mocha-config): apply generalized solution for tabbable testing issues * chore(components): add missing dep * chore(components): fix ts issues * chore(indexes): fix table styles * chore(e2e): work around the leafygreen issue with copy button * chore(e2e): remove unused import * chore(e2e): fix select value selection flake by clicking until it works * chore(e2e): also click another select in a modal until it works * chore(components): remove arbitrary timeout from test * chore(e2e): do not screenshot in a loop * chore(e2e): clickVisible instead of click * chore: remove unused sinon cleanup * chore(export-to-language): add test for copy button click * chore(indexes): preserve indexes selected sorting state per tab * chore(indexes): add back custom sorting tests for regular indexes * chore(indexes): add search indexes sorting test; remove only; make sure tab state hooks is better adapted for testing env --------- Co-authored-by: Sergey Petushkov <petushkov.sergey@gmail.com>
mongodb-js · Mar 27, 2024 · 833f22d · 833f22d
1 parent 15265f8
commit 833f22d
Show file tree

Hide file tree

Showing 79 changed files with 2,462 additions and 3,239 deletions.
diff --git a/configs/mocha-config-compass/register/jsdom-extra-mocks-register.js b/configs/mocha-config-compass/register/jsdom-extra-mocks-register.js
@@ -12,3 +12,33 @@ if (!window.matchMedia) {
     };
   };
 }
+
+/**
+ * NB: tabbable requires special overrides to work in jsdom environments as per
+ * documentation
+ *
+ * @see {@link https://github.com/focus-trap/tabbable?tab=readme-ov-file#testing-in-jsdom}
+ */
+const tabbable = require('tabbable');
+
+const origTabbable = { ...tabbable };
+
+Object.assign(tabbable, {
+  tabbable: (node, options) =>
+    origTabbable.tabbable(node, { ...options, displayCheck: 'none' }),
+  focusable: (node, options) =>
+    origTabbable.focusable(node, { ...options, displayCheck: 'none' }),
+  isFocusable: (node, options) =>
+    origTabbable.isFocusable(node, { ...options, displayCheck: 'none' }),
+  isTabbable: (node, options) =>
+    origTabbable.isTabbable(node, { ...options, displayCheck: 'none' }),
+});
+
+// leafygreen (through `clipboard` library) uses deprecated API check that is
+// not working in jsdom if copy / paste APIs are supported
+if (!window.document.queryCommandSupported) {
+  window.document.queryCommandSupported =
+    globalThis.document.queryCommandSupported = function (command) {
+      return ['copy', 'cut'].includes(command);
+    };
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/atlas-service/src/components/ai-signin-modal.tsx b/packages/atlas-service/src/components/ai-signin-modal.tsx
@@ -62,8 +62,6 @@ const AISignInModal: React.FunctionComponent<SignInModalProps> = ({
     <MarketingModal
       darkMode={darkMode}
       graphic={<AISignInImageBanner></AISignInImageBanner>}
-      // @ts-expect-error leafygreen only allows strings, but we
-      // override styles.
       title={
         <div className={cx(titleStyles, darkMode && titleDarkModeStyles)}>
           Use natural language to generate queries and pipelines

diff --git a/.../components/aggregation-side-panel/stage-wizard-use-cases/group/group-with-statistics.tsx b/.../components/aggregation-side-panel/stage-wizard-use-cases/group/group-with-statistics.tsx
@@ -194,7 +194,6 @@ const GroupAccumulatorForm = ({
               <Body className={groupLabelStyles}>
                 {index === 0 ? 'Calculate' : 'and'}
               </Body>
-              {/* @ts-expect-error leafygreen unresonably expects a labelledby here */}
               <Select
                 className={selectStyles}
                 allowDeselect={false}

diff --git a/...components/aggregation-side-panel/stage-wizard-use-cases/group/group-with-subset.spec.tsx b/...components/aggregation-side-panel/stage-wizard-use-cases/group/group-with-subset.spec.tsx
@@ -10,7 +10,7 @@ import sinon from 'sinon';
 import {
   setMultiSelectComboboxValues,
   setSelectValue,
-  setInputElementValue,
+  setInputElementValueByTestId,
 } from '../../../../../test/form-helper';
 import type { GroupWithSubsetFormData } from './group-with-subset';
 import type { StageWizardFields } from '..';
@@ -73,7 +73,7 @@ describe('group with subset', function () {
     });
 
     it('renders number of records input', function () {
-      expect(screen.getByLabelText(/number of records/i)).to.exist;
+      expect(screen.getByTestId('number-of-records-input')).to.exist;
     });
 
     it('renders accumulator project fields combobox', function () {
@@ -103,7 +103,7 @@ describe('group with subset', function () {
         );
       });
       it('renders number of records input', function () {
-        expect(screen.getByLabelText(/number of records/i)).to.throw;
+        expect(screen.getByTestId('number-of-records-input')).to.throw;
       });
     });
 
@@ -165,7 +165,7 @@ describe('group with subset', function () {
             setMultiSelectComboboxValues(/select group field names/i, [
               'street',
             ]);
-            setInputElementValue(/number of records/i, '1');
+            setInputElementValueByTestId('number-of-records-input', '1');
             expect(onChange.lastCall.args[0]).to.equal(
               JSON.stringify({
                 _id: '$street',
@@ -189,7 +189,7 @@ describe('group with subset', function () {
             setMultiSelectComboboxValues(/select group field names/i, [
               'street',
             ]);
-            setInputElementValue(/number of records/i, '2');
+            setInputElementValueByTestId('number-of-records-input', '2');
             expect(onChange.lastCall.args[0]).to.equal(
               JSON.stringify({
                 _id: '$street',
@@ -235,7 +235,7 @@ describe('group with subset', function () {
               'address',
             ]);
 
-            setInputElementValue(/number of records/i, '1');
+            setInputElementValueByTestId('number-of-records-input', '1');
             expect(onChange.lastCall.args[0]).to.equal(
               JSON.stringify({
                 _id: '$street',
@@ -268,7 +268,7 @@ describe('group with subset', function () {
               'address',
             ]);
 
-            setInputElementValue(/number of records/i, '2');
+            setInputElementValueByTestId('number-of-records-input', '2');
             expect(onChange.lastCall.args[0]).to.equal(
               JSON.stringify({
                 _id: '$street',

diff --git a/.../src/components/aggregation-side-panel/stage-wizard-use-cases/group/group-with-subset.tsx b/.../src/components/aggregation-side-panel/stage-wizard-use-cases/group/group-with-subset.tsx
@@ -259,7 +259,6 @@ export const GroupWithSubset = ({
     <div className={containerStyles}>
       <div className={formGroupStyles}>
         <Body className={groupLabelStyles}>Return the</Body>
-        {/* @ts-expect-error leafygreen unresonably expects a labelledby here */}
         <Select
           className={selectStyles}
           allowDeselect={false}
@@ -284,7 +283,10 @@ export const GroupWithSubset = ({
           <>
             <TextInput
               type="number"
-              aria-label="Number of records"
+              label="Number of records"
+              // NOTE: LeafyGreen doesn't support aria-label and only understands "aria-labelledby" and "label".
+              aria-labelledby=""
+              data-testid="number-of-records-input"
               placeholder="Number of records"
               className={recordInputStyles}
               value={formData.numberOfRecords.toString()}
@@ -333,7 +335,6 @@ export const GroupWithSubset = ({
             fields={fields}
           />
           <Body>in</Body>
-          {/* @ts-expect-error leafygreen unresonably expects a labelledby here */}
           <Select
             className={selectStyles}
             allowDeselect={false}

diff --git a/...tions/src/components/aggregation-side-panel/stage-wizard-use-cases/lookup/lookup.spec.tsx b/...tions/src/components/aggregation-side-panel/stage-wizard-use-cases/lookup/lookup.spec.tsx
@@ -7,7 +7,7 @@ import sinon from 'sinon';
 import {
   setComboboxValue,
   openComboBox,
-  setInputElementValue,
+  setInputElementValueByTestId,
 } from '../../../../../test/form-helper';
 import type { StageWizardFields } from '..';
 
@@ -130,7 +130,7 @@ describe('lookup', function () {
     renderLookupForm({
       onChange: onChange,
     });
-    setInputElementValue(/name of the array/i, 'data');
+    setInputElementValueByTestId('name-of-the-array-input', 'data');
     const [value, error] = onChange.lastCall.args;
     expect(JSON.parse(value)).to.deep.equal({
       from: '',
@@ -156,7 +156,7 @@ describe('lookup', function () {
     setComboboxValue(/select collection/i, 'test');
     setComboboxValue(/select foreign field/i, 'street');
     setComboboxValue(/select local field/i, 'address');
-    setInputElementValue(/name of the array/i, 'data');
+    setInputElementValueByTestId('name-of-the-array-input', 'data');
     const [value, error] = onChange.lastCall.args;
     expect(JSON.parse(value)).to.deep.equal({
       from: 'test',

diff --git a/...gregations/src/components/aggregation-side-panel/stage-wizard-use-cases/lookup/lookup.tsx b/...gregations/src/components/aggregation-side-panel/stage-wizard-use-cases/lookup/lookup.tsx
@@ -175,12 +175,15 @@ export const LookupForm = ({
         />
       </div>
       <div className={formGroup}>
-        <Body className={titleStyles}>as</Body>
+        <Body id="lookup-stage-as-input-label" className={titleStyles}>
+          as
+        </Body>
         <div className={inputFieldStyles}>
           <TextInput
             value={formData.as}
             title="Name of the array"
-            aria-label="Name of the array"
+            aria-labelledby="lookup-stage-as-input-label"
+            data-testid="name-of-the-array-input"
             placeholder="Name of the array"
             onChange={(e) => onSelectOption('as', e.target.value)}
           />

diff --git a/...ponents/aggregation-side-panel/stage-wizard-use-cases/match/match-condition-form.spec.tsx b/...ponents/aggregation-side-panel/stage-wizard-use-cases/match/match-condition-form.spec.tsx
@@ -10,7 +10,7 @@ import Condition, {
 } from './match-condition-form';
 import {
   setComboboxValue,
-  setInputElementValue,
+  setInputElementValueByTestId,
   setSelectValue,
 } from '../../../../../test/form-helper';
 import { SAMPLE_FIELDS } from '../../../../../test/sample-fields';
@@ -74,7 +74,7 @@ describe('condition', function () {
       expect(screen.getByLabelText(new RegExp(SINGLE_SELECT_LABEL, 'i'))).to
         .exist;
       expect(screen.getByLabelText(LABELS.operatorSelect)).to.exist;
-      expect(screen.getByLabelText(LABELS.valueInput)).to.exist;
+      expect(screen.getByTestId('match-stage-expected-value-input')).to.exist;
       expect(screen.getByLabelText(LABELS.typeSelect)).to.exist;
     });
 
@@ -149,8 +149,8 @@ describe('condition', function () {
         TEST_IDS.condition(condition.id)
       );
 
-      setInputElementValue(
-        new RegExp(LABELS.valueInput, 'i'),
+      setInputElementValueByTestId(
+        'match-stage-expected-value-input',
         'Compass',
         conditionContainer
       );

diff --git a/...c/components/aggregation-side-panel/stage-wizard-use-cases/match/match-condition-form.tsx b/...c/components/aggregation-side-panel/stage-wizard-use-cases/match/match-condition-form.tsx
@@ -163,7 +163,6 @@ const MatchConditionForm = ({
         />
       </div>
       <div className={operatorSelectStyles}>
-        {/* @ts-expect-error leafygreen unresonably expects a labelledby here */}
         <Select
           size="default"
           allowDeselect={false}
@@ -185,13 +184,15 @@ const MatchConditionForm = ({
       <div className={valueInputStyles}>
         <TextInput
           placeholder={LABELS.valueInput}
+          // NOTE: LeafyGreen doesn't support aria-label and only understands "aria-labelledby" and "label".
+          aria-labelledby=""
+          data-testid="match-stage-expected-value-input"
           aria-label={LABELS.valueInput}
           value={condition.value}
           onChange={handleValueChange}
         />
       </div>
       <div className={bsonTypeSelectStyles}>
-        {/* @ts-expect-error leafygreen unresonably expects a labelledby here */}
         <Select
           allowDeselect={false}
           placeholder={LABELS.typeSelect}

diff --git a/...egations/src/components/aggregation-side-panel/stage-wizard-use-cases/project/project.tsx b/...egations/src/components/aggregation-side-panel/stage-wizard-use-cases/project/project.tsx
@@ -85,7 +85,6 @@ const ProjectForm = ({ fields, onChange }: WizardComponentProps) => {
   return (
     <div className={containerStyles}>
       <div className={formGroupStyles} data-testid="project-form">
-        {/* @ts-expect-error leafygreen unresonably expects a labelledby here */}
         <Select
           data-testid="project-form-projection"
           className={selectStyles}

diff --git a/.../src/components/aggregation-side-panel/stage-wizard-use-cases/search/text-search.spec.tsx b/.../src/components/aggregation-side-panel/stage-wizard-use-cases/search/text-search.spec.tsx
@@ -5,7 +5,7 @@ import { expect } from 'chai';
 import sinon from 'sinon';
 import {
   setComboboxValue,
-  setInputElementValue,
+  setInputElementValueByTestId,
   setMultiSelectComboboxValues,
   setSelectValue,
 } from '../../../../../test/form-helper';
@@ -52,7 +52,7 @@ describe('TextSearch', function () {
 
   it('should render the component', () => {
     expect(screen.getByText('Perform a')).to.exist;
-    expect(screen.getByText('with maxEdits')).to.exist;
+    expect(screen.getByText('maxEdits')).to.exist;
     expect(screen.getByText('for all documents where')).to.exist;
     expect(screen.getByText('contains')).to.exist;
     expect(screen.getByText('using')).to.exist;
@@ -66,7 +66,7 @@ describe('TextSearch', function () {
         'a',
         'c',
       ]);
-      setInputElementValue(/text/i, 'abc');
+      setInputElementValueByTestId('text-search-contains-input', 'abc');
       setComboboxValue(/select or type a search index/i, 'index1');
 
       expect(onChangeSpy.lastCall.firstArg).to.equal(
@@ -85,7 +85,7 @@ describe('TextSearch', function () {
       setSelectValue(/select search type/i, 'text search');
       setSelectValue(/select search path/i, 'any fields');
 
-      setInputElementValue(/text/i, 'abc');
+      setInputElementValueByTestId('text-search-contains-input', 'abc');
       setComboboxValue(/select or type a search index/i, 'index1');
 
       expect(onChangeSpy.lastCall.firstArg).to.equal(
@@ -104,15 +104,15 @@ describe('TextSearch', function () {
 
     it('for fuzzy search with fields', () => {
       setSelectValue(/select search type/i, 'fuzzy search');
-      setInputElementValue(/maxEdits/i, '1');
+      setInputElementValueByTestId('maxEdits-input', '1');
 
       setSelectValue(/select search path/i, 'field names');
       setMultiSelectComboboxValues(new RegExp(MULTI_SELECT_LABEL, 'i'), [
         'a',
         'b',
       ]);
 
-      setInputElementValue(/text/i, 'def');
+      setInputElementValueByTestId('text-search-contains-input', 'def');
       setComboboxValue(/select or type a search index/i, 'index2');
 
       expect(onChangeSpy.lastCall.firstArg).to.equal(
@@ -132,11 +132,11 @@ describe('TextSearch', function () {
 
     it('for fuzzy search with any fields', () => {
       setSelectValue(/select search type/i, 'fuzzy search');
-      setInputElementValue(/maxEdits/i, '2');
+      setInputElementValueByTestId('maxEdits-input', '2');
 
       setSelectValue(/select search path/i, 'any fields');
 
-      setInputElementValue(/text/i, 'xyz');
+      setInputElementValueByTestId('text-search-contains-input', 'xyz');
       setComboboxValue(/select or type a search index/i, 'index2');
 
       expect(onChangeSpy.lastCall.firstArg).to.equal(
@@ -161,11 +161,11 @@ describe('TextSearch', function () {
     it('should validate maxEdits', function () {
       setSelectValue(/select search type/i, 'fuzzy search');
       {
-        setInputElementValue(/maxEdits/i, '0');
+        setInputElementValueByTestId('maxEdits-input', '0');
         expect(onChangeSpy.lastCall.lastArg).to.be.an.instanceOf(Error);
       }
       {
-        setInputElementValue(/maxEdits/i, '3');
+        setInputElementValueByTestId('maxEdits-input', '3');
         expect(onChangeSpy.lastCall.lastArg).to.be.an.instanceOf(Error);
       }
     });
@@ -176,8 +176,8 @@ describe('TextSearch', function () {
     });
 
     it('should validate search term', function () {
-      setInputElementValue(/text/i, 'xyz');
-      setInputElementValue(/text/i, '');
+      setInputElementValueByTestId('text-search-contains-input', 'xyz');
+      setInputElementValueByTestId('text-search-contains-input', '');
       expect(onChangeSpy.lastCall.lastArg).to.be.an.instanceOf(Error);
     });
   });

diff --git a/...tions/src/components/aggregation-side-panel/stage-wizard-use-cases/search/text-search.tsx b/...tions/src/components/aggregation-side-panel/stage-wizard-use-cases/search/text-search.tsx
@@ -136,7 +136,6 @@ export const TextSearch = ({
     <div className={containerStyles}>
       <div className={rowStyles}>
         <Body className={labelStyles}>Perform a</Body>
-        {/* @ts-expect-error leafygreen unresonably expects a labelledby here */}
         <Select
           className={inputStyles}
           allowDeselect={false}
@@ -148,10 +147,13 @@ export const TextSearch = ({
           <Option value="fuzzy">fuzzy search</Option>
         </Select>
         <div className={inputWithLabelStyles}>
-          <Body>with maxEdits</Body>
+          <Body>
+            with <span id="maxEdits-input-label">maxEdits</span>
+          </Body>
           <TextInput
             type="number"
-            aria-label="maxEdits"
+            aria-labelledby="maxEdits-input-label"
+            data-testid="maxEdits-input"
             placeholder="e.g 2"
             className={inputStyles}
             value={formData.maxEdits?.toString()}
@@ -166,7 +168,6 @@ export const TextSearch = ({
       </div>
       <div className={rowStyles}>
         <Body className={labelStyles}>for all documents where</Body>
-        {/* @ts-expect-error leafygreen unresonably expects a labelledby here */}
         <Select
           className={inputStyles}
           allowDeselect={false}
@@ -190,6 +191,9 @@ export const TextSearch = ({
         <Body className={labelStyles}>contains</Body>
         <TextInput
           placeholder={'text'}
+          // NOTE: LeafyGreen doesn't support aria-label and only understands "aria-labelledby" and "label".
+          aria-labelledby=""
+          data-testid="text-search-contains-input"
           aria-label={'text'}
           value={formData.text}
           className={inputStyles}

diff --git a/...s-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/sort/sort.tsx b/...s-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/sort/sort.tsx
@@ -90,7 +90,6 @@ const SortFormGroup = ({
       </div>
       <Body>in</Body>
       <div data-testid={`sort-form-${index}-direction`}>
-        {/* @ts-expect-error leafygreen unresonably expects a labelledby here */}
         <Select
           className={sortDirectionStyles}
           allowDeselect={false}