[GH-850] Add unit tests to textElement (#1520)
* chore[GH-#850]: Add unit tests to textElement * fix: add test on elements array
This commit is contained in:
Julien Fabre
GitHub
parent
07cbc522fd
commit
45904613ec
|
|
@ -0,0 +1,267 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`components/content/TextElement return a textElement 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="MarkdownEditor octo-editor "
|
||||
>
|
||||
<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 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;"
|
||||
>
|
||||
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/content/TextElement return a textElement and do a blur event 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="MarkdownEditor octo-editor "
|
||||
>
|
||||
<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; 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>
|
||||
`;
|
||||
94
webapp/src/components/content/textElement.test.tsx
Normal file
94
webapp/src/components/content/textElement.test.tsx
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react'
|
||||
import {render, screen, fireEvent, act} from '@testing-library/react'
|
||||
|
||||
import '@testing-library/jest-dom'
|
||||
|
||||
import {mocked} from 'ts-jest/utils'
|
||||
|
||||
import userEvent from '@testing-library/user-event'
|
||||
|
||||
import {TextBlock} from '../../blocks/textBlock'
|
||||
|
||||
import {mockDOM, wrapDNDIntl} from '../../testUtils'
|
||||
|
||||
import {Utils} from '../../utils'
|
||||
|
||||
import mutator from '../../mutator'
|
||||
|
||||
import TextElement from './textElement'
|
||||
|
||||
jest.mock('../../utils')
|
||||
jest.mock('../../mutator')
|
||||
const mockedUtils = mocked(Utils, true)
|
||||
const mockedMutator = mocked(mutator, true)
|
||||
mockedUtils.createGuid.mockReturnValue('test-id')
|
||||
const defaultBlock: TextBlock = {
|
||||
id: 'test-id',
|
||||
workspaceId: 'test-id',
|
||||
parentId: 'test-id',
|
||||
rootId: 'test-id',
|
||||
modifiedBy: 'test-user-id',
|
||||
schema: 0,
|
||||
type: 'text',
|
||||
title: '',
|
||||
fields: {},
|
||||
createdBy: 'test-user-id',
|
||||
createAt: 0,
|
||||
updateAt: 0,
|
||||
deleteAt: 0,
|
||||
}
|
||||
describe('components/content/TextElement', () => {
|
||||
beforeAll(() => {
|
||||
mockDOM()
|
||||
})
|
||||
|
||||
test('return a textElement', async () => {
|
||||
const component = wrapDNDIntl(
|
||||
<TextElement
|
||||
block={defaultBlock}
|
||||
readonly={false}
|
||||
/>,
|
||||
)
|
||||
|
||||
let container: Element | undefined
|
||||
await act(async () => {
|
||||
const result = render(component)
|
||||
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')
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
test('return a textElement and do a blur event', async () => {
|
||||
const component = wrapDNDIntl(
|
||||
<TextElement
|
||||
block={defaultBlock}
|
||||
readonly={false}
|
||||
/>,
|
||||
)
|
||||
|
||||
let container: Element | undefined
|
||||
let elementMarkDown: Element | undefined
|
||||
|
||||
await act(async () => {
|
||||
const result = render(component)
|
||||
container = result.container
|
||||
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(container).toMatchSnapshot()
|
||||
expect(mockedMutator.changeTitle).toBeCalledTimes(1)
|
||||
})
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user