Skip to content
This repository has been archived by the owner on Dec 30, 2022. It is now read-only.

feat(RefinementList): forward class names to input #696

Merged
merged 2 commits into from
Jul 16, 2019
Merged

feat(RefinementList): forward class names to input #696

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f1e5784
feat(RefinementList): forward class names to input
Haroenv Jul 16, 2019
db37bcf
test: add test for this behaviour
Haroenv Jul 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/components/RefinementList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
<search-input
v-model="searchForFacetValues"
:placeholder="searchablePlaceholder"
:class-names="classNames"
/>
</div>
<slot
Expand Down
20 changes: 20 additions & 0 deletions src/components/__tests__/RefinementList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,26 @@ it("allows override of placeholder when it's searchable", () => {
);
});

it("allows search bar classes override when it's searchable", () => {
__setState({
...defaultState,
});
const wrapper = mount(RefinementList, {
propsData: {
searchable: true,
attribute: 'something',
classNames: {
'ais-SearchBox-form': 'moar-classes',
},
},
});
expect(wrapper.html()).toMatchSnapshot();

expect(wrapper.find('.ais-SearchBox-form').hasClass('moar-classes')).toBe(
true
);
});

it("disables show more if can't refine", () => {
__setState({
...defaultState,
Expand Down
162 changes: 162 additions & 0 deletions src/components/__tests__/__snapshots__/RefinementList.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,167 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`allows search bar classes override when it's searchable 1`] = `

<div class="ais-RefinementList ais-RefinementList--noRefinement">
<div class="ais-RefinementList-searchBox">
<form action
role="search"
novalidate="novalidate"
class="ais-SearchBox-form moar-classes"
>
<input type="search"
autocorrect="off"
autocapitalize="off"
autocomplete="off"
spellcheck="false"
required="required"
maxlength="512"
aria-label="Search"
placeholder="Search here…"
class="ais-SearchBox-input"
>
<button type="submit"
title="Search"
class="ais-SearchBox-submit"
>
<svg role="img"
xmlns="http://www.w3.org/2000/svg"
width="10"
height="10"
viewbox="0 0 40 40"
class="ais-SearchBox-submitIcon"
>
<path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
fillrule="evenodd"
>
</path>
</svg>
</button>
<button type="reset"
title="Clear"
hidden="hidden"
class="ais-SearchBox-reset"
>
<svg role="img"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewbox="0 0 20 20"
class="ais-SearchBox-resetIcon"
>
<path d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"
fillrule="evenodd"
>
</path>
</svg>
</button>
</form>
</div>
<ul class="ais-RefinementList-list">
<li class="ais-RefinementList-item">
<label class="ais-RefinementList-label">
<input type="checkbox"
class="ais-RefinementList-checkbox"
value="yo"
>
<span class="ais-RefinementList-labelText">
<span class="ais-Highlight">
y
<mark class="ais-Highlight-highlighted">
o
</mark>
</span>
</span>
<span class="ais-RefinementList-count">
20
</span>
</label>
</li>
<li class="ais-RefinementList-item">
<label class="ais-RefinementList-label">
<input type="checkbox"
class="ais-RefinementList-checkbox"
value="how"
>
<span class="ais-RefinementList-labelText">
<span class="ais-Highlight">
how
</span>
</span>
<span class="ais-RefinementList-count">
10
</span>
</label>
</li>
<li class="ais-RefinementList-item">
<label class="ais-RefinementList-label">
<input type="checkbox"
class="ais-RefinementList-checkbox"
value="are"
>
<span class="ais-RefinementList-labelText">
<span class="ais-Highlight">
are
</span>
</span>
<span class="ais-RefinementList-count">
8
</span>
</label>
</li>
<li class="ais-RefinementList-item">
<label class="ais-RefinementList-label">
<input type="checkbox"
class="ais-RefinementList-checkbox"
value="you"
>
<span class="ais-RefinementList-labelText">
<span class="ais-Highlight">
you
</span>
</span>
<span class="ais-RefinementList-count">
9
</span>
</label>
</li>
<li class="ais-RefinementList-item">
<label class="ais-RefinementList-label">
<input type="checkbox"
class="ais-RefinementList-checkbox"
value="doing"
>
<span class="ais-RefinementList-labelText">
<span class="ais-Highlight">
doing
</span>
</span>
<span class="ais-RefinementList-count">
100
</span>
</label>
</li>
<li class="ais-RefinementList-item">
<label class="ais-RefinementList-label">
<input type="checkbox"
class="ais-RefinementList-checkbox"
value="?"
>
<span class="ais-RefinementList-labelText">
<span class="ais-Highlight">
?
</span>
</span>
<span class="ais-RefinementList-count">
0
</span>
</label>
</li>
</ul>
</div>

`;

exports[`renders correctly (empty) 1`] = `

<div class="ais-RefinementList ais-RefinementList--noRefinement">
Expand Down