diff --git a/src/components/selectable/selectable.spec.tsx b/src/components/selectable/selectable.spec.tsx
index dbf10288af3a..30cb60cb987c 100644
--- a/src/components/selectable/selectable.spec.tsx
+++ b/src/components/selectable/selectable.spec.tsx
@@ -253,6 +253,137 @@ describe('EuiSelectable', () => {
});
});
+ describe('truncation', () => {
+ const sharedProps = {
+ style: { width: 240 },
+ options: [
+ {
+ label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ checked: 'on' as const,
+ },
+ ],
+ };
+
+ it('defaults to CSS truncation', () => {
+ cy.realMount();
+ cy.get('.euiTextTruncate').should('not.exist');
+ });
+
+ describe('when truncationProps are passed', () => {
+ const truncationProps = {
+ ...sharedProps,
+ listProps: { truncationProps: { truncation: 'middle' as const } },
+ };
+
+ it('renders EuiTextTruncate when truncationProps are passed', () => {
+ cy.realMount();
+ cy.get('.euiTextTruncate').should('exist');
+ cy.get('[data-test-subj="truncatedText"]').should(
+ 'have.text',
+ 'Lorem ipsum d…ipiscing elit.'
+ );
+ });
+
+ it('correctly accounts for the keyboard focus badge', () => {
+ cy.realMount();
+
+ cy.realPress('Tab');
+ cy.get('.euiSelectableListItem__onFocusBadge').should('exist');
+
+ cy.get('[data-test-subj="truncatedText"]').should(
+ 'have.text',
+ 'Lorem ipsu…cing elit.'
+ );
+ });
+
+ it('handles custom append/prepend nodes', () => {
+ cy.realMount(
+
+ );
+ cy.get('[data-test-subj="truncatedText"]').should(
+ 'have.text',
+ 'Lorem i…ng elit.'
+ );
+ });
+
+ it('updates on container resize', () => {
+ cy.realMount(
+
+ );
+ cy.viewport(100, 100);
+ cy.get('[data-test-subj="truncatedText"]').should(
+ 'have.text',
+ 'Lor…lit.'
+ );
+ });
+
+ it('allows individual option truncationProps to override parent truncationProps', () => {
+ cy.realMount(
+
+ );
+ cy.get('[data-test-subj="truncatedText"]').should(
+ 'have.text',
+ 'Lor…sectetur adipiscing elit.'
+ );
+ });
+ });
+
+ describe('when searching', () => {
+ it('uses start & end truncation position', () => {
+ cy.realMount();
+ cy.get('input[type="search"]').realClick();
+ cy.realType('sit');
+ cy.get('[data-test-subj="truncatedText"]').should(
+ 'have.text',
+ '…m dolor sit amet, …'
+ );
+ });
+
+ it('does not truncate the start when the found search is near the start', () => {
+ cy.realMount();
+ cy.get('input[type="search"]').realClick();
+ cy.realType('ipsum');
+ cy.get('[data-test-subj="truncatedText"]').should(
+ 'have.text',
+ 'Lorem ipsum dolor …'
+ );
+ });
+
+ it('does not truncate the end when the found search is near the end', () => {
+ cy.realMount();
+ cy.get('input[type="search"]').realClick();
+ cy.realType('eli');
+ cy.get('[data-test-subj="truncatedText"]').should(
+ 'have.text',
+ '…tetur adipiscing elit.'
+ );
+ });
+
+ it('marks the full available text if the search input is longer than the truncated text', () => {
+ cy.realMount();
+ cy.get('input[type="search"]').realClick();
+ cy.realType('Lorem ipsum dolor sit amet');
+ cy.get('.euiMark').should('have.text', '…m ipsum dolor sit …');
+ });
+ });
+ });
+
describe('nested in `EuiPopover` component', () => {
const EuiSelectableNested = () => {
const [isPopoverOpen, setIsPopoverOpen] = useState(false);