mirror of
https://github.com/mattermost/focalboard.git
synced 2024-12-24 13:43:12 +02:00
chore[GH-#829]: Add unit tests for contentBlock (#1609)
Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
This commit is contained in:
Julien Fabre
GitHub
parent
d0083f6ed0
commit
0e6fab45eb
569
webapp/src/components/__snapshots__/contentBlock.test.tsx.snap
Normal file
569
webapp/src/components/__snapshots__/contentBlock.test.tsx.snap
Normal file
@ -0,0 +1,569 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`components/contentBlock return commentBlock and click on menuwrapper 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="rowContents"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ContentBlock octo-block"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="octo-block-margin"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="menuwrapper"
|
||||||
|
class="MenuWrapper"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="Button IconButton"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
class="Menu noselect bottom"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="menu-contents"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="menu-options"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="Move up"
|
||||||
|
class="MenuOption TextOption menu-option"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="SortUpIcon Icon"
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<polyline
|
||||||
|
points="50,20 50,80"
|
||||||
|
/>
|
||||||
|
<polyline
|
||||||
|
points="30,40 50,20 70,40"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<div
|
||||||
|
class="menu-name"
|
||||||
|
>
|
||||||
|
Move up
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-label="Move down"
|
||||||
|
class="MenuOption TextOption menu-option"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="SortDownIcon Icon"
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<polyline
|
||||||
|
points="50,20 50,80"
|
||||||
|
/>
|
||||||
|
<polyline
|
||||||
|
points="30,60 50,80 70,60"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<div
|
||||||
|
class="menu-name"
|
||||||
|
>
|
||||||
|
Move down
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="MenuOption SubMenuOption menu-option"
|
||||||
|
id="insertAbove"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="CompassIcon icon-plus AddIcon"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="menu-name"
|
||||||
|
>
|
||||||
|
Insert above
|
||||||
|
</div>
|
||||||
|
<svg
|
||||||
|
class="SubmenuTriangleIcon Icon"
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<polygon
|
||||||
|
points="50,35 75,50 50,65"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-label="Delete"
|
||||||
|
class="MenuOption TextOption menu-option"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="DeleteIcon Icon"
|
||||||
|
viewBox="0 0 448 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<div
|
||||||
|
class="menu-name"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="menu-spacer hideOnWidescreen"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="menu-options hideOnWidescreen"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="Cancel"
|
||||||
|
class="MenuOption TextOption menu-option menu-cancel"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="menu-name"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="dnd-handle"
|
||||||
|
draggable="true"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="GripIcon Icon"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M0 0h24v24H0V0z"
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="addToRow "
|
||||||
|
style="flex: 0 0 auto; height: 100%;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="addToRow "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`components/contentBlock should match snapshot with commentBlock 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="rowContents"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ContentBlock octo-block"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="octo-block-margin"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="menuwrapper"
|
||||||
|
class="MenuWrapper"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="Button IconButton"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="dnd-handle"
|
||||||
|
draggable="true"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="GripIcon Icon"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M0 0h24v24H0V0z"
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="addToRow "
|
||||||
|
style="flex: 0 0 auto; height: 100%;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="addToRow "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`components/contentBlock should match snapshot with commentBlock readonly 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="rowContents"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ContentBlock octo-block"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="octo-block-margin"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="addToRow "
|
||||||
|
style="flex: 0 0 auto; height: 100%;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="addToRow "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`components/contentBlock should match snapshot with dividerBlock 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="rowContents"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ContentBlock octo-block"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="octo-block-margin"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="menuwrapper"
|
||||||
|
class="MenuWrapper"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="Button IconButton"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="dnd-handle"
|
||||||
|
draggable="true"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="GripIcon Icon"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M0 0h24v24H0V0z"
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="addToRow "
|
||||||
|
style="flex: 0 0 auto; height: 100%;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="DividerElement"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="addToRow "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`components/contentBlock should match snapshot with imageBlock 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="rowContents"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ContentBlock octo-block"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="octo-block-margin"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="menuwrapper"
|
||||||
|
class="MenuWrapper"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="Button IconButton"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="dnd-handle"
|
||||||
|
draggable="true"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="GripIcon Icon"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M0 0h24v24H0V0z"
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="addToRow "
|
||||||
|
style="flex: 0 0 auto; height: 100%;"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
class="ImageElement"
|
||||||
|
src="test.jpg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="addToRow "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`components/contentBlock should match snapshot with textBlock 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="rowContents"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ContentBlock octo-block"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="octo-block-margin"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="menuwrapper"
|
||||||
|
class="MenuWrapper"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="Button IconButton"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="dnd-handle"
|
||||||
|
draggable="true"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="GripIcon Icon"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M0 0h24v24H0V0z"
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="addToRow "
|
||||||
|
style="flex: 0 0 auto; height: 100%;"
|
||||||
|
/>
|
||||||
|
<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"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="min-width: 1px;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="CodeMirror-hscrollbar"
|
||||||
|
cm-not-content="true"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="height: 100%; min-height: 1px;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="CodeMirror-scrollbar-filler"
|
||||||
|
cm-not-content="true"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="CodeMirror-gutter-filler"
|
||||||
|
cm-not-content="true"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="CodeMirror-scroll"
|
||||||
|
style="min-height: 10px;"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="CodeMirror-sizer"
|
||||||
|
style="margin-left: 0px;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="position: relative;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="CodeMirror-lines"
|
||||||
|
role="presentation"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
role="presentation"
|
||||||
|
style="position: relative; outline: none;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="CodeMirror-measure"
|
||||||
|
>
|
||||||
|
<pre
|
||||||
|
class="CodeMirror-line-like"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
xxxxxxxxxx
|
||||||
|
</span>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="CodeMirror-measure"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style="position: relative; z-index: 1;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="CodeMirror-cursors"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="CodeMirror-code"
|
||||||
|
role="presentation"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style="position: absolute; height: 50px; width: 1px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="CodeMirror-gutters"
|
||||||
|
style="display: none;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="editor-preview-side editor-preview"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="addToRow "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
282
webapp/src/components/contentBlock.test.tsx
Normal file
282
webapp/src/components/contentBlock.test.tsx
Normal file
@ -0,0 +1,282 @@
|
|||||||
|
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||||
|
// See LICENSE.txt for license information.
|
||||||
|
|
||||||
|
import '@testing-library/jest-dom'
|
||||||
|
import {act, render, screen} from '@testing-library/react'
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import {mocked} from 'ts-jest/utils'
|
||||||
|
|
||||||
|
import userEvent from '@testing-library/user-event'
|
||||||
|
|
||||||
|
import {Utils} from '../utils'
|
||||||
|
import {TestBlockFactory} from '../test/testBlockFactory'
|
||||||
|
import {mockDOM, wrapDNDIntl} from '../testUtils'
|
||||||
|
|
||||||
|
import mutator from '../mutator'
|
||||||
|
|
||||||
|
import octoClient from '../octoClient'
|
||||||
|
|
||||||
|
import ContentBlock from './contentBlock'
|
||||||
|
import {CardDetailContext, CardDetailContextType} from './cardDetail/cardDetailContext'
|
||||||
|
|
||||||
|
jest.mock('../mutator')
|
||||||
|
jest.mock('../utils')
|
||||||
|
jest.mock('../octoClient')
|
||||||
|
|
||||||
|
beforeAll(mockDOM)
|
||||||
|
|
||||||
|
describe('components/contentBlock', () => {
|
||||||
|
const mockedMutator = mocked(mutator, true)
|
||||||
|
const mockedUtils = mocked(Utils, true)
|
||||||
|
const mockedOcto = mocked(octoClient, true)
|
||||||
|
|
||||||
|
mockedUtils.createGuid.mockReturnValue('test-id')
|
||||||
|
mockedOcto.getFileAsDataUrl.mockResolvedValue('test.jpg')
|
||||||
|
|
||||||
|
const board = TestBlockFactory.createBoard()
|
||||||
|
board.fields.cardProperties = []
|
||||||
|
board.id = 'board-id'
|
||||||
|
board.rootId = board.id
|
||||||
|
const boardView = TestBlockFactory.createBoardView(board)
|
||||||
|
boardView.id = board.id
|
||||||
|
const card = TestBlockFactory.createCard(board)
|
||||||
|
card.id = board.id
|
||||||
|
card.createdBy = 'user-id-1'
|
||||||
|
const textBlock = TestBlockFactory.createText(card)
|
||||||
|
textBlock.id = 'textBlock-id'
|
||||||
|
const dividerBlock = TestBlockFactory.createDivider(card)
|
||||||
|
dividerBlock.id = 'dividerBlock-id'
|
||||||
|
const imageBlock = TestBlockFactory.createImage(card)
|
||||||
|
imageBlock.fields.fileId = 'test.jpg'
|
||||||
|
imageBlock.id = 'imageBlock-id'
|
||||||
|
const commentBlock = TestBlockFactory.createComment(card)
|
||||||
|
commentBlock.id = 'commentBlock-id'
|
||||||
|
|
||||||
|
card.fields.contentOrder = [textBlock.id, dividerBlock.id, commentBlock.id]
|
||||||
|
const cardDetailContextValue = (autoAdded: boolean): CardDetailContextType => ({
|
||||||
|
card,
|
||||||
|
lastAddedBlock: {
|
||||||
|
id: textBlock.id,
|
||||||
|
autoAdded,
|
||||||
|
},
|
||||||
|
deleteBlock: jest.fn(),
|
||||||
|
addBlock: jest.fn(),
|
||||||
|
})
|
||||||
|
|
||||||
|
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>,
|
||||||
|
))
|
||||||
|
container = result.container
|
||||||
|
})
|
||||||
|
expect(container).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
|
||||||
|
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>,
|
||||||
|
))
|
||||||
|
container = result.container
|
||||||
|
})
|
||||||
|
expect(container).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
|
||||||
|
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>,
|
||||||
|
))
|
||||||
|
container = result.container
|
||||||
|
})
|
||||||
|
expect(container).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
|
||||||
|
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>,
|
||||||
|
))
|
||||||
|
container = result.container
|
||||||
|
})
|
||||||
|
expect(container).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
|
||||||
|
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>,
|
||||||
|
))
|
||||||
|
container = result.container
|
||||||
|
})
|
||||||
|
expect(container).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
|
||||||
|
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>,
|
||||||
|
))
|
||||||
|
container = result.container
|
||||||
|
})
|
||||||
|
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
|
||||||
|
userEvent.click(buttonElement)
|
||||||
|
|
||||||
|
expect(container).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
|
||||||
|
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>,
|
||||||
|
))
|
||||||
|
})
|
||||||
|
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
|
||||||
|
userEvent.click(buttonElement)
|
||||||
|
const buttonMoveUp = screen.getByRole('button', {name: 'Move up'})
|
||||||
|
userEvent.click(buttonMoveUp)
|
||||||
|
expect(mockedUtils.arrayMove).toBeCalledTimes(1)
|
||||||
|
expect(mockedMutator.changeCardContentOrder).toBeCalledTimes(1)
|
||||||
|
})
|
||||||
|
|
||||||
|
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>,
|
||||||
|
))
|
||||||
|
})
|
||||||
|
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
|
||||||
|
userEvent.click(buttonElement)
|
||||||
|
const buttonMoveUp = screen.getByRole('button', {name: 'Move down'})
|
||||||
|
userEvent.click(buttonMoveUp)
|
||||||
|
expect(mockedUtils.arrayMove).toBeCalledTimes(1)
|
||||||
|
expect(mockedMutator.changeCardContentOrder).toBeCalledTimes(1)
|
||||||
|
})
|
||||||
|
|
||||||
|
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>,
|
||||||
|
))
|
||||||
|
})
|
||||||
|
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
|
||||||
|
userEvent.click(buttonElement)
|
||||||
|
const buttonMoveUp = screen.getByRole('button', {name: 'Delete'})
|
||||||
|
userEvent.click(buttonMoveUp)
|
||||||
|
expect(mockedMutator.performAsUndoGroup).toBeCalledTimes(1)
|
||||||
|
})
|
||||||
|
|
||||||
|
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>,
|
||||||
|
))
|
||||||
|
})
|
||||||
|
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
|
||||||
|
userEvent.click(buttonElement)
|
||||||
|
const buttonMoveUp = screen.getByRole('button', {name: 'Delete'})
|
||||||
|
userEvent.click(buttonMoveUp)
|
||||||
|
expect(mockedMutator.performAsUndoGroup).toBeCalledTimes(1)
|
||||||
|
})
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user