[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