From 3c2c891a14072e374bd562618358dc8c027aa1ea Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Sat, 23 Nov 2024 12:54:29 +0200 Subject: [PATCH] [ResponseOps][Cases] Remove appMockRender from flaky tests (#201406) ## Summary This PR removes the usage of `appMockRender` from some flaky tests in the hope they will stop being flaky. We suspect that the `appMockRender` is the source of flakiness and we would like to verify our assumption. Fixes: https://github.com/elastic/kibana/issues/189105 Fixes: https://github.com/elastic/kibana/issues/195698 Fixes: https://github.com/elastic/kibana/issues/189014 Fixes: https://github.com/elastic/kibana/issues/176679 Fixes: https://github.com/elastic/kibana/issues/188951 Fixes: https://github.com/elastic/kibana/issues/192672 ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --- .../case_form_fields/severity.test.tsx | 25 ++++----------- .../case_form_fields/title.test.tsx | 11 +++---- .../components/filter_popover/index.test.tsx | 32 +++++++------------ .../comment/registered_attachments.test.tsx | 10 ++---- .../user_actions/show_more_button.test.tsx | 16 +++------- 5 files changed, 28 insertions(+), 66 deletions(-) diff --git a/x-pack/plugins/cases/public/components/case_form_fields/severity.test.tsx b/x-pack/plugins/cases/public/components/case_form_fields/severity.test.tsx index 12f72a073b7fc..2034d3c4099ac 100644 --- a/x-pack/plugins/cases/public/components/case_form_fields/severity.test.tsx +++ b/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'; @@ -16,20 +14,9 @@ import { FormTestComponent } from '../../common/test_utils'; const onSubmit = jest.fn(); -// FLAKY: https://github.com/elastic/kibana/issues/188951 -describe.skip('Severity form field', () => { - let appMockRender: AppMockRenderer; - - beforeEach(() => { - appMockRender = createAppMockRenderer(); - }); - - afterEach(async () => { - await appMockRender.clearQueryCache(); - }); - +describe('Severity form field', () => { it('renders', async () => { - appMockRender.render( + render( @@ -41,7 +28,7 @@ describe.skip('Severity form field', () => { // default to LOW in this test configuration it('defaults to the correct value', async () => { - appMockRender.render( + render( @@ -52,7 +39,7 @@ describe.skip('Severity form field', () => { }); it('selects the correct value when changed', async () => { - appMockRender.render( + render( @@ -74,7 +61,7 @@ describe.skip('Severity form field', () => { }); it('disables when loading data', async () => { - appMockRender.render( + render( diff --git a/x-pack/plugins/cases/public/components/case_form_fields/title.test.tsx b/x-pack/plugins/cases/public/components/case_form_fields/title.test.tsx index e277a992c6bda..e861b4a3babe9 100644 --- a/x-pack/plugins/cases/public/components/case_form_fields/title.test.tsx +++ b/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> = ({ children }) => { const { form } = useForm({ @@ -38,11 +36,10 @@ describe('Title', () => { beforeEach(() => { jest.resetAllMocks(); - appMockRender = createAppMockRenderer(); }); it('it renders', async () => { - appMockRender.render( + render( </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> diff --git a/x-pack/plugins/cases/public/components/filter_popover/index.test.tsx b/x-pack/plugins/cases/public/components/filter_popover/index.test.tsx index 77e5593671c7a..c45599860a560 100644 --- a/x-pack/plugins/cases/public/components/filter_popover/index.test.tsx +++ b/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} diff --git a/x-pack/plugins/cases/public/components/user_actions/comment/registered_attachments.test.tsx b/x-pack/plugins/cases/public/components/user_actions/comment/registered_attachments.test.tsx index 0a31b0cb875ad..0f485845fcd36 100644 --- a/x-pack/plugins/cases/public/components/user_actions/comment/registered_attachments.test.tsx +++ b/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(); }); diff --git a/x-pack/plugins/cases/public/components/user_actions/show_more_button.test.tsx b/x-pack/plugins/cases/public/components/user_actions/show_more_button.test.tsx index 34a0ad2713373..515cc5085f28c 100644 --- a/x-pack/plugins/cases/public/components/user_actions/show_more_button.test.tsx +++ b/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();