[GH-839] Unit tests for viewTitle.tsx (#1662)
* test: unit tests for viewTitle.tsx * readonly: false
This commit is contained in:
Nishant Mittal
GitHub
parent
37a0b274b7
commit
8b66243ca2
2 changed files with 822 additions and 0 deletions
656
webapp/src/components/__snapshots__/viewTitle.test.tsx.snap
Normal file
656
webapp/src/components/__snapshots__/viewTitle.test.tsx.snap
Normal file
|
|
@ -0,0 +1,656 @@
|
||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`components/viewTitle add random icon 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="ViewTitle"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="add-buttons add-visible"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="EmojiIcon Icon"
|
||||||
|
viewBox="0 0 496 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Add icon
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="ShowIcon Icon"
|
||||||
|
viewBox="0 0 576 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
show description
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="title"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="Editable title"
|
||||||
|
placeholder="Untitled board"
|
||||||
|
spellcheck="true"
|
||||||
|
title="board title"
|
||||||
|
value="board title"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`components/viewTitle hide description 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="ViewTitle"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="add-buttons add-visible"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="ShowIcon Icon"
|
||||||
|
viewBox="0 0 576 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
show description
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="title"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="BlockIconSelector"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="menuwrapper"
|
||||||
|
class="MenuWrapper"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="octo-icon size-m"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
i
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
class="Editable title"
|
||||||
|
placeholder="Untitled board"
|
||||||
|
spellcheck="true"
|
||||||
|
title="board title"
|
||||||
|
value="board title"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`components/viewTitle should match snapshot 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="ViewTitle"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="add-buttons add-visible"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="HideIcon Icon"
|
||||||
|
viewBox="0 0 640 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
hide description
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="title"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="BlockIconSelector"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="menuwrapper"
|
||||||
|
class="MenuWrapper"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="octo-icon size-m"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
i
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
class="Editable title"
|
||||||
|
placeholder="Untitled board"
|
||||||
|
spellcheck="true"
|
||||||
|
title="board title"
|
||||||
|
value="board title"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="description"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MarkdownEditor octo-editor "
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="octo-editor-preview"
|
||||||
|
/>
|
||||||
|
<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"
|
||||||
|
style="display: block; bottom: 0px;"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<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;"
|
||||||
|
>
|
||||||
|
<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; 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/viewTitle should match snapshot readonly 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="ViewTitle"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="add-buttons add-visible"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="title"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="BlockIconSelector"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="menuwrapper"
|
||||||
|
class="MenuWrapper"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="octo-icon size-m"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
i
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
class="Editable readonly title"
|
||||||
|
placeholder="Untitled board"
|
||||||
|
readonly=""
|
||||||
|
spellcheck="true"
|
||||||
|
title="board title"
|
||||||
|
value="board title"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="description"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MarkdownEditor octo-editor "
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="octo-editor-preview"
|
||||||
|
/>
|
||||||
|
<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"
|
||||||
|
style="display: block; bottom: 0px;"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<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;"
|
||||||
|
>
|
||||||
|
<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; 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/viewTitle show description 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="ViewTitle"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="add-buttons add-visible"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="HideIcon Icon"
|
||||||
|
viewBox="0 0 640 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
hide description
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="title"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="BlockIconSelector"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="menuwrapper"
|
||||||
|
class="MenuWrapper"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="octo-icon size-m"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
i
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
class="Editable title"
|
||||||
|
placeholder="Untitled board"
|
||||||
|
spellcheck="true"
|
||||||
|
title="board title"
|
||||||
|
value="board title"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="description"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MarkdownEditor octo-editor "
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="octo-editor-preview"
|
||||||
|
/>
|
||||||
|
<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"
|
||||||
|
style="display: block; bottom: 0px;"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<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;"
|
||||||
|
>
|
||||||
|
<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; 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>
|
||||||
|
`;
|
||||||
166
webapp/src/components/viewTitle.test.tsx
Normal file
166
webapp/src/components/viewTitle.test.tsx
Normal file
|
|
@ -0,0 +1,166 @@
|
||||||
|
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||||
|
// See LICENSE.txt for license information.
|
||||||
|
|
||||||
|
import '@testing-library/jest-dom'
|
||||||
|
import {act, render, screen, fireEvent} 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 mutator from '../mutator'
|
||||||
|
import {Utils} from '../utils'
|
||||||
|
import {TestBlockFactory} from '../test/testBlockFactory'
|
||||||
|
import {mockDOM, mockStateStore, wrapIntl} from '../testUtils'
|
||||||
|
|
||||||
|
import ViewTitle from './viewTitle'
|
||||||
|
|
||||||
|
jest.mock('../mutator')
|
||||||
|
jest.mock('../utils')
|
||||||
|
const mockedMutator = mocked(mutator, true)
|
||||||
|
const mockedUtils = mocked(Utils, true)
|
||||||
|
mockedUtils.createGuid.mockReturnValue('test-id')
|
||||||
|
|
||||||
|
beforeAll(() => {
|
||||||
|
mockDOM()
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('components/viewTitle', () => {
|
||||||
|
const board = TestBlockFactory.createBoard()
|
||||||
|
board.id = 'test-id'
|
||||||
|
board.rootId = board.id
|
||||||
|
|
||||||
|
const store = mockStateStore([], {})
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
jest.clearAllMocks()
|
||||||
|
})
|
||||||
|
|
||||||
|
test('should match snapshot', async () => {
|
||||||
|
let container
|
||||||
|
await act(async () => {
|
||||||
|
const result = render(wrapIntl(
|
||||||
|
<ReduxProvider store={store}>
|
||||||
|
<ViewTitle
|
||||||
|
board={board}
|
||||||
|
readonly={false}
|
||||||
|
/>
|
||||||
|
</ReduxProvider>,
|
||||||
|
))
|
||||||
|
container = result.container
|
||||||
|
})
|
||||||
|
expect(container).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
|
||||||
|
test('should match snapshot readonly', async () => {
|
||||||
|
let container
|
||||||
|
await act(async () => {
|
||||||
|
const result = render(wrapIntl(
|
||||||
|
<ReduxProvider store={store}>
|
||||||
|
<ViewTitle
|
||||||
|
board={board}
|
||||||
|
readonly={true}
|
||||||
|
/>
|
||||||
|
</ReduxProvider>,
|
||||||
|
))
|
||||||
|
container = result.container
|
||||||
|
})
|
||||||
|
expect(container).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
|
||||||
|
test('show description', async () => {
|
||||||
|
board.fields.showDescription = true
|
||||||
|
let container
|
||||||
|
await act(async () => {
|
||||||
|
const result = render(wrapIntl(
|
||||||
|
<ReduxProvider store={store}>
|
||||||
|
<ViewTitle
|
||||||
|
board={board}
|
||||||
|
readonly={false}
|
||||||
|
/>
|
||||||
|
</ReduxProvider>,
|
||||||
|
))
|
||||||
|
container = result.container
|
||||||
|
})
|
||||||
|
expect(container).toMatchSnapshot()
|
||||||
|
const hideDescriptionButton = screen.getAllByRole('button')[0]
|
||||||
|
userEvent.click(hideDescriptionButton)
|
||||||
|
expect(mockedMutator.showDescription).toBeCalledTimes(1)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('hide description', async () => {
|
||||||
|
board.fields.showDescription = false
|
||||||
|
let container
|
||||||
|
await act(async () => {
|
||||||
|
const result = render(wrapIntl(
|
||||||
|
<ReduxProvider store={store}>
|
||||||
|
<ViewTitle
|
||||||
|
board={board}
|
||||||
|
readonly={false}
|
||||||
|
/>
|
||||||
|
</ReduxProvider>,
|
||||||
|
))
|
||||||
|
container = result.container
|
||||||
|
})
|
||||||
|
expect(container).toMatchSnapshot()
|
||||||
|
const showDescriptionButton = screen.getAllByRole('button')[0]
|
||||||
|
userEvent.click(showDescriptionButton)
|
||||||
|
expect(mockedMutator.showDescription).toBeCalledTimes(1)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('add random icon', async () => {
|
||||||
|
board.fields.icon = ''
|
||||||
|
let container
|
||||||
|
await act(async () => {
|
||||||
|
const result = render(wrapIntl(
|
||||||
|
<ReduxProvider store={store}>
|
||||||
|
<ViewTitle
|
||||||
|
board={board}
|
||||||
|
readonly={false}
|
||||||
|
/>
|
||||||
|
</ReduxProvider>,
|
||||||
|
))
|
||||||
|
container = result.container
|
||||||
|
})
|
||||||
|
expect(container).toMatchSnapshot()
|
||||||
|
const randomIconButton = screen.getAllByRole('button')[0]
|
||||||
|
userEvent.click(randomIconButton)
|
||||||
|
expect(mockedMutator.changeIcon).toBeCalledTimes(1)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('change title', async () => {
|
||||||
|
await act(async () => {
|
||||||
|
render(wrapIntl(
|
||||||
|
<ReduxProvider store={store}>
|
||||||
|
<ViewTitle
|
||||||
|
board={board}
|
||||||
|
readonly={false}
|
||||||
|
/>
|
||||||
|
</ReduxProvider>,
|
||||||
|
))
|
||||||
|
})
|
||||||
|
const titleInput = screen.getAllByRole('textbox')[0]
|
||||||
|
userEvent.type(titleInput, 'other title')
|
||||||
|
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)
|
||||||
|
})
|
||||||
|
})
|
||||||
Loading…
Reference in a new issue