[GH-852]: Add tests for galleryCard (#1587)
* chore[GH-#852]: Add tests for GalleryCard * fix: error octoClient not mocked * fix: review snapshot for image
This commit is contained in:
Julien Fabre
GitHub
parent
0e10f52317
commit
17b2d07daf
|
|
@ -0,0 +1,940 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`src/components/gallery/GalleryCard with a comment content return GalleryCard with content readonly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="GalleryCard selected"
|
||||
draggable="true"
|
||||
style="opacity: 1;"
|
||||
>
|
||||
<div
|
||||
class="gallery-item"
|
||||
/>
|
||||
<div
|
||||
class="gallery-title"
|
||||
>
|
||||
<div
|
||||
class="octo-icon"
|
||||
>
|
||||
i
|
||||
</div>
|
||||
<div>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`src/components/gallery/GalleryCard with a comment content should match snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="GalleryCard selected"
|
||||
draggable="true"
|
||||
style="opacity: 1;"
|
||||
>
|
||||
<div
|
||||
aria-label="menuwrapper"
|
||||
class="MenuWrapper optionsMenu"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="Button IconButton"
|
||||
role="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="Menu noselect left"
|
||||
>
|
||||
<div
|
||||
class="menu-contents"
|
||||
>
|
||||
<div
|
||||
class="menu-options"
|
||||
>
|
||||
<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
|
||||
aria-label="Duplicate"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<svg
|
||||
class="DuplicateIcon Icon"
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M464 0H144c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h48c26.51 0 48-21.49 48-48V48c0-26.51-21.49-48-48-48zM362 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h42v224c0 26.51 21.49 48 48 48h224v42a6 6 0 0 1-6 6zm96-96H150a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h308a6 6 0 0 1 6 6v308a6 6 0 0 1-6 6z"
|
||||
/>
|
||||
</svg>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Duplicate
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Copy link"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-link-variant LinkIcon"
|
||||
/>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Copy link
|
||||
</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="gallery-item"
|
||||
/>
|
||||
<div
|
||||
class="gallery-title"
|
||||
>
|
||||
<div
|
||||
class="octo-icon"
|
||||
>
|
||||
i
|
||||
</div>
|
||||
<div>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`src/components/gallery/GalleryCard with an image content should match snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="GalleryCard selected"
|
||||
draggable="true"
|
||||
style="opacity: 1;"
|
||||
>
|
||||
<div
|
||||
aria-label="menuwrapper"
|
||||
class="MenuWrapper optionsMenu"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="Button IconButton"
|
||||
role="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="Menu noselect left"
|
||||
>
|
||||
<div
|
||||
class="menu-contents"
|
||||
>
|
||||
<div
|
||||
class="menu-options"
|
||||
>
|
||||
<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
|
||||
aria-label="Duplicate"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<svg
|
||||
class="DuplicateIcon Icon"
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M464 0H144c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h48c26.51 0 48-21.49 48-48V48c0-26.51-21.49-48-48-48zM362 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h42v224c0 26.51 21.49 48 48 48h224v42a6 6 0 0 1-6 6zm96-96H150a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h308a6 6 0 0 1 6 6v308a6 6 0 0 1-6 6z"
|
||||
/>
|
||||
</svg>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Duplicate
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Copy link"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-link-variant LinkIcon"
|
||||
/>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Copy link
|
||||
</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="gallery-image"
|
||||
>
|
||||
<img
|
||||
alt=""
|
||||
class="ImageElement"
|
||||
src="test.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="gallery-title"
|
||||
>
|
||||
<div
|
||||
class="octo-icon"
|
||||
>
|
||||
i
|
||||
</div>
|
||||
<div>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`src/components/gallery/GalleryCard with many contents return GalleryCard with contents readonly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="GalleryCard selected"
|
||||
draggable="true"
|
||||
style="opacity: 1;"
|
||||
>
|
||||
<div
|
||||
class="gallery-item"
|
||||
>
|
||||
<div
|
||||
class="DividerElement"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="gallery-title"
|
||||
>
|
||||
<div
|
||||
class="octo-icon"
|
||||
>
|
||||
i
|
||||
</div>
|
||||
<div>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`src/components/gallery/GalleryCard with many contents should match snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="GalleryCard selected"
|
||||
draggable="true"
|
||||
style="opacity: 1;"
|
||||
>
|
||||
<div
|
||||
aria-label="menuwrapper"
|
||||
class="MenuWrapper optionsMenu"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="Button IconButton"
|
||||
role="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="Menu noselect left"
|
||||
>
|
||||
<div
|
||||
class="menu-contents"
|
||||
>
|
||||
<div
|
||||
class="menu-options"
|
||||
>
|
||||
<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
|
||||
aria-label="Duplicate"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<svg
|
||||
class="DuplicateIcon Icon"
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M464 0H144c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h48c26.51 0 48-21.49 48-48V48c0-26.51-21.49-48-48-48zM362 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h42v224c0 26.51 21.49 48 48 48h224v42a6 6 0 0 1-6 6zm96-96H150a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h308a6 6 0 0 1 6 6v308a6 6 0 0 1-6 6z"
|
||||
/>
|
||||
</svg>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Duplicate
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Copy link"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-link-variant LinkIcon"
|
||||
/>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Copy link
|
||||
</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="gallery-item"
|
||||
>
|
||||
<div
|
||||
class="DividerElement"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="gallery-title"
|
||||
>
|
||||
<div
|
||||
class="octo-icon"
|
||||
>
|
||||
i
|
||||
</div>
|
||||
<div>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`src/components/gallery/GalleryCard with many images content should match snapshot with only first image 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="GalleryCard selected"
|
||||
draggable="true"
|
||||
style="opacity: 1;"
|
||||
>
|
||||
<div
|
||||
aria-label="menuwrapper"
|
||||
class="MenuWrapper optionsMenu"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="Button IconButton"
|
||||
role="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="Menu noselect left"
|
||||
>
|
||||
<div
|
||||
class="menu-contents"
|
||||
>
|
||||
<div
|
||||
class="menu-options"
|
||||
>
|
||||
<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
|
||||
aria-label="Duplicate"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<svg
|
||||
class="DuplicateIcon Icon"
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M464 0H144c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h48c26.51 0 48-21.49 48-48V48c0-26.51-21.49-48-48-48zM362 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h42v224c0 26.51 21.49 48 48 48h224v42a6 6 0 0 1-6 6zm96-96H150a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h308a6 6 0 0 1 6 6v308a6 6 0 0 1-6 6z"
|
||||
/>
|
||||
</svg>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Duplicate
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Copy link"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-link-variant LinkIcon"
|
||||
/>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Copy link
|
||||
</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="gallery-image"
|
||||
>
|
||||
<img
|
||||
alt=""
|
||||
class="ImageElement"
|
||||
src="test.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="gallery-title"
|
||||
>
|
||||
<div
|
||||
class="octo-icon"
|
||||
>
|
||||
i
|
||||
</div>
|
||||
<div>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`src/components/gallery/GalleryCard without block content return GalleryCard and cancel 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="GalleryCard selected"
|
||||
draggable="true"
|
||||
style="opacity: 1;"
|
||||
>
|
||||
<div
|
||||
aria-label="menuwrapper"
|
||||
class="MenuWrapper optionsMenu"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="Button IconButton"
|
||||
role="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="gallery-item"
|
||||
/>
|
||||
<div
|
||||
class="gallery-title"
|
||||
>
|
||||
<div
|
||||
class="octo-icon"
|
||||
>
|
||||
i
|
||||
</div>
|
||||
<div>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`src/components/gallery/GalleryCard without block content return GalleryCard and copy link 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="GalleryCard selected"
|
||||
draggable="true"
|
||||
style="opacity: 1;"
|
||||
>
|
||||
<div
|
||||
aria-label="menuwrapper"
|
||||
class="MenuWrapper optionsMenu"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="Button IconButton"
|
||||
role="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="gallery-item"
|
||||
/>
|
||||
<div
|
||||
class="gallery-title"
|
||||
>
|
||||
<div
|
||||
class="octo-icon"
|
||||
>
|
||||
i
|
||||
</div>
|
||||
<div>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`src/components/gallery/GalleryCard without block content return GalleryCard and delete card 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="GalleryCard selected"
|
||||
draggable="true"
|
||||
style="opacity: 1;"
|
||||
>
|
||||
<div
|
||||
aria-label="menuwrapper"
|
||||
class="MenuWrapper optionsMenu"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="Button IconButton"
|
||||
role="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="gallery-item"
|
||||
/>
|
||||
<div
|
||||
class="gallery-title"
|
||||
>
|
||||
<div
|
||||
class="octo-icon"
|
||||
>
|
||||
i
|
||||
</div>
|
||||
<div>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`src/components/gallery/GalleryCard without block content return GalleryCard and duplicate card 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="GalleryCard selected"
|
||||
draggable="true"
|
||||
style="opacity: 1;"
|
||||
>
|
||||
<div
|
||||
aria-label="menuwrapper"
|
||||
class="MenuWrapper optionsMenu"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="Button IconButton"
|
||||
role="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="gallery-item"
|
||||
/>
|
||||
<div
|
||||
class="gallery-title"
|
||||
>
|
||||
<div
|
||||
class="octo-icon"
|
||||
>
|
||||
i
|
||||
</div>
|
||||
<div>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`src/components/gallery/GalleryCard without block content should match snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="GalleryCard selected"
|
||||
draggable="true"
|
||||
style="opacity: 1;"
|
||||
>
|
||||
<div
|
||||
aria-label="menuwrapper"
|
||||
class="MenuWrapper optionsMenu"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="Button IconButton"
|
||||
role="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="Menu noselect left"
|
||||
>
|
||||
<div
|
||||
class="menu-contents"
|
||||
>
|
||||
<div
|
||||
class="menu-options"
|
||||
>
|
||||
<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
|
||||
aria-label="Duplicate"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<svg
|
||||
class="DuplicateIcon Icon"
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M464 0H144c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h48c26.51 0 48-21.49 48-48V48c0-26.51-21.49-48-48-48zM362 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h42v224c0 26.51 21.49 48 48 48h224v42a6 6 0 0 1-6 6zm96-96H150a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h308a6 6 0 0 1 6 6v308a6 6 0 0 1-6 6z"
|
||||
/>
|
||||
</svg>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Duplicate
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Copy link"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-link-variant LinkIcon"
|
||||
/>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Copy link
|
||||
</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="gallery-item"
|
||||
/>
|
||||
<div
|
||||
class="gallery-title"
|
||||
>
|
||||
<div
|
||||
class="octo-icon"
|
||||
>
|
||||
i
|
||||
</div>
|
||||
<div>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="gallery-props"
|
||||
>
|
||||
<div
|
||||
class="octo-tooltip tooltip-top"
|
||||
data-tooltip="testTemplateProperty"
|
||||
>
|
||||
<div
|
||||
class="octo-propertyvalue"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
424
webapp/src/components/gallery/galleryCard.test.tsx
Normal file
424
webapp/src/components/gallery/galleryCard.test.tsx
Normal file
|
|
@ -0,0 +1,424 @@
|
|||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react'
|
||||
import {act, render, screen} from '@testing-library/react'
|
||||
|
||||
import {Provider as ReduxProvider} from 'react-redux'
|
||||
|
||||
import userEvent from '@testing-library/user-event'
|
||||
|
||||
import {mocked} from 'ts-jest/utils'
|
||||
|
||||
import {MockStoreEnhanced} from 'redux-mock-store'
|
||||
|
||||
import {wrapDNDIntl, mockStateStore} from '../../testUtils'
|
||||
|
||||
import {TestBlockFactory} from '../../test/testBlockFactory'
|
||||
|
||||
import mutator from '../../mutator'
|
||||
|
||||
import {Utils} from '../../utils'
|
||||
|
||||
import octoClient from '../../octoClient'
|
||||
|
||||
import GalleryCard from './galleryCard'
|
||||
|
||||
jest.mock('../../mutator')
|
||||
jest.mock('../../utils')
|
||||
jest.mock('../../octoClient')
|
||||
|
||||
describe('src/components/gallery/GalleryCard', () => {
|
||||
const mockedMutator = mocked(mutator, true)
|
||||
const mockedUtils = mocked(Utils, true)
|
||||
const mockedOcto = mocked(octoClient, true)
|
||||
mockedOcto.getFileAsDataUrl.mockResolvedValue('test.jpg')
|
||||
|
||||
const board = TestBlockFactory.createBoard()
|
||||
board.id = 'boardId'
|
||||
|
||||
const activeView = TestBlockFactory.createBoardView(board)
|
||||
activeView.fields.sortOptions = []
|
||||
|
||||
const card = TestBlockFactory.createCard(board)
|
||||
card.id = 'cardId'
|
||||
|
||||
const contentImage = TestBlockFactory.createImage(card)
|
||||
contentImage.id = 'contentId-image'
|
||||
contentImage.fields.fileId = 'test.jpg'
|
||||
|
||||
const contentComment = TestBlockFactory.createComment(card)
|
||||
contentComment.id = 'contentId-Comment'
|
||||
|
||||
let store:MockStoreEnhanced<unknown, unknown>
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks()
|
||||
})
|
||||
|
||||
describe('without block content', () => {
|
||||
beforeEach(() => {
|
||||
const state = {
|
||||
contents: {
|
||||
contents: {
|
||||
},
|
||||
},
|
||||
cards: {
|
||||
cards: {
|
||||
[card.id]: card,
|
||||
},
|
||||
},
|
||||
comments: {
|
||||
comments: {},
|
||||
},
|
||||
}
|
||||
store = mockStateStore([], state)
|
||||
})
|
||||
test('should match snapshot', () => {
|
||||
const {container} = render(wrapDNDIntl(
|
||||
<ReduxProvider store={store}>
|
||||
<GalleryCard
|
||||
board={board}
|
||||
card={card}
|
||||
onClick={jest.fn()}
|
||||
visiblePropertyTemplates={[{id: card.id, name: 'testTemplateProperty', type: 'text', options: [{id: '1', value: 'testValue', color: 'blue'}]}]}
|
||||
visibleTitle={true}
|
||||
isSelected={true}
|
||||
readonly={false}
|
||||
isManualSort={true}
|
||||
onDrop={jest.fn()}
|
||||
/>
|
||||
</ReduxProvider>,
|
||||
))
|
||||
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
|
||||
userEvent.click(buttonElement)
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
test('return GalleryCard and click on it', () => {
|
||||
const mockedOnClick = jest.fn()
|
||||
const {container} = render(wrapDNDIntl(
|
||||
<ReduxProvider store={store}>
|
||||
<GalleryCard
|
||||
board={board}
|
||||
card={card}
|
||||
onClick={mockedOnClick}
|
||||
visiblePropertyTemplates={[]}
|
||||
visibleTitle={true}
|
||||
isSelected={true}
|
||||
readonly={false}
|
||||
isManualSort={true}
|
||||
onDrop={jest.fn()}
|
||||
/>
|
||||
</ReduxProvider>,
|
||||
))
|
||||
const galleryCardElement = container.querySelector('.GalleryCard')
|
||||
userEvent.click(galleryCardElement!)
|
||||
expect(mockedOnClick).toBeCalledTimes(1)
|
||||
})
|
||||
test('return GalleryCard and delete card', () => {
|
||||
const {container} = render(wrapDNDIntl(
|
||||
<ReduxProvider store={store}>
|
||||
<GalleryCard
|
||||
board={board}
|
||||
card={card}
|
||||
onClick={jest.fn()}
|
||||
visiblePropertyTemplates={[]}
|
||||
visibleTitle={true}
|
||||
isSelected={true}
|
||||
readonly={false}
|
||||
isManualSort={true}
|
||||
onDrop={jest.fn()}
|
||||
/>
|
||||
</ReduxProvider>,
|
||||
))
|
||||
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
|
||||
userEvent.click(buttonElement)
|
||||
const buttonDelete = screen.getByRole('button', {name: 'Delete'})
|
||||
userEvent.click(buttonDelete)
|
||||
expect(container).toMatchSnapshot()
|
||||
expect(mockedMutator.deleteBlock).toBeCalledTimes(1)
|
||||
expect(mockedMutator.deleteBlock).toBeCalledWith(card, 'delete card')
|
||||
})
|
||||
|
||||
test('return GalleryCard and duplicate card', () => {
|
||||
const {container} = render(wrapDNDIntl(
|
||||
<ReduxProvider store={store}>
|
||||
<GalleryCard
|
||||
board={board}
|
||||
card={card}
|
||||
onClick={jest.fn()}
|
||||
visiblePropertyTemplates={[]}
|
||||
visibleTitle={true}
|
||||
isSelected={true}
|
||||
readonly={false}
|
||||
isManualSort={true}
|
||||
onDrop={jest.fn()}
|
||||
/>
|
||||
</ReduxProvider>,
|
||||
))
|
||||
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
|
||||
userEvent.click(buttonElement)
|
||||
const buttonDuplicate = screen.getByRole('button', {name: 'Duplicate'})
|
||||
userEvent.click(buttonDuplicate)
|
||||
expect(container).toMatchSnapshot()
|
||||
expect(mockedMutator.duplicateCard).toBeCalledTimes(1)
|
||||
expect(mockedMutator.duplicateCard).toBeCalledWith(card.id)
|
||||
})
|
||||
test('return GalleryCard and copy link', () => {
|
||||
const {container} = render(wrapDNDIntl(
|
||||
<ReduxProvider store={store}>
|
||||
<GalleryCard
|
||||
board={board}
|
||||
card={card}
|
||||
onClick={jest.fn()}
|
||||
visiblePropertyTemplates={[]}
|
||||
visibleTitle={true}
|
||||
isSelected={true}
|
||||
readonly={false}
|
||||
isManualSort={true}
|
||||
onDrop={jest.fn()}
|
||||
/>
|
||||
</ReduxProvider>,
|
||||
))
|
||||
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
|
||||
userEvent.click(buttonElement)
|
||||
const buttonCopyLink = screen.getByRole('button', {name: 'Copy link'})
|
||||
userEvent.click(buttonCopyLink)
|
||||
expect(container).toMatchSnapshot()
|
||||
expect(mockedUtils.copyTextToClipboard).toBeCalledTimes(1)
|
||||
})
|
||||
test('return GalleryCard and cancel', () => {
|
||||
const {container} = render(wrapDNDIntl(
|
||||
<ReduxProvider store={store}>
|
||||
<GalleryCard
|
||||
board={board}
|
||||
card={card}
|
||||
onClick={jest.fn()}
|
||||
visiblePropertyTemplates={[]}
|
||||
visibleTitle={true}
|
||||
isSelected={true}
|
||||
readonly={false}
|
||||
isManualSort={true}
|
||||
onDrop={jest.fn()}
|
||||
/>
|
||||
</ReduxProvider>,
|
||||
))
|
||||
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
|
||||
userEvent.click(buttonElement)
|
||||
const buttonCancel = screen.getByRole('button', {name: 'Cancel'})
|
||||
userEvent.click(buttonCancel)
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
describe('with an image content', () => {
|
||||
beforeEach(() => {
|
||||
card.fields.contentOrder = [contentImage.id]
|
||||
const state = {
|
||||
contents: {
|
||||
contents: {
|
||||
[contentImage.id]: contentImage,
|
||||
},
|
||||
},
|
||||
cards: {
|
||||
cards: {
|
||||
[card.id]: card,
|
||||
},
|
||||
},
|
||||
comments: {
|
||||
comments: {},
|
||||
},
|
||||
}
|
||||
store = mockStateStore([], state)
|
||||
})
|
||||
test('should match snapshot', async () => {
|
||||
const {container} = render(wrapDNDIntl(
|
||||
<ReduxProvider store={store}>
|
||||
<GalleryCard
|
||||
board={board}
|
||||
card={card}
|
||||
onClick={jest.fn()}
|
||||
visiblePropertyTemplates={[]}
|
||||
visibleTitle={true}
|
||||
isSelected={true}
|
||||
readonly={false}
|
||||
isManualSort={true}
|
||||
onDrop={jest.fn()}
|
||||
/>
|
||||
</ReduxProvider>,
|
||||
))
|
||||
await act(async () => {
|
||||
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
|
||||
userEvent.click(buttonElement)
|
||||
})
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
||||
describe('with many images content', () => {
|
||||
beforeEach(() => {
|
||||
const contentImage2 = TestBlockFactory.createImage(card)
|
||||
contentImage2.id = 'contentId-image2'
|
||||
contentImage2.fields.fileId = 'test2.jpg'
|
||||
card.fields.contentOrder = [contentImage.id, contentImage2.id]
|
||||
const state = {
|
||||
contents: {
|
||||
contents: {
|
||||
[contentImage.id]: [contentImage],
|
||||
[contentImage2.id]: [contentImage2],
|
||||
},
|
||||
},
|
||||
cards: {
|
||||
cards: {
|
||||
[card.id]: card,
|
||||
},
|
||||
},
|
||||
comments: {
|
||||
comments: {},
|
||||
},
|
||||
}
|
||||
store = mockStateStore([], state)
|
||||
})
|
||||
test('should match snapshot with only first image', async () => {
|
||||
const {container} = render(wrapDNDIntl(
|
||||
<ReduxProvider store={store}>
|
||||
<GalleryCard
|
||||
board={board}
|
||||
card={card}
|
||||
onClick={jest.fn()}
|
||||
visiblePropertyTemplates={[]}
|
||||
visibleTitle={true}
|
||||
isSelected={true}
|
||||
readonly={false}
|
||||
isManualSort={true}
|
||||
onDrop={jest.fn()}
|
||||
/>
|
||||
</ReduxProvider>,
|
||||
))
|
||||
await act(async () => {
|
||||
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
|
||||
userEvent.click(buttonElement)
|
||||
})
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
describe('with a comment content', () => {
|
||||
beforeEach(() => {
|
||||
card.fields.contentOrder = [contentComment.id]
|
||||
const state = {
|
||||
contents: {
|
||||
contents: {
|
||||
[contentComment.id]: contentComment,
|
||||
},
|
||||
},
|
||||
cards: {
|
||||
cards: {
|
||||
[card.id]: card,
|
||||
},
|
||||
},
|
||||
comments: {
|
||||
comments: {},
|
||||
},
|
||||
}
|
||||
store = mockStateStore([], state)
|
||||
})
|
||||
test('should match snapshot', () => {
|
||||
const {container} = render(wrapDNDIntl(
|
||||
<ReduxProvider store={store}>
|
||||
<GalleryCard
|
||||
board={board}
|
||||
card={card}
|
||||
onClick={jest.fn()}
|
||||
visiblePropertyTemplates={[]}
|
||||
visibleTitle={true}
|
||||
isSelected={true}
|
||||
readonly={false}
|
||||
isManualSort={true}
|
||||
onDrop={jest.fn()}
|
||||
/>
|
||||
</ReduxProvider>,
|
||||
))
|
||||
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
|
||||
userEvent.click(buttonElement)
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
test('return GalleryCard with content readonly', () => {
|
||||
const {container} = render(wrapDNDIntl(
|
||||
<ReduxProvider store={store}>
|
||||
<GalleryCard
|
||||
board={board}
|
||||
card={card}
|
||||
onClick={jest.fn()}
|
||||
visiblePropertyTemplates={[]}
|
||||
visibleTitle={true}
|
||||
isSelected={true}
|
||||
readonly={true}
|
||||
isManualSort={true}
|
||||
onDrop={jest.fn()}
|
||||
/>
|
||||
</ReduxProvider>,
|
||||
))
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
describe('with many contents', () => {
|
||||
const contentDivider = TestBlockFactory.createDivider(card)
|
||||
contentDivider.id = 'contentId-Text2'
|
||||
beforeEach(() => {
|
||||
card.fields.contentOrder = [contentComment.id, contentDivider.id]
|
||||
const state = {
|
||||
contents: {
|
||||
contents: {
|
||||
[contentComment.id]: [contentComment, contentDivider],
|
||||
},
|
||||
},
|
||||
cards: {
|
||||
cards: {
|
||||
[card.id]: card,
|
||||
},
|
||||
},
|
||||
comments: {
|
||||
comments: {},
|
||||
},
|
||||
}
|
||||
store = mockStateStore([], state)
|
||||
})
|
||||
test('should match snapshot', () => {
|
||||
const {container} = render(wrapDNDIntl(
|
||||
<ReduxProvider store={store}>
|
||||
<GalleryCard
|
||||
board={board}
|
||||
card={card}
|
||||
onClick={jest.fn()}
|
||||
visiblePropertyTemplates={[]}
|
||||
visibleTitle={true}
|
||||
isSelected={true}
|
||||
readonly={false}
|
||||
isManualSort={true}
|
||||
onDrop={jest.fn()}
|
||||
/>
|
||||
</ReduxProvider>,
|
||||
))
|
||||
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
|
||||
userEvent.click(buttonElement)
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
test('return GalleryCard with contents readonly', () => {
|
||||
const {container} = render(wrapDNDIntl(
|
||||
<ReduxProvider store={store}>
|
||||
<GalleryCard
|
||||
board={board}
|
||||
card={card}
|
||||
onClick={jest.fn()}
|
||||
visiblePropertyTemplates={[]}
|
||||
visibleTitle={true}
|
||||
isSelected={true}
|
||||
readonly={true}
|
||||
isManualSort={true}
|
||||
onDrop={jest.fn()}
|
||||
/>
|
||||
</ReduxProvider>,
|
||||
))
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user