Add unit tests

elastic · Nov 8, 2023 · 3fd6bd2 · 3fd6bd2
1 parent d2d7f8e
commit 3fd6bd2
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 1 deletion.
diff --git a/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap b/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
@@ -70,6 +70,32 @@ exports[`EuiListGroupItem props color text is rendered 1`] = `
 </li>
 `;
 
+exports[`EuiListGroupItem props external is rendered 1`] = `
+<li
+  class="euiListGroupItem emotion-euiListGroupItem-text-m"
+>
+  <a
+    class="euiListGroupItem__button emotion-euiListGroupItem__inner-m-text-isClickable"
+    href="#"
+    rel="noreferrer"
+  >
+    <span
+      class="euiListGroupItem__label emotion-euiListGroupItem__label-truncate"
+      title="Label"
+    >
+      Label
+    </span>
+    <span
+      class="css-1b8dhvx-externalIcon"
+      data-euiicon-type="popout"
+      data-test-subj="externalLinkIcon"
+    >
+      External link
+    </span>
+  </a>
+</li>
+`;
+
 exports[`EuiListGroupItem props extraAction is rendered 1`] = `
 <li
   class="euiListGroupItem emotion-euiListGroupItem-m"

diff --git a/src/components/list_group/list_group_item.test.tsx b/src/components/list_group/list_group_item.test.tsx
@@ -7,12 +7,16 @@
  */
 
 import React from 'react';
+import { mount } from 'enzyme';
+
 import { fireEvent } from '@testing-library/react';
+import { findTestSubject } from '../../test';
 import { shouldRenderCustomStyles } from '../../test/internal';
 import { requiredProps } from '../../test/required_props';
-import { render, waitForEuiToolTipVisible } from '../../test/rtl';
+import { findByTestSubject, queryByTestSubject, render, waitForEuiToolTipVisible } from '../../test/rtl';
 
 import { EuiListGroupItem, SIZES, COLORS } from './list_group_item';
+import { fa } from '@faker-js/faker';
 
 describe('EuiListGroupItem', () => {
   shouldRenderCustomStyles(<EuiListGroupItem label="Label" />);
@@ -205,6 +209,34 @@ describe('EuiListGroupItem', () => {
       });
     });
 
+    describe('external', () => {
+      test('is rendered', () => {
+        const { container } = render(
+          <EuiListGroupItem label="Label" href="#" external />
+        );
+        expect(container.firstChild).toMatchSnapshot();
+      });
+
+      test('target `_blank` renders external icon', () => {
+        const { getByTestSubject } = render(
+          <EuiListGroupItem label="Label" href="#" target="_blank" />
+        );
+        expect(getByTestSubject('externalLinkIcon')).toBeInTheDocument();
+      });
+
+      test('external prop can overwrite default target `_blank` behavior', async () => {
+        const { queryByTestSubject } = render(
+          <EuiListGroupItem
+            label="Label"
+            href="#"
+            target="_blank"
+            external={false}
+          />
+        );
+        expect(queryByTestSubject('externalLinkIcon')).toBeFalsy();
+      });
+    });
+
     describe('onClick', () => {
       test('is rendered', () => {
         const { container } = render(

diff --git a/src/components/list_group/list_group_item.tsx b/src/components/list_group/list_group_item.tsx
@@ -296,6 +296,7 @@ export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
       size="s"
       css={innerStyles.externalIcon}
       type="popout"
+      data-test-subj='externalLinkIcon'
     />
   );