From a3edcc39402428c12f708a1a7669b9e76d8ca6ee Mon Sep 17 00:00:00 2001 From: Antonio Date: Mon, 15 Jan 2024 13:54:15 +0100 Subject: [PATCH] [Cases] Fix editable markdown tests (#174755) Fixes #171177 Fixes #171178 Fixes #171179 Fixes #171180 Fixes #171181 Fixes #171182 Fixes #171183 Fixes #171184 Fixes #171185 ## Summary Fixes the `EditableMarkdown` flaky tests. Successful builds: https://buildkite.com/elastic/kibana-pull-request/builds?branch=adcoelho%3Afix-editable-markdown-tests --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../editable_markdown_renderer.test.tsx | 147 +++++------------- 1 file changed, 40 insertions(+), 107 deletions(-) diff --git a/x-pack/plugins/cases/public/components/markdown_editor/editable_markdown_renderer.test.tsx b/x-pack/plugins/cases/public/components/markdown_editor/editable_markdown_renderer.test.tsx index e4d6641d6b751..d0404c089077e 100644 --- a/x-pack/plugins/cases/public/components/markdown_editor/editable_markdown_renderer.test.tsx +++ b/x-pack/plugins/cases/public/components/markdown_editor/editable_markdown_renderer.test.tsx @@ -7,8 +7,8 @@ import React from 'react'; import type { FormSchema } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib'; -import { useForm, Form, FIELD_TYPES } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib'; -import { waitFor, fireEvent, screen, render, act } from '@testing-library/react'; +import { FIELD_TYPES } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib'; +import { waitFor, fireEvent, screen, act } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { fieldValidators } from '@kbn/es-ui-shared-plugin/static/forms/helpers'; import * as i18n from '../../common/translations'; @@ -16,7 +16,8 @@ import * as i18n from '../../common/translations'; const { emptyField, maxLengthField } = fieldValidators; import { EditableMarkdown } from '.'; -import { TestProviders } from '../../common/mock'; +import type { AppMockRenderer } from '../../common/mock'; +import { createAppMockRenderer } from '../../common/mock'; jest.mock('../../common/lib/kibana'); @@ -60,36 +61,12 @@ const defaultProps = { editorRef, }; -// FLAKY: https://github.com/elastic/kibana/issues/171177 -// FLAKY: https://github.com/elastic/kibana/issues/171178 -// FLAKY: https://github.com/elastic/kibana/issues/171179 -// FLAKY: https://github.com/elastic/kibana/issues/171180 -// FLAKY: https://github.com/elastic/kibana/issues/171181 -// FLAKY: https://github.com/elastic/kibana/issues/171182 -// FLAKY: https://github.com/elastic/kibana/issues/171183 -// FLAKY: https://github.com/elastic/kibana/issues/171184 -// FLAKY: https://github.com/elastic/kibana/issues/171185 -describe.skip('EditableMarkdown', () => { - const MockHookWrapperComponent: React.FC<{ testProviderProps?: unknown }> = ({ - children, - testProviderProps = {}, - }) => { - const { form } = useForm<{ content: string }>({ - defaultValue: { content }, - options: { stripEmptyFields: false }, - schema: mockSchema, - }); - - return ( - // @ts-expect-error ts upgrade v4.7.4 - -
{children}
- - ); - }; +describe('EditableMarkdown', () => { + let appMockRender: AppMockRenderer; beforeEach(() => { jest.clearAllMocks(); + appMockRender = createAppMockRenderer(); }); afterEach(() => { @@ -97,17 +74,13 @@ describe.skip('EditableMarkdown', () => { }); it('Save button click calls onSaveContent and onChangeEditable when text area value changed', async () => { - render( - - - - ); + appMockRender.render(); - fireEvent.change(screen.getByTestId('euiMarkdownEditorTextArea'), { + fireEvent.change(await screen.findByTestId('euiMarkdownEditorTextArea'), { target: { value: newValue }, }); - userEvent.click(screen.getByTestId('editable-save-markdown')); + userEvent.click(await screen.findByTestId('editable-save-markdown')); await waitFor(() => { expect(onSaveContent).toHaveBeenCalledWith(newValue); @@ -116,13 +89,9 @@ describe.skip('EditableMarkdown', () => { }); it('Does not call onSaveContent if no change from current text', async () => { - render( - - - - ); + appMockRender.render(); - userEvent.click(screen.getByTestId('editable-save-markdown')); + userEvent.click(await screen.findByTestId('editable-save-markdown')); await waitFor(() => { expect(onChangeEditable).toHaveBeenCalledWith(defaultProps.id); @@ -131,13 +100,9 @@ describe.skip('EditableMarkdown', () => { }); it('Cancel button click calls only onChangeEditable', async () => { - render( - - - - ); + appMockRender.render(); - userEvent.click(screen.getByTestId('editable-cancel-markdown')); + userEvent.click(await screen.findByTestId('editable-cancel-markdown')); await waitFor(() => { expect(onSaveContent).not.toHaveBeenCalled(); @@ -147,60 +112,40 @@ describe.skip('EditableMarkdown', () => { describe('errors', () => { it('Shows error message and save button disabled if current text is empty', async () => { - render( - - - - ); - - userEvent.clear(screen.getByTestId('euiMarkdownEditorTextArea')); + appMockRender.render(); - userEvent.type(screen.getByTestId('euiMarkdownEditorTextArea'), ''); + userEvent.clear(await screen.findByTestId('euiMarkdownEditorTextArea')); + userEvent.paste(await screen.findByTestId('euiMarkdownEditorTextArea'), ''); - await waitFor(() => { - expect(screen.getByText('Required field')).toBeInTheDocument(); - expect(screen.getByTestId('editable-save-markdown')).toHaveProperty('disabled'); - }); + expect(await screen.findByText('Required field')).toBeInTheDocument(); + expect(await screen.findByTestId('editable-save-markdown')).toHaveProperty('disabled'); }); it('Shows error message and save button disabled if current text is of empty characters', async () => { - render( - - - - ); + appMockRender.render(); - userEvent.clear(screen.getByTestId('euiMarkdownEditorTextArea')); + userEvent.clear(await screen.findByTestId('euiMarkdownEditorTextArea')); + userEvent.paste(await screen.findByTestId('euiMarkdownEditorTextArea'), ' '); - userEvent.type(screen.getByTestId('euiMarkdownEditorTextArea'), ' '); - - await waitFor(() => { - expect(screen.getByText('Required field')).toBeInTheDocument(); - expect(screen.getByTestId('editable-save-markdown')).toHaveProperty('disabled'); - }); + expect(await screen.findByText('Required field')).toBeInTheDocument(); + expect(await screen.findByTestId('editable-save-markdown')).toHaveProperty('disabled'); }); it('Shows error message and save button disabled if current text is too long', async () => { const longComment = 'b'.repeat(maxLength + 1); - render( - - - - ); + appMockRender.render(); - const markdown = screen.getByTestId('euiMarkdownEditorTextArea'); + const markdown = await screen.findByTestId('euiMarkdownEditorTextArea'); userEvent.paste(markdown, longComment); - await waitFor(() => { - expect( - screen.getByText( - `The length of the textarea is too long. The maximum length is ${maxLength} characters.` - ) - ).toBeInTheDocument(); - expect(screen.getByTestId('editable-save-markdown')).toHaveProperty('disabled'); - }); + expect( + await screen.findByText( + `The length of the textarea is too long. The maximum length is ${maxLength} characters.` + ) + ).toBeInTheDocument(); + expect(await screen.findByTestId('editable-save-markdown')).toHaveProperty('disabled'); }); }); @@ -223,13 +168,9 @@ describe.skip('EditableMarkdown', () => { }); it('Save button click clears session storage', async () => { - const result = render( - - - - ); + appMockRender.render(); - fireEvent.change(result.getByTestId('euiMarkdownEditorTextArea'), { + fireEvent.change(await screen.findByTestId('euiMarkdownEditorTextArea'), { target: { value: newValue }, }); @@ -239,7 +180,7 @@ describe.skip('EditableMarkdown', () => { expect(sessionStorage.getItem(draftStorageKey)).toBe(newValue); - fireEvent.click(result.getByTestId(`editable-save-markdown`)); + fireEvent.click(await screen.findByTestId(`editable-save-markdown`)); await waitFor(() => { expect(onSaveContent).toHaveBeenCalledWith(newValue); @@ -249,15 +190,11 @@ describe.skip('EditableMarkdown', () => { }); it('Cancel button click clears session storage', async () => { - const result = render( - - - - ); + appMockRender.render(); expect(sessionStorage.getItem(draftStorageKey)).toBe(''); - fireEvent.change(result.getByTestId('euiMarkdownEditorTextArea'), { + fireEvent.change(await screen.findByTestId('euiMarkdownEditorTextArea'), { target: { value: newValue }, }); @@ -269,7 +206,7 @@ describe.skip('EditableMarkdown', () => { expect(sessionStorage.getItem(draftStorageKey)).toBe(newValue); }); - fireEvent.click(result.getByTestId('editable-cancel-markdown')); + fireEvent.click(await screen.findByTestId('editable-cancel-markdown')); await waitFor(() => { expect(sessionStorage.getItem(draftStorageKey)).toBe(null); @@ -282,13 +219,9 @@ describe.skip('EditableMarkdown', () => { }); it('should have session storage value same as draft comment', async () => { - const result = render( - - - - ); + appMockRender.render(); - expect(result.getByText('value set in storage')).toBeInTheDocument(); + expect(await screen.findByText('value set in storage')).toBeInTheDocument(); }); }); });