From 45e7c930ea34b25013eb46f46d75efcbda38b210 Mon Sep 17 00:00:00 2001 From: adcoelho Date: Fri, 12 Jan 2024 14:36:22 +0100 Subject: [PATCH 1/3] Fixed the markdown tests. --- .../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(); }); }); }); From 1e319fe8d84d7ab5b97492a8bf59c6e790612447 Mon Sep 17 00:00:00 2001 From: adcoelho Date: Fri, 12 Jan 2024 14:37:19 +0100 Subject: [PATCH 2/3] Add test loop to find flaky tests. --- .../editable_markdown_renderer.test.tsx | 224 +++++++++--------- 1 file changed, 113 insertions(+), 111 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 d0404c089077e..8e709373708ca 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 @@ -61,168 +61,170 @@ const defaultProps = { editorRef, }; -describe('EditableMarkdown', () => { - let appMockRender: AppMockRenderer; +for (let i = 0; i < 100; i = i + 1) { + describe('EditableMarkdown', () => { + let appMockRender: AppMockRenderer; - beforeEach(() => { - jest.clearAllMocks(); - appMockRender = createAppMockRenderer(); - }); - - afterEach(() => { - sessionStorage.removeItem(draftStorageKey); - }); - - it('Save button click calls onSaveContent and onChangeEditable when text area value changed', async () => { - appMockRender.render(); - - fireEvent.change(await screen.findByTestId('euiMarkdownEditorTextArea'), { - target: { value: newValue }, + beforeEach(() => { + jest.clearAllMocks(); + appMockRender = createAppMockRenderer(); }); - userEvent.click(await screen.findByTestId('editable-save-markdown')); - - await waitFor(() => { - expect(onSaveContent).toHaveBeenCalledWith(newValue); - expect(onChangeEditable).toHaveBeenCalledWith(defaultProps.id); + afterEach(() => { + sessionStorage.removeItem(draftStorageKey); }); - }); - it('Does not call onSaveContent if no change from current text', async () => { - appMockRender.render(); + it('Save button click calls onSaveContent and onChangeEditable when text area value changed', async () => { + appMockRender.render(); - userEvent.click(await screen.findByTestId('editable-save-markdown')); + fireEvent.change(await screen.findByTestId('euiMarkdownEditorTextArea'), { + target: { value: newValue }, + }); - await waitFor(() => { - expect(onChangeEditable).toHaveBeenCalledWith(defaultProps.id); + userEvent.click(await screen.findByTestId('editable-save-markdown')); + + await waitFor(() => { + expect(onSaveContent).toHaveBeenCalledWith(newValue); + expect(onChangeEditable).toHaveBeenCalledWith(defaultProps.id); + }); }); - expect(onSaveContent).not.toHaveBeenCalled(); - }); - it('Cancel button click calls only onChangeEditable', async () => { - appMockRender.render(); + it('Does not call onSaveContent if no change from current text', async () => { + appMockRender.render(); - userEvent.click(await screen.findByTestId('editable-cancel-markdown')); + userEvent.click(await screen.findByTestId('editable-save-markdown')); - await waitFor(() => { + await waitFor(() => { + expect(onChangeEditable).toHaveBeenCalledWith(defaultProps.id); + }); expect(onSaveContent).not.toHaveBeenCalled(); - expect(onChangeEditable).toHaveBeenCalledWith(defaultProps.id); }); - }); - describe('errors', () => { - it('Shows error message and save button disabled if current text is empty', async () => { + it('Cancel button click calls only onChangeEditable', async () => { appMockRender.render(); - userEvent.clear(await screen.findByTestId('euiMarkdownEditorTextArea')); - userEvent.paste(await screen.findByTestId('euiMarkdownEditorTextArea'), ''); + userEvent.click(await screen.findByTestId('editable-cancel-markdown')); - expect(await screen.findByText('Required field')).toBeInTheDocument(); - expect(await screen.findByTestId('editable-save-markdown')).toHaveProperty('disabled'); + await waitFor(() => { + expect(onSaveContent).not.toHaveBeenCalled(); + expect(onChangeEditable).toHaveBeenCalledWith(defaultProps.id); + }); }); - it('Shows error message and save button disabled if current text is of empty characters', async () => { - appMockRender.render(); + describe('errors', () => { + it('Shows error message and save button disabled if current text is empty', async () => { + appMockRender.render(); - userEvent.clear(await screen.findByTestId('euiMarkdownEditorTextArea')); - userEvent.paste(await screen.findByTestId('euiMarkdownEditorTextArea'), ' '); + userEvent.clear(await screen.findByTestId('euiMarkdownEditorTextArea')); + userEvent.paste(await screen.findByTestId('euiMarkdownEditorTextArea'), ''); - expect(await screen.findByText('Required field')).toBeInTheDocument(); - expect(await screen.findByTestId('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); + it('Shows error message and save button disabled if current text is of empty characters', async () => { + appMockRender.render(); - appMockRender.render(); + userEvent.clear(await screen.findByTestId('euiMarkdownEditorTextArea')); + userEvent.paste(await screen.findByTestId('euiMarkdownEditorTextArea'), ' '); - const markdown = await screen.findByTestId('euiMarkdownEditorTextArea'); + expect(await screen.findByText('Required field')).toBeInTheDocument(); + expect(await screen.findByTestId('editable-save-markdown')).toHaveProperty('disabled'); + }); - userEvent.paste(markdown, longComment); + it('Shows error message and save button disabled if current text is too long', async () => { + const longComment = 'b'.repeat(maxLength + 1); - 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'); - }); - }); + appMockRender.render(); - describe('draft comment ', () => { - beforeAll(() => { - jest.useFakeTimers(); - }); + const markdown = await screen.findByTestId('euiMarkdownEditorTextArea'); - afterEach(() => { - jest.clearAllTimers(); - }); + userEvent.paste(markdown, longComment); - afterAll(() => { - jest.useRealTimers(); - sessionStorage.removeItem(draftStorageKey); + 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'); + }); }); - beforeEach(() => { - jest.clearAllMocks(); - }); + describe('draft comment ', () => { + beforeAll(() => { + jest.useFakeTimers(); + }); - it('Save button click clears session storage', async () => { - appMockRender.render(); + afterEach(() => { + jest.clearAllTimers(); + }); - fireEvent.change(await screen.findByTestId('euiMarkdownEditorTextArea'), { - target: { value: newValue }, + afterAll(() => { + jest.useRealTimers(); + sessionStorage.removeItem(draftStorageKey); }); - act(() => { - jest.advanceTimersByTime(1000); + beforeEach(() => { + jest.clearAllMocks(); }); - expect(sessionStorage.getItem(draftStorageKey)).toBe(newValue); + it('Save button click clears session storage', async () => { + appMockRender.render(); - fireEvent.click(await screen.findByTestId(`editable-save-markdown`)); + fireEvent.change(await screen.findByTestId('euiMarkdownEditorTextArea'), { + target: { value: newValue }, + }); - await waitFor(() => { - expect(onSaveContent).toHaveBeenCalledWith(newValue); - expect(onChangeEditable).toHaveBeenCalledWith(defaultProps.id); - expect(sessionStorage.getItem(draftStorageKey)).toBe(null); - }); - }); + act(() => { + jest.advanceTimersByTime(1000); + }); - it('Cancel button click clears session storage', async () => { - appMockRender.render(); + expect(sessionStorage.getItem(draftStorageKey)).toBe(newValue); - expect(sessionStorage.getItem(draftStorageKey)).toBe(''); + fireEvent.click(await screen.findByTestId(`editable-save-markdown`)); - fireEvent.change(await screen.findByTestId('euiMarkdownEditorTextArea'), { - target: { value: newValue }, + await waitFor(() => { + expect(onSaveContent).toHaveBeenCalledWith(newValue); + expect(onChangeEditable).toHaveBeenCalledWith(defaultProps.id); + expect(sessionStorage.getItem(draftStorageKey)).toBe(null); + }); }); - act(() => { - jest.advanceTimersByTime(1000); - }); + it('Cancel button click clears session storage', async () => { + appMockRender.render(); - await waitFor(() => { - expect(sessionStorage.getItem(draftStorageKey)).toBe(newValue); - }); + expect(sessionStorage.getItem(draftStorageKey)).toBe(''); - fireEvent.click(await screen.findByTestId('editable-cancel-markdown')); + fireEvent.change(await screen.findByTestId('euiMarkdownEditorTextArea'), { + target: { value: newValue }, + }); - await waitFor(() => { - expect(sessionStorage.getItem(draftStorageKey)).toBe(null); - }); - }); + act(() => { + jest.advanceTimersByTime(1000); + }); - describe('existing storage key', () => { - beforeEach(() => { - sessionStorage.setItem(draftStorageKey, 'value set in storage'); + await waitFor(() => { + expect(sessionStorage.getItem(draftStorageKey)).toBe(newValue); + }); + + fireEvent.click(await screen.findByTestId('editable-cancel-markdown')); + + await waitFor(() => { + expect(sessionStorage.getItem(draftStorageKey)).toBe(null); + }); }); - it('should have session storage value same as draft comment', async () => { - appMockRender.render(); + describe('existing storage key', () => { + beforeEach(() => { + sessionStorage.setItem(draftStorageKey, 'value set in storage'); + }); + + it('should have session storage value same as draft comment', async () => { + appMockRender.render(); - expect(await screen.findByText('value set in storage')).toBeInTheDocument(); + expect(await screen.findByText('value set in storage')).toBeInTheDocument(); + }); }); }); }); -}); +} From e0de94023f2ba8544dcf9180860855009c31ad45 Mon Sep 17 00:00:00 2001 From: adcoelho Date: Fri, 12 Jan 2024 17:04:28 +0100 Subject: [PATCH 3/3] remove for cycle --- .../editable_markdown_renderer.test.tsx | 224 +++++++++--------- 1 file changed, 111 insertions(+), 113 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 8e709373708ca..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 @@ -61,170 +61,168 @@ const defaultProps = { editorRef, }; -for (let i = 0; i < 100; i = i + 1) { - describe('EditableMarkdown', () => { - let appMockRender: AppMockRenderer; +describe('EditableMarkdown', () => { + let appMockRender: AppMockRenderer; - beforeEach(() => { - jest.clearAllMocks(); - appMockRender = createAppMockRenderer(); - }); + beforeEach(() => { + jest.clearAllMocks(); + appMockRender = createAppMockRenderer(); + }); - afterEach(() => { - sessionStorage.removeItem(draftStorageKey); + afterEach(() => { + sessionStorage.removeItem(draftStorageKey); + }); + + it('Save button click calls onSaveContent and onChangeEditable when text area value changed', async () => { + appMockRender.render(); + + fireEvent.change(await screen.findByTestId('euiMarkdownEditorTextArea'), { + target: { value: newValue }, }); - it('Save button click calls onSaveContent and onChangeEditable when text area value changed', async () => { - appMockRender.render(); + userEvent.click(await screen.findByTestId('editable-save-markdown')); - fireEvent.change(await screen.findByTestId('euiMarkdownEditorTextArea'), { - target: { value: newValue }, - }); + await waitFor(() => { + expect(onSaveContent).toHaveBeenCalledWith(newValue); + expect(onChangeEditable).toHaveBeenCalledWith(defaultProps.id); + }); + }); - userEvent.click(await screen.findByTestId('editable-save-markdown')); + it('Does not call onSaveContent if no change from current text', async () => { + appMockRender.render(); - await waitFor(() => { - expect(onSaveContent).toHaveBeenCalledWith(newValue); - expect(onChangeEditable).toHaveBeenCalledWith(defaultProps.id); - }); + userEvent.click(await screen.findByTestId('editable-save-markdown')); + + await waitFor(() => { + expect(onChangeEditable).toHaveBeenCalledWith(defaultProps.id); }); + expect(onSaveContent).not.toHaveBeenCalled(); + }); - it('Does not call onSaveContent if no change from current text', async () => { - appMockRender.render(); + it('Cancel button click calls only onChangeEditable', async () => { + appMockRender.render(); - userEvent.click(await screen.findByTestId('editable-save-markdown')); + userEvent.click(await screen.findByTestId('editable-cancel-markdown')); - await waitFor(() => { - expect(onChangeEditable).toHaveBeenCalledWith(defaultProps.id); - }); + await waitFor(() => { expect(onSaveContent).not.toHaveBeenCalled(); + expect(onChangeEditable).toHaveBeenCalledWith(defaultProps.id); }); + }); - it('Cancel button click calls only onChangeEditable', async () => { + describe('errors', () => { + it('Shows error message and save button disabled if current text is empty', async () => { appMockRender.render(); - userEvent.click(await screen.findByTestId('editable-cancel-markdown')); + userEvent.clear(await screen.findByTestId('euiMarkdownEditorTextArea')); + userEvent.paste(await screen.findByTestId('euiMarkdownEditorTextArea'), ''); - await waitFor(() => { - expect(onSaveContent).not.toHaveBeenCalled(); - expect(onChangeEditable).toHaveBeenCalledWith(defaultProps.id); - }); + expect(await screen.findByText('Required field')).toBeInTheDocument(); + expect(await screen.findByTestId('editable-save-markdown')).toHaveProperty('disabled'); }); - describe('errors', () => { - it('Shows error message and save button disabled if current text is empty', async () => { - appMockRender.render(); + it('Shows error message and save button disabled if current text is of empty characters', async () => { + appMockRender.render(); - userEvent.clear(await screen.findByTestId('euiMarkdownEditorTextArea')); - userEvent.paste(await screen.findByTestId('euiMarkdownEditorTextArea'), ''); + userEvent.clear(await screen.findByTestId('euiMarkdownEditorTextArea')); + userEvent.paste(await screen.findByTestId('euiMarkdownEditorTextArea'), ' '); - expect(await screen.findByText('Required field')).toBeInTheDocument(); - expect(await screen.findByTestId('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 () => { - appMockRender.render(); + it('Shows error message and save button disabled if current text is too long', async () => { + const longComment = 'b'.repeat(maxLength + 1); - userEvent.clear(await screen.findByTestId('euiMarkdownEditorTextArea')); - userEvent.paste(await screen.findByTestId('euiMarkdownEditorTextArea'), ' '); + appMockRender.render(); - expect(await screen.findByText('Required field')).toBeInTheDocument(); - expect(await screen.findByTestId('editable-save-markdown')).toHaveProperty('disabled'); - }); + const markdown = await screen.findByTestId('euiMarkdownEditorTextArea'); - it('Shows error message and save button disabled if current text is too long', async () => { - const longComment = 'b'.repeat(maxLength + 1); + userEvent.paste(markdown, longComment); - appMockRender.render(); + 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'); + }); + }); - const markdown = await screen.findByTestId('euiMarkdownEditorTextArea'); + describe('draft comment ', () => { + beforeAll(() => { + jest.useFakeTimers(); + }); - userEvent.paste(markdown, longComment); + afterEach(() => { + jest.clearAllTimers(); + }); - 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'); - }); + afterAll(() => { + jest.useRealTimers(); + sessionStorage.removeItem(draftStorageKey); }); - describe('draft comment ', () => { - beforeAll(() => { - jest.useFakeTimers(); - }); + beforeEach(() => { + jest.clearAllMocks(); + }); - afterEach(() => { - jest.clearAllTimers(); - }); + it('Save button click clears session storage', async () => { + appMockRender.render(); - afterAll(() => { - jest.useRealTimers(); - sessionStorage.removeItem(draftStorageKey); + fireEvent.change(await screen.findByTestId('euiMarkdownEditorTextArea'), { + target: { value: newValue }, }); - beforeEach(() => { - jest.clearAllMocks(); + act(() => { + jest.advanceTimersByTime(1000); }); - it('Save button click clears session storage', async () => { - appMockRender.render(); - - fireEvent.change(await screen.findByTestId('euiMarkdownEditorTextArea'), { - target: { value: newValue }, - }); - - act(() => { - jest.advanceTimersByTime(1000); - }); - - expect(sessionStorage.getItem(draftStorageKey)).toBe(newValue); + expect(sessionStorage.getItem(draftStorageKey)).toBe(newValue); - fireEvent.click(await screen.findByTestId(`editable-save-markdown`)); + fireEvent.click(await screen.findByTestId(`editable-save-markdown`)); - await waitFor(() => { - expect(onSaveContent).toHaveBeenCalledWith(newValue); - expect(onChangeEditable).toHaveBeenCalledWith(defaultProps.id); - expect(sessionStorage.getItem(draftStorageKey)).toBe(null); - }); + await waitFor(() => { + expect(onSaveContent).toHaveBeenCalledWith(newValue); + expect(onChangeEditable).toHaveBeenCalledWith(defaultProps.id); + expect(sessionStorage.getItem(draftStorageKey)).toBe(null); }); + }); - it('Cancel button click clears session storage', async () => { - appMockRender.render(); + it('Cancel button click clears session storage', async () => { + appMockRender.render(); - expect(sessionStorage.getItem(draftStorageKey)).toBe(''); + expect(sessionStorage.getItem(draftStorageKey)).toBe(''); - fireEvent.change(await screen.findByTestId('euiMarkdownEditorTextArea'), { - target: { value: newValue }, - }); + fireEvent.change(await screen.findByTestId('euiMarkdownEditorTextArea'), { + target: { value: newValue }, + }); - act(() => { - jest.advanceTimersByTime(1000); - }); + act(() => { + jest.advanceTimersByTime(1000); + }); - await waitFor(() => { - expect(sessionStorage.getItem(draftStorageKey)).toBe(newValue); - }); + await waitFor(() => { + expect(sessionStorage.getItem(draftStorageKey)).toBe(newValue); + }); - fireEvent.click(await screen.findByTestId('editable-cancel-markdown')); + fireEvent.click(await screen.findByTestId('editable-cancel-markdown')); - await waitFor(() => { - expect(sessionStorage.getItem(draftStorageKey)).toBe(null); - }); + await waitFor(() => { + expect(sessionStorage.getItem(draftStorageKey)).toBe(null); }); + }); - describe('existing storage key', () => { - beforeEach(() => { - sessionStorage.setItem(draftStorageKey, 'value set in storage'); - }); + describe('existing storage key', () => { + beforeEach(() => { + sessionStorage.setItem(draftStorageKey, 'value set in storage'); + }); - it('should have session storage value same as draft comment', async () => { - appMockRender.render(); + it('should have session storage value same as draft comment', async () => { + appMockRender.render(); - expect(await screen.findByText('value set in storage')).toBeInTheDocument(); - }); + expect(await screen.findByText('value set in storage')).toBeInTheDocument(); }); }); }); -} +});