Skip to content

Commit 833f22d

Browse files
Anemygribnoysup
Anemy
and
gribnoysup
authored
chore(compass-components): update LeafyGreen packages, update table usage 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 <[email protected]>
1 parent 15265f8 commit 833f22d

File tree

79 files changed

+2462
-3239
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

79 files changed

+2462
-3239
lines changed

‎configs/mocha-config-compass/register/jsdom-extra-mocks-register.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,33 @@ if (!window.matchMedia) {
1212
};
1313
};
1414
}
15+
16+
/**
17+
* NB: tabbable requires special overrides to work in jsdom environments as per
18+
* documentation
19+
*
20+
* @see {@link https://github.com/focus-trap/tabbable?tab=readme-ov-file#testing-in-jsdom}
21+
*/
22+
const tabbable = require('tabbable');
23+
24+
const origTabbable = { ...tabbable };
25+
26+
Object.assign(tabbable, {
27+
tabbable: (node, options) =>
28+
origTabbable.tabbable(node, { ...options, displayCheck: 'none' }),
29+
focusable: (node, options) =>
30+
origTabbable.focusable(node, { ...options, displayCheck: 'none' }),
31+
isFocusable: (node, options) =>
32+
origTabbable.isFocusable(node, { ...options, displayCheck: 'none' }),
33+
isTabbable: (node, options) =>
34+
origTabbable.isTabbable(node, { ...options, displayCheck: 'none' }),
35+
});
36+
37+
// leafygreen (through `clipboard` library) uses deprecated API check that is
38+
// not working in jsdom if copy / paste APIs are supported
39+
if (!window.document.queryCommandSupported) {
40+
window.document.queryCommandSupported =
41+
globalThis.document.queryCommandSupported = function (command) {
42+
return ['copy', 'cut'].includes(command);
43+
};
44+
}

‎package-lock.json‎

