diff --git a/packages/vkui/src/components/Typography/EllipsisText/EllipsisText.test.tsx b/packages/vkui/src/components/Typography/EllipsisText/EllipsisText.test.tsx
index dde4abe2d3..f386b6ac74 100644
--- a/packages/vkui/src/components/Typography/EllipsisText/EllipsisText.test.tsx
+++ b/packages/vkui/src/components/Typography/EllipsisText/EllipsisText.test.tsx
@@ -1,24 +1,40 @@
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
import { baselineComponent } from '../../../testing/utils';
import { EllipsisText } from './EllipsisText';
import styles from './EllipsisText.module.css';
-describe('EllipsisText', () => {
+const mockText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
+
+describe(EllipsisText, () => {
baselineComponent((props) => EllipsisText);
- it('should have specific className when maxLines > 1', async () => {
- render(
+ it('should have specific className when maxLines > 1', () => {
+ const result = render(
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
- labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
- laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
- voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
- cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ {mockText}
,
);
- const text = screen.getByTestId('text-wrapper').firstElementChild as HTMLElement;
+ const text = result.getByTestId('text-wrapper').firstElementChild as HTMLElement;
expect(text).not.toBeNull();
expect(text).toHaveClass(styles.contentMultiline);
});
+
+ it('should not apply title attribute', () => {
+ const result = render({mockText});
+ expect(result.getByTestId('host')).toHaveAttribute('title');
+ expect(result.getByTestId('host')).not.toHaveClass(styles.disableNativeTitle);
+
+ result.rerender(
+
+ {mockText}
+ ,
+ );
+ expect(result.getByTestId('host')).not.toHaveAttribute('title');
+ expect(result.getByTestId('host')).toHaveClass(styles.disableNativeTitle);
+ });
});
diff --git a/packages/vkui/src/components/Typography/EllipsisText/EllipsisText.tsx b/packages/vkui/src/components/Typography/EllipsisText/EllipsisText.tsx
index 61891ccb0b..266827723a 100644
--- a/packages/vkui/src/components/Typography/EllipsisText/EllipsisText.tsx
+++ b/packages/vkui/src/components/Typography/EllipsisText/EllipsisText.tsx
@@ -5,7 +5,7 @@ import { classNames } from '@vkontakte/vkjs';
import { getTextFromChildren } from '../../../lib/children';
import { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';
import type { HasRootRef } from '../../../types';
-import type { RootComponentProps } from '../../RootComponent/RootComponent';
+import { RootComponent, type RootComponentProps } from '../../RootComponent/RootComponent';
import styles from './EllipsisText.module.css';
export interface EllipsisTextProps
@@ -37,8 +37,8 @@ export interface EllipsisTextProps
* @see https://vkcom.github.io/VKUI/#/EllipsisText
*/
const EllipsisText = ({
+ Component = 'span',
className,
- getRootRef,
children,
maxWidth,
maxLines = 1,
@@ -54,8 +54,8 @@ const EllipsisText = ({
}, [contentRef, maxLines]);
return (
-
{children}
-
+
);
};