Skip to content

Commit

Permalink
test(autocomplete): add autocomplete test cases (#1181)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mlmoravek
mlmoravek authored Feb 11, 2025
1 parent 8e235f3 commit a89e975
Show file tree
Hide file tree
Showing 18 changed files with 565 additions and 78 deletions.
3 changes: 2 additions & 1 deletion packages/oruga/src/components/autocomplete/Autocomplete.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -284,7 +284,8 @@ function setSelected(item: T | SpecialOption | undefined): void {
inputValue.value = props.clearOnSelect ? "" : option?.label || "";
checkHtml5Validity();
setFocus();
if (props.keepOpen) setFocus();
else isActive.value = false;
}
// --- Event Handler ---
Expand Down
14 changes: 14 additions & 0 deletions packages/oruga/src/components/autocomplete/examples/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ import BaseCode from "./base.vue?raw";
import Options from "./options.vue";
import OptionsCode from "./options.vue?raw";
import Slots from "./slots.vue";
import SlotsCode from "./slots.vue?raw";
import Selection from "./selection.vue";
import SelectionCode from "./selection.vue?raw";
Expand Down Expand Up @@ -61,6 +64,17 @@ import ScrollCode from "./scroll.vue?raw";
</div>
<ExampleViewer :component="Options" :code="OptionsCode" />

<h3 id="scroll">Slots</h3>
<p>
A header and a footer can be added to the options list by using the
<code>header</code> and <code>footer</code> slots. The header and
footer can be made clickable by adding the
<code>selectable-header</code> and
<code>selectable-footer</code> props. Clicking them will clear the
input.
</p>
<ExampleViewer :component="Slots" :code="SlotsCode" />

<h3 id="scroll">Infinite Scroll</h3>
<p>
When <code>check-scroll</code> prop is set, the component will emits
Expand Down
7 changes: 1 addition & 6 deletions packages/oruga/src/components/autocomplete/examples/options.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,12 +241,7 @@ const groupSelected = ref();
v-model="selected"
:options="options"
placeholder="e.g. Anne"
open-on-focus
selectable-header
selectable-footer>
<template #empty> No results found </template>
<template #header> Header </template>
<template #footer> Footer </template>
open-on-focus>
</o-autocomplete>

<p><b>Selected:</b> {{ selected }}</p>
Expand Down
36 changes: 36 additions & 0 deletions packages/oruga/src/components/autocomplete/examples/slots.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<template>
<section class="odocs-spaced">
<o-field label="Find a name">
<o-autocomplete
:options="[
{
label: 'Jesse Simmons',
value: {
id: 1,
user: { first_name: 'Jesse', last_name: 'Simmons' },
date: '2016/10/15 13:43:27',
gender: 'Male',
},
},
{
label: 'John Jacobs',
value: {
id: 2,
user: { first_name: 'John', last_name: 'Jacobs' },
date: '2016/12/15 06:00:53',
gender: 'Male',
},
},
]"
open-on-focus
keep-open
keep-first
selectable-header
selectable-footer>
<template #empty> No results found </template>
<template #header> Header </template>
<template #footer> Footer </template>
</o-autocomplete>
</o-field>
</section>
</template>
10 changes: 0 additions & 10 deletions packages/oruga/src/components/autocomplete/tests/Autocomplete.spec.cy.ts
View file

This file was deleted.

38 changes: 0 additions & 38 deletions packages/oruga/src/components/autocomplete/tests/SimpleAutocomplete.vue
View file

This file was deleted.

