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 3caf90433f8fb8..aa1ad06067616b 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,18 +7,21 @@ import type { FC, PropsWithChildren } from 'react'; import React from 'react'; -import { mount } from 'enzyme'; -import { act } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import type { FormHook } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib'; +import type { CaseFormFieldsSchemaProps } from './schema'; + import { useForm, Form } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib'; +import userEvent from '@testing-library/user-event'; + import { Title } from './title'; import { schema } from '../create/schema'; -import type { CaseFormFieldsSchemaProps } from './schema'; +import { createAppMockRenderer, type AppMockRenderer } from '../../common/mock'; -// FLAKY: https://github.com/elastic/kibana/issues/187364 -describe.skip('Title', () => { +describe('Title', () => { let globalForm: FormHook; + let appMockRender: AppMockRenderer; const MockHookWrapperComponent: FC> = ({ children }) => { const { form } = useForm({ @@ -35,42 +38,37 @@ describe.skip('Title', () => { beforeEach(() => { jest.resetAllMocks(); + appMockRender = createAppMockRenderer(); }); it('it renders', async () => { - const wrapper = mount( + appMockRender.render( </MockHookWrapperComponent> ); - expect(wrapper.find(`[data-test-subj="caseTitle"]`).exists()).toBeTruthy(); + expect(await screen.findByTestId('caseTitle')).toBeInTheDocument(); }); it('it disables the input when loading', async () => { - const wrapper = mount( + appMockRender.render( <MockHookWrapperComponent> <Title isLoading={true} /> </MockHookWrapperComponent> ); - - expect(wrapper.find(`[data-test-subj="caseTitle"] input`).prop('disabled')).toBeTruthy(); + expect(await screen.findByTestId('input')).toBeDisabled(); }); it('it changes the title', async () => { - const wrapper = mount( + appMockRender.render( <MockHookWrapperComponent> <Title isLoading={false} /> </MockHookWrapperComponent> ); - await act(async () => { - wrapper - .find(`[data-test-subj="caseTitle"] input`) - .first() - .simulate('change', { target: { value: 'My new title' } }); - }); + userEvent.paste(await screen.findByTestId('input'), ' is updated'); - expect(globalForm.getFormData()).toEqual({ title: 'My new title' }); + expect(globalForm.getFormData()).toEqual({ title: 'My title is updated' }); }); });