chore[GH-#833]: Add unit tests for markdownEditor (#1643)
This commit is contained in:
Julien Fabre
GitHub
parent
9335166836
commit
3f726f9e64
2 changed files with 570 additions and 0 deletions
398
webapp/src/components/__snapshots__/markdownEditor.test.tsx.snap
Normal file
398
webapp/src/components/__snapshots__/markdownEditor.test.tsx.snap
Normal file
|
|
@ -0,0 +1,398 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`components/markdownEditor return markdownEditor, write hello and verify blur 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="MarkdownEditor octo-editor classname-test "
|
||||
>
|
||||
<div
|
||||
class="octo-editor-preview octo-placeholder"
|
||||
style=""
|
||||
/>
|
||||
<div
|
||||
class="octo-editor-active Editor"
|
||||
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
|
||||
>
|
||||
<div
|
||||
id="test-id-wrapper"
|
||||
>
|
||||
<textarea
|
||||
id="test-id"
|
||||
style="display: none;"
|
||||
/>
|
||||
<div
|
||||
class="EasyMDEContainer"
|
||||
>
|
||||
<div
|
||||
class="CodeMirror cm-s-easymde CodeMirror-wrap"
|
||||
>
|
||||
<div
|
||||
style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 0px;"
|
||||
>
|
||||
<textarea
|
||||
autocapitalize="off"
|
||||
autocorrect="off"
|
||||
spellcheck="false"
|
||||
style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="CodeMirror-vscrollbar"
|
||||
cm-not-content="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
style="min-width: 1px;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="CodeMirror-hscrollbar"
|
||||
cm-not-content="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
style="height: 100%; min-height: 1px;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="CodeMirror-scrollbar-filler"
|
||||
cm-not-content="true"
|
||||
/>
|
||||
<div
|
||||
class="CodeMirror-gutter-filler"
|
||||
cm-not-content="true"
|
||||
/>
|
||||
<div
|
||||
class="CodeMirror-scroll"
|
||||
style="min-height: 10px;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="CodeMirror-sizer"
|
||||
style="margin-left: 0px;"
|
||||
>
|
||||
<div
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
class="CodeMirror-lines"
|
||||
role="presentation"
|
||||
>
|
||||
<div
|
||||
role="presentation"
|
||||
style="position: relative; outline: none;"
|
||||
>
|
||||
<div
|
||||
class="CodeMirror-measure"
|
||||
/>
|
||||
<div
|
||||
class="CodeMirror-measure"
|
||||
>
|
||||
<pre
|
||||
class="CodeMirror-line"
|
||||
role="presentation"
|
||||
>
|
||||
<span
|
||||
role="presentation"
|
||||
style="padding-right: .1px;"
|
||||
>
|
||||
hello
|
||||
</span>
|
||||
</pre>
|
||||
</div>
|
||||
<div
|
||||
style="position: relative; z-index: 1;"
|
||||
/>
|
||||
<div
|
||||
class="CodeMirror-cursors"
|
||||
/>
|
||||
<div
|
||||
class="CodeMirror-code"
|
||||
role="presentation"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; height: 50px; width: 1px;"
|
||||
/>
|
||||
<div
|
||||
class="CodeMirror-gutters"
|
||||
style="display: none;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="editor-preview-side editor-preview"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`components/markdownEditor return markdownEditor, write hi and verify change 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="MarkdownEditor octo-editor classname-test active"
|
||||
>
|
||||
<div
|
||||
class="octo-editor-preview octo-placeholder"
|
||||
style="display: none;"
|
||||
/>
|
||||
<div
|
||||
class="octo-editor-active Editor"
|
||||
style=""
|
||||
>
|
||||
<div
|
||||
id="test-id-wrapper"
|
||||
>
|
||||
<textarea
|
||||
id="test-id"
|
||||
style="display: none;"
|
||||
/>
|
||||
<div
|
||||
class="EasyMDEContainer"
|
||||
>
|
||||
<div
|
||||
class="CodeMirror cm-s-easymde CodeMirror-wrap CodeMirror-focused"
|
||||
>
|
||||
<div
|
||||
style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 0px;"
|
||||
>
|
||||
<textarea
|
||||
autocapitalize="off"
|
||||
autocorrect="off"
|
||||
spellcheck="false"
|
||||
style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="CodeMirror-vscrollbar"
|
||||
cm-not-content="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
style="min-width: 1px;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="CodeMirror-hscrollbar"
|
||||
cm-not-content="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
style="height: 100%; min-height: 1px;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="CodeMirror-scrollbar-filler"
|
||||
cm-not-content="true"
|
||||
/>
|
||||
<div
|
||||
class="CodeMirror-gutter-filler"
|
||||
cm-not-content="true"
|
||||
/>
|
||||
<div
|
||||
class="CodeMirror-scroll"
|
||||
style="min-height: 10px;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="CodeMirror-sizer"
|
||||
style="margin-left: 0px;"
|
||||
>
|
||||
<div
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
class="CodeMirror-lines"
|
||||
role="presentation"
|
||||
>
|
||||
<div
|
||||
role="presentation"
|
||||
style="position: relative; outline: none;"
|
||||
>
|
||||
<div
|
||||
class="CodeMirror-measure"
|
||||
/>
|
||||
<div
|
||||
class="CodeMirror-measure"
|
||||
>
|
||||
<pre
|
||||
class="CodeMirror-line"
|
||||
role="presentation"
|
||||
>
|
||||
<span
|
||||
role="presentation"
|
||||
style="padding-right: .1px;"
|
||||
>
|
||||
hi
|
||||
</span>
|
||||
</pre>
|
||||
</div>
|
||||
<div
|
||||
style="position: relative; z-index: 1;"
|
||||
/>
|
||||
<div
|
||||
class="CodeMirror-cursors"
|
||||
/>
|
||||
<div
|
||||
class="CodeMirror-code"
|
||||
role="presentation"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; height: 50px; width: 1px;"
|
||||
/>
|
||||
<div
|
||||
class="CodeMirror-gutters"
|
||||
style="display: none;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="editor-preview-side editor-preview"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`components/markdownEditor should match snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="MarkdownEditor octo-editor classname-test "
|
||||
>
|
||||
<div
|
||||
class="octo-editor-preview octo-placeholder"
|
||||
/>
|
||||
<div
|
||||
class="octo-editor-active Editor"
|
||||
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
|
||||
>
|
||||
<div
|
||||
id="test-id-wrapper"
|
||||
>
|
||||
<textarea
|
||||
id="test-id"
|
||||
style="display: none;"
|
||||
/>
|
||||
<div
|
||||
class="EasyMDEContainer"
|
||||
>
|
||||
<div
|
||||
class="CodeMirror cm-s-easymde CodeMirror-wrap"
|
||||
>
|
||||
<div
|
||||
style="overflow: hidden; position: relative; width: 3px; height: 0px;"
|
||||
>
|
||||
<textarea
|
||||
autocapitalize="off"
|
||||
autocorrect="off"
|
||||
spellcheck="false"
|
||||
style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="CodeMirror-vscrollbar"
|
||||
cm-not-content="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
style="min-width: 1px;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="CodeMirror-hscrollbar"
|
||||
cm-not-content="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
style="height: 100%; min-height: 1px;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="CodeMirror-scrollbar-filler"
|
||||
cm-not-content="true"
|
||||
/>
|
||||
<div
|
||||
class="CodeMirror-gutter-filler"
|
||||
cm-not-content="true"
|
||||
/>
|
||||
<div
|
||||
class="CodeMirror-scroll"
|
||||
style="min-height: 10px;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="CodeMirror-sizer"
|
||||
style="margin-left: 0px;"
|
||||
>
|
||||
<div
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
class="CodeMirror-lines"
|
||||
role="presentation"
|
||||
>
|
||||
<div
|
||||
role="presentation"
|
||||
style="position: relative; outline: none;"
|
||||
>
|
||||
<div
|
||||
class="CodeMirror-measure"
|
||||
>
|
||||
<pre
|
||||
class="CodeMirror-line-like"
|
||||
>
|
||||
<span>
|
||||
xxxxxxxxxx
|
||||
</span>
|
||||
</pre>
|
||||
</div>
|
||||
<div
|
||||
class="CodeMirror-measure"
|
||||
/>
|
||||
<div
|
||||
style="position: relative; z-index: 1;"
|
||||
/>
|
||||
<div
|
||||
class="CodeMirror-cursors"
|
||||
/>
|
||||
<div
|
||||
class="CodeMirror-code"
|
||||
role="presentation"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; height: 50px; width: 1px;"
|
||||
/>
|
||||
<div
|
||||
class="CodeMirror-gutters"
|
||||
style="display: none;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="editor-preview-side editor-preview"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
172
webapp/src/components/markdownEditor.test.tsx
Normal file
172
webapp/src/components/markdownEditor.test.tsx
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
import {act, fireEvent, render, screen} from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import React from 'react'
|
||||
|
||||
import {mocked} from 'ts-jest/utils'
|
||||
|
||||
import {mockDOM, wrapDNDIntl} from '../testUtils'
|
||||
|
||||
import {Utils} from '../utils'
|
||||
|
||||
import {MarkdownEditor} from './markdownEditor'
|
||||
|
||||
jest.mock('../utils')
|
||||
const mockedUtils = mocked(Utils, true)
|
||||
jest.useFakeTimers()
|
||||
|
||||
describe('components/markdownEditor', () => {
|
||||
beforeAll(mockDOM)
|
||||
beforeEach(jest.clearAllMocks)
|
||||
test('should match snapshot', async () => {
|
||||
let container
|
||||
await act(async () => {
|
||||
const result = render(wrapDNDIntl(
|
||||
<MarkdownEditor
|
||||
id={'test-id'}
|
||||
text={''}
|
||||
placeholderText={'placeholder'}
|
||||
className={'classname-test'}
|
||||
readonly={false}
|
||||
|
||||
onChange={jest.fn()}
|
||||
onFocus={jest.fn()}
|
||||
|
||||
onBlur={jest.fn()}
|
||||
onAccept={jest.fn()}
|
||||
/>,
|
||||
))
|
||||
container = result.container
|
||||
})
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
test('return markdownEditor, write hello and verify blur', async () => {
|
||||
const onMockedBlur = jest.fn()
|
||||
let container
|
||||
await act(async () => {
|
||||
const result = render(wrapDNDIntl(
|
||||
<MarkdownEditor
|
||||
id={'test-id'}
|
||||
text={''}
|
||||
placeholderText={'placeholder'}
|
||||
className={'classname-test'}
|
||||
readonly={false}
|
||||
|
||||
onChange={jest.fn()}
|
||||
onFocus={jest.fn()}
|
||||
|
||||
onBlur={onMockedBlur}
|
||||
onAccept={jest.fn()}
|
||||
/>,
|
||||
))
|
||||
container = result.container
|
||||
const elementMarkDown = screen.getByRole('textbox', {hidden: true})
|
||||
userEvent.click(elementMarkDown)
|
||||
})
|
||||
const elementsTextArea = screen.getAllByRole('textbox', {hidden: true})
|
||||
expect(elementsTextArea).not.toBeNull()
|
||||
expect(elementsTextArea.length).toBeGreaterThanOrEqual(2)
|
||||
userEvent.type(elementsTextArea[1], 'hello')
|
||||
fireEvent.blur(elementsTextArea[1])
|
||||
expect(onMockedBlur).toBeCalledTimes(1)
|
||||
expect(onMockedBlur).toBeCalledWith('hello')
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
|
||||
test('return markdownEditor, write hi and verify change', async () => {
|
||||
const onMockedChange = jest.fn()
|
||||
let container
|
||||
await act(async () => {
|
||||
const result = render(wrapDNDIntl(
|
||||
<MarkdownEditor
|
||||
id={'test-id'}
|
||||
text={''}
|
||||
placeholderText={'placeholder'}
|
||||
className={'classname-test'}
|
||||
readonly={false}
|
||||
|
||||
onChange={onMockedChange}
|
||||
onFocus={jest.fn()}
|
||||
|
||||
onBlur={jest.fn()}
|
||||
onAccept={jest.fn()}
|
||||
/>,
|
||||
))
|
||||
container = result.container
|
||||
const elementMarkDown = screen.getByRole('textbox', {hidden: true})
|
||||
userEvent.click(elementMarkDown)
|
||||
})
|
||||
const elementsTextArea = screen.getAllByRole('textbox', {hidden: true})
|
||||
expect(elementsTextArea).not.toBeNull()
|
||||
expect(elementsTextArea.length).toBeGreaterThanOrEqual(2)
|
||||
const elementText = elementsTextArea[1]
|
||||
userEvent.type(elementText, 'h')
|
||||
expect(onMockedChange).toBeCalledTimes(1)
|
||||
expect(onMockedChange).toBeCalledWith('h')
|
||||
userEvent.type(elementText, 'i')
|
||||
expect(onMockedChange).toBeCalledTimes(2)
|
||||
expect(onMockedChange).toBeCalledWith('hi')
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
test('return markdownEditor and verify accept', async () => {
|
||||
const onMockedAccept = jest.fn()
|
||||
await act(async () => {
|
||||
render(wrapDNDIntl(
|
||||
<MarkdownEditor
|
||||
id={'test-id'}
|
||||
text={''}
|
||||
placeholderText={'placeholder'}
|
||||
className={'classname-test'}
|
||||
readonly={false}
|
||||
|
||||
onChange={jest.fn()}
|
||||
onFocus={jest.fn()}
|
||||
|
||||
onBlur={jest.fn()}
|
||||
onAccept={onMockedAccept}
|
||||
/>,
|
||||
))
|
||||
const elementMarkDown = screen.getByRole('textbox', {hidden: true})
|
||||
userEvent.click(elementMarkDown)
|
||||
})
|
||||
const elementsTextArea = screen.getAllByRole('textbox', {hidden: true})
|
||||
expect(elementsTextArea).not.toBeNull()
|
||||
expect(elementsTextArea.length).toBeGreaterThanOrEqual(2)
|
||||
fireEvent.click(elementsTextArea[1])
|
||||
fireEvent.keyDown(elementsTextArea[1], {metaKey: true, keyCode: 13})
|
||||
act(() => {
|
||||
jest.runOnlyPendingTimers()
|
||||
})
|
||||
expect(mockedUtils.log).toBeCalledTimes(1)
|
||||
expect(onMockedAccept).toBeCalledTimes(1)
|
||||
})
|
||||
test('return markdownEditor and verify blur on escape', async () => {
|
||||
const onMockedBlur = jest.fn()
|
||||
await act(async () => {
|
||||
render(wrapDNDIntl(
|
||||
<MarkdownEditor
|
||||
id={'test-id'}
|
||||
text={''}
|
||||
placeholderText={'placeholder'}
|
||||
className={'classname-test'}
|
||||
readonly={false}
|
||||
|
||||
onChange={jest.fn()}
|
||||
onFocus={jest.fn()}
|
||||
|
||||
onBlur={onMockedBlur}
|
||||
onAccept={jest.fn()}
|
||||
/>,
|
||||
))
|
||||
const elementMarkDown = screen.getByRole('textbox', {hidden: true})
|
||||
userEvent.click(elementMarkDown)
|
||||
})
|
||||
const elementsTextArea = screen.getAllByRole('textbox', {hidden: true})
|
||||
expect(elementsTextArea).not.toBeNull()
|
||||
expect(elementsTextArea.length).toBeGreaterThanOrEqual(2)
|
||||
fireEvent.click(elementsTextArea[1])
|
||||
fireEvent.keyDown(elementsTextArea[1], {keyCode: 27})
|
||||
expect(onMockedBlur).toBeCalledTimes(1)
|
||||
})
|
||||
})
|
||||
Loading…
Reference in a new issue