[8.x] [ResponseOps][Cases] Remove appMockRender from flaky tests (#20…

…1406) (#201504)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ResponseOps][Cases] Remove appMockRender from flaky tests
(#201406)](#201406)

<!--- Backport version: 8.9.8 -->

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

<!--BACKPORT [{"author":{"name":"Christos
Nasikas","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-23T10:54:29Z","message":"[ResponseOps][Cases]
Remove appMockRender from flaky tests (#201406)\n\n##
Summary\r\n\r\nThis PR removes the usage of `appMockRender` from some
flaky tests in\r\nthe hope they will stop being flaky. We suspect that
the `appMockRender`\r\nis the source of flakiness and we would like to
verify our assumption.\r\n\r\nFixes:
https://github.com/elastic/kibana/issues/189105\r\nFixes:
https://github.com/elastic/kibana/issues/195698\r\nFixes:
https://github.com/elastic/kibana/issues/189014\r\nFixes:
https://github.com/elastic/kibana/issues/176679\r\nFixes:
https://github.com/elastic/kibana/issues/188951\r\nFixes:
https://github.com/elastic/kibana/issues/192672\r\n\r\n###
Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"3c2c891a14072e374bd562618358dc8c027aa1ea","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:ResponseOps","v9.0.0","Feature:Cases","backport:prev-minor","v8.18.0"],"number":201406,"url":"https://github.com/elastic/kibana/pull/201406","mergeCommit":{"message":"[ResponseOps][Cases]
Remove appMockRender from flaky tests (#201406)\n\n##
Summary\r\n\r\nThis PR removes the usage of `appMockRender` from some
flaky tests in\r\nthe hope they will stop being flaky. We suspect that
the `appMockRender`\r\nis the source of flakiness and we would like to
verify our assumption.\r\n\r\nFixes:
https://github.com/elastic/kibana/issues/189105\r\nFixes:
https://github.com/elastic/kibana/issues/195698\r\nFixes:
https://github.com/elastic/kibana/issues/189014\r\nFixes:
https://github.com/elastic/kibana/issues/176679\r\nFixes:
https://github.com/elastic/kibana/issues/188951\r\nFixes:
https://github.com/elastic/kibana/issues/192672\r\n\r\n###
Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"3c2c891a14072e374bd562618358dc8c027aa1ea"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","labelRegex":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/201406","number":201406,"mergeCommit":{"message":"[ResponseOps][Cases]
Remove appMockRender from flaky tests (#201406)\n\n##
Summary\r\n\r\nThis PR removes the usage of `appMockRender` from some
flaky tests in\r\nthe hope they will stop being flaky. We suspect that
the `appMockRender`\r\nis the source of flakiness and we would like to
verify our assumption.\r\n\r\nFixes:
https://github.com/elastic/kibana/issues/189105\r\nFixes:
https://github.com/elastic/kibana/issues/195698\r\nFixes:
https://github.com/elastic/kibana/issues/189014\r\nFixes:
https://github.com/elastic/kibana/issues/176679\r\nFixes:
https://github.com/elastic/kibana/issues/188951\r\nFixes:
https://github.com/elastic/kibana/issues/192672\r\n\r\n###
Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"3c2c891a14072e374bd562618358dc8c027aa1ea"}},{"branch":"8.x","label":"v8.18.0","labelRegex":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

x-pack/plugins/cases/public/components/case_form_fields/severity.test.tsx

@@ -6,9 +6,7 @@
  */
 
 import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
-import type { AppMockRenderer } from '../../common/mock';
-import { createAppMockRenderer } from '../../common/mock';
+import { render, screen, waitFor } from '@testing-library/react';
 import { Severity } from './severity';
 import userEvent from '@testing-library/user-event';
 import { waitForEuiPopoverOpen } from '@elastic/eui/lib/test/rtl';
@@ -17,18 +15,8 @@ import { FormTestComponent } from '../../common/test_utils';
 const onSubmit = jest.fn();
 
 describe('Severity form field', () => {
-  let appMockRender: AppMockRenderer;
-
-  beforeEach(() => {
-    appMockRender = createAppMockRenderer();
-  });
-
-  afterEach(async () => {
-    await appMockRender.clearQueryCache();
-  });
-
   it('renders', async () => {
-    appMockRender.render(
+    render(
       <FormTestComponent onSubmit={onSubmit}>
         <Severity isLoading={false} />
       </FormTestComponent>
@@ -40,7 +28,7 @@ describe('Severity form field', () => {
 
   // default to LOW in this test configuration
   it('defaults to the correct value', async () => {
-    appMockRender.render(
+    render(
       <FormTestComponent onSubmit={onSubmit}>
         <Severity isLoading={false} />
       </FormTestComponent>
@@ -51,7 +39,7 @@ describe('Severity form field', () => {
   });
 
   it('selects the correct value when changed', async () => {
-    appMockRender.render(
+    render(
       <FormTestComponent onSubmit={onSubmit}>
         <Severity isLoading={false} />
       </FormTestComponent>
@@ -73,7 +61,7 @@ describe('Severity form field', () => {
   });
 
   it('disables when loading data', async () => {
-    appMockRender.render(
+    render(
       <FormTestComponent onSubmit={onSubmit}>
         <Severity isLoading={true} />
       </FormTestComponent>

x-pack/plugins/cases/public/components/case_form_fields/title.test.tsx

@@ -7,7 +7,7 @@
 
 import type { FC, PropsWithChildren } from 'react';
 import React from 'react';
-import { screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import type { FormHook } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';
 import type { CaseFormFieldsSchemaProps } from './schema';
@@ -17,11 +17,9 @@ import userEvent from '@testing-library/user-event';
 
 import { Title } from './title';
 import { schema } from '../create/schema';
-import { createAppMockRenderer, type AppMockRenderer } from '../../common/mock';
 
 describe('Title', () => {
   let globalForm: FormHook;
-  let appMockRender: AppMockRenderer;
 
   const MockHookWrapperComponent: FC<PropsWithChildren<unknown>> = ({ children }) => {
     const { form } = useForm<CaseFormFieldsSchemaProps>({
@@ -38,11 +36,10 @@ describe('Title', () => {
 
   beforeEach(() => {
     jest.resetAllMocks();
-    appMockRender = createAppMockRenderer();
   });
 
   it('it renders', async () => {
-    appMockRender.render(
+    render(
       <MockHookWrapperComponent>
         <Title isLoading={false} />
       </MockHookWrapperComponent>
@@ -52,7 +49,7 @@ describe('Title', () => {
   });
 
   it('it disables the input when loading', async () => {
-    appMockRender.render(
+    render(
       <MockHookWrapperComponent>
         <Title isLoading={true} />
       </MockHookWrapperComponent>
@@ -61,7 +58,7 @@ describe('Title', () => {
   });
 
   it('it changes the title', async () => {
-    appMockRender.render(
+    render(
       <MockHookWrapperComponent>
         <Title isLoading={false} />
       </MockHookWrapperComponent>

x-pack/plugins/cases/public/components/filter_popover/index.test.tsx

@@ -6,31 +6,21 @@
  */
 
 import React from 'react';
-import { waitForEuiPopoverOpen, screen } from '@elastic/eui/lib/test/rtl';
-import { waitFor } from '@testing-library/react';
+import { waitForEuiPopoverOpen } from '@elastic/eui/lib/test/rtl';
+import { render, waitFor, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
-import type { AppMockRenderer } from '../../common/mock';
-import { createAppMockRenderer } from '../../common/mock';
-
 import { FilterPopover } from '.';
 
 describe('FilterPopover ', () => {
-  let appMockRender: AppMockRenderer;
   const onSelectedOptionsChanged = jest.fn();
   const tags: string[] = ['coke', 'pepsi'];
 
   beforeEach(() => {
-    appMockRender = createAppMockRenderer();
     jest.clearAllMocks();
   });
 
-  afterEach(async () => {
-    await appMockRender.clearQueryCache();
-  });
-
   it('renders button label correctly', async () => {
-    appMockRender.render(
+    render(
       <FilterPopover
         buttonLabel={'Tags'}
         onSelectedOptionsChanged={onSelectedOptionsChanged}
@@ -43,7 +33,7 @@ describe('FilterPopover ', () => {
   });
 
   it('renders empty label correctly', async () => {
-    appMockRender.render(
+    render(
       <FilterPopover
         buttonLabel={'Tags'}
         onSelectedOptionsChanged={onSelectedOptionsChanged}
@@ -61,7 +51,7 @@ describe('FilterPopover ', () => {
   });
 
   it('renders string type options correctly', async () => {
-    appMockRender.render(
+    render(
       <FilterPopover
         buttonLabel={'Tags'}
         onSelectedOptionsChanged={onSelectedOptionsChanged}
@@ -79,7 +69,7 @@ describe('FilterPopover ', () => {
   });
 
   it('should call onSelectionChange with selected option', async () => {
-    appMockRender.render(
+    render(
       <FilterPopover
         buttonLabel={'Tags'}
         onSelectedOptionsChanged={onSelectedOptionsChanged}
@@ -100,7 +90,7 @@ describe('FilterPopover ', () => {
   });
 
   it('should call onSelectionChange with empty array when option is deselected', async () => {
-    appMockRender.render(
+    render(
       <FilterPopover
         buttonLabel={'Tags'}
         onSelectedOptionsChanged={onSelectedOptionsChanged}
@@ -126,7 +116,7 @@ describe('FilterPopover ', () => {
     const maxLengthLabel = `You have selected maximum number of ${maxLength} tags to filter`;
 
     it('should show message when maximum options are selected', async () => {
-      appMockRender.render(
+      render(
         <FilterPopover
           buttonLabel={'Tags'}
           onSelectedOptionsChanged={onSelectedOptionsChanged}
@@ -152,7 +142,7 @@ describe('FilterPopover ', () => {
     });
 
     it('should not show message when maximum length label is missing', async () => {
-      appMockRender.render(
+      render(
         <FilterPopover
           buttonLabel={'Tags'}
           onSelectedOptionsChanged={onSelectedOptionsChanged}
@@ -176,7 +166,7 @@ describe('FilterPopover ', () => {
     });
 
     it('should not show message and disable options when maximum length property is missing', async () => {
-      appMockRender.render(
+      render(
         <FilterPopover
           buttonLabel={'Tags'}
           onSelectedOptionsChanged={onSelectedOptionsChanged}
@@ -198,7 +188,7 @@ describe('FilterPopover ', () => {
     });
 
     it('should allow to select more options when maximum length property is missing', async () => {
-      appMockRender.render(
+      render(
         <FilterPopover
           buttonLabel={'Tags'}
           onSelectedOptionsChanged={onSelectedOptionsChanged}

x-pack/plugins/cases/public/components/user_actions/comment/registered_attachments.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import type {
   AttachmentType,
@@ -16,8 +16,6 @@ import { AttachmentActionType } from '../../../client/attachment_framework/types
 import { AttachmentTypeRegistry } from '../../../../common/registry';
 import { getMockBuilderArgs } from '../mock';
 import { createRegisteredAttachmentUserActionBuilder } from './registered_attachments';
-import type { AppMockRenderer } from '../../../common/mock';
-import { createAppMockRenderer } from '../../../common/mock';
 
 const getLazyComponent = () =>
   React.lazy(() => {
@@ -32,8 +30,6 @@ const getLazyComponent = () =>
   });
 
 describe('createRegisteredAttachmentUserActionBuilder', () => {
-  let appMockRender: AppMockRenderer;
-
   const attachmentTypeId = 'test';
   const builderArgs = getMockBuilderArgs();
   const registry = new AttachmentTypeRegistry<AttachmentType<CommonAttachmentViewProps>>(
@@ -77,7 +73,6 @@ describe('createRegisteredAttachmentUserActionBuilder', () => {
   };
 
   beforeEach(() => {
-    appMockRender = createAppMockRenderer();
     jest.clearAllMocks();
   });
 
@@ -161,8 +156,7 @@ describe('createRegisteredAttachmentUserActionBuilder', () => {
     const userAction =
       createRegisteredAttachmentUserActionBuilder(userActionBuilderArgs).build()[0];
 
-    // @ts-expect-error: children is a proper React element
-    appMockRender.render(userAction.children);
+    render(userAction.children);
 
     expect(await screen.findByText('My component')).toBeInTheDocument();
   });

x-pack/plugins/cases/public/components/user_actions/show_more_button.test.tsx

@@ -6,31 +6,25 @@
  */
 
 import React from 'react';
-import { screen } from '@testing-library/react';
+import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ShowMoreButton } from './show_more_button';
-import type { AppMockRenderer } from '../../common/mock';
-import { createAppMockRenderer } from '../../common/mock';
 
 const showMoreClickMock = jest.fn();
 
-// FLAKY: https://github.com/elastic/kibana/issues/192672
-describe.skip('ShowMoreButton', () => {
-  let appMockRender: AppMockRenderer;
-
+describe('ShowMoreButton', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    appMockRender = createAppMockRenderer();
   });
 
   it('renders correctly', () => {
-    appMockRender.render(<ShowMoreButton onShowMoreClick={showMoreClickMock} />);
+    render(<ShowMoreButton onShowMoreClick={showMoreClickMock} />);
 
     expect(screen.getByTestId('cases-show-more-user-actions')).toBeInTheDocument();
   });
 
   it('shows loading state and is disabled when isLoading is true', () => {
-    appMockRender.render(<ShowMoreButton onShowMoreClick={showMoreClickMock} isLoading={true} />);
+    render(<ShowMoreButton onShowMoreClick={showMoreClickMock} isLoading={true} />);
 
     const btn = screen.getByTestId('cases-show-more-user-actions');
 
@@ -40,7 +34,7 @@ describe.skip('ShowMoreButton', () => {
   });
 
   it('calls onShowMoreClick on button click', async () => {
-    appMockRender.render(<ShowMoreButton onShowMoreClick={showMoreClickMock} />);
+    render(<ShowMoreButton onShowMoreClick={showMoreClickMock} />);
 
     await userEvent.click(screen.getByTestId('cases-show-more-user-actions'));
     expect(showMoreClickMock).toHaveBeenCalled();