From 77b98e4cc27fe0b327f6b43403ccfb7064b44f9c Mon Sep 17 00:00:00 2001
From: Jack <wang.zizhou@outlook.com>
Date: Wed, 23 Feb 2022 17:22:31 -0500
Subject: [PATCH] Add more interactive tests to detail_panel_list_item (#69)

---
 .../detail_panel_list_item/index.test.tsx     | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/session_view/public/components/detail_panel_list_item/index.test.tsx b/x-pack/plugins/session_view/public/components/detail_panel_list_item/index.test.tsx
index afa7793d38a127..7b0a9d0aac104b 100644
--- a/x-pack/plugins/session_view/public/components/detail_panel_list_item/index.test.tsx
+++ b/x-pack/plugins/session_view/public/components/detail_panel_list_item/index.test.tsx
@@ -13,7 +13,10 @@ import { DetailPanelListItem } from './index';
 const TEST_STRING = 'item title';
 const TEST_CHILD = <span>{TEST_STRING}</span>;
 const TEST_COPY_STRING = 'test copy button';
-const TEST_COPY = <button data-test-subj="test-copy-button">{TEST_COPY_STRING}</button>;
+const BUTTON_TEST_ID = 'test-copy-button';
+const TEST_COPY = <button data-test-subj={BUTTON_TEST_ID}>{TEST_COPY_STRING}</button>;
+const LIST_ITEM_TEST_ID = 'sessionViewer:detail-panel-list-item';
+const WAIT_TIMEOUT = 500;
 
 describe('DetailPanelListItem component', () => {
   let render: () => ReturnType<AppContextTestRender['render']>;
@@ -28,7 +31,7 @@ describe('DetailPanelListItem component', () => {
     it('renders DetailPanelListItem correctly', async () => {
       renderResult = mockedContext.render(<DetailPanelListItem>{TEST_CHILD}</DetailPanelListItem>);
 
-      expect(renderResult.queryByTestId('sessionViewer:detail-panel-list-item')).toBeVisible();
+      expect(renderResult.queryByTestId(LIST_ITEM_TEST_ID)).toBeVisible();
       expect(renderResult.queryByText(TEST_STRING)).toBeVisible();
     });
 
@@ -37,10 +40,22 @@ describe('DetailPanelListItem component', () => {
         <DetailPanelListItem copy={TEST_COPY}>{TEST_CHILD}</DetailPanelListItem>
       );
 
-      expect(renderResult.queryByTestId('test-copy-button')).toBeNull();
-      fireEvent.mouseEnter(renderResult.getByTestId('sessionViewer:detail-panel-list-item'));
-      await waitFor(() => screen.queryByTestId('test-copy-button'));
-      expect(renderResult.queryByTestId('test-copy-button')).toBeVisible();
+      expect(renderResult.queryByTestId(BUTTON_TEST_ID)).toBeNull();
+      fireEvent.mouseEnter(renderResult.getByTestId(LIST_ITEM_TEST_ID));
+      await waitFor(() => screen.queryByTestId(BUTTON_TEST_ID));
+      expect(renderResult.queryByTestId(BUTTON_TEST_ID)).toBeVisible();
+
+      fireEvent.mouseLeave(renderResult.getByTestId(LIST_ITEM_TEST_ID));
+      expect(renderResult.queryByTestId(BUTTON_TEST_ID)).toBeNull();
+    });
+
+    it('does not have mouse events when copy prop is not present', async () => {
+      renderResult = mockedContext.render(<DetailPanelListItem>{TEST_CHILD}</DetailPanelListItem>);
+
+      expect(renderResult.queryByTestId(BUTTON_TEST_ID)).toBeNull();
+      fireEvent.mouseEnter(renderResult.getByTestId(LIST_ITEM_TEST_ID));
+      await waitFor(() => screen.queryByTestId(BUTTON_TEST_ID), { timeout: WAIT_TIMEOUT });
+      expect(renderResult.queryByTestId(BUTTON_TEST_ID)).toBeNull();
     });
   });
 });