[Cases] Improve functional tests (elastic#150117)

This PR tries to improve how often our functional tests succeeds. I also tried cleaning up a few things that seemed to be slowing the tests down and also causing errors when the tests were run individually. Fixes: elastic#145271 Notable changes: - I added a value to the `property-actions*` in most places so that the functional tests can distinguish between a description, comment, or the case ellipses this seems to work consistently where other methods have not Flaky test run: https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/1871 (cherry picked from commit c3ea5e5) # Conflicts: # x-pack/plugins/cases/public/components/case_action_bar/actions.test.tsx # x-pack/plugins/cases/public/components/case_action_bar/index.test.tsx # x-pack/plugins/cases/public/components/property_actions/index.tsx # x-pack/plugins/cases/public/components/user_actions/index.test.tsx # x-pack/test/functional_with_es_ssl/apps/cases/view_case.ts
jonathan-buttner · Feb 7, 2023 · 549428c · 549428c
1 parent 840143e
commit 549428c
Show file tree

Hide file tree

Showing 18 changed files with 199 additions and 167 deletions.
diff --git a/x-pack/plugins/cases/public/components/case_action_bar/actions.test.tsx b/x-pack/plugins/cases/public/components/case_action_bar/actions.test.tsx
@@ -50,8 +50,11 @@ describe('CaseView actions', () => {
     );
 
     expect(wrapper.find('[data-test-subj="confirm-delete-case-modal"]').exists()).toBeFalsy();
-    wrapper.find('button[data-test-subj="property-actions-ellipses"]').first().simulate('click');
-    wrapper.find('button[data-test-subj="property-actions-trash"]').simulate('click');
+    wrapper
+      .find('button[data-test-subj="property-actions-case-ellipses"]')
+      .first()
+      .simulate('click');
+    wrapper.find('button[data-test-subj="property-actions-case-trash"]').simulate('click');
     expect(wrapper.find('[data-test-subj="confirm-delete-case-modal"]').exists()).toBeTruthy();
   });
 
