Skip to content

Commit

Permalink
fix: update select test
Browse files Browse the repository at this point in the history
  • Loading branch information
@gabaldon
gabaldon committed Sep 4, 2024
1 parent 2d76532 commit c7cefe5
Show file tree
Hide file tree
Showing 2 changed files with 206 additions and 80 deletions.
4 changes: 0 additions & 4 deletions src/components/Select/WSelect.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,13 @@ import Icon from '@/assets/svg/navigation-cursor.svg?component'
describe('WSelect', () => {
it('renders properly', () => {
const wrapper = shallowMount(WSelect, {
emits: ['update:modelValue'],
props: {
dropdownPosition: DropdownPosition.Bottom,
modelValue: {
key: 'en',
label: 'English',
icon: null
},
'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
options: [{
key: 'en',
label: 'English',
Expand All @@ -34,15 +32,13 @@ describe('WSelect', () => {

Check failure on line 32 in src/components/Select/WSelect.spec.ts

View workflow job for this annotation

GitHub Actions / cache-and-install

src/components/Select/WSelect.spec.ts > WSelect > renders properly 

Error: Snapshot `WSelect > renders properly 1` mismatched

- Expected
+ Received

- <div
-   class="v-select vs--single vs--unsearchable language-selector"
+ <anonymous-stub
+   appendtobody="false"
+   autocomplete="off"
+   calculateposition="[Function]"
+   class="language-selector"
+   clearable="false"
+   clearsearchonblur="[Function]"
+   clearsearchonselect="true"
+   closeonselect="true"
+   components="[object Object]"
+   createoption="[Function]"
+   deselectfromdropdown="false"
    dir="auto"
- >
-   
-   
-   <div
-     aria-expanded="false"
-     aria-label="Search for option"
-     aria-owns="vs1__listbox"
-     class="vs__dropdown-toggle"
-     id="vs1__combobox"
-     role="combobox"
-   >
-     <div
-       class="vs__selected-options"
-     >
-       
-       
-       <span
-         class="vs__selected"
-       >
-         <!--v-if-->
-          English
-       </span>
-       
-       
-       
-       <input
-         aria-autocomplete="list"
-         aria-controls="vs1__listbox"
-         aria-labelledby="vs1__combobox"
-         autocomplete="off"
-         class="vs__search"
-         readonly=""
-         type="search"
-         value=""
-       />
-       
-     </div>
-     <div
-       class="vs__actions"
-     >
-       <button
-         aria-label="Clear Selected"
-         class="vs__clear"
-         style="display: none;"
-         title="Clear Selected"
-         type="button"
-       >
-         <svg
-           height="10"
-           width="10"
-           xmlns="http://www.w3.org/2000/svg"
-         >
-           <path
-             d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z"
-           />
-         </svg>
-       </button>
-       
-       <svg
-         class="vs__open-indicator"
-         height="10"
-         role="presentation"
-         width="14"
-         xmlns="http://www.w3.org/2000/svg"
-       >
-         <path
-           d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z"
-         />
-       </svg>
-       
-       
-       <div
-         class="vs__spinner"
-         style="display: none;"
-       >
-         Loading...
-       </div>
-       
-     </div>
-   </div>
-   <transition-stub
-     appear="false"
-     css="true"
-     name="dropdown"
-     persisted="false"
-   >
-     <ul
-       id="vs1__listbox"
-       role="listbox"
-       style="display: none; visibility: hidden;"
-     />
-   </transition-stub>
-   
-   
- </div>
+   disabled="false"
+   dropdownshouldopen="[Function]"
+   filter="[Function]"
+   filterable="false"
+   filterby="[Function]"
+   getoptionkey="[Function]"
+   getoptionlabel="[Function]"
+   label="label"
+   mapkeydown="[Function]"
+   modelvalue="[object Object]"
+   multiple="false"
+   nodrop="false"
+   options="[object Object],[object Object]"
+   placeholder=""
+   pushtags="false"
+   reduce="[Function]"
+   resetonoptionschange="false"
+   searchable="false"
+   searchinputqueryselector="[type=search]"
+   selectable="[Function]"
+   selectonkeycodes="13"
+   selectontab="false"
+   taggable="false"
+   transition="dropdown"
+   uid="1"
+ />

 ❯ src/components/Select/WSelect.spec.ts:32:29
it('renders properly an icon when provided', () => {
const wrapper = shallowMount(WSelect, {
emits: ['update:modelValue'],
props: {
dropdownPosition: DropdownPosition.Bottom,
modelValue: {
key: 'en',
label: 'English',
icon: Icon
},
'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
options: [{
key: 'en',
label: 'English',
Expand Down
282 changes: 206 additions & 76 deletions src/components/Select/__snapshots__/WSelect.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,215 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`WSelect > renders properly 1`] = `
<anonymous-stub
appendtobody="false"
autocomplete="off"
calculateposition="[Function]"
class="language-selector"
clearable="false"
clearsearchonblur="[Function]"
clearsearchonselect="true"
closeonselect="true"
components="[object Object]"
createoption="[Function]"
deselectfromdropdown="false"
<div
class="v-select vs--single vs--unsearchable language-selector"
dir="auto"
disabled="false"
dropdownshouldopen="[Function]"
filter="[Function]"
filterable="false"
filterby="[Function]"
getoptionkey="[Function]"
getoptionlabel="[Function]"
label="label"
mapkeydown="[Function]"
modelvalue="[object Object]"
multiple="false"
nodrop="false"
options="[object Object],[object Object]"
placeholder=""
pushtags="false"
reduce="[Function]"
resetonoptionschange="false"
searchable="false"
searchinputqueryselector="[type=search]"
selectable="[Function]"
selectonkeycodes="13"
selectontab="false"
taggable="false"
transition="dropdown"
uid="1"
/>
>
<div
aria-expanded="false"
aria-label="Search for option"
aria-owns="vs1__listbox"
class="vs__dropdown-toggle"
id="vs1__combobox"
role="combobox"
>
<div
class="vs__selected-options"
>
<span
class="vs__selected"
>
<!--v-if-->
English
</span>
<input
aria-autocomplete="list"
aria-controls="vs1__listbox"
aria-labelledby="vs1__combobox"
autocomplete="off"
class="vs__search"
readonly=""
type="search"
value=""
/>
</div>
<div
class="vs__actions"
>
<button
aria-label="Clear Selected"
class="vs__clear"
style="display: none;"
title="Clear Selected"
type="button"
>
<svg
height="10"
width="10"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z"
/>
</svg>
</button>
<svg
class="vs__open-indicator"
height="10"
role="presentation"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z"
/>
</svg>
<div
class="vs__spinner"
style="display: none;"
>
Loading...
</div>
</div>
</div>
<transition-stub
appear="false"
css="true"
name="dropdown"
persisted="false"
>
<ul
id="vs1__listbox"
role="listbox"
style="display: none; visibility: hidden;"
/>
</transition-stub>
</div>
`;

exports[`WSelect > renders properly an icon when provided 1`] = `
<anonymous-stub
appendtobody="false"
autocomplete="off"
calculateposition="[Function]"
class="language-selector"
clearable="false"
clearsearchonblur="[Function]"
clearsearchonselect="true"
closeonselect="true"
components="[object Object]"
createoption="[Function]"
deselectfromdropdown="false"
<div
class="v-select vs--single vs--unsearchable language-selector"
dir="auto"
disabled="false"
dropdownshouldopen="[Function]"
filter="[Function]"
filterable="false"
filterby="[Function]"
getoptionkey="[Function]"
getoptionlabel="[Function]"
label="label"
mapkeydown="[Function]"
modelvalue="[object Object]"
multiple="false"
nodrop="false"
options="[object Object],[object Object]"
placeholder=""
pushtags="false"
reduce="[Function]"
resetonoptionschange="false"
searchable="false"
searchinputqueryselector="[type=search]"
selectable="[Function]"
selectonkeycodes="13"
selectontab="false"
taggable="false"
transition="dropdown"
uid="2"
/>
>
<div
aria-expanded="false"
aria-label="Search for option"
aria-owns="vs2__listbox"
class="vs__dropdown-toggle"
id="vs2__combobox"
role="combobox"
>
<div
class="vs__selected-options"
>
<span
class="vs__selected"
>
<svg
class="dropdown-items"
fill="none"
height="13"
viewBox="0 0 12 13"
width="12"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.17 6.39 5.89 9.44.61 12.48V.29l5.28 3.05z"
fill="#00E2ED"
/>
</svg>
English
</span>
<input
aria-autocomplete="list"
aria-controls="vs2__listbox"
aria-labelledby="vs2__combobox"
autocomplete="off"
class="vs__search"
readonly=""
type="search"
value=""
/>
</div>
<div
class="vs__actions"
>
<button
aria-label="Clear Selected"
class="vs__clear"
style="display: none;"
title="Clear Selected"
type="button"
>
<svg
height="10"
width="10"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z"
/>
</svg>
</button>
<svg
class="vs__open-indicator"
height="10"
role="presentation"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z"
/>
</svg>
<div
class="vs__spinner"
style="display: none;"
>
Loading...
</div>
</div>
</div>
<transition-stub
appear="false"
css="true"
name="dropdown"
persisted="false"
>
<ul
id="vs2__listbox"
role="listbox"
style="display: none; visibility: hidden;"
/>
</transition-stub>
</div>
`;

0 comments on commit c7cefe5

Please sign in to comment.