141 changes: 135 additions & 6 deletions packages/oruga/src/components/autocomplete/tests/__snapshots__/autocomplete.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,142 @@ exports[`OAutocomplete tests > render correctly 1`] = `
@binding {number} focusedIndex - index of the focused element
@binding {() => void} toggle - toggle dropdown active state
-->
<!--
@slot Place extra \`o-dropdown-item\` components here, even if you have some options defined by prop
-->
<!--v-if-->
<!--
@slot Place extra \`o-dropdown-item\` components here, even if you have some options defined by prop
-->
<!--v-if-->
<div id="v-0-1" class="o-drop__item o-drop__item--clickable o-acp__item" data-oruga="dropdown-item" data-id="dropdown-1" role="option" aria-selected="false" aria-disabled="false">
<!--
@slot Override the label, default is label prop
-->
<!--
@slot Override the select option
@binding {object} option - option object
@binding {number} index - option index
@binding {unknown} value - option value
--><span>Angular</span>
</div>
<div id="v-0-2" class="o-drop__item o-drop__item--clickable o-acp__item" data-oruga="dropdown-item" data-id="dropdown-2" role="option" aria-selected="false" aria-disabled="false">
<!--
@slot Override the label, default is label prop
-->
<!--
@slot Override the select option
@binding {object} option - option object
@binding {number} index - option index
@binding {unknown} value - option value
--><span>Angular 2</span>
</div>
<div id="v-0-3" class="o-drop__item o-drop__item--clickable o-acp__item" data-oruga="dropdown-item" data-id="dropdown-3" role="option" aria-selected="false" aria-disabled="false">
<!--
@slot Override the label, default is label prop
-->
<!--
@slot Override the select option
@binding {object} option - option object
@binding {number} index - option index
@binding {unknown} value - option value
--><span>Aurelia</span>
</div>
<div id="v-0-4" class="o-drop__item o-drop__item--clickable o-acp__item" data-oruga="dropdown-item" data-id="dropdown-4" role="option" aria-selected="false" aria-disabled="false">
<!--
@slot Override the label, default is label prop
-->
<!--
@slot Override the select option
@binding {object} option - option object
@binding {number} index - option index
@binding {unknown} value - option value
--><span>Backbone</span>
</div>
<div id="v-0-5" class="o-drop__item o-drop__item--clickable o-acp__item" data-oruga="dropdown-item" data-id="dropdown-5" role="option" aria-selected="false" aria-disabled="false">
<!--
@slot Override the label, default is label prop
-->
<!--
@slot Override the select option
@binding {object} option - option object
@binding {number} index - option index
@binding {unknown} value - option value
--><span>Ember</span>
</div>
<div id="v-0-6" class="o-drop__item o-drop__item--clickable o-acp__item" data-oruga="dropdown-item" data-id="dropdown-6" role="option" aria-selected="false" aria-disabled="false">
<!--
@slot Override the label, default is label prop
-->
<!--
@slot Override the select option
@binding {object} option - option object
@binding {number} index - option index
@binding {unknown} value - option value
--><span>jQuery</span>
</div>
<div id="v-0-7" class="o-drop__item o-drop__item--clickable o-acp__item" data-oruga="dropdown-item" data-id="dropdown-7" role="option" aria-selected="false" aria-disabled="false">
<!--
@slot Override the label, default is label prop
-->
<!--
@slot Override the select option
@binding {object} option - option object
@binding {number} index - option index
@binding {unknown} value - option value
--><span>Meteor</span>
</div>
<div id="v-0-8" class="o-drop__item o-drop__item--clickable o-acp__item" data-oruga="dropdown-item" data-id="dropdown-8" role="option" aria-selected="false" aria-disabled="false">
<!--
@slot Override the label, default is label prop
-->
<!--
@slot Override the select option
@binding {object} option - option object
@binding {number} index - option index
@binding {unknown} value - option value
--><span>Node.js</span>
</div>
<div id="v-0-9" class="o-drop__item o-drop__item--clickable o-acp__item" data-oruga="dropdown-item" data-id="dropdown-9" role="option" aria-selected="false" aria-disabled="false">
<!--
@slot Override the label, default is label prop
-->
<!--
@slot Override the select option
@binding {object} option - option object
@binding {number} index - option index
@binding {unknown} value - option value
--><span>Polymer</span>
</div>
<div id="v-0-10" class="o-drop__item o-drop__item--clickable o-acp__item" data-oruga="dropdown-item" data-id="dropdown-10" role="option" aria-selected="false" aria-disabled="false">
<!--
@slot Override the label, default is label prop
-->
<!--
@slot Override the select option
@binding {object} option - option object
@binding {number} index - option index
@binding {unknown} value - option value
--><span>React</span>
</div>
<div id="v-0-11" class="o-drop__item o-drop__item--clickable o-acp__item" data-oruga="dropdown-item" data-id="dropdown-11" role="option" aria-selected="false" aria-disabled="false">
<!--
@slot Override the label, default is label prop
-->
<!--
@slot Override the select option
@binding {object} option - option object
@binding {number} index - option index
@binding {unknown} value - option value
--><span>RxJS</span>
</div>
<div id="v-0-12" class="o-drop__item o-drop__item--clickable o-acp__item" data-oruga="dropdown-item" data-id="dropdown-12" role="option" aria-selected="false" aria-disabled="false">
<!--
@slot Override the label, default is label prop
-->
<!--
@slot Override the select option
@binding {object} option - option object
@binding {number} index - option index
@binding {unknown} value - option value
--><span>Vue.js</span>
</div>
<!--v-if-->
<!--v-if-->
</div>
</transition-stub>
<!--teleport end-->
Expand Down
Loading

0 comments on commit a89e975

Please sign in to comment.