[8.6] [Cases] Improve functional tests (#150117) (#150454)

# Backport

This will backport the following commits from `main` to `8.6`:
- [[Cases] Improve functional tests
(#150117)](#150117)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Jonathan
Buttner","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-02-06T20:38:36Z","message":"[Cases]
Improve functional tests (#150117)\n\nThis PR tries to improve how often
our functional tests succeeds. I also\r\ntried cleaning up a few things
that seemed to be slowing the tests down\r\nand also causing errors when
the tests were run individually.\r\n\r\nFixes:
https://github.com/elastic/kibana/issues/145271\r\n\r\nNotable
changes:\r\n- I added a value to the `property-actions*` in most places
so that the\r\nfunctional tests can distinguish between a description,
comment, or the\r\ncase ellipses this seems to work consistently where
other methods have\r\nnot\r\n\r\nFlaky test
run:\r\nhttps://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/1871","sha":"c3ea5e5b3a2f0e13e743eea059404c81a07576c1","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","backport:skip","Team:ResponseOps","Feature:Cases","v8.7.0"],"number":150117,"url":"https://github.com/elastic/kibana/pull/150117","mergeCommit":{"message":"[Cases]
Improve functional tests (#150117)\n\nThis PR tries to improve how often
our functional tests succeeds. I also\r\ntried cleaning up a few things
that seemed to be slowing the tests down\r\nand also causing errors when
the tests were run individually.\r\n\r\nFixes:
https://github.com/elastic/kibana/issues/145271\r\n\r\nNotable
changes:\r\n- I added a value to the `property-actions*` in most places
so that the\r\nfunctional tests can distinguish between a description,
comment, or the\r\ncase ellipses this seems to work consistently where
other methods have\r\nnot\r\n\r\nFlaky test
run:\r\nhttps://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/1871","sha":"c3ea5e5b3a2f0e13e743eea059404c81a07576c1"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/150117","number":150117,"mergeCommit":{"message":"[Cases]
Improve functional tests (#150117)\n\nThis PR tries to improve how often
our functional tests succeeds. I also\r\ntried cleaning up a few things
that seemed to be slowing the tests down\r\nand also causing errors when
the tests were run individually.\r\n\r\nFixes:
https://github.com/elastic/kibana/issues/145271\r\n\r\nNotable
changes:\r\n- I added a value to the `property-actions*` in most places
so that the\r\nfunctional tests can distinguish between a description,
comment, or the\r\ncase ellipses this seems to work consistently where
other methods have\r\nnot\r\n\r\nFlaky test
run:\r\nhttps://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/1871","sha":"c3ea5e5b3a2f0e13e743eea059404c81a07576c1"}}]}]
BACKPORT-->

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,9 @@ 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 +82,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 +114,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));
   });
 });

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}

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();
   });
 });

x-pack/plugins/cases/public/components/property_actions/index.tsx

@@ -15,85 +15,100 @@ 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
-      aria-label={label}
-      color="text"
-      data-test-subj={`${ComponentId}-${iconType}`}
-      iconSide="left"
-      iconType={iconType}
-      isDisabled={disabled}
-      onClick={onClick}
-    >
-      {label}
-    </EuiButtonEmpty>
-  )
+  ({ disabled = false, onClick, iconType, label, customDataTestSubj }) => {
+    const dataTestSubjPrepend = makeDataTestSubjPrepend(customDataTestSubj);
+
+    return (
+      <EuiButtonEmpty
+        aria-label={label}
+        color="text"
+        data-test-subj={`${dataTestSubjPrepend}-${iconType}`}
+        iconSide="left"
+        iconType={iconType}
+        isDisabled={disabled}
+        onClick={onClick}
+      >
+        {label}
+      </EuiButtonEmpty>
+    );
+  }
 );
 
 PropertyActionButton.displayName = 'PropertyActionButton';
 
 export interface PropertyActionsProps {
   propertyActions: PropertyActionButtonProps[];
+  customDataTestSubj?: string;
 }
 
-export const PropertyActions = React.memo<PropertyActionsProps>(({ propertyActions }) => {
-  const [showActions, setShowActions] = useState(false);
+export const PropertyActions = React.memo<PropertyActionsProps>(
+  ({ propertyActions, customDataTestSubj }) => {
+    const [showActions, setShowActions] = useState(false);
 
-  const onButtonClick = useCallback(() => {
-    setShowActions((prevShowActions) => !prevShowActions);
-  }, []);
+    const onButtonClick = useCallback(() => {
+      setShowActions((prevShowActions) => !prevShowActions);
+    }, []);
 
-  const onClosePopover = useCallback((cb?: () => void) => {
-    setShowActions(false);
-    if (cb != null) {
-      cb();
-    }
-  }, []);
-
-  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}`}>
-            <span>
-              <PropertyActionButton
-                disabled={action.disabled}
-                iconType={action.iconType}
-                label={action.label}
-                onClick={() => onClosePopover(action.onClick)}
-              />
-            </span>
-          </EuiFlexItem>
-        ))}
-      </EuiFlexGroup>
-    </EuiPopover>
-  );
-});
+        <EuiFlexGroup
+          alignItems="flexStart"
+          data-test-subj={`${dataTestSubjPrepend}-group`}
+          direction="column"
+          gutterSize="none"
+        >
+          {propertyActions.map((action, key) => (
+            <EuiFlexItem grow={false} key={`${action.label}${key}`}>
+              <span>
+                <PropertyActionButton
+                  disabled={action.disabled}
+                  iconType={action.iconType}
+                  label={action.label}
+                  onClick={() => onClosePopover(action.onClick)}
+                  customDataTestSubj={customDataTestSubj}
+                />
+              </span>
+            </EuiFlexItem>
+          ))}
+        </EuiFlexGroup>
+      </EuiPopover>
+    );
+  }
+);
 
 PropertyActions.displayName = 'PropertyActions';
+
+const makeDataTestSubjPrepend = (customDataTestSubj?: string) => {
+  return customDataTestSubj == null ? ComponentId : `${ComponentId}-${customDataTestSubj}`;
+};

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();

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');