@@ -63,7 +66,7 @@ describe('CaseView actions', () => {
     );
 
     expect(wrapper.find('[data-test-subj="confirm-delete-case-modal"]').exists()).toBeFalsy();
-    expect(wrapper.find('button[data-test-subj="property-actions-ellipses"]').exists()).toBeFalsy();
+    expect(wrapper.find('button[data-test-subj="property-actions-case-ellipses"]').exists()).toBeFalsy();
   });
 
   it('toggle delete modal and confirm', async () => {
@@ -77,8 +80,11 @@ describe('CaseView actions', () => {
       </TestProviders>
     );
 
-    wrapper.find('button[data-test-subj="property-actions-ellipses"]').first().simulate('click');
-    wrapper.find('button[data-test-subj="property-actions-trash"]').simulate('click');
+    wrapper
+      .find('button[data-test-subj="property-actions-case-ellipses"]')
+      .first()
+      .simulate('click');
+    wrapper.find('button[data-test-subj="property-actions-case-trash"]').simulate('click');
 
     expect(wrapper.find('[data-test-subj="confirm-delete-case-modal"]').exists()).toBeTruthy();
     wrapper.find('button[data-test-subj="confirmModalConfirmButton"]').simulate('click');
@@ -106,9 +112,12 @@ describe('CaseView actions', () => {
 
     expect(wrapper.find('[data-test-subj="confirm-delete-case-modal"]').exists()).toBeFalsy();
 
-    wrapper.find('button[data-test-subj="property-actions-ellipses"]').first().simulate('click');
+    wrapper
+      .find('button[data-test-subj="property-actions-case-ellipses"]')
+      .first()
+      .simulate('click');
     expect(
-      wrapper.find('[data-test-subj="property-actions-popout"]').first().prop('aria-label')
+      wrapper.find('[data-test-subj="property-actions-case-popout"]').first().prop('aria-label')
     ).toEqual(i18n.VIEW_INCIDENT(basicPush.externalTitle));
   });
 });
diff --git a/x-pack/plugins/cases/public/components/case_action_bar/actions.tsx b/x-pack/plugins/cases/public/components/case_action_bar/actions.tsx
@@ -74,7 +74,7 @@ const ActionsComponent: React.FC<CaseViewActions> = ({ caseData, currentExternal
 
   return (
     <EuiFlexItem grow={false} data-test-subj="case-view-actions">
-      <PropertyActions propertyActions={propertyActions} />
+      <PropertyActions propertyActions={propertyActions} customDataTestSubj={'case'} />
       {isModalVisible ? (
         <ConfirmDeleteCaseModal
           totalCasesToBeDeleted={1}

diff --git a/x-pack/plugins/cases/public/components/case_action_bar/index.test.tsx b/x-pack/plugins/cases/public/components/case_action_bar/index.test.tsx
@@ -233,7 +233,7 @@ describe('CaseActionBar', () => {
       </TestProviders>
     );
 
-    expect(queryByTestId('property-actions-ellipses')).not.toBeInTheDocument();
+    expect(queryByTestId('property-actions-case-ellipses')).not.toBeInTheDocument();
     expect(queryByText('Delete case')).not.toBeInTheDocument();
   });
 
@@ -244,7 +244,7 @@ describe('CaseActionBar', () => {
       </TestProviders>
     );
 
-    userEvent.click(screen.getByTestId('property-actions-ellipses'));
+    userEvent.click(screen.getByTestId('property-actions-case-ellipses'));
     expect(queryByText('Delete case')).toBeInTheDocument();
   });
 });
diff --git a/x-pack/plugins/cases/public/components/property_actions/index.tsx b/x-pack/plugins/cases/public/components/property_actions/index.tsx
@@ -15,69 +15,70 @@ export interface PropertyActionButtonProps {
   onClick: () => void;
   iconType: string;
   label: string;
+  customDataTestSubj?: string;
 }
 
 const ComponentId = 'property-actions';
 
 const PropertyActionButton = React.memo<PropertyActionButtonProps>(
-  ({ disabled = false, onClick, iconType, label }) => (
-    <EuiButtonEmpty
+  ({ disabled = false, onClick, iconType, label, customDataTestSubj }) => {
+    const dataTestSubjPrepend = makeDataTestSubjPrepend(customDataTestSubj);
+
+    return (<EuiButtonEmpty
       aria-label={label}
       color="text"
-      data-test-subj={`${ComponentId}-${iconType}`}
+      data-test-subj={`${dataTestSubjPrepend}-${iconType}`}
       iconSide="left"
       iconType={iconType}
       isDisabled={disabled}
       onClick={onClick}
     >
       {label}
-    </EuiButtonEmpty>
-  )
+    </EuiButtonEmpty>)
+  }
 );
 
 PropertyActionButton.displayName = 'PropertyActionButton';
 
 export interface PropertyActionsProps {
   propertyActions: PropertyActionButtonProps[];
+  customDataTestSubj?: string;
 }
 
-export const PropertyActions = React.memo<PropertyActionsProps>(({ propertyActions }) => {
-  const [showActions, setShowActions] = useState(false);
-
-  const onButtonClick = useCallback(() => {
-    setShowActions((prevShowActions) => !prevShowActions);
-  }, []);
+export const PropertyActions = React.memo<PropertyActionsProps>(
+  ({ propertyActions, customDataTestSubj }) => {
+    const [showActions, setShowActions] = useState(false);
 
-  const onClosePopover = useCallback((cb?: () => void) => {
-    setShowActions(false);
-    if (cb != null) {
-      cb();
-    }
-  }, []);
+    const onButtonClick = useCallback(() => {
+      setShowActions((prevShowActions) => !prevShowActions);
+    }, []);
 
-  return (
-    <EuiPopover
-      anchorPosition="downRight"
-      data-test-subj={ComponentId}
-      ownFocus
-      button={
-        <EuiButtonIcon
-          data-test-subj={`${ComponentId}-ellipses`}
-          aria-label={i18n.ACTIONS_ARIA}
-          iconType="boxesHorizontal"
-          onClick={onButtonClick}
-        />
+    const onClosePopover = useCallback((cb?: () => void) => {
+      setShowActions(false);
+      if (cb != null) {
+        cb();
       }
-      id="settingsPopover"
-      isOpen={showActions}
-      closePopover={onClosePopover}
-      repositionOnScroll
-    >
-      <EuiFlexGroup
-        alignItems="flexStart"
-        data-test-subj={`${ComponentId}-group`}
-        direction="column"
-        gutterSize="none"
+    }, []);
+
+    const dataTestSubjPrepend = makeDataTestSubjPrepend(customDataTestSubj);
+
+    return (
+      <EuiPopover
+        anchorPosition="downRight"
+        data-test-subj={dataTestSubjPrepend}
+        ownFocus
+        button={
+          <EuiButtonIcon
+            data-test-subj={`${dataTestSubjPrepend}-ellipses`}
+            aria-label={i18n.ACTIONS_ARIA}
+            iconType="boxesHorizontal"
+            onClick={onButtonClick}
+          />
+        }
+        id="settingsPopover"
+        isOpen={showActions}
+        closePopover={onClosePopover}
+        repositionOnScroll
       >
         {propertyActions.map((action, key) => (
           <EuiFlexItem grow={false} key={`${action.label}${key}`}>
@@ -87,6 +88,7 @@ export const PropertyActions = React.memo<PropertyActionsProps>(({ propertyActio
                 iconType={action.iconType}
                 label={action.label}
                 onClick={() => onClosePopover(action.onClick)}
+                customDataTestSubj={customDataTestSubj}
               />
             </span>
           </EuiFlexItem>
@@ -97,3 +99,7 @@ export const PropertyActions = React.memo<PropertyActionsProps>(({ propertyActio
 });
 
 PropertyActions.displayName = 'PropertyActions';
+
+const makeDataTestSubjPrepend = (customDataTestSubj?: string) => {
+  return customDataTestSubj == null ? ComponentId : `${ComponentId}-${customDataTestSubj}`;
+};
diff --git a/x-pack/plugins/cases/public/components/user_actions/comment/comment.test.tsx b/x-pack/plugins/cases/public/components/user_actions/comment/comment.test.tsx
@@ -223,13 +223,13 @@ describe('createCommentUserActionBuilder', () => {
       );
 
       expect(result.getByText('Solve this fast!')).toBeInTheDocument();
-      expect(result.getByTestId('property-actions')).toBeInTheDocument();
+      expect(result.getByTestId('property-actions-user-action')).toBeInTheDocument();
 
-      userEvent.click(result.getByTestId('property-actions-ellipses'));
+      userEvent.click(result.getByTestId('property-actions-user-action-ellipses'));
       await waitForEuiPopoverOpen();
 
-      expect(result.queryByTestId('property-actions-pencil')).toBeInTheDocument();
-      userEvent.click(result.getByTestId('property-actions-pencil'));
+      expect(result.queryByTestId('property-actions-user-action-pencil')).toBeInTheDocument();
+      userEvent.click(result.getByTestId('property-actions-user-action-pencil'));
 
       await waitFor(() => {
         expect(builderArgs.handleManageMarkdownEditId).toHaveBeenCalledWith('basic-comment-id');
@@ -254,13 +254,13 @@ describe('createCommentUserActionBuilder', () => {
       );
 
       expect(result.getByText('Solve this fast!')).toBeInTheDocument();
-      expect(result.getByTestId('property-actions')).toBeInTheDocument();
+      expect(result.getByTestId('property-actions-user-action')).toBeInTheDocument();
 
-      userEvent.click(result.getByTestId('property-actions-ellipses'));
+      userEvent.click(result.getByTestId('property-actions-user-action-ellipses'));
       await waitForEuiPopoverOpen();
 
-      expect(result.queryByTestId('property-actions-quote')).toBeInTheDocument();
-      userEvent.click(result.getByTestId('property-actions-quote'));
+      expect(result.queryByTestId('property-actions-user-action-quote')).toBeInTheDocument();
+      userEvent.click(result.getByTestId('property-actions-user-action-quote'));
 
       await waitFor(() => {
         expect(builderArgs.handleManageQuote).toHaveBeenCalledWith('Solve this fast!');
@@ -769,14 +769,14 @@ describe('createCommentUserActionBuilder', () => {
 });
 
 const deleteAttachment = async (result: RenderResult, deleteIcon: string, buttonLabel: string) => {
-  expect(result.getByTestId('property-actions')).toBeInTheDocument();
+  expect(result.getByTestId('property-actions-user-action')).toBeInTheDocument();
 
-  userEvent.click(result.getByTestId('property-actions-ellipses'));
+  userEvent.click(result.getByTestId('property-actions-user-action-ellipses'));
   await waitForEuiPopoverOpen();
 
-  expect(result.queryByTestId(`property-actions-${deleteIcon}`)).toBeInTheDocument();
+  expect(result.queryByTestId(`property-actions-user-action-${deleteIcon}`)).toBeInTheDocument();
 
-  userEvent.click(result.getByTestId(`property-actions-${deleteIcon}`));
+  userEvent.click(result.getByTestId(`property-actions-user-action-${deleteIcon}`));
 
   await waitFor(() => {
     expect(result.queryByTestId('property-actions-confirm-modal')).toBeInTheDocument();

diff --git a/x-pack/plugins/cases/public/components/user_actions/description.test.tsx b/x-pack/plugins/cases/public/components/user_actions/description.test.tsx
@@ -58,13 +58,13 @@ describe('createDescriptionUserActionBuilder ', () => {
       </TestProviders>
     );
 
-    expect(res.getByTestId('property-actions')).toBeInTheDocument();
+    expect(res.getByTestId('property-actions-description')).toBeInTheDocument();
 
-    userEvent.click(res.getByTestId('property-actions-ellipses'));
+    userEvent.click(res.getByTestId('property-actions-description-ellipses'));
     await waitForEuiPopoverOpen();
 
-    expect(res.queryByTestId('property-actions-pencil')).toBeInTheDocument();
-    userEvent.click(res.getByTestId('property-actions-pencil'));
+    expect(res.queryByTestId('property-actions-description-pencil')).toBeInTheDocument();
+    userEvent.click(res.getByTestId('property-actions-description-pencil'));
 
     await waitFor(() => {
       expect(builderArgs.handleManageMarkdownEditId).toHaveBeenCalledWith('description');
@@ -84,13 +84,13 @@ describe('createDescriptionUserActionBuilder ', () => {
       </TestProviders>
     );
 
-    expect(res.getByTestId('property-actions')).toBeInTheDocument();
+    expect(res.getByTestId('property-actions-description')).toBeInTheDocument();
 
-    userEvent.click(res.getByTestId('property-actions-ellipses'));
+    userEvent.click(res.getByTestId('property-actions-description-ellipses'));
     await waitForEuiPopoverOpen();
 
-    expect(res.queryByTestId('property-actions-quote')).toBeInTheDocument();
-    userEvent.click(res.getByTestId('property-actions-quote'));
+    expect(res.queryByTestId('property-actions-description-quote')).toBeInTheDocument();
+    userEvent.click(res.getByTestId('property-actions-description-quote'));
 
     await waitFor(() => {
       expect(builderArgs.handleManageQuote).toHaveBeenCalledWith('Security banana Issue');

diff --git a/x-pack/plugins/cases/public/components/user_actions/index.test.tsx b/x-pack/plugins/cases/public/components/user_actions/index.test.tsx
@@ -203,13 +203,13 @@ describe(`UserActions`, () => {
 
     wrapper
       .find(
-        `[data-test-subj="comment-create-action-${props.data.comments[0].id}"] [data-test-subj="property-actions-ellipses"]`
+        `[data-test-subj="comment-create-action-${props.data.comments[0].id}"] [data-test-subj="property-actions-user-action-ellipses"]`
       )
       .first()
       .simulate('click');
     wrapper
       .find(
-        `[data-test-subj="comment-create-action-${props.data.comments[0].id}"] [data-test-subj="property-actions-pencil"]`
+        `[data-test-subj="comment-create-action-${props.data.comments[0].id}"] [data-test-subj="property-actions-user-action-pencil"]`
       )
       .first()
       .simulate('click');
@@ -247,14 +247,14 @@ describe(`UserActions`, () => {
 
     wrapper
       .find(
-        `[data-test-subj="comment-create-action-${props.data.comments[0].id}"] [data-test-subj="property-actions-ellipses"]`
+        `[data-test-subj="comment-create-action-${props.data.comments[0].id}"] [data-test-subj="property-actions-user-action-ellipses"]`
       )
       .first()
       .simulate('click');
 
     wrapper
       .find(
-        `[data-test-subj="comment-create-action-${props.data.comments[0].id}"] [data-test-subj="property-actions-pencil"]`
+        `[data-test-subj="comment-create-action-${props.data.comments[0].id}"] [data-test-subj="property-actions-user-action-pencil"]`
       )
       .first()
       .simulate('click');
@@ -299,12 +299,16 @@ describe(`UserActions`, () => {
     );
 
     wrapper
-      .find(`[data-test-subj="description-action"] [data-test-subj="property-actions-ellipses"]`)
+      .find(
+        `[data-test-subj="description-action"] [data-test-subj="property-actions-description-ellipses"]`
+      )
       .first()
       .simulate('click');
 
     wrapper
-      .find(`[data-test-subj="description-action"] [data-test-subj="property-actions-pencil"]`)
+      .find(
+        `[data-test-subj="description-action"] [data-test-subj="property-actions-description-pencil"]`
+      )
       .first()
       .simulate('click');
 
@@ -347,12 +351,16 @@ describe(`UserActions`, () => {
     expect(wrapper.find(`.euiMarkdownEditorTextArea`).text()).not.toContain(quoteableText);
 
     wrapper
-      .find(`[data-test-subj="description-action"] [data-test-subj="property-actions-ellipses"]`)
+      .find(
+        `[data-test-subj="description-action"] [data-test-subj="property-actions-description-ellipses"]`
+      )
       .first()
       .simulate('click');
 
     wrapper
-      .find(`[data-test-subj="description-action"] [data-test-subj="property-actions-quote"]`)
+      .find(
+        `[data-test-subj="description-action"] [data-test-subj="property-actions-description-quote"]`
+      )
       .first()
       .simulate('click');