`SearchListControl`: Fix preserving case of original item (https://github.com/woocommerce/woocommerce-blocks/pull/6551)
Searches would keep the case of the user input instead of the original case of the name. Search still is case insensitive, but preserves the original item's case. Also, this PR adds a test for this bug and fixes a previous test case.
This commit is contained in:
Lucio Giannotta
GitHub
parent
3e6503a0d3
commit
615ff35fac
|
|
@ -54,13 +54,13 @@ Object {
|
|||
>
|
||||
<label
|
||||
class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
|
||||
for="inspector-text-control-10"
|
||||
for="inspector-text-control-11"
|
||||
>
|
||||
Search for items
|
||||
</label>
|
||||
<input
|
||||
class="components-text-control__input"
|
||||
id="inspector-text-control-10"
|
||||
id="inspector-text-control-11"
|
||||
type="search"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -73,12 +73,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-10-1"
|
||||
for="search-list-item-11-1"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-10-1"
|
||||
name="search-list-item-10"
|
||||
id="search-list-item-11-1"
|
||||
name="search-list-item-11"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -96,12 +96,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-1"
|
||||
for="search-list-item-10-2"
|
||||
for="search-list-item-11-2"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-10-2"
|
||||
name="search-list-item-10"
|
||||
id="search-list-item-11-2"
|
||||
name="search-list-item-11"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -124,12 +124,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-1"
|
||||
for="search-list-item-10-3"
|
||||
for="search-list-item-11-3"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-10-3"
|
||||
name="search-list-item-10"
|
||||
id="search-list-item-11-3"
|
||||
name="search-list-item-11"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -152,12 +152,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-2"
|
||||
for="search-list-item-10-4"
|
||||
for="search-list-item-11-4"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-10-4"
|
||||
name="search-list-item-10"
|
||||
id="search-list-item-11-4"
|
||||
name="search-list-item-11"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -180,12 +180,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-10-5"
|
||||
for="search-list-item-11-5"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-10-5"
|
||||
name="search-list-item-10"
|
||||
id="search-list-item-11-5"
|
||||
name="search-list-item-11"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -203,12 +203,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-10-6"
|
||||
for="search-list-item-11-6"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-10-6"
|
||||
name="search-list-item-10"
|
||||
id="search-list-item-11-6"
|
||||
name="search-list-item-11"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -253,13 +253,13 @@ Object {
|
|||
>
|
||||
<label
|
||||
class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
|
||||
for="inspector-text-control-10"
|
||||
for="inspector-text-control-11"
|
||||
>
|
||||
Search for items
|
||||
</label>
|
||||
<input
|
||||
class="components-text-control__input"
|
||||
id="inspector-text-control-10"
|
||||
id="inspector-text-control-11"
|
||||
type="search"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -272,12 +272,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-10-1"
|
||||
for="search-list-item-11-1"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-10-1"
|
||||
name="search-list-item-10"
|
||||
id="search-list-item-11-1"
|
||||
name="search-list-item-11"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -295,12 +295,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-1"
|
||||
for="search-list-item-10-2"
|
||||
for="search-list-item-11-2"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-10-2"
|
||||
name="search-list-item-10"
|
||||
id="search-list-item-11-2"
|
||||
name="search-list-item-11"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -323,12 +323,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-1"
|
||||
for="search-list-item-10-3"
|
||||
for="search-list-item-11-3"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-10-3"
|
||||
name="search-list-item-10"
|
||||
id="search-list-item-11-3"
|
||||
name="search-list-item-11"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -351,12 +351,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-2"
|
||||
for="search-list-item-10-4"
|
||||
for="search-list-item-11-4"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-10-4"
|
||||
name="search-list-item-10"
|
||||
id="search-list-item-11-4"
|
||||
name="search-list-item-11"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -379,12 +379,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-10-5"
|
||||
for="search-list-item-11-5"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-10-5"
|
||||
name="search-list-item-10"
|
||||
id="search-list-item-11-5"
|
||||
name="search-list-item-11"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -402,12 +402,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-10-6"
|
||||
for="search-list-item-11-6"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-10-6"
|
||||
name="search-list-item-10"
|
||||
id="search-list-item-11-6"
|
||||
name="search-list-item-11"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -1431,13 +1431,13 @@ Object {
|
|||
>
|
||||
<label
|
||||
class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
|
||||
for="inspector-text-control-9"
|
||||
for="inspector-text-control-10"
|
||||
>
|
||||
Search for items
|
||||
</label>
|
||||
<input
|
||||
class="components-text-control__input"
|
||||
id="inspector-text-control-9"
|
||||
id="inspector-text-control-10"
|
||||
type="search"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -1513,13 +1513,13 @@ Object {
|
|||
>
|
||||
<label
|
||||
class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
|
||||
for="inspector-text-control-9"
|
||||
for="inspector-text-control-10"
|
||||
>
|
||||
Search for items
|
||||
</label>
|
||||
<input
|
||||
class="components-text-control__input"
|
||||
id="inspector-text-control-9"
|
||||
id="inspector-text-control-10"
|
||||
type="search"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -1676,13 +1676,13 @@ Object {
|
|||
>
|
||||
<label
|
||||
class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
|
||||
for="inspector-text-control-8"
|
||||
for="inspector-text-control-9"
|
||||
>
|
||||
Testing search label
|
||||
</label>
|
||||
<input
|
||||
class="components-text-control__input"
|
||||
id="inspector-text-control-8"
|
||||
id="inspector-text-control-9"
|
||||
type="search"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -1695,12 +1695,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-8-1"
|
||||
for="search-list-item-9-1"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-8-1"
|
||||
name="search-list-item-8"
|
||||
id="search-list-item-9-1"
|
||||
name="search-list-item-9"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -1718,12 +1718,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-8-2"
|
||||
for="search-list-item-9-2"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-8-2"
|
||||
name="search-list-item-8"
|
||||
id="search-list-item-9-2"
|
||||
name="search-list-item-9"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -1741,12 +1741,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-8-3"
|
||||
for="search-list-item-9-3"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-8-3"
|
||||
name="search-list-item-8"
|
||||
id="search-list-item-9-3"
|
||||
name="search-list-item-9"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -1764,12 +1764,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-8-4"
|
||||
for="search-list-item-9-4"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-8-4"
|
||||
name="search-list-item-8"
|
||||
id="search-list-item-9-4"
|
||||
name="search-list-item-9"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -1787,12 +1787,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-8-5"
|
||||
for="search-list-item-9-5"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-8-5"
|
||||
name="search-list-item-8"
|
||||
id="search-list-item-9-5"
|
||||
name="search-list-item-9"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -1810,12 +1810,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-8-6"
|
||||
for="search-list-item-9-6"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-8-6"
|
||||
name="search-list-item-8"
|
||||
id="search-list-item-9-6"
|
||||
name="search-list-item-9"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -1860,13 +1860,13 @@ Object {
|
|||
>
|
||||
<label
|
||||
class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
|
||||
for="inspector-text-control-8"
|
||||
for="inspector-text-control-9"
|
||||
>
|
||||
Testing search label
|
||||
</label>
|
||||
<input
|
||||
class="components-text-control__input"
|
||||
id="inspector-text-control-8"
|
||||
id="inspector-text-control-9"
|
||||
type="search"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -1879,12 +1879,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-8-1"
|
||||
for="search-list-item-9-1"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-8-1"
|
||||
name="search-list-item-8"
|
||||
id="search-list-item-9-1"
|
||||
name="search-list-item-9"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -1902,12 +1902,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-8-2"
|
||||
for="search-list-item-9-2"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-8-2"
|
||||
name="search-list-item-8"
|
||||
id="search-list-item-9-2"
|
||||
name="search-list-item-9"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -1925,12 +1925,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-8-3"
|
||||
for="search-list-item-9-3"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-8-3"
|
||||
name="search-list-item-8"
|
||||
id="search-list-item-9-3"
|
||||
name="search-list-item-9"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -1948,12 +1948,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-8-4"
|
||||
for="search-list-item-9-4"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-8-4"
|
||||
name="search-list-item-8"
|
||||
id="search-list-item-9-4"
|
||||
name="search-list-item-9"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -1971,12 +1971,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-8-5"
|
||||
for="search-list-item-9-5"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-8-5"
|
||||
name="search-list-item-8"
|
||||
id="search-list-item-9-5"
|
||||
name="search-list-item-9"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -1994,12 +1994,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-8-6"
|
||||
for="search-list-item-9-6"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-8-6"
|
||||
name="search-list-item-8"
|
||||
id="search-list-item-9-6"
|
||||
name="search-list-item-9"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -2342,13 +2342,13 @@ Object {
|
|||
>
|
||||
<label
|
||||
class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
|
||||
for="inspector-text-control-7"
|
||||
for="inspector-text-control-8"
|
||||
>
|
||||
Search for items
|
||||
</label>
|
||||
<input
|
||||
class="components-text-control__input"
|
||||
id="inspector-text-control-7"
|
||||
id="inspector-text-control-8"
|
||||
type="search"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -2361,12 +2361,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-7-1"
|
||||
for="search-list-item-8-1"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-7-1"
|
||||
name="search-list-item-7"
|
||||
id="search-list-item-8-1"
|
||||
name="search-list-item-8"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -2384,12 +2384,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-7-2"
|
||||
for="search-list-item-8-2"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-7-2"
|
||||
name="search-list-item-7"
|
||||
id="search-list-item-8-2"
|
||||
name="search-list-item-8"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -2407,12 +2407,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-7-3"
|
||||
for="search-list-item-8-3"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-7-3"
|
||||
name="search-list-item-7"
|
||||
id="search-list-item-8-3"
|
||||
name="search-list-item-8"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -2430,12 +2430,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-7-4"
|
||||
for="search-list-item-8-4"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-7-4"
|
||||
name="search-list-item-7"
|
||||
id="search-list-item-8-4"
|
||||
name="search-list-item-8"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -2453,12 +2453,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-7-5"
|
||||
for="search-list-item-8-5"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-7-5"
|
||||
name="search-list-item-7"
|
||||
id="search-list-item-8-5"
|
||||
name="search-list-item-8"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -2476,12 +2476,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-7-6"
|
||||
for="search-list-item-8-6"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-7-6"
|
||||
name="search-list-item-7"
|
||||
id="search-list-item-8-6"
|
||||
name="search-list-item-8"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -2526,13 +2526,13 @@ Object {
|
|||
>
|
||||
<label
|
||||
class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
|
||||
for="inspector-text-control-7"
|
||||
for="inspector-text-control-8"
|
||||
>
|
||||
Search for items
|
||||
</label>
|
||||
<input
|
||||
class="components-text-control__input"
|
||||
id="inspector-text-control-7"
|
||||
id="inspector-text-control-8"
|
||||
type="search"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -2545,12 +2545,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-7-1"
|
||||
for="search-list-item-8-1"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-7-1"
|
||||
name="search-list-item-7"
|
||||
id="search-list-item-8-1"
|
||||
name="search-list-item-8"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -2568,12 +2568,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-7-2"
|
||||
for="search-list-item-8-2"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-7-2"
|
||||
name="search-list-item-7"
|
||||
id="search-list-item-8-2"
|
||||
name="search-list-item-8"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -2591,12 +2591,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-7-3"
|
||||
for="search-list-item-8-3"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-7-3"
|
||||
name="search-list-item-7"
|
||||
id="search-list-item-8-3"
|
||||
name="search-list-item-8"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -2614,12 +2614,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-7-4"
|
||||
for="search-list-item-8-4"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-7-4"
|
||||
name="search-list-item-7"
|
||||
id="search-list-item-8-4"
|
||||
name="search-list-item-8"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -2637,12 +2637,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-7-5"
|
||||
for="search-list-item-8-5"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-7-5"
|
||||
name="search-list-item-7"
|
||||
id="search-list-item-8-5"
|
||||
name="search-list-item-8"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -2660,12 +2660,12 @@ Object {
|
|||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-7-6"
|
||||
for="search-list-item-8-6"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-7-6"
|
||||
name="search-list-item-7"
|
||||
id="search-list-item-8-6"
|
||||
name="search-list-item-8"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
|
|
@ -3248,7 +3248,7 @@ Object {
|
|||
class="components-text-control__input"
|
||||
id="inspector-text-control-6"
|
||||
type="search"
|
||||
value=""
|
||||
value="BeRrY"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -3256,52 +3256,6 @@ Object {
|
|||
<ul
|
||||
class="woocommerce-search-list__list"
|
||||
>
|
||||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-6-1"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-6-1"
|
||||
name="search-list-item-6"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="woocommerce-search-list__item-label"
|
||||
>
|
||||
<span
|
||||
class="woocommerce-search-list__item-name"
|
||||
>
|
||||
Apricots
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-6-2"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-6-2"
|
||||
name="search-list-item-6"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="woocommerce-search-list__item-label"
|
||||
>
|
||||
<span
|
||||
class="woocommerce-search-list__item-name"
|
||||
>
|
||||
Clementine
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
|
|
@ -3320,53 +3274,11 @@ Object {
|
|||
<span
|
||||
class="woocommerce-search-list__item-name"
|
||||
>
|
||||
Elderberry
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-6-4"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-6-4"
|
||||
name="search-list-item-6"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="woocommerce-search-list__item-label"
|
||||
>
|
||||
<span
|
||||
class="woocommerce-search-list__item-name"
|
||||
>
|
||||
Guava
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-6-5"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-6-5"
|
||||
name="search-list-item-6"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="woocommerce-search-list__item-label"
|
||||
>
|
||||
<span
|
||||
class="woocommerce-search-list__item-name"
|
||||
>
|
||||
Lychee
|
||||
Elder
|
||||
<strong>
|
||||
berry
|
||||
</strong>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
|
|
@ -3389,7 +3301,11 @@ Object {
|
|||
<span
|
||||
class="woocommerce-search-list__item-name"
|
||||
>
|
||||
Mulberry
|
||||
Mul
|
||||
<strong>
|
||||
berry
|
||||
</strong>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
|
|
@ -3432,7 +3348,7 @@ Object {
|
|||
class="components-text-control__input"
|
||||
id="inspector-text-control-6"
|
||||
type="search"
|
||||
value=""
|
||||
value="BeRrY"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -3440,52 +3356,6 @@ Object {
|
|||
<ul
|
||||
class="woocommerce-search-list__list"
|
||||
>
|
||||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-6-1"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-6-1"
|
||||
name="search-list-item-6"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="woocommerce-search-list__item-label"
|
||||
>
|
||||
<span
|
||||
class="woocommerce-search-list__item-name"
|
||||
>
|
||||
Apricots
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-6-2"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-6-2"
|
||||
name="search-list-item-6"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="woocommerce-search-list__item-label"
|
||||
>
|
||||
<span
|
||||
class="woocommerce-search-list__item-name"
|
||||
>
|
||||
Clementine
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
|
|
@ -3504,53 +3374,11 @@ Object {
|
|||
<span
|
||||
class="woocommerce-search-list__item-name"
|
||||
>
|
||||
Elderberry
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-6-4"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-6-4"
|
||||
name="search-list-item-6"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="woocommerce-search-list__item-label"
|
||||
>
|
||||
<span
|
||||
class="woocommerce-search-list__item-name"
|
||||
>
|
||||
Guava
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label
|
||||
class=" woocommerce-search-list__item depth-0"
|
||||
for="search-list-item-6-5"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-search-list__item-input"
|
||||
id="search-list-item-6-5"
|
||||
name="search-list-item-6"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="woocommerce-search-list__item-label"
|
||||
>
|
||||
<span
|
||||
class="woocommerce-search-list__item-name"
|
||||
>
|
||||
Lychee
|
||||
Elder
|
||||
<strong>
|
||||
berry
|
||||
</strong>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
|
|
@ -3573,7 +3401,11 @@ Object {
|
|||
<span
|
||||
class="woocommerce-search-list__item-name"
|
||||
>
|
||||
Mulberry
|
||||
Mul
|
||||
<strong>
|
||||
berry
|
||||
</strong>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { render } from '@testing-library/react';
|
||||
import { fireEvent, render } from '@testing-library/react';
|
||||
import { noop } from 'lodash';
|
||||
|
||||
/**
|
||||
|
|
@ -9,6 +9,11 @@ import { noop } from 'lodash';
|
|||
*/
|
||||
import { SearchListControl } from '../';
|
||||
|
||||
const SELECTORS = {
|
||||
listItems: '.woocommerce-search-list__list > li',
|
||||
searchInput: '.components-text-control__input[type="search"]',
|
||||
};
|
||||
|
||||
const list = [
|
||||
{ id: 1, name: 'Apricots' },
|
||||
{ id: 2, name: 'Clementine' },
|
||||
|
|
@ -108,13 +113,50 @@ describe( 'SearchListControl', () => {
|
|||
<SearchListControl
|
||||
instanceId={ 1 }
|
||||
list={ list }
|
||||
search="bERry"
|
||||
selected={ [] }
|
||||
onChange={ noop }
|
||||
debouncedSpeak={ noop }
|
||||
/>
|
||||
);
|
||||
|
||||
fireEvent.change(
|
||||
component.container.querySelector( SELECTORS.searchInput ),
|
||||
{ target: { value: 'BeRrY' } }
|
||||
);
|
||||
|
||||
expect( component ).toMatchSnapshot();
|
||||
|
||||
const $listItems = component.container.querySelectorAll(
|
||||
SELECTORS.listItems
|
||||
);
|
||||
|
||||
expect( $listItems ).toHaveLength( 2 );
|
||||
} );
|
||||
|
||||
// @see https://github.com/woocommerce/woocommerce-blocks/issues/6524
|
||||
test( "should render search results in their original case regardless of user's input case", () => {
|
||||
const EXPECTED = [ 'Elderberry', 'Mulberry' ];
|
||||
|
||||
const component = render(
|
||||
<SearchListControl
|
||||
instanceId={ 1 }
|
||||
list={ list }
|
||||
selected={ [] }
|
||||
onChange={ noop }
|
||||
debouncedSpeak={ noop }
|
||||
/>
|
||||
);
|
||||
|
||||
fireEvent.change(
|
||||
component.container.querySelector( SELECTORS.searchInput ),
|
||||
{ target: { value: 'BeRrY' } }
|
||||
);
|
||||
|
||||
const listItems = Array.from(
|
||||
component.container.querySelectorAll( SELECTORS.listItems )
|
||||
).map( ( $el ) => $el.textContent );
|
||||
|
||||
expect( listItems ).toEqual( expect.arrayContaining( EXPECTED ) );
|
||||
} );
|
||||
|
||||
test( 'should render a search box with a search term, and no matching options', () => {
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
* External dependencies
|
||||
*/
|
||||
import { groupBy, keyBy } from 'lodash';
|
||||
import { __, _n, sprintf } from '@wordpress/i18n';
|
||||
import { Fragment } from '@wordpress/element';
|
||||
import { __, _n, sprintf } from '@wordpress/i18n';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
|
|
@ -114,19 +114,16 @@ export const getHighlightedName = (
|
|||
}
|
||||
const re = new RegExp(
|
||||
// Escaping.
|
||||
search.replace( /[-\/\\^$*+?.()|[\]{}]/g, '\\$&' ),
|
||||
`(${ search.replace( /[-\/\\^$*+?.()|[\]{}]/g, '\\$&' ) })`,
|
||||
'ig'
|
||||
);
|
||||
const nameParts = name.split( re );
|
||||
|
||||
return nameParts.map( ( part, i ) => {
|
||||
if ( i === 0 ) {
|
||||
return part;
|
||||
}
|
||||
return (
|
||||
<Fragment key={ i }>
|
||||
<strong>{ search }</strong>
|
||||
{ part }
|
||||
</Fragment>
|
||||
return re.test( part ) ? (
|
||||
<strong key={ i }>{ part }</strong>
|
||||
) : (
|
||||
<Fragment key={ i }>{ part }</Fragment>
|
||||
);
|
||||
} );
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue