Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiComboBox] Replace autosizing input dependency with more performant utility #7215

Merged
merged 6 commits into from
Sep 26, 2023
Merged

[EuiComboBox] Replace autosizing input dependency with more performant utility #7215

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
78b03ff
[setup] Mock canvas & truncation Jest logic
cee-chen Sep 25, 2023
d7f30ee
[EuiComboBoxInput] Replace `AutosizeInput` with more performant canva…
cee-chen Sep 21, 2023
a9930da
[EuiComboBox] Remove `AutosizeInput` references + update snapshots
cee-chen Sep 21, 2023
7baae00
Remove `react-autosize-input` dependency
cee-chen Sep 21, 2023
0c4e758
changelog
cee-chen Sep 21, 2023
adcc501
Write E2E Cypress tests
cee-chen Sep 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions scripts/jest/setup/mocks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@ jest.mock('./../../../src/components/icon', () => {
return { EuiIcon };
});

jest.mock('./../../../src/components/text_truncate', () => {
const rest = jest.requireActual('./../../../src/components/text_truncate');
const utils = require('./../../../src/components/text_truncate/utils.testenv');
return { ...rest, ...utils };
});

jest.mock('./../../../src/services/accessibility', () => {
const a11y = jest.requireActual('./../../../src/services/accessibility');
const {
Expand Down
36 changes: 36 additions & 0 deletions src/components/text_truncate/utils.testenv.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/

import { TruncationUtils as _TruncationUtils } from './utils';

export class CanvasTextUtils {
constructor(_: any) {}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think it would be helpful to provide an name for this parameter, rather than _? Or are we using this as a standard?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

_ is generally the standard to indicate that a variable is unused but is present for some reason (e.g., in this case I'm adding it so that any test mock usages of it don't throw annoying type errors that are dissimilar to non-mocked class).

You'll notice in VSCode that when a named param is unused, vscode will fade it out and eslint may complain that it's unused, whereas when you rename it to _ it becomes unfaded and typically eslint will stop complaining.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah ok! Thank you for the explanation!


computeFontFromElement = (_: HTMLElement) => '';

textWidth = 0;

currentText = '';
setTextToCheck = (text: string) => {
this.currentText = text;
};
}

export class TruncationUtils extends _TruncationUtils {
constructor(props: ConstructorParameters<typeof _TruncationUtils>[0]) {
super(props);
}

// Jest perf optimization - since there's no meaningful truncation we can make
// without meaningful width calculations, just return the full untruncated text
truncateStart = (_?: number) => this.fullText;
truncateEnd = (_?: number) => this.fullText;
truncateStartEndAtPosition = (_?: number) => this.fullText;
truncateStartEndAtMiddle = () => this.fullText;
truncateMiddle = () => this.fullText;
}