Add E2E Cypress specs

- some tests copied from EuiComboBox, but EuiSelectable also has extra affordances that need to be tested for (resizing etc)
elastic · Nov 25, 2023 · 1c73463 · 1c73463
1 parent 7f16352
commit 1c73463
Showing 1 changed file with 131 additions and 0 deletions.
diff --git 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(<EuiSelectableListboxOnly {...sharedProps} />);
+      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(<EuiSelectableListboxOnly {...truncationProps} />);
+        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(<EuiSelectableListboxOnly {...truncationProps} />);
+
+        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(
+          <EuiSelectableListboxOnly
+            {...truncationProps}
+            options={[
+              { ...sharedProps.options[0], append: 'Post', prepend: 'Pre' },
+            ]}
+          />
+        );
+        cy.get('[data-test-subj="truncatedText"]').should(
+          'have.text',
+          'Lorem i…ng elit.'
+        );
+      });
+
+      it('updates on container resize', () => {
+        cy.realMount(
+          <EuiSelectableListboxOnly
+            {...truncationProps}
+            style={{ width: '100%' }}
+          />
+        );
+        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(
+          <EuiSelectableListboxOnly
+            {...truncationProps}
+            options={[
+              {
+                ...sharedProps.options[0],
+                truncationProps: { truncation: 'start', truncationOffset: 3 },
+              },
+            ]}
+          />
+        );
+        cy.get('[data-test-subj="truncatedText"]').should(
+          'have.text',
+          'Lor…sectetur adipiscing elit.'
+        );
+      });
+    });
+
+    describe('when searching', () => {
+      it('uses start & end truncation position', () => {
+        cy.realMount(<EuiSelectableWithSearchInput {...sharedProps} />);
+        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(<EuiSelectableWithSearchInput {...sharedProps} />);
+        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(<EuiSelectableWithSearchInput {...sharedProps} />);
+        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(<EuiSelectableWithSearchInput {...sharedProps} />);
+        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);