Lines changed: 1056 additions & 1980 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/atlas-service/src/components/ai-signin-modal.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,6 @@ const AISignInModal: React.FunctionComponent<SignInModalProps> = ({
6262
<MarketingModal
6363
darkMode={darkMode}
6464
graphic={<AISignInImageBanner></AISignInImageBanner>}
65-
// @ts-expect-error leafygreen only allows strings, but we
66-
// override styles.
6765
title={
6866
<div className={cx(titleStyles, darkMode && titleDarkModeStyles)}>
6967
Use natural language to generate queries and pipelines

‎packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/group/group-with-statistics.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,6 @@ const GroupAccumulatorForm = ({
194194
<Body className={groupLabelStyles}>
195195
{index === 0 ? 'Calculate' : 'and'}
196196
</Body>
197-
{/* @ts-expect-error leafygreen unresonably expects a labelledby here */}
198197
<Select
199198
className={selectStyles}
200199
allowDeselect={false}

‎packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/group/group-with-subset.spec.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import sinon from 'sinon';
1010
import {
1111
setMultiSelectComboboxValues,
1212
setSelectValue,
13-
setInputElementValue,
13+
setInputElementValueByTestId,
1414
} from '../../../../../test/form-helper';
1515
import type { GroupWithSubsetFormData } from './group-with-subset';
1616
import type { StageWizardFields } from '..';
@@ -73,7 +73,7 @@ describe('group with subset', function () {
7373
});
7474

7575
it('renders number of records input', function () {
76-
expect(screen.getByLabelText(/number of records/i)).to.exist;
76+
expect(screen.getByTestId('number-of-records-input')).to.exist;
7777
});
7878

7979
it('renders accumulator project fields combobox', function () {
@@ -103,7 +103,7 @@ describe('group with subset', function () {
103103
);
104104
});
105105
it('renders number of records input', function () {
106-
expect(screen.getByLabelText(/number of records/i)).to.throw;
106+
expect(screen.getByTestId('number-of-records-input')).to.throw;
107107
});
108108
});
109109

@@ -165,7 +165,7 @@ describe('group with subset', function () {
165165
setMultiSelectComboboxValues(/select group field names/i, [
166166
'street',
167167
]);
168-
setInputElementValue(/number of records/i, '1');
168+
setInputElementValueByTestId('number-of-records-input', '1');
169169
expect(onChange.lastCall.args[0]).to.equal(
170170
JSON.stringify({
171171
_id: '$street',
@@ -189,7 +189,7 @@ describe('group with subset', function () {
189189
setMultiSelectComboboxValues(/select group field names/i, [
190190
'street',
191191
]);
192-
setInputElementValue(/number of records/i, '2');
192+
setInputElementValueByTestId('number-of-records-input', '2');
193193
expect(onChange.lastCall.args[0]).to.equal(
194194
JSON.stringify({
195195
_id: '$street',
@@ -235,7 +235,7 @@ describe('group with subset', function () {
235235
'address',
236236
]);
237237

238-
setInputElementValue(/number of records/i, '1');
238+
setInputElementValueByTestId('number-of-records-input', '1');
239239
expect(onChange.lastCall.args[0]).to.equal(
240240
JSON.stringify({
241241
_id: '$street',
@@ -268,7 +268,7 @@ describe('group with subset', function () {
268268
'address',
269269
]);
270270

271-
setInputElementValue(/number of records/i, '2');
271+
setInputElementValueByTestId('number-of-records-input', '2');
272272
expect(onChange.lastCall.args[0]).to.equal(
273273
JSON.stringify({
274274
_id: '$street',

‎packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/group/group-with-subset.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,6 @@ export const GroupWithSubset = ({
259259
<div className={containerStyles}>
260260
<div className={formGroupStyles}>
261261
<Body className={groupLabelStyles}>Return the</Body>
262-
{/* @ts-expect-error leafygreen unresonably expects a labelledby here */}
263262
<Select
264263
className={selectStyles}
265264
allowDeselect={false}
@@ -284,7 +283,10 @@ export const GroupWithSubset = ({
284283
<>
285284
<TextInput
286285
type="number"
287-
aria-label="Number of records"
286+
label="Number of records"
287+
// NOTE: LeafyGreen doesn't support aria-label and only understands "aria-labelledby" and "label".
288+
aria-labelledby=""
289+
data-testid="number-of-records-input"
288290
placeholder="Number of records"
289291
className={recordInputStyles}
290292
value={formData.numberOfRecords.toString()}
@@ -333,7 +335,6 @@ export const GroupWithSubset = ({
333335
fields={fields}
334336
/>
335337
<Body>in</Body>
336-
{/* @ts-expect-error leafygreen unresonably expects a labelledby here */}
337338
<Select
338339
className={selectStyles}
339340
allowDeselect={false}

‎packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/lookup/lookup.spec.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import sinon from 'sinon';
77
import {
88
setComboboxValue,
99
openComboBox,
10-
setInputElementValue,
10+
setInputElementValueByTestId,
1111
} from '../../../../../test/form-helper';
1212
import type { StageWizardFields } from '..';
1313

@@ -130,7 +130,7 @@ describe('lookup', function () {
130130
renderLookupForm({
131131
onChange: onChange,
132132
});
133-
setInputElementValue(/name of the array/i, 'data');
133+
setInputElementValueByTestId('name-of-the-array-input', 'data');
134134
const [value, error] = onChange.lastCall.args;
135135
expect(JSON.parse(value)).to.deep.equal({
136136
from: '',
@@ -156,7 +156,7 @@ describe('lookup', function () {
156156
setComboboxValue(/select collection/i, 'test');
157157
setComboboxValue(/select foreign field/i, 'street');
158158
setComboboxValue(/select local field/i, 'address');
159-
setInputElementValue(/name of the array/i, 'data');
159+
setInputElementValueByTestId('name-of-the-array-input', 'data');
160160
const [value, error] = onChange.lastCall.args;
161161
expect(JSON.parse(value)).to.deep.equal({
162162
from: 'test',

‎packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/lookup/lookup.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -175,12 +175,15 @@ export const LookupForm = ({
175175
/>
176176
</div>
177177
<div className={formGroup}>
178-
<Body className={titleStyles}>as</Body>
178+
<Body id="lookup-stage-as-input-label" className={titleStyles}>
179+
as
180+
</Body>
179181
<div className={inputFieldStyles}>
180182
<TextInput
181183
value={formData.as}
182184
title="Name of the array"
183-
aria-label="Name of the array"
185+
aria-labelledby="lookup-stage-as-input-label"
186+
data-testid="name-of-the-array-input"
184187
placeholder="Name of the array"
185188
onChange={(e) => onSelectOption('as', e.target.value)}
186189
/>

‎packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/match/match-condition-form.spec.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import Condition, {
1010
} from './match-condition-form';
1111
import {
1212
setComboboxValue,
13-
setInputElementValue,
13+
setInputElementValueByTestId,
1414
setSelectValue,
1515
} from '../../../../../test/form-helper';
1616
import { SAMPLE_FIELDS } from '../../../../../test/sample-fields';
@@ -74,7 +74,7 @@ describe('condition', function () {
7474
expect(screen.getByLabelText(new RegExp(SINGLE_SELECT_LABEL, 'i'))).to
7575
.exist;
7676
expect(screen.getByLabelText(LABELS.operatorSelect)).to.exist;
77-
expect(screen.getByLabelText(LABELS.valueInput)).to.exist;
77+
expect(screen.getByTestId('match-stage-expected-value-input')).to.exist;
7878
expect(screen.getByLabelText(LABELS.typeSelect)).to.exist;
7979
});
8080

@@ -149,8 +149,8 @@ describe('condition', function () {
149149
TEST_IDS.condition(condition.id)
150150
);
151151

152-
setInputElementValue(
153-
new RegExp(LABELS.valueInput, 'i'),
152+
setInputElementValueByTestId(
153+
'match-stage-expected-value-input',
154154
'Compass',
155155
conditionContainer
156156
);

‎packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/match/match-condition-form.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,6 @@ const MatchConditionForm = ({
163163
/>
164164
</div>
165165
<div className={operatorSelectStyles}>
166-
{/* @ts-expect-error leafygreen unresonably expects a labelledby here */}
167166
<Select
168167
size="default"
169168
allowDeselect={false}
@@ -185,13 +184,15 @@ const MatchConditionForm = ({
185184
<div className={valueInputStyles}>
186185
<TextInput
187186
placeholder={LABELS.valueInput}
187+
// NOTE: LeafyGreen doesn't support aria-label and only understands "aria-labelledby" and "label".
188+
aria-labelledby=""
189+
data-testid="match-stage-expected-value-input"
188190
aria-label={LABELS.valueInput}
189191
value={condition.value}
190192
onChange={handleValueChange}
191193
/>
192194
</div>
193195
<div className={bsonTypeSelectStyles}>
194-
{/* @ts-expect-error leafygreen unresonably expects a labelledby here */}
195196
<Select
196197
allowDeselect={false}
197198
placeholder={LABELS.typeSelect}

0 commit comments

Comments
 (0)