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} - + ); };