self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2024-12-24 13:43:12 +02:00
Code Issues Releases Activity

GH-1835: Show Autocomplete Textbox when At Mentioning Users in Comments or Content Section (#1836)

Browse Source
This commit is contained in:
Hossein 2021-11-25 15:10:39 -05:00 committed by GitHub
parent fba5653049
commit 4f9702ac12
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 2349 additions and 2965 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
webapp/cypress/integration/createBoard.ts
View File

@ -51,9 +51,12 @@ describe('Create and delete board / card', () => {
// Change card title
cy.log('**Change card title**')
// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.get('.CardDetail .EditableArea.title').
click().
should('have.focus').
wait(1000).
type(cardTitle).
type('{enter}').
should('have.value', cardTitle)
// Close card dialog

747
webapp/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
webapp/package.json
View File

@ -24,6 +24,9 @@
"updatesnapshots": "jest --updateSnapshot"
},
"dependencies": {
"@draft-js-plugins/editor": "^4.1.0",
"@draft-js-plugins/emoji": "^4.5.5",
"@draft-js-plugins/mention": "^5.0.0",
"@fullcalendar/core": "^5.10.0",
"@fullcalendar/daygrid": "^5.10.0",
"@fullcalendar/interaction": "^5.10.0",
@ -31,7 +34,7 @@
"@mattermost/compass-icons": "^0.1.10",
"@reduxjs/toolkit": "^1.6.0",
"color": "^4.0.0",
"easymde": "^2.15.0",
"draft-js": "^0.11.7",
"emoji-mart": "^3.0.1",
"fullcalendar": "^5.10.0",
"imagemin-gifsicle": "^7.0.0",
@ -55,8 +58,7 @@
"react-intl": "^5.13.5",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-select": "^4.3.0",
"react-simplemde-editor": "^5.0.1"
"react-select": "^4.3.0"
},
"jest": {
"moduleNameMapper": {
@ -85,6 +87,7 @@
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^13.1.9",
"@types/color": "^3.0.2",
"@types/draft-js": "^0.11.6",
"@types/emoji-mart": "^3.0.4",
"@types/jest": "^26.0.21",
"@types/marked": "^2.0.0",

810
webapp/src/components/__snapshots__/cardDialog.test.tsx.snap
View File

@ -306,225 +306,50 @@ exports[`components/cardDialog return cardDialog menu content 1`] = `
>
<div
class="octo-editor-preview octo-placeholder"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="EasyMDEContainer"
class="DraftEditor-editorContainer"
>
<div
class="CodeMirror cm-s-easymde CodeMirror-wrap"
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<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"
data-contents="true"
>
<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;"
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
style="position: relative;"
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<div
class="CodeMirror-lines"
role="presentation"
<span
data-offset-key="123-0-0"
>
<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>
<br
data-text="true"
/>
</span>
</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
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>
@ -551,18 +376,51 @@ exports[`components/cardDialog return cardDialog menu content 1`] = `
>
<div
class="octo-editor-preview octo-placeholder"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="DraftEditor-editorContainer"
>
<div
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<div
data-contents="true"
>
<div
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<span
data-offset-key="123-0-0"
>
<br
data-text="true"
/>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -715,225 +573,50 @@ exports[`components/cardDialog return cardDialog menu content and cancel delete
>
<div
class="octo-editor-preview octo-placeholder"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="EasyMDEContainer"
class="DraftEditor-editorContainer"
>
<div
class="CodeMirror cm-s-easymde CodeMirror-wrap"
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<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"
data-contents="true"
>
<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;"
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
style="position: relative;"
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<div
class="CodeMirror-lines"
role="presentation"
<span
data-offset-key="123-0-0"
>
<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>
<br
data-text="true"
/>
</span>
</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
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>
@ -960,18 +643,51 @@ exports[`components/cardDialog return cardDialog menu content and cancel delete
>
<div
class="octo-editor-preview octo-placeholder"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="DraftEditor-editorContainer"
>
<div
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<div
data-contents="true"
>
<div
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<span
data-offset-key="123-0-0"
>
<br
data-text="true"
/>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -1124,225 +840,50 @@ exports[`components/cardDialog should match snapshot 1`] = `
>
<div
class="octo-editor-preview octo-placeholder"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="EasyMDEContainer"
class="DraftEditor-editorContainer"
>
<div
class="CodeMirror cm-s-easymde CodeMirror-wrap"
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<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"
data-contents="true"
>
<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;"
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
style="position: relative;"
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<div
class="CodeMirror-lines"
role="presentation"
<span
data-offset-key="123-0-0"
>
<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>
<br
data-text="true"
/>
</span>
</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
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>
@ -1369,18 +910,51 @@ exports[`components/cardDialog should match snapshot 1`] = `
>
<div
class="octo-editor-preview octo-placeholder"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="DraftEditor-editorContainer"
>
<div
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<div
data-contents="true"
>
<div
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<span
data-offset-key="123-0-0"
>
<br
data-text="true"
/>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

735
webapp/src/components/__snapshots__/centerPanel.test.tsx.snap
View File

@ -88,18 +88,53 @@ exports[`components/centerPanel return centerPanel and click on card to show car
>
<div
class="octo-editor-preview"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="DraftEditor-editorContainer"
>
<div
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<div
data-contents="true"
>
<div
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<span
data-offset-key="123-0-0"
>
<span
data-text="true"
>
description
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -608,18 +643,53 @@ exports[`components/centerPanel return centerPanel and click on new card to edit
>
<div
class="octo-editor-preview"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="DraftEditor-editorContainer"
>
<div
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<div
data-contents="true"
>
<div
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<span
data-offset-key="123-0-0"
>
<span
data-text="true"
>
description
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -1176,18 +1246,53 @@ exports[`components/centerPanel return centerPanel and press touch 1 with readon
>
<div
class="octo-editor-preview"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="DraftEditor-editorContainer"
>
<div
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<div
data-contents="true"
>
<div
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<span
data-offset-key="123-0-0"
>
<span
data-text="true"
>
description
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -1600,18 +1705,53 @@ exports[`components/centerPanel return centerPanel and press touch ctrl+d for on
>
<div
class="octo-editor-preview"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="DraftEditor-editorContainer"
>
<div
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<div
data-contents="true"
>
<div
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<span
data-offset-key="123-0-0"
>
<span
data-text="true"
>
description
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -2184,18 +2324,53 @@ exports[`components/centerPanel return centerPanel and press touch del for one c
>
<div
class="octo-editor-preview"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="DraftEditor-editorContainer"
>
<div
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<div
data-contents="true"
>
<div
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<span
data-offset-key="123-0-0"
>
<span
data-text="true"
>
description
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -2768,18 +2943,53 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
>
<div
class="octo-editor-preview"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="DraftEditor-editorContainer"
>
<div
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<div
data-contents="true"
>
<div
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<span
data-offset-key="123-0-0"
>
<span
data-text="true"
>
description
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -3352,18 +3562,53 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
>
<div
class="octo-editor-preview"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="DraftEditor-editorContainer"
>
<div
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<div
data-contents="true"
>
<div
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<span
data-offset-key="123-0-0"
>
<span
data-text="true"
>
description
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -3936,18 +4181,53 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
>
<div
class="octo-editor-preview"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="DraftEditor-editorContainer"
>
<div
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<div
data-contents="true"
>
<div
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<span
data-offset-key="123-0-0"
>
<span
data-text="true"
>
description
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -4520,18 +4800,53 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
>
<div
class="octo-editor-preview"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="DraftEditor-editorContainer"
>
<div
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<div
data-contents="true"
>
<div
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<span
data-offset-key="123-0-0"
>
<span
data-text="true"
>
description
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -5104,18 +5419,53 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
>
<div
class="octo-editor-preview"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="DraftEditor-editorContainer"
>
<div
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<div
data-contents="true"
>
<div
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<span
data-offset-key="123-0-0"
>
<span
data-text="true"
>
description
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -5688,18 +6038,53 @@ exports[`components/centerPanel return centerPanel and select one card and click
>
<div
class="octo-editor-preview"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="DraftEditor-editorContainer"
>
<div
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<div
data-contents="true"
>
<div
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<span
data-offset-key="123-0-0"
>
<span
data-text="true"
>
description
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -6272,18 +6657,53 @@ exports[`components/centerPanel return centerPanel and select one card and click
>
<div
class="octo-editor-preview"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="DraftEditor-editorContainer"
>
<div
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<div
data-contents="true"
>
<div
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<span
data-offset-key="123-0-0"
>
<span
data-text="true"
>
description
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -6856,18 +7276,53 @@ exports[`components/centerPanel should match snapshot for Gallery 1`] = `
>
<div
class="octo-editor-preview"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="DraftEditor-editorContainer"
>
<div
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<div
data-contents="true"
>
<div
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<span
data-offset-key="123-0-0"
>
<span
data-text="true"
>
description
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -7110,18 +7565,53 @@ exports[`components/centerPanel should match snapshot for Kanban 1`] = `
>
<div
class="octo-editor-preview"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="DraftEditor-editorContainer"
>
<div
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<div
data-contents="true"
>
<div
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<span
data-offset-key="123-0-0"
>
<span
data-text="true"
>
description
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -7598,18 +8088,53 @@ exports[`components/centerPanel should match snapshot for Table 1`] = `
>
<div
class="octo-editor-preview"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="DraftEditor-editorContainer"
>
<div
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<div
data-contents="true"
>
<div
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<span
data-offset-key="123-0-0"
>
<span
data-text="true"
>
description
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

119
webapp/src/components/__snapshots__/contentBlock.test.tsx.snap
View File

@ -435,121 +435,52 @@ exports[`components/contentBlock should match snapshot with textBlock 1`] = `
>
<div
class="octo-editor-preview"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="EasyMDEContainer"
class="DraftEditor-editorContainer"
>
<div
class="CodeMirror cm-s-easymde CodeMirror-wrap"
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<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"
data-contents="true"
>
<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;"
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
style="position: relative;"
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<div
class="CodeMirror-lines"
role="presentation"
<span
data-offset-key="123-0-0"
>
<div
role="presentation"
style="position: relative; outline: none;"
<span
data-text="true"
>
<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>
title
</span>
</span>
</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>

559
webapp/src/components/__snapshots__/markdownEditor.test.tsx.snap
View File

@ -1,273 +1,5 @@
// 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
@ -275,121 +7,222 @@ exports[`components/markdownEditor should match snapshot 1`] = `
>
<div
class="octo-editor-preview octo-placeholder"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="EasyMDEContainer"
class="DraftEditor-editorContainer"
>
<div
class="CodeMirror cm-s-easymde CodeMirror-wrap"
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<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"
data-contents="true"
>
<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;"
class=""
data-block="true"
data-editor="test-id"
data-offset-key="123-0-0"
>
<div
style="position: relative;"
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<div
class="CodeMirror-lines"
role="presentation"
<span
data-offset-key="123-0-0"
>
<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>
<br
data-text="true"
/>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`components/markdownEditor should match snapshot with initial text 1`] = `
<div>
<div
class="MarkdownEditor octo-editor classname-test "
>
<div
class="octo-editor-preview"
data-testid="preview-element"
/>
<div
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
class="DraftEditor-root"
>
<div
class="DraftEditor-editorContainer"
>
<div
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<div
data-contents="true"
>
<div
class=""
data-block="true"
data-editor="test-id"
data-offset-key="123-0-0"
>
<div
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<span
data-offset-key="123-0-0"
>
<span
data-text="true"
>
some initial text already set
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`components/markdownEditor should match snapshot with on click on preview element 1`] = `
<div>
<div
class="MarkdownEditor octo-editor classname-test active"
>
<div
class="MarkdownEditorInput"
>
<div
class="DraftEditor-root"
>
<div
class="DraftEditor-editorContainer"
>
<div
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<div
data-contents="true"
>
<div
class=""
data-block="true"
data-editor="test-id"
data-offset-key="123-0-0"
>
<div
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<span
data-offset-key="123-0-0"
>
<span
data-text="true"
>
some initial text already set
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`components/markdownEditor should match snapshot with on click on preview element and then click out of it 1`] = `
<div>
<div
class="MarkdownEditor octo-editor classname-test active"
>
<div
class="MarkdownEditorInput"
>
<div
class="DraftEditor-root"
>
<div
class="DraftEditor-editorContainer"
>
<div
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<div
data-contents="true"
>
<div
class=""
data-block="true"
data-editor="test-id"
data-offset-key="123-0-0"
>
<div
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<span
data-offset-key="123-0-0"
>
<span
data-text="true"
>
some initial text already set
</span>
</span>
</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>

360
webapp/src/components/__snapshots__/viewTitle.test.tsx.snap
View File

@ -174,122 +174,52 @@ exports[`components/viewTitle should match snapshot 1`] = `
>
<div
class="octo-editor-preview"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="EasyMDEContainer"
class="DraftEditor-editorContainer"
>
<div
class="CodeMirror cm-s-easymde CodeMirror-wrap"
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<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"
style="display: block; bottom: 0px;"
tabindex="-1"
data-contents="true"
>
<div
style="min-width: 1px; height: 53px;"
/>
</div>
<div
class="CodeMirror-hscrollbar"
cm-not-content="true"
tabindex="-1"
>
<div
style="height: 100%; min-height: 1px; width: 0px;"
/>
</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; padding-right: 0px; padding-bottom: 0px;"
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
style="position: relative;"
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<div
class="CodeMirror-lines"
role="presentation"
<span
data-offset-key="123-0-0"
>
<div
role="presentation"
style="position: relative; outline: none;"
<span
data-text="true"
>
<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>
description
</span>
</span>
</div>
</div>
<div
style="position: absolute; height: 50px; width: 1px; border-bottom: 0px solid transparent;"
/>
<div
class="CodeMirror-gutters"
style="display: none;"
/>
</div>
</div>
<div
class="editor-preview-side editor-preview"
/>
</div>
</div>
</div>
@ -344,122 +274,52 @@ exports[`components/viewTitle should match snapshot readonly 1`] = `
>
<div
class="octo-editor-preview"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="EasyMDEContainer"
class="DraftEditor-editorContainer"
>
<div
class="CodeMirror cm-s-easymde CodeMirror-wrap"
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<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"
style="display: block; bottom: 0px;"
tabindex="-1"
data-contents="true"
>
<div
style="min-width: 1px; height: 53px;"
/>
</div>
<div
class="CodeMirror-hscrollbar"
cm-not-content="true"
tabindex="-1"
>
<div
style="height: 100%; min-height: 1px; width: 0px;"
/>
</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; padding-right: 0px; padding-bottom: 0px;"
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
style="position: relative;"
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<div
class="CodeMirror-lines"
role="presentation"
<span
data-offset-key="123-0-0"
>
<div
role="presentation"
style="position: relative; outline: none;"
<span
data-text="true"
>
<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>
description
</span>
</span>
</div>
</div>
<div
style="position: absolute; height: 50px; width: 1px; border-bottom: 0px solid transparent;"
/>
<div
class="CodeMirror-gutters"
style="display: none;"
/>
</div>
</div>
<div
class="editor-preview-side editor-preview"
/>
</div>
</div>
</div>
@ -530,122 +390,52 @@ exports[`components/viewTitle show description 1`] = `
>
<div
class="octo-editor-preview"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="EasyMDEContainer"
class="DraftEditor-editorContainer"
>
<div
class="CodeMirror cm-s-easymde CodeMirror-wrap"
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<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"
style="display: block; bottom: 0px;"
tabindex="-1"
data-contents="true"
>
<div
style="min-width: 1px; height: 53px;"
/>
</div>
<div
class="CodeMirror-hscrollbar"
cm-not-content="true"
tabindex="-1"
>
<div
style="height: 100%; min-height: 1px; width: 0px;"
/>
</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; padding-right: 0px; padding-bottom: 0px;"
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
style="position: relative;"
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<div
class="CodeMirror-lines"
role="presentation"
<span
data-offset-key="123-0-0"
>
<div
role="presentation"
style="position: relative; outline: none;"
<span
data-text="true"
>
<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>
description
</span>
</span>
</div>
</div>
<div
style="position: absolute; height: 50px; width: 1px; border-bottom: 0px solid transparent;"
/>
<div
class="CodeMirror-gutters"
style="display: none;"
/>
</div>
</div>
<div
class="editor-preview-side editor-preview"
/>
</div>
</div>
</div>

496
webapp/src/components/__snapshots__/workspace.test.tsx.snap
View File

@ -311,126 +311,52 @@ exports[`src/components/workspace return workspace and showcard 1`] = `
>
<div
class="octo-editor-preview"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="EasyMDEContainer"
class="DraftEditor-editorContainer"
>
<div
class="CodeMirror cm-s-easymde CodeMirror-wrap"
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<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"
style="display: block; bottom: 0px;"
tabindex="-1"
data-contents="true"
>
<div
style="min-width: 1px; height: 53px;"
/>
</div>
<div
class="CodeMirror-hscrollbar"
cm-not-content="true"
tabindex="-1"
>
<div
style="height: 100%; min-height: 1px; width: 0px;"
/>
</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; padding-right: 0px; padding-bottom: 0px;"
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
style="position: relative;"
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<div
class="CodeMirror-lines"
role="presentation"
<span
data-offset-key="123-0-0"
>
<div
role="presentation"
style="position: relative; outline: none;"
<span
data-text="true"
>
<div
class="CodeMirror-measure"
/>
<div
class="CodeMirror-measure"
>
<pre
class="CodeMirror-line"
role="presentation"
>
<span
role="presentation"
style="padding-right: .1px;"
>
description
</span>
</pre>
</div>
<div
style="position: relative; z-index: 1;"
/>
<div
class="CodeMirror-cursors"
/>
<div
class="CodeMirror-code"
role="presentation"
/>
</div>
</div>
description
</span>
</span>
</div>
</div>
<div
style="position: absolute; height: 50px; width: 1px; border-bottom: 0px solid transparent;"
/>
<div
class="CodeMirror-gutters"
style="display: none;"
/>
</div>
</div>
<div
class="editor-preview-side editor-preview"
/>
</div>
</div>
</div>
@ -929,126 +855,52 @@ exports[`src/components/workspace return workspace readonly and showcard 1`] = `
>
<div
class="octo-editor-preview"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="EasyMDEContainer"
class="DraftEditor-editorContainer"
>
<div
class="CodeMirror cm-s-easymde CodeMirror-wrap"
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<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"
style="display: block; bottom: 0px;"
tabindex="-1"
data-contents="true"
>
<div
style="min-width: 1px; height: 53px;"
/>
</div>
<div
class="CodeMirror-hscrollbar"
cm-not-content="true"
tabindex="-1"
>
<div
style="height: 100%; min-height: 1px; width: 0px;"
/>
</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; padding-right: 0px; padding-bottom: 0px;"
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
style="position: relative;"
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<div
class="CodeMirror-lines"
role="presentation"
<span
data-offset-key="123-0-0"
>
<div
role="presentation"
style="position: relative; outline: none;"
<span
data-text="true"
>
<div
class="CodeMirror-measure"
/>
<div
class="CodeMirror-measure"
>
<pre
class="CodeMirror-line"
role="presentation"
>
<span
role="presentation"
style="padding-right: .1px;"
>
description
</span>
</pre>
</div>
<div
style="position: relative; z-index: 1;"
/>
<div
class="CodeMirror-cursors"
/>
<div
class="CodeMirror-code"
role="presentation"
/>
</div>
</div>
description
</span>
</span>
</div>
</div>
<div
style="position: absolute; height: 50px; width: 1px; border-bottom: 0px solid transparent;"
/>
<div
class="CodeMirror-gutters"
style="display: none;"
/>
</div>
</div>
<div
class="editor-preview-side editor-preview"
/>
</div>
</div>
</div>
@ -1597,126 +1449,52 @@ exports[`src/components/workspace should match snapshot 1`] = `
>
<div
class="octo-editor-preview"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="EasyMDEContainer"
class="DraftEditor-editorContainer"
>
<div
class="CodeMirror cm-s-easymde CodeMirror-wrap"
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<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"
style="display: block; bottom: 0px;"
tabindex="-1"
data-contents="true"
>
<div
style="min-width: 1px; height: 53px;"
/>
</div>
<div
class="CodeMirror-hscrollbar"
cm-not-content="true"
tabindex="-1"
>
<div
style="height: 100%; min-height: 1px; width: 0px;"
/>
</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; padding-right: 0px; padding-bottom: 0px;"
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
style="position: relative;"
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<div
class="CodeMirror-lines"
role="presentation"
<span
data-offset-key="123-0-0"
>
<div
role="presentation"
style="position: relative; outline: none;"
<span
data-text="true"
>
<div
class="CodeMirror-measure"
/>
<div
class="CodeMirror-measure"
>
<pre
class="CodeMirror-line"
role="presentation"
>
<span
role="presentation"
style="padding-right: .1px;"
>
description
</span>
</pre>
</div>
<div
style="position: relative; z-index: 1;"
/>
<div
class="CodeMirror-cursors"
/>
<div
class="CodeMirror-code"
role="presentation"
/>
</div>
</div>
description
</span>
</span>
</div>
</div>
<div
style="position: absolute; height: 50px; width: 1px; border-bottom: 0px solid transparent;"
/>
<div
class="CodeMirror-gutters"
style="display: none;"
/>
</div>
</div>
<div
class="editor-preview-side editor-preview"
/>
</div>
</div>
</div>
@ -2215,126 +1993,52 @@ exports[`src/components/workspace should match snapshot with readonly 1`] = `
>
<div
class="octo-editor-preview"
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="EasyMDEContainer"
class="DraftEditor-editorContainer"
>
<div
class="CodeMirror cm-s-easymde CodeMirror-wrap"
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<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"
style="display: block; bottom: 0px;"
tabindex="-1"
data-contents="true"
>
<div
style="min-width: 1px; height: 53px;"
/>
</div>
<div
class="CodeMirror-hscrollbar"
cm-not-content="true"
tabindex="-1"
>
<div
style="height: 100%; min-height: 1px; width: 0px;"
/>
</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; padding-right: 0px; padding-bottom: 0px;"
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
style="position: relative;"
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<div
class="CodeMirror-lines"
role="presentation"
<span
data-offset-key="123-0-0"
>
<div
role="presentation"
style="position: relative; outline: none;"
<span
data-text="true"
>
<div
class="CodeMirror-measure"
/>
<div
class="CodeMirror-measure"
>
<pre
class="CodeMirror-line"
role="presentation"
>
<span
role="presentation"
style="padding-right: .1px;"
>
description
</span>
</pre>
</div>
<div
style="position: relative; z-index: 1;"
/>
<div
class="CodeMirror-cursors"
/>
<div
class="CodeMirror-code"
role="presentation"
/>
</div>
</div>
description
</span>
</span>
</div>
</div>
<div
style="position: absolute; height: 50px; width: 1px; border-bottom: 0px solid transparent;"
/>
<div
class="CodeMirror-gutters"
style="display: none;"
/>
</div>
</div>
<div
class="editor-preview-side editor-preview"
/>
</div>
</div>
</div>

269
webapp/src/components/cardDetail/__snapshots__/cardDetailContents.test.tsx.snap
View File

@ -16,125 +16,54 @@ exports[`components/cardDetail/cardDetailContents should match snapshot 1`] = `
>
<div
class="octo-editor-preview octo-placeholder"
data-testid="preview-element"
>
<p>
Add a description...
</p>
</div>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="EasyMDEContainer"
class="DraftEditor-editorContainer"
>
<div
class="CodeMirror cm-s-easymde CodeMirror-wrap"
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<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"
data-contents="true"
>
<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;"
class=""
data-block="true"
data-editor="test-id"
data-offset-key="123-0-0"
>
<div
style="position: relative;"
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<div
class="CodeMirror-lines"
role="presentation"
<span
data-offset-key="123-0-0"
>
<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>
<br
data-text="true"
/>
</span>
</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>
@ -599,156 +528,6 @@ exports[`components/cardDetail/cardDetailContents should match snapshot after dr
</div>
`;
exports[`components/cardDetail/cardDetailContents should match snapshot after onBlur triggers 1`] = `
<div>
<div
class="octo-content CardDetailContents"
>
<div
class="octo-block"
>
<div
class="octo-block-margin"
/>
<div
class="MarkdownEditor octo-editor active"
>
<div
class="octo-editor-preview octo-placeholder"
style="display: none;"
>
<p>
Add a description...
</p>
</div>
<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"
style="display: block; bottom: 0px;"
tabindex="-1"
>
<div
style="min-width: 1px; height: 52px;"
/>
</div>
<div
class="CodeMirror-hscrollbar"
cm-not-content="true"
tabindex="-1"
>
<div
style="height: 100%; min-height: 1px; width: 0px;"
/>
</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; padding-right: 0px; padding-bottom: 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;"
>
test123
</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; border-bottom: 0px solid transparent;"
/>
<div
class="CodeMirror-gutters"
style="display: none;"
/>
</div>
</div>
<div
class="editor-preview-side editor-preview"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`components/cardDetail/cardDetailContents should match snapshot with contents array 1`] = `
<div>
<div

71
webapp/src/components/cardDetail/cardDetailContents.test.tsx
View File

@ -1,6 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {ReactElement, ReactNode} from 'react'
import {Provider as ReduxProvider} from 'react-redux'
import {fireEvent, render} from '@testing-library/react'
@ -8,12 +9,13 @@ import {act} from 'react-dom/test-utils'
import {TestBlockFactory} from '../../test/testBlockFactory'
import {mockDOM, wrapDNDIntl} from '../../testUtils'
import {mockDOM, wrapDNDIntl, mockStateStore} from '../../testUtils'
import CardDetailContents from './cardDetailContents'
import {CardDetailProvider} from './cardDetailContext'
global.fetch = jest.fn()
jest.mock('draft-js/lib/generateRandomKey', () => () => '123')
beforeAll(() => {
mockDOM()
@ -48,11 +50,25 @@ describe('components/cardDetail/cardDetailContents', () => {
const card = TestBlockFactory.createCard(board)
const state = {
users: {
workspaceUsers: {
1: {username: 'abc'},
2: {username: 'd'},
3: {username: 'e'},
4: {username: 'f'},
5: {username: 'g'},
},
},
}
const store = mockStateStore([], state)
const wrap = (child: ReactNode): ReactElement => (
wrapDNDIntl(
<CardDetailProvider card={card}>
{child}
</CardDetailProvider>,
<ReduxProvider store={store}>
<CardDetailProvider card={card}>
{child}
</CardDetailProvider>
</ReduxProvider>,
)
)
@ -93,52 +109,6 @@ describe('components/cardDetail/cardDetailContents', () => {
expect(container).toMatchSnapshot()
})
test('should match snapshot after onBlur triggers', async () => {
const component = wrap((
<CardDetailContents
id='test-id'
card={card}
contents={[]}
readonly={false}
/>
))
let container: Element | undefined
await act(async () => {
const result = render(component)
container = result.container
})
const markdownEditorField = container!.querySelector('.octo-editor-preview.octo-placeholder')
expect(markdownEditorField).toBeDefined()
fireEvent.click(markdownEditorField!)
const onFocusEvent = new FocusEvent('focus', {
view: window,
bubbles: true,
cancelable: true,
})
const onBlurEvent = new FocusEvent('blur', {
view: window,
bubbles: true,
cancelable: true,
})
const textareaContainer = container!.querySelectorAll('.CodeMirror.cm-s-easymde.CodeMirror-wrap')
const textarea = textareaContainer[textareaContainer.length - 1].querySelector('textarea')
await act(async () => {
textarea!.dispatchEvent(onFocusEvent)
fireEvent.input(textarea!, {target: {value: 'test123'}})
fireEvent.keyPress(textarea!, {key: 'Escape', code: 'Escape'})
textarea!.dispatchEvent(onBlurEvent)
})
// TODO: Remove this hack if we get rid of codemirror/simpleMDE.
await new Promise((r) => setTimeout(r, 100))
expect(container).toMatchSnapshot()
})
test('should match snapshot with contents array that has array inside it', async () => {
const contents = [TestBlockFactory.createDivider(card), [TestBlockFactory.createDivider(card), TestBlockFactory.createDivider(card)]]
const component = wrap((
@ -149,7 +119,6 @@ describe('components/cardDetail/cardDetailContents', () => {
readonly={false}
/>
))
let container: Element | undefined
await act(async () => {
const result = render(component)

1
webapp/src/components/cardDetail/commentsList.tsx
View File

@ -60,7 +60,6 @@ const CommentsList = React.memo((props: Props) => {
setNewComment(value)
}
}}
onAccept={onSendClicked}
/>
{newComment &&

11
webapp/src/components/cardDialog.test.tsx
View File

@ -18,6 +18,8 @@ import CardDialog from './cardDialog'
jest.mock('../mutator')
jest.mock('../utils')
jest.mock('draft-js/lib/generateRandomKey', () => () => '123')
const mockedUtils = mocked(Utils, true)
const mockedMutator = mocked(mutator, true)
mockedUtils.createGuid.mockReturnValue('test-id')
@ -46,6 +48,15 @@ describe('components/cardDialog', () => {
[card.id]: card,
},
},
users: {
workspaceUsers: {
1: {username: 'abc'},
2: {username: 'd'},
3: {username: 'e'},
4: {username: 'f'},
5: {username: 'g'},
},
},
}
const store = mockStateStore([], state)
beforeEach(() => {

1
webapp/src/components/centerPanel.test.tsx
View File

@ -18,6 +18,7 @@ Object.defineProperty(Constants, 'versionString', {value: '1.0.0'})
jest.mock('../utils')
jest.mock('../mutator')
jest.mock('../telemetry/telemetryClient')
jest.mock('draft-js/lib/generateRandomKey', () => () => '123')
const mockedUtils = mocked(Utils, true)
const mockedMutator = mocked(Mutator, true)
mockedUtils.createGuid.mockReturnValue('test-id')

258
webapp/src/components/content/__snapshots__/textElement.test.tsx.snap
View File

@ -1,266 +1,56 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/content/TextElement return a textElement 1`] = `
<div>
<div
class="MarkdownEditor octo-editor 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;"
>
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"
style=""
data-testid="preview-element"
/>
<div
class="octo-editor-active Editor"
style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
class="MarkdownEditorInput MarkdownEditorInput--IsNotEditing"
>
<div
id="test-id-wrapper"
class="DraftEditor-root"
>
<textarea
id="test-id"
style="display: none;"
/>
<div
class="EasyMDEContainer"
class="DraftEditor-editorContainer"
>
<div
class="CodeMirror cm-s-easymde CodeMirror-wrap"
aria-autocomplete="list"
aria-expanded="false"
class="notranslate public-DraftEditor-content"
contenteditable="true"
role="combobox"
spellcheck="false"
style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;"
>
<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"
data-contents="true"
>
<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;"
class=""
data-block="true"
data-editor="123"
data-offset-key="123-0-0"
>
<div
style="position: relative;"
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
data-offset-key="123-0-0"
>
<div
class="CodeMirror-lines"
role="presentation"
<span
data-offset-key="123-0-0"
>
<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>
<br
data-text="true"
/>
</span>
</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>

65
webapp/src/components/content/textElement.test.tsx
View File

@ -2,28 +2,25 @@
// See LICENSE.txt for license information.
import React from 'react'
import {render, screen, fireEvent, act} from '@testing-library/react'
import {render, act} from '@testing-library/react'
import {Provider as ReduxProvider} from 'react-redux'
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 {mockDOM, wrapDNDIntl, mockStateStore} from '../../testUtils'
import {Utils} from '../../utils'
import mutator from '../../mutator'
import TextElement from './textElement'
jest.mock('../../utils')
jest.mock('../../mutator')
jest.mock('draft-js/lib/generateRandomKey', () => () => '123')
const mockedUtils = mocked(Utils, true)
const mockedMutator = mocked(mutator, true)
mockedUtils.createGuid.mockReturnValue('test-id')
const defaultBlock: TextBlock = {
id: 'test-id',
@ -45,50 +42,34 @@ describe('components/content/TextElement', () => {
mockDOM()
})
const state = {
users: {
workspaceUsers: {
1: {username: 'abc'},
2: {username: 'd'},
3: {username: 'e'},
4: {username: 'f'},
5: {username: 'g'},
},
},
}
const store = mockStateStore([], state)
test('return a textElement', async () => {
const component = wrapDNDIntl(
<TextElement
block={defaultBlock}
readonly={false}
/>,
<ReduxProvider store={store}>
<TextElement
block={defaultBlock}
readonly={false}
/>
</ReduxProvider>,
)
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)
})
})

229
webapp/src/components/contentBlock.test.tsx
View File

@ -4,14 +4,15 @@
import '@testing-library/jest-dom'
import {act, render, screen} from '@testing-library/react'
import React from 'react'
import React, {ReactNode, ReactElement} from 'react'
import {mocked} from 'ts-jest/utils'
import {Provider as ReduxProvider} from 'react-redux'
import userEvent from '@testing-library/user-event'
import {Utils} from '../utils'
import {TestBlockFactory} from '../test/testBlockFactory'
import {mockDOM, wrapDNDIntl} from '../testUtils'
import {mockDOM, wrapDNDIntl, mockStateStore} from '../testUtils'
import mutator from '../mutator'
@ -23,6 +24,7 @@ import {CardDetailContext, CardDetailContextType} from './cardDetail/cardDetailC
jest.mock('../mutator')
jest.mock('../utils')
jest.mock('../octoClient')
jest.mock('draft-js/lib/generateRandomKey', () => () => '123')
beforeAll(mockDOM)
@ -64,22 +66,43 @@ describe('components/contentBlock', () => {
addBlock: jest.fn(),
})
const state = {
users: {
workspaceUsers: {
1: {username: 'abc'},
2: {username: 'd'},
3: {username: 'e'},
4: {username: 'f'},
5: {username: 'g'},
},
},
}
const store = mockStateStore([], state)
const wrap = (child: ReactNode): ReactElement => (
wrapDNDIntl(
<ReduxProvider store={store}>
<CardDetailContext.Provider value={cardDetailContextValue(true)}>
{child}
</CardDetailContext.Provider>
</ReduxProvider>,
)
)
beforeEach(jest.clearAllMocks)
test('should match snapshot with textBlock', async () => {
let container
await act(async () => {
const result = render(wrapDNDIntl(
<CardDetailContext.Provider value={cardDetailContextValue(true)}>
<ContentBlock
block={textBlock}
card={card}
readonly={false}
onDrop={jest.fn()}
width={undefined}
cords={{x: 1, y: 0, z: 0}}
/>
</CardDetailContext.Provider>,
const result = render(wrap(
<ContentBlock
block={textBlock}
card={card}
readonly={false}
onDrop={jest.fn()}
width={undefined}
cords={{x: 1, y: 0, z: 0}}
/>,
))
container = result.container
})
@ -89,17 +112,15 @@ describe('components/contentBlock', () => {
test('should match snapshot with dividerBlock', async () => {
let container
await act(async () => {
const result = render(wrapDNDIntl(
<CardDetailContext.Provider value={cardDetailContextValue(true)}>
<ContentBlock
block={dividerBlock}
card={card}
readonly={false}
onDrop={jest.fn()}
width={undefined}
cords={{x: 1, y: 0, z: 0}}
/>
</CardDetailContext.Provider>,
const result = render(wrap(
<ContentBlock
block={dividerBlock}
card={card}
readonly={false}
onDrop={jest.fn()}
width={undefined}
cords={{x: 1, y: 0, z: 0}}
/>,
))
container = result.container
})
@ -109,17 +130,15 @@ describe('components/contentBlock', () => {
test('should match snapshot with commentBlock', async () => {
let container
await act(async () => {
const result = render(wrapDNDIntl(
<CardDetailContext.Provider value={cardDetailContextValue(true)}>
<ContentBlock
block={commentBlock}
card={card}
readonly={false}
onDrop={jest.fn()}
width={undefined}
cords={{x: 1, y: 0, z: 0}}
/>
</CardDetailContext.Provider>,
const result = render(wrap(
<ContentBlock
block={commentBlock}
card={card}
readonly={false}
onDrop={jest.fn()}
width={undefined}
cords={{x: 1, y: 0, z: 0}}
/>,
))
container = result.container
})
@ -129,17 +148,15 @@ describe('components/contentBlock', () => {
test('should match snapshot with imageBlock', async () => {
let container
await act(async () => {
const result = render(wrapDNDIntl(
<CardDetailContext.Provider value={cardDetailContextValue(true)}>
<ContentBlock
block={imageBlock}
card={card}
readonly={false}
onDrop={jest.fn()}
width={undefined}
cords={{x: 1, y: 0, z: 0}}
/>
</CardDetailContext.Provider>,
const result = render(wrap(
<ContentBlock
block={imageBlock}
card={card}
readonly={false}
onDrop={jest.fn()}
width={undefined}
cords={{x: 1, y: 0, z: 0}}
/>,
))
container = result.container
})
@ -149,17 +166,15 @@ describe('components/contentBlock', () => {
test('should match snapshot with commentBlock readonly', async () => {
let container
await act(async () => {
const result = render(wrapDNDIntl(
<CardDetailContext.Provider value={cardDetailContextValue(true)}>
<ContentBlock
block={commentBlock}
card={card}
readonly={true}
onDrop={jest.fn()}
width={undefined}
cords={{x: 1, y: 0, z: 0}}
/>
</CardDetailContext.Provider>,
const result = render(wrap(
<ContentBlock
block={commentBlock}
card={card}
readonly={true}
onDrop={jest.fn()}
width={undefined}
cords={{x: 1, y: 0, z: 0}}
/>,
))
container = result.container
})
@ -169,17 +184,15 @@ describe('components/contentBlock', () => {
test('return commentBlock and click on menuwrapper', async () => {
let container
await act(async () => {
const result = render(wrapDNDIntl(
<CardDetailContext.Provider value={cardDetailContextValue(true)}>
<ContentBlock
block={commentBlock}
card={card}
readonly={false}
onDrop={jest.fn()}
width={undefined}
cords={{x: 1, y: 0, z: 0}}
/>
</CardDetailContext.Provider>,
const result = render(wrap(
<ContentBlock
block={commentBlock}
card={card}
readonly={false}
onDrop={jest.fn()}
width={undefined}
cords={{x: 1, y: 0, z: 0}}
/>,
))
container = result.container
})
@ -191,17 +204,15 @@ describe('components/contentBlock', () => {
test('return commentBlock and click move up', async () => {
await act(async () => {
render(wrapDNDIntl(
<CardDetailContext.Provider value={cardDetailContextValue(true)}>
<ContentBlock
block={commentBlock}
card={card}
readonly={false}
onDrop={jest.fn()}
width={undefined}
cords={{x: 1, y: 0, z: 0}}
/>
</CardDetailContext.Provider>,
render(wrap(
<ContentBlock
block={commentBlock}
card={card}
readonly={false}
onDrop={jest.fn()}
width={undefined}
cords={{x: 1, y: 0, z: 0}}
/>,
))
})
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
@ -214,17 +225,15 @@ describe('components/contentBlock', () => {
test('return commentBlock and click move down', async () => {
await act(async () => {
render(wrapDNDIntl(
<CardDetailContext.Provider value={cardDetailContextValue(true)}>
<ContentBlock
block={commentBlock}
card={card}
readonly={false}
onDrop={jest.fn()}
width={undefined}
cords={{x: 1, y: 0, z: 0}}
/>
</CardDetailContext.Provider>,
render(wrap(
<ContentBlock
block={commentBlock}
card={card}
readonly={false}
onDrop={jest.fn()}
width={undefined}
cords={{x: 1, y: 0, z: 0}}
/>,
))
})
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
@ -237,17 +246,15 @@ describe('components/contentBlock', () => {
test('return commentBlock and click delete', async () => {
await act(async () => {
render(wrapDNDIntl(
<CardDetailContext.Provider value={cardDetailContextValue(true)}>
<ContentBlock
block={commentBlock}
card={card}
readonly={false}
onDrop={jest.fn()}
width={undefined}
cords={{x: 1, y: -1, z: 0}}
/>
</CardDetailContext.Provider>,
render(wrap(
<ContentBlock
block={commentBlock}
card={card}
readonly={false}
onDrop={jest.fn()}
width={undefined}
cords={{x: 1, y: -1, z: 0}}
/>,
))
})
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
@ -260,17 +267,15 @@ describe('components/contentBlock', () => {
test('return commentBlock and click delete with another contentOrder', async () => {
card.fields.contentOrder = [[textBlock.id], [dividerBlock.id], [commentBlock.id]]
await act(async () => {
render(wrapDNDIntl(
<CardDetailContext.Provider value={cardDetailContextValue(true)}>
<ContentBlock
block={commentBlock}
card={card}
readonly={false}
onDrop={jest.fn()}
width={undefined}
cords={{x: 1, y: 0, z: 0}}
/>
</CardDetailContext.Provider>,
render(wrap(
<ContentBlock
block={commentBlock}
card={card}
readonly={false}
onDrop={jest.fn()}
width={undefined}
cords={{x: 1, y: 0, z: 0}}
/>,
))
})
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})

204
webapp/src/components/markdownEditor.test.tsx
View File

@ -3,170 +3,130 @@
import {act, fireEvent, render, screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import React from 'react'
import {Provider as ReduxProvider} from 'react-redux'
import {mocked} from 'ts-jest/utils'
import {mockDOM, wrapDNDIntl} from '../testUtils'
import {Utils} from '../utils'
import {mockDOM, wrapDNDIntl, mockStateStore} from '../testUtils'
import {MarkdownEditor} from './markdownEditor'
jest.mock('../utils')
const mockedUtils = mocked(Utils, true)
jest.useFakeTimers()
jest.mock('draft-js/lib/generateRandomKey', () => () => '123')
describe('components/markdownEditor', () => {
beforeAll(mockDOM)
beforeEach(jest.clearAllMocks)
const state = {
users: {
workspaceUsers: {
1: {username: 'abc'},
2: {username: 'd'},
3: {username: 'e'},
4: {username: 'f'},
5: {username: 'g'},
},
},
}
const store = mockStateStore([], state)
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()}
/>,
<ReduxProvider store={store}>
<MarkdownEditor
id={'test-id'}
text={''}
placeholderText={'placeholder'}
className={'classname-test'}
readonly={false}
onChange={jest.fn()}
onFocus={jest.fn()}
onBlur={jest.fn()}
/>
</ReduxProvider>,
))
container = result.container
})
expect(container).toMatchSnapshot()
})
test('return markdownEditor, write hello and verify blur', async () => {
const onMockedBlur = jest.fn()
test('should match snapshot with initial text', async () => {
let container
await act(async () => {
const result = render(wrapDNDIntl(
<MarkdownEditor
id={'test-id'}
text={''}
placeholderText={'placeholder'}
className={'classname-test'}
readonly={false}
<ReduxProvider store={store}>
onChange={jest.fn()}
onFocus={jest.fn()}
<MarkdownEditor
id={'test-id'}
text={'some initial text already set'}
placeholderText={'placeholder'}
className={'classname-test'}
readonly={false}
onChange={jest.fn()}
onFocus={jest.fn()}
onBlur={jest.fn()}
/>
</ReduxProvider>,
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()
test('should match snapshot with on click on preview element', async () => {
let container
await act(async () => {
const result = render(wrapDNDIntl(
<MarkdownEditor
id={'test-id'}
text={''}
placeholderText={'placeholder'}
className={'classname-test'}
readonly={false}
<ReduxProvider store={store}>
<MarkdownEditor
id={'test-id'}
text={'some initial text already set'}
placeholderText={'placeholder'}
className={'classname-test'}
readonly={false}
onChange={jest.fn()}
onFocus={jest.fn()}
onBlur={jest.fn()}
/>
</ReduxProvider>,
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 previewElement = screen.getByTestId('preview-element')
userEvent.click(previewElement)
})
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()
test('should match snapshot with on click on preview element and then click out of it', async () => {
let container
await act(async () => {
render(wrapDNDIntl(
<MarkdownEditor
id={'test-id'}
text={''}
placeholderText={'placeholder'}
className={'classname-test'}
readonly={false}
const result = render(wrapDNDIntl(
<ReduxProvider store={store}>
<MarkdownEditor
id={'test-id'}
text={'some initial text already set'}
placeholderText={'placeholder'}
className={'classname-test'}
readonly={false}
onChange={jest.fn()}
onFocus={jest.fn()}
onBlur={jest.fn()}
/>
</ReduxProvider>,
onChange={jest.fn()}
onFocus={jest.fn()}
onBlur={jest.fn()}
onAccept={onMockedAccept}
/>,
))
const elementMarkDown = screen.getByRole('textbox', {hidden: true})
userEvent.click(elementMarkDown)
container = result.container
const previewElement = screen.getByTestId('preview-element')
userEvent.click(previewElement)
fireEvent.keyDown(container, {
key: 'Escape',
code: 'Escape',
keyCode: 27,
charCode: 27,
})
})
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)
expect(container).toMatchSnapshot()
})
})

147
webapp/src/components/markdownEditor.tsx
View File

@ -1,14 +1,12 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useState, useRef, useMemo} from 'react'
import SimpleMdeReact from 'react-simplemde-editor'
import {Editor} from 'codemirror'
import SimpleMDE from 'easymde'
import 'easymde/dist/easymde.min.css'
import React, {useState} from 'react'
import {Utils, IDType} from '../utils'
import {Utils} from '../utils'
import './markdownEditor.scss'
import MarkdownEditorInput from './markdownEditorInput/markdownEditorInput'
type Props = {
id?: string
text?: string
@ -19,96 +17,17 @@ type Props = {
onChange?: (text: string) => void
onFocus?: () => void
onBlur?: (text: string) => void
onAccept?: (text: string) => void
}
const MarkdownEditor = (props: Props): JSX. Element => {
const MarkdownEditor = (props: Props): JSX.Element => {
const {placeholderText, onFocus, onBlur, onChange, text, id} = props
const [isEditing, setIsEditing] = useState(false)
const [uniqueId] = useState(id || Utils.createGuid(IDType.None))
const [active, setActive] = useState(false)
const [editorInstance, setEditorInstance] = useState<SimpleMDE>()
const editorOptions = useMemo(() => ({
autoDownloadFontAwesome: true,
toolbar: false,
status: false,
spellChecker: true,
nativeSpellcheck: true,
minHeight: '10px',
shortcuts: {
toggleStrikethrough: 'Cmd-.',
togglePreview: null,
drawImage: null,
drawLink: null,
toggleSideBySide: null,
toggleFullScreen: null,
},
}), [])
const showEditor = (): void => {
const cm = editorInstance?.codemirror
if (cm) {
setTimeout(() => {
cm.refresh()
cm.focus()
cm.getInputField()?.focus()
cm.setCursor(cm.lineCount(), 0) // Put cursor at end
}, 100)
}
setIsEditing(true)
}
const stateAndPropsValue = {
isEditing,
setIsEditing,
setActive,
onBlur,
onChange,
onFocus,
}
const stateAndPropsRef = useRef(stateAndPropsValue)
stateAndPropsRef.current = stateAndPropsValue
const editorEvents = useMemo(() => ({
change: (instance: Editor) => {
if (stateAndPropsRef.current.isEditing) {
const newText = instance.getValue()
stateAndPropsRef.current.onChange?.(newText)
}
},
blur: (instance: Editor) => {
const newText = instance.getValue()
const oldText = text || ''
if (newText !== oldText && stateAndPropsRef.current.onChange) {
stateAndPropsRef.current.onChange(newText)
}
stateAndPropsRef.current.setActive(false)
if (stateAndPropsRef.current.onBlur) {
stateAndPropsRef.current.onBlur(newText)
}
stateAndPropsRef.current.setIsEditing(false)
},
focus: () => {
stateAndPropsRef.current.setActive(true)
stateAndPropsRef.current.setIsEditing(true)
if (stateAndPropsRef.current.onFocus) {
stateAndPropsRef.current.onFocus()
}
},
}), [])
const html: string = Utils.htmlFromMarkdown(text || placeholderText || '')
const previewElement = (
<div
data-testid='preview-element'
className={text ? 'octo-editor-preview' : 'octo-editor-preview octo-placeholder'}
style={{display: isEditing ? 'none' : undefined}}
dangerouslySetInnerHTML={{__html: html}}
onClick={(e) => {
const LINK_TAG_NAME = 'a'
@ -119,46 +38,34 @@ const MarkdownEditor = (props: Props): JSX. Element => {
}
if (!props.readonly && !isEditing) {
showEditor()
setIsEditing(true)
}
}}
/>)
/>
)
const editorOnBlur = (newText: string) => {
setIsEditing(false)
onBlur && onBlur(newText)
}
const editorElement = (
<div
className='octo-editor-active Editor'
// Use visibility instead of display here so the editor is pre-rendered, avoiding a flash on showEditor
style={isEditing ? {} : {visibility: 'hidden', position: 'absolute', top: 0, left: 0}}
onKeyDown={(e) => {
// HACKHACK: Need to handle here instad of in CodeMirror because that breaks auto-lists
if (e.keyCode === 27 && !e.shiftKey && !(e.ctrlKey || e.metaKey) && !e.altKey) { // Esc
editorInstance?.codemirror?.getInputField()?.blur()
} else if (e.keyCode === 13 && !e.shiftKey && (e.ctrlKey || e.metaKey) && !e.altKey) { // Cmd+Enter
editorInstance?.codemirror?.getInputField()?.blur()
// HACKHACK: Call onAccept after visual state change
setTimeout(() => {
Utils.log('onAccept')
props.onAccept?.(text || '')
}, 20)
}
}}
>
<SimpleMdeReact
id={uniqueId}
getMdeInstance={setEditorInstance}
value={text}
events={editorEvents}
options={editorOptions}
/>
</div>)
<MarkdownEditorInput
id={id}
onChange={onChange}
onFocus={onFocus}
onBlur={editorOnBlur}
initialText={text}
isEditing={isEditing}
/>
)
const element = (
<div className={`MarkdownEditor octo-editor ${props.className || ''} ${active ? 'active' : ''}`}>
{previewElement}
<div className={`MarkdownEditor octo-editor ${props.className || ''} ${isEditing ? 'active' : ''}`}>
{!isEditing && previewElement}
{editorElement}
</div>)
</div>
)
return element
}

10
webapp/src/components/markdownEditorInput/markdownEditorInput.scss Normal file
View File

@ -0,0 +1,10 @@
.MarkdownEditorInput {
div[role=option] {
display: flex;
align-items: center;
}
&--IsNotEditing {
display: none;
}
}

172
webapp/src/components/markdownEditorInput/markdownEditorInput.tsx Normal file
View File

@ -0,0 +1,172 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {
ReactElement,
useEffect,
useMemo,
useCallback,
useRef,
useState,
} from 'react'
import {getDefaultKeyBinding, EditorState, ContentState, DraftHandleValue} from 'draft-js'
import Editor from '@draft-js-plugins/editor'
import createMentionPlugin, {
defaultSuggestionsFilter,
MentionData,
} from '@draft-js-plugins/mention'
import '@draft-js-plugins/mention/lib/plugin.css'
import './markdownEditorInput.scss'
import createEmojiPlugin from '@draft-js-plugins/emoji'
import '@draft-js-plugins/emoji/lib/plugin.css'
import {getWorkspaceUsersList} from '../../store/users'
import {useAppSelector} from '../../store/hooks'
import {IUser} from '../../user'
const imageURLForUser = (window as any).Components?.imageURLForUser
type Props = {
onChange?: (text: string) => void
onFocus?: () => void
onBlur?: (text: string) => void
initialText?: string
id?: string
isEditing: boolean
}
const MarkdownEditorInput = (props: Props): ReactElement => {
const {onChange, onFocus, onBlur, initialText, id, isEditing} = props
const workspaceUsers = useAppSelector<IUser[]>(getWorkspaceUsersList)
const mentions: MentionData[] = useMemo(() => workspaceUsers.map((user) => ({name: user.username, avatar: `${imageURLForUser ? imageURLForUser(user.id) : ''}`})), [workspaceUsers])
const ref = useRef<Editor>(null)
const [editorState, setEditorState] = useState(() => {
const state = EditorState.createWithContent(ContentState.createFromText(initialText || ''))
return EditorState.moveSelectionToEnd(state)
})
const [isMentionPopoverOpen, setIsMentionPopoverOpen] = useState(false)
const [isEmojiPopoverOpen, setIsEmojiPopoverOpen] = useState(false)
const [suggestions, setSuggestions] = useState(mentions)
const {MentionSuggestions, plugins, EmojiSuggestions} = useMemo(() => {
const mentionPlugin = createMentionPlugin({mentionPrefix: '@'})
const emojiPlugin = createEmojiPlugin()
// eslint-disable-next-line no-shadow
const {EmojiSuggestions} = emojiPlugin
// eslint-disable-next-line no-shadow
const {MentionSuggestions} = mentionPlugin
// eslint-disable-next-line no-shadow
const plugins = [
mentionPlugin,
emojiPlugin,
]
return {plugins, MentionSuggestions, EmojiSuggestions}
}, [])
useEffect(() => {
setTimeout(() => ref.current?.focus(), 200)
})
useEffect(() => {
let isMounted = true
if (isEditing && isMounted) {
setEditorState(EditorState.moveSelectionToEnd(editorState))
}
return () => {
isMounted = false
}
}, [isEditing])
useEffect(() => {
if (initialText === '') {
setTimeout(() => {
setEditorState(EditorState.createEmpty())
}, 200)
}
}, [initialText])
const customKeyBindingFn = useCallback((e: React.KeyboardEvent) => {
if (isMentionPopoverOpen || isEmojiPopoverOpen) {
return undefined
}
if (e.key === 'Escape') {
return 'editor-blur'
}
return getDefaultKeyBinding(e as any)
}, [isEmojiPopoverOpen, isMentionPopoverOpen])
const handleKeyCommand = useCallback((command: string): DraftHandleValue => {
if (command === 'editor-blur') {
ref.current?.blur()
return 'handled'
}
return 'not-handled'
}, [])
const onEditorStateBlur = useCallback(() => {
const text = editorState.getCurrentContent().getPlainText()
onBlur && onBlur(text)
}, [editorState, onBlur])
const onEditorStateChange = useCallback((newEditorState: EditorState) => {
const newText = newEditorState.getCurrentContent().getPlainText()
onChange && onChange(newText)
setEditorState(newEditorState)
}, [onChange])
const onMentionPopoverOpenChange = useCallback((open: boolean) => {
setIsMentionPopoverOpen(open)
}, [])
const onEmojiPopoverOpen = useCallback(() => {
setIsEmojiPopoverOpen(true)
}, [])
const onEmojiPopoverClose = useCallback(() => {
setIsEmojiPopoverOpen(false)
}, [])
const onSearchChange = useCallback(({value}: { value: string }) => {
setSuggestions(defaultSuggestionsFilter(value, mentions))
}, [mentions])
let className = 'MarkdownEditorInput'
if (!isEditing) {
className += ' MarkdownEditorInput--IsNotEditing'
}
return (
<div
className={className}
>
<Editor
editorKey={id}
editorState={editorState}
onChange={onEditorStateChange}
plugins={plugins}
ref={ref}
onBlur={onEditorStateBlur}
onFocus={onFocus}
keyBindingFn={customKeyBindingFn}
handleKeyCommand={handleKeyCommand}
/>
<MentionSuggestions
open={isMentionPopoverOpen}
onOpenChange={onMentionPopoverOpenChange}
suggestions={suggestions}
onSearchChange={onSearchChange}
/>
<EmojiSuggestions
onOpen={onEmojiPopoverOpen}
onClose={onEmojiPopoverClose}
/>
</div>
)
}
export default MarkdownEditorInput

34
webapp/src/components/viewTitle.test.tsx
View File

@ -18,6 +18,8 @@ import ViewTitle from './viewTitle'
jest.mock('../mutator')
jest.mock('../utils')
jest.mock('draft-js/lib/generateRandomKey', () => () => '123')
const mockedMutator = mocked(mutator, true)
const mockedUtils = mocked(Utils, true)
mockedUtils.createGuid.mockReturnValue('test-id')
@ -30,8 +32,18 @@ describe('components/viewTitle', () => {
const board = TestBlockFactory.createBoard()
board.id = 'test-id'
board.rootId = board.id
const store = mockStateStore([], {})
const state = {
users: {
workspaceUsers: {
1: {username: 'abc'},
2: {username: 'd'},
3: {username: 'e'},
4: {username: 'f'},
5: {username: 'g'},
},
},
}
const store = mockStateStore([], state)
beforeEach(() => {
jest.clearAllMocks()
@ -145,22 +157,4 @@ describe('components/viewTitle', () => {
fireEvent.blur(titleInput)
expect(mockedMutator.changeTitle).toBeCalledTimes(1)
})
test('change description', async () => {
board.fields.showDescription = true
await act(async () => {
render(wrapIntl(
<ReduxProvider store={store}>
<ViewTitle
board={board}
readonly={false}
/>
</ReduxProvider>,
))
})
const descriptionInput = screen.getAllByRole('textbox', {hidden: true})[2]
userEvent.type(descriptionInput, 'other description')
fireEvent.blur(descriptionInput)
expect(mockedMutator.changeDescription).toBeCalledTimes(1)
})
})

1
webapp/src/components/workspace.test.tsx
View File

@ -19,6 +19,7 @@ import Workspace from './workspace'
Object.defineProperty(Constants, 'versionString', {value: '1.0.0'})
jest.useFakeTimers()
jest.mock('../utils')
jest.mock('draft-js/lib/generateRandomKey', () => () => '123')
const mockedUtils = mocked(Utils, true)
const workspace1: UserWorkspace = {
id: 'workspace_1',

1
webapp/webpack.common.js
View File

@ -96,7 +96,6 @@ function makeCommonConfig() {
new CopyPlugin({
patterns: [
{from: path.resolve(__dirname, 'static'), to: 'static'},
{from: path.resolve(__dirname, 'node_modules/easymde/dist/easymde.min.css'), to: 'static'},
],
}),
new HtmlWebpackPlugin({