From d3b9a9a050f1c7b2d77710bda55b2e59ec6b668a Mon Sep 17 00:00:00 2001 From: Antonio Date: Thu, 21 Nov 2024 14:13:28 +0100 Subject: [PATCH] [ResponseOps][Cases] Removed custom render from flaky tests (#200887) Closes #189739 Closes #188488 Closes #193482 Closes #192944 Closes #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. --- .../category/category_form_field.test.tsx | 49 ++++++++----------- .../components/create/owner_selector.test.tsx | 20 ++------ .../components/create/template.test.tsx | 27 +++------- .../components/files/file_name_link.test.tsx | 15 ++---- ...ete_attachment_confirmation_modal.test.tsx | 34 +++++-------- 5 files changed, 49 insertions(+), 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 index 8380276e3e106..e2aed2c397835 100644 --- 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( @@ -37,7 +28,7 @@ describe.skip('Category', () => { }); it('can submit without setting a category', async () => { - appMockRender.render( + render( @@ -53,7 +44,7 @@ describe.skip('Category', () => { }); it('can submit with category a string as default value', async () => { - appMockRender.render( + render( @@ -69,7 +60,7 @@ describe.skip('Category', () => { }); it('can submit with category with null as default value', async () => { - appMockRender.render( + render( @@ -85,7 +76,7 @@ describe.skip('Category', () => { }); it('cannot submit if the category is an empty string', async () => { - appMockRender.render( + render( @@ -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( @@ -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( ); - 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( ); - 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( ); - 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( ); - 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( 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 index 7f11214a1576c..8ba88a4d8a3c5 100644 --- 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( { it.each([[SECURITY_SOLUTION_OWNER], [OBSERVABILITY_OWNER]])( 'only displays %s option if available', async (available) => { - appMockRender.render( + render( { ); it('changes the selection', async () => { - appMockRender.render( + render( { - 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( { it('selects a template correctly', async () => { const selectedTemplate = templatesConfigurationMock[2]; - appMockRender.render( + render( { it('shows selected template as default', async () => { const templateToSelect = templatesConfigurationMock[1]; - appMockRender.render( + render( { const templateToSelect = templatesConfigurationMock[1]; const newTemplate = templatesConfigurationMock[2]; - appMockRender.render( + render( { it('shows the selected option correctly', async () => { const selectedTemplate = templatesConfigurationMock[2]; - appMockRender.render( + render( { - let appMockRender: AppMockRenderer; - +describe('FileNameLink', () => { const defaultProps = { file: basicFileMock, showPreview: jest.fn(), @@ -26,11 +20,10 @@ describe.skip('FileNameLink', () => { beforeEach(() => { jest.clearAllMocks(); - appMockRender = createAppMockRenderer(); }); it('renders clickable name if file is image', async () => { - appMockRender.render(); + render(); 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( { - let appMock: AppMockRenderer; +describe('DeleteAttachmentConfirmationModal', () => { const props = { title: 'My title', confirmButtonText: 'My button text', @@ -21,34 +18,29 @@ describe.skip('DeleteAttachmentConfirmationModal', () => { onConfirm: jest.fn(), }; - beforeEach(() => { - appMock = createAppMockRenderer(); - jest.clearAllMocks(); - }); - it('renders correctly', async () => { - const result = appMock.render(); + render(); - 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(); + const result = render(); - 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(); + render(); - 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(); });