[GH-859] Add tests unit for filterComponent (#1445)
* chore[GH-#859]: add tests unit for filterComponent * chore: add test on is empty filterEntry
This commit is contained in:
Julien Fabre
GitHub
parent
4feafb9806
commit
a594714d92
2 changed files with 855 additions and 0 deletions
|
|
@ -0,0 +1,733 @@
|
||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`components/viewHeader/filterComponent return filterComponent 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="Modal bottom"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="toolbar hideOnWidescreen"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="Close"
|
||||||
|
class="Button IconButton"
|
||||||
|
role="button"
|
||||||
|
title="Close"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="CompassIcon icon-close CloseIcon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="FilterComponent"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="FilterEntry"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="menuwrapper"
|
||||||
|
class="MenuWrapper"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="Button "
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
(unknown)
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
class="Menu noselect bottom"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="menu-contents"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="menu-options"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="Status"
|
||||||
|
class="MenuOption TextOption menu-option"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="menu-name"
|
||||||
|
>
|
||||||
|
Status
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-label="Property 1"
|
||||||
|
class="MenuOption TextOption menu-option"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="menu-name"
|
||||||
|
>
|
||||||
|
Property 1
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-label="Property 2"
|
||||||
|
class="MenuOption TextOption menu-option"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="menu-name"
|
||||||
|
>
|
||||||
|
Property 2
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-label="Property 3"
|
||||||
|
class="MenuOption TextOption menu-option"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="menu-name"
|
||||||
|
>
|
||||||
|
Property 3
|
||||||
|
</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
|
||||||
|
aria-label="menuwrapper"
|
||||||
|
class="MenuWrapper"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="Button "
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
includes
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="octo-spacer"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
class="Button "
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Delete
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<button
|
||||||
|
class="Button "
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
+ Add filter
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`components/viewHeader/filterComponent return filterComponent and add Filter 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="Modal bottom"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="toolbar hideOnWidescreen"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="Close"
|
||||||
|
class="Button IconButton"
|
||||||
|
role="button"
|
||||||
|
title="Close"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="CompassIcon icon-close CloseIcon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="FilterComponent"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="FilterEntry"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="menuwrapper"
|
||||||
|
class="MenuWrapper"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="Button "
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
(unknown)
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
class="Menu noselect bottom"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="menu-contents"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="menu-options"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="Status"
|
||||||
|
class="MenuOption TextOption menu-option"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="menu-name"
|
||||||
|
>
|
||||||
|
Status
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-label="Property 1"
|
||||||
|
class="MenuOption TextOption menu-option"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="menu-name"
|
||||||
|
>
|
||||||
|
Property 1
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-label="Property 2"
|
||||||
|
class="MenuOption TextOption menu-option"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="menu-name"
|
||||||
|
>
|
||||||
|
Property 2
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-label="Property 3"
|
||||||
|
class="MenuOption TextOption menu-option"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="menu-name"
|
||||||
|
>
|
||||||
|
Property 3
|
||||||
|
</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
|
||||||
|
aria-label="menuwrapper"
|
||||||
|
class="MenuWrapper"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="Button "
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
includes
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="octo-spacer"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
class="Button "
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Delete
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<button
|
||||||
|
class="Button "
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
+ Add filter
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`components/viewHeader/filterComponent return filterComponent and click is empty 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="Modal bottom"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="toolbar hideOnWidescreen"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="Close"
|
||||||
|
class="Button IconButton"
|
||||||
|
role="button"
|
||||||
|
title="Close"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="CompassIcon icon-close CloseIcon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="FilterComponent"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="FilterEntry"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="menuwrapper"
|
||||||
|
class="MenuWrapper"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="Button "
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
(unknown)
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-label="menuwrapper"
|
||||||
|
class="MenuWrapper"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="Button "
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
includes
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
class="Menu noselect bottom"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="menu-contents"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="menu-options"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="includes"
|
||||||
|
class="MenuOption TextOption menu-option"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="menu-name"
|
||||||
|
>
|
||||||
|
includes
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-label="doesn't include"
|
||||||
|
class="MenuOption TextOption menu-option"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="menu-name"
|
||||||
|
>
|
||||||
|
doesn't include
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-label="is empty"
|
||||||
|
class="MenuOption TextOption menu-option"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="menu-name"
|
||||||
|
>
|
||||||
|
is empty
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-label="is not empty"
|
||||||
|
class="MenuOption TextOption menu-option"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="menu-name"
|
||||||
|
>
|
||||||
|
is not empty
|
||||||
|
</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="octo-spacer"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
class="Button "
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Delete
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<button
|
||||||
|
class="Button "
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
+ Add filter
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`components/viewHeader/filterComponent return filterComponent and filter by status 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="Modal bottom"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="toolbar hideOnWidescreen"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="Close"
|
||||||
|
class="Button IconButton"
|
||||||
|
role="button"
|
||||||
|
title="Close"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="CompassIcon icon-close CloseIcon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="FilterComponent"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="FilterEntry"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="menuwrapper"
|
||||||
|
class="MenuWrapper"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="Button "
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
(unknown)
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
class="Menu noselect bottom"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="menu-contents"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="menu-options"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="Status"
|
||||||
|
class="MenuOption TextOption menu-option"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="menu-name"
|
||||||
|
>
|
||||||
|
Status
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-label="Property 1"
|
||||||
|
class="MenuOption TextOption menu-option"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="menu-name"
|
||||||
|
>
|
||||||
|
Property 1
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-label="Property 2"
|
||||||
|
class="MenuOption TextOption menu-option"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="menu-name"
|
||||||
|
>
|
||||||
|
Property 2
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-label="Property 3"
|
||||||
|
class="MenuOption TextOption menu-option"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="noicon"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="menu-name"
|
||||||
|
>
|
||||||
|
Property 3
|
||||||
|
</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
|
||||||
|
aria-label="menuwrapper"
|
||||||
|
class="MenuWrapper"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="Button "
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
includes
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="octo-spacer"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
class="Button "
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Delete
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<button
|
||||||
|
class="Button "
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
+ Add filter
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
122
webapp/src/components/viewHeader/filterComponent.test.tsx
Normal file
122
webapp/src/components/viewHeader/filterComponent.test.tsx
Normal file
|
|
@ -0,0 +1,122 @@
|
||||||
|
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||||
|
// See LICENSE.txt for license information.
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import {render, screen} from '@testing-library/react'
|
||||||
|
import {Provider as ReduxProvider} from 'react-redux'
|
||||||
|
|
||||||
|
import {mocked} from 'ts-jest/utils'
|
||||||
|
import '@testing-library/jest-dom'
|
||||||
|
|
||||||
|
import userEvent from '@testing-library/user-event'
|
||||||
|
|
||||||
|
import {FilterClause} from '../../blocks/filterClause'
|
||||||
|
|
||||||
|
import {TestBlockFactory} from '../../test/testBlockFactory'
|
||||||
|
import mutator from '../../mutator'
|
||||||
|
|
||||||
|
import {wrapIntl, mockStateStore} from '../../testUtils'
|
||||||
|
|
||||||
|
import FilterComponenet from './filterComponent'
|
||||||
|
|
||||||
|
jest.mock('../../mutator')
|
||||||
|
const mockedMutator = mocked(mutator, true)
|
||||||
|
const filter: FilterClause = {
|
||||||
|
propertyId: '1',
|
||||||
|
condition: 'includes',
|
||||||
|
values: ['Status'],
|
||||||
|
}
|
||||||
|
|
||||||
|
const board = TestBlockFactory.createBoard()
|
||||||
|
const activeView = TestBlockFactory.createBoardView(board)
|
||||||
|
const state = {
|
||||||
|
users: {
|
||||||
|
me: {
|
||||||
|
id: 'user-id-1',
|
||||||
|
username: 'username_1',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
const store = mockStateStore([], state)
|
||||||
|
describe('components/viewHeader/filterComponent', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
jest.clearAllMocks()
|
||||||
|
board.fields.cardProperties[0].options = [{id: 'Status', value: 'Status', color: ''}]
|
||||||
|
activeView.fields.filter.filters = [filter]
|
||||||
|
})
|
||||||
|
test('return filterComponent', () => {
|
||||||
|
const {container} = render(
|
||||||
|
wrapIntl(
|
||||||
|
<ReduxProvider store={store}>
|
||||||
|
<FilterComponenet
|
||||||
|
board={board}
|
||||||
|
activeView={activeView}
|
||||||
|
onClose={jest.fn()}
|
||||||
|
/>
|
||||||
|
</ReduxProvider>,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
const buttonElement = screen.getAllByRole('button', {name: 'menuwrapper'})[0]
|
||||||
|
userEvent.click(buttonElement)
|
||||||
|
expect(container).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
test('return filterComponent and add Filter', () => {
|
||||||
|
const {container} = render(
|
||||||
|
wrapIntl(
|
||||||
|
<ReduxProvider store={store}>
|
||||||
|
<FilterComponenet
|
||||||
|
board={board}
|
||||||
|
activeView={activeView}
|
||||||
|
onClose={jest.fn()}
|
||||||
|
/>
|
||||||
|
</ReduxProvider>,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
const buttonElement = screen.getAllByRole('button', {name: 'menuwrapper'})[0]
|
||||||
|
userEvent.click(buttonElement)
|
||||||
|
expect(container).toMatchSnapshot()
|
||||||
|
const buttonAdd = screen.getByText('+ Add filter')
|
||||||
|
userEvent.click(buttonAdd)
|
||||||
|
expect(mockedMutator.changeViewFilter).toBeCalledTimes(1)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('return filterComponent and filter by status', () => {
|
||||||
|
const {container} = render(
|
||||||
|
wrapIntl(
|
||||||
|
<ReduxProvider store={store}>
|
||||||
|
<FilterComponenet
|
||||||
|
board={board}
|
||||||
|
activeView={activeView}
|
||||||
|
onClose={jest.fn()}
|
||||||
|
/>
|
||||||
|
</ReduxProvider>,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
const buttonElement = screen.getAllByRole('button', {name: 'menuwrapper'})[0]
|
||||||
|
userEvent.click(buttonElement)
|
||||||
|
expect(container).toMatchSnapshot()
|
||||||
|
const buttonStatus = screen.getByRole('button', {name: 'Status'})
|
||||||
|
userEvent.click(buttonStatus)
|
||||||
|
expect(mockedMutator.changeViewFilter).toBeCalledTimes(1)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('return filterComponent and click is empty', () => {
|
||||||
|
const {container} = render(
|
||||||
|
wrapIntl(
|
||||||
|
<ReduxProvider store={store}>
|
||||||
|
<FilterComponenet
|
||||||
|
board={board}
|
||||||
|
activeView={activeView}
|
||||||
|
onClose={jest.fn()}
|
||||||
|
/>
|
||||||
|
</ReduxProvider>,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
const buttonElement = screen.getAllByRole('button', {name: 'menuwrapper'})[1]
|
||||||
|
userEvent.click(buttonElement)
|
||||||
|
expect(container).toMatchSnapshot()
|
||||||
|
const buttonNotInclude = screen.getByRole('button', {name: 'is empty'})
|
||||||
|
userEvent.click(buttonNotInclude)
|
||||||
|
expect(mockedMutator.changeViewFilter).toBeCalledTimes(1)
|
||||||
|
})
|
||||||
|
})
|
||||||
Loading…
Reference in a new issue