[ResponseOps][Cases] Removed custom render from flaky tests (elastic#…

…200887) Closes elastic#189739 Closes elastic#188488 Closes elastic#193482 Closes elastic#192944 Closes elastic#195672 ## Summary Same solution for all of them, I removed `createAppMockRenderer`. In some cases, I also added missing occurrences of `screen` and updated `getBy`s to `await screen.findBy*`s.
viduni94 · Nov 21, 2024 · d3b9a9a · d3b9a9a
1 parent b9439e6
commit d3b9a9a
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 96 deletions.
diff --git a/x-pack/plugins/cases/public/components/category/category_form_field.test.tsx b/x-pack/plugins/cases/public/components/category/category_form_field.test.tsx
@@ -6,28 +6,19 @@
  */
 
 import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import type { AppMockRenderer } from '../../common/mock';
-import { createAppMockRenderer } from '../../common/mock';
 import { CategoryFormField } from './category_form_field';
 import { categories } from '../../containers/mock';
 import { MAX_CATEGORY_LENGTH } from '../../../common/constants';
 import { FormTestComponent } from '../../common/test_utils';
 
-// FLAKY: https://github.com/elastic/kibana/issues/189739
-describe.skip('Category', () => {
-  let appMockRender: AppMockRenderer;
+describe('Category', () => {
   const onSubmit = jest.fn();
 
-  beforeEach(() => {
-    jest.clearAllMocks();
-    appMockRender = createAppMockRenderer();
-  });
-
   it('renders the category field correctly', async () => {
-    appMockRender.render(
+    render(
       <FormTestComponent onSubmit={onSubmit}>
         <CategoryFormField isLoading={false} availableCategories={categories} />
       </FormTestComponent>
@@ -37,7 +28,7 @@ describe.skip('Category', () => {
   });
 
   it('can submit without setting a category', async () => {
-    appMockRender.render(
+    render(
       <FormTestComponent onSubmit={onSubmit}>
         <CategoryFormField isLoading={false} availableCategories={categories} />
       </FormTestComponent>
@@ -53,7 +44,7 @@ describe.skip('Category', () => {
   });
 
   it('can submit with category a string as default value', async () => {
-    appMockRender.render(
+    render(
       <FormTestComponent formDefaultValue={{ category: categories[0] }} onSubmit={onSubmit}>
         <CategoryFormField isLoading={false} availableCategories={categories} />
       </FormTestComponent>
@@ -69,7 +60,7 @@ describe.skip('Category', () => {
   });
 
   it('can submit with category with null as default value', async () => {
-    appMockRender.render(
+    render(
       <FormTestComponent formDefaultValue={{ category: null }} onSubmit={onSubmit}>
         <CategoryFormField isLoading={false} availableCategories={categories} />
       </FormTestComponent>
@@ -85,7 +76,7 @@ describe.skip('Category', () => {
   });
 
   it('cannot submit if the category is an empty string', async () => {
-    appMockRender.render(
+    render(
       <FormTestComponent formDefaultValue={{ category: '' }} onSubmit={onSubmit}>
         <CategoryFormField isLoading={false} availableCategories={categories} />
       </FormTestComponent>
@@ -100,13 +91,13 @@ describe.skip('Category', () => {
       expect(onSubmit).toBeCalledWith({}, false);
     });
 
-    expect(screen.getByText('Empty category is not allowed'));
+    expect(await screen.findByText('Empty category is not allowed'));
   });
 
   it(`cannot submit if the category is more than ${MAX_CATEGORY_LENGTH}`, async () => {
     const category = 'a'.repeat(MAX_CATEGORY_LENGTH + 1);
 
-    appMockRender.render(
+    render(
       <FormTestComponent formDefaultValue={{ category }} onSubmit={onSubmit}>
         <CategoryFormField isLoading={false} availableCategories={categories} />
       </FormTestComponent>
@@ -122,20 +113,20 @@ describe.skip('Category', () => {
     });
 
     expect(
-      screen.getByText(
+      await screen.findByText(
         'The length of the category is too long. The maximum length is 50 characters.'
       )
     );
   });
 
   it('can set a category from existing ones', async () => {
-    appMockRender.render(
+    render(
       <FormTestComponent onSubmit={onSubmit}>
         <CategoryFormField isLoading={false} availableCategories={categories} />
       </FormTestComponent>
     );
 
-    await userEvent.type(screen.getByRole('combobox'), `${categories[1]}{enter}`);
+    await userEvent.type(await screen.findByRole('combobox'), `${categories[1]}{enter}`);
     await userEvent.click(await screen.findByTestId('form-test-component-submit-button'));
 
     await waitFor(() => {
@@ -145,13 +136,13 @@ describe.skip('Category', () => {
   });
 
   it('can set a new category', async () => {
-    appMockRender.render(
+    render(
       <FormTestComponent onSubmit={onSubmit}>
         <CategoryFormField isLoading={false} availableCategories={categories} />
       </FormTestComponent>
     );
 
-    await userEvent.type(screen.getByRole('combobox'), 'my new category{enter}');
+    await userEvent.type(await screen.findByRole('combobox'), 'my new category{enter}');
     await userEvent.click(await screen.findByTestId('form-test-component-submit-button'));
 
     await waitFor(() => {
@@ -161,30 +152,30 @@ describe.skip('Category', () => {
   });
 
   it('cannot set an empty category', async () => {
-    appMockRender.render(
+    render(
       <FormTestComponent onSubmit={onSubmit}>
         <CategoryFormField isLoading={false} availableCategories={categories} />
       </FormTestComponent>
     );
 
-    await userEvent.type(screen.getByRole('combobox'), ' {enter}');
+    await userEvent.type(await screen.findByRole('combobox'), ' {enter}');
     await userEvent.click(await screen.findByTestId('form-test-component-submit-button'));
 
     await waitFor(() => {
       // data, isValid
       expect(onSubmit).toBeCalledWith({}, false);
-      expect(screen.getByText('Empty category is not allowed'));
     });
+    expect(await screen.findByText('Empty category is not allowed'));
   });
 
   it('setting an empty category and clear it do not produce an error', async () => {
-    appMockRender.render(
+    render(
       <FormTestComponent onSubmit={onSubmit}>
         <CategoryFormField isLoading={false} availableCategories={categories} />
       </FormTestComponent>
     );
 
-    await userEvent.type(screen.getByRole('combobox'), ' {enter}');
+    await userEvent.type(await screen.findByRole('combobox'), ' {enter}');
     await userEvent.click(await screen.findByTestId('form-test-component-submit-button'));
 
     await waitFor(() => {
@@ -202,7 +193,7 @@ describe.skip('Category', () => {
   });
 
   it('disables the component correctly when it is loading', async () => {
-    appMockRender.render(
+    render(
       <FormTestComponent onSubmit={onSubmit}>
         <CategoryFormField isLoading={true} availableCategories={categories} />
       </FormTestComponent>

diff --git a/x-pack/plugins/cases/public/components/create/owner_selector.test.tsx b/x-pack/plugins/cases/public/components/create/owner_selector.test.tsx
@@ -6,29 +6,19 @@
  */
 
 import React from 'react';
-import { waitFor, screen } from '@testing-library/react';
+import { waitFor, screen, render } from '@testing-library/react';
 
 import { SECURITY_SOLUTION_OWNER } from '../../../common';
 import { OBSERVABILITY_OWNER, OWNER_INFO } from '../../../common/constants';
 import { CreateCaseOwnerSelector } from './owner_selector';
-import type { AppMockRenderer } from '../../common/mock';
-import { createAppMockRenderer } from '../../common/mock';
 import userEvent from '@testing-library/user-event';
 
-// FLAKY: https://github.com/elastic/kibana/issues/188488
-describe.skip('Case Owner Selection', () => {
+describe('Case Owner Selection', () => {
   const onOwnerChange = jest.fn();
   const selectedOwner = SECURITY_SOLUTION_OWNER;
 
-  let appMockRender: AppMockRenderer;
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    appMockRender = createAppMockRenderer();
-  });
-
   it('renders all options', async () => {
-    appMockRender.render(
+    render(
       <CreateCaseOwnerSelector
         availableOwners={[SECURITY_SOLUTION_OWNER, OBSERVABILITY_OWNER]}
         isLoading={false}
@@ -49,7 +39,7 @@ describe.skip('Case Owner Selection', () => {
   it.each([[SECURITY_SOLUTION_OWNER], [OBSERVABILITY_OWNER]])(
     'only displays %s option if available',
     async (available) => {
-      appMockRender.render(
+      render(
         <CreateCaseOwnerSelector
           availableOwners={[available]}
           isLoading={false}
@@ -67,7 +57,7 @@ describe.skip('Case Owner Selection', () => {
   );
 
   it('changes the selection', async () => {
-    appMockRender.render(
+    render(
       <CreateCaseOwnerSelector
         availableOwners={[OBSERVABILITY_OWNER, SECURITY_SOLUTION_OWNER]}
         isLoading={false}

diff --git a/x-pack/plugins/cases/public/components/create/template.test.tsx b/x-pack/plugins/cases/public/components/create/template.test.tsx
@@ -6,29 +6,16 @@
  */
 
 import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import type { AppMockRenderer } from '../../common/mock';
-import { createAppMockRenderer } from '../../common/mock';
 import { templatesConfigurationMock } from '../../containers/mock';
 import { TemplateSelector } from './templates';
 
-// FLAKY: https://github.com/elastic/kibana/issues/193482
-describe.skip('TemplateSelector', () => {
-  let appMockRender: AppMockRenderer;
+describe('TemplateSelector', () => {
   const onTemplateChange = jest.fn();
 
-  beforeEach(() => {
-    jest.clearAllMocks();
-    appMockRender = createAppMockRenderer();
-  });
-
-  afterEach(async () => {
-    await appMockRender.clearQueryCache();
-  });
-
   it('renders correctly', async () => {
-    appMockRender.render(
+    render(
       <TemplateSelector
         isLoading={false}
         templates={templatesConfigurationMock}
@@ -43,7 +30,7 @@ describe.skip('TemplateSelector', () => {
   it('selects a template correctly', async () => {
     const selectedTemplate = templatesConfigurationMock[2];
 
-    appMockRender.render(
+    render(
       <TemplateSelector
         isLoading={false}
         templates={templatesConfigurationMock}
@@ -69,7 +56,7 @@ describe.skip('TemplateSelector', () => {
   it('shows selected template as default', async () => {
     const templateToSelect = templatesConfigurationMock[1];
 
-    appMockRender.render(
+    render(
       <TemplateSelector
         isLoading={false}
         templates={templatesConfigurationMock}
@@ -85,7 +72,7 @@ describe.skip('TemplateSelector', () => {
     const templateToSelect = templatesConfigurationMock[1];
     const newTemplate = templatesConfigurationMock[2];
 
-    appMockRender.render(
+    render(
       <TemplateSelector
         isLoading={false}
         templates={templatesConfigurationMock}
@@ -112,7 +99,7 @@ describe.skip('TemplateSelector', () => {
   it('shows the selected option correctly', async () => {
     const selectedTemplate = templatesConfigurationMock[2];
 
-    appMockRender.render(
+    render(
       <TemplateSelector
         isLoading={false}
         templates={templatesConfigurationMock}

diff --git a/x-pack/plugins/cases/public/components/files/file_name_link.test.tsx b/x-pack/plugins/cases/public/components/files/file_name_link.test.tsx
@@ -6,31 +6,24 @@
  */
 
 import React from 'react';
-import { screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import type { AppMockRenderer } from '../../common/mock';
-
-import { createAppMockRenderer } from '../../common/mock';
 import { basicFileMock } from '../../containers/mock';
 import { FileNameLink } from './file_name_link';
 
-// Failing: See https://github.com/elastic/kibana/issues/192944
-describe.skip('FileNameLink', () => {
-  let appMockRender: AppMockRenderer;
-
+describe('FileNameLink', () => {
   const defaultProps = {
     file: basicFileMock,
     showPreview: jest.fn(),
   };
 
   beforeEach(() => {
     jest.clearAllMocks();
-    appMockRender = createAppMockRenderer();
   });
 
   it('renders clickable name if file is image', async () => {
-    appMockRender.render(<FileNameLink {...defaultProps} />);
+    render(<FileNameLink {...defaultProps} />);
 
     const nameLink = await screen.findByTestId('cases-files-name-link');
 
@@ -42,7 +35,7 @@ describe.skip('FileNameLink', () => {
   });
 
   it('renders simple text name if file is not image', async () => {
-    appMockRender.render(
+    render(
       <FileNameLink
         showPreview={defaultProps.showPreview}
         file={{ ...basicFileMock, mimeType: 'text/csv' }}

diff --git a/...lugins/cases/public/components/user_actions/delete_attachment_confirmation_modal.test.tsx b/...lugins/cases/public/components/user_actions/delete_attachment_confirmation_modal.test.tsx
@@ -7,48 +7,40 @@
 
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import type { AppMockRenderer } from '../../common/mock';
-import { createAppMockRenderer } from '../../common/mock';
 import { DeleteAttachmentConfirmationModal } from './delete_attachment_confirmation_modal';
+import { render, screen } from '@testing-library/react';
 
-// FLAKY: https://github.com/elastic/kibana/issues/195672
-describe.skip('DeleteAttachmentConfirmationModal', () => {
-  let appMock: AppMockRenderer;
+describe('DeleteAttachmentConfirmationModal', () => {
   const props = {
     title: 'My title',
     confirmButtonText: 'My button text',
     onCancel: jest.fn(),
     onConfirm: jest.fn(),
   };
 
-  beforeEach(() => {
-    appMock = createAppMockRenderer();
-    jest.clearAllMocks();
-  });
-
   it('renders correctly', async () => {
-    const result = appMock.render(<DeleteAttachmentConfirmationModal {...props} />);
+    render(<DeleteAttachmentConfirmationModal {...props} />);
 
-    expect(result.getByTestId('property-actions-confirm-modal')).toBeInTheDocument();
-    expect(result.getByText('My title')).toBeInTheDocument();
-    expect(result.getByText('My button text')).toBeInTheDocument();
-    expect(result.getByText('Cancel')).toBeInTheDocument();
+    expect(await screen.findByTestId('property-actions-confirm-modal')).toBeInTheDocument();
+    expect(await screen.findByText('My title')).toBeInTheDocument();
+    expect(await screen.findByText('My button text')).toBeInTheDocument();
+    expect(await screen.findByText('Cancel')).toBeInTheDocument();
   });
 
   it('calls onConfirm', async () => {
-    const result = appMock.render(<DeleteAttachmentConfirmationModal {...props} />);
+    const result = render(<DeleteAttachmentConfirmationModal {...props} />);
 
-    expect(result.getByText('My button text')).toBeInTheDocument();
-    await userEvent.click(result.getByText('My button text'));
+    expect(await result.findByText('My button text')).toBeInTheDocument();
+    await userEvent.click(await result.findByText('My button text'));
 
     expect(props.onConfirm).toHaveBeenCalled();
   });
 
   it('calls onCancel', async () => {
-    const result = appMock.render(<DeleteAttachmentConfirmationModal {...props} />);
+    render(<DeleteAttachmentConfirmationModal {...props} />);
 
-    expect(result.getByText('Cancel')).toBeInTheDocument();
-    await userEvent.click(result.getByText('Cancel'));
+    expect(await screen.findByText('Cancel')).toBeInTheDocument();
+    await userEvent.click(await screen.findByText('Cancel'));
 
     expect(props.onCancel).toHaveBeenCalled();
   });