I'm trying to test a component builded with vuetify. For that I'm using vue-test-utils. My goal is to perform a change in the v-select field, and assert hat a mutation is performed. here is my code:
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-layout row wrap>
<v-flex xs6>
<v-subheader>Standard</v-subheader>
</v-flex>
<v-flex xs6>
<v-select
:items="items"
v-model="e1"
label="Select"
single-line
></v-select>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
The first test is ok when i set the data:
componentWrapper.setData({items: storesList})
expect(componentWrapper.vm.$data.items).toHaveLength(2)
I now want to change the selected value I try:
componentWrapper.findAll('#option').at(1).setSelected()
And also
componentWrapper.find('el-select')
Can someone help me to retrieve the select and then change the selected value?
Thanks for your support.
Use wrapper.vm.selectItem('foo'). It works for me.
I found this in vuetify v-select tests:
Old: ~~https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/test/unit/components/VSelect/VSelect.spec.js#L533~~
New: https://github.com/vuetifyjs/vuetify/blob/b2abe9fa274feeb0c5033bf12cc48276d4ac5a78/packages/vuetify/test/unit/components/VSelect/VSelect.spec.js#L28
Edit: Updated link.
wrapper.findAll('.v-list__tile__title').at(0).trigger('click')
It works for me.
By this code, first option is selected.
Here is ref.
I used Vuetify v1.5.5.
My solution. It's very equivalent to YounSeon Ahn's response, just the options selector changed. I'm using Vuetify 2.2.11.
// Found the v-select
wrapper.find('[data-testid="mySelect"]').trigger('click');
// Wait for DOM updating after the click
await localVue.nextTick();
// Find all options and select the first. If you are multiple v-select in your form, the class ".menuable__content__active" represents the current opened menu
wrapper.find('.menuable__content__active').findAll('.v-list-item').at(0).trigger('click');
finally got this working for vuetify 1.5. If your v-select looks like this:
<v-select
:items="projectManagers"
:value="selectedProjectManager"
key="UserId"
label="Choose Name"
item-text="FirstName"
item-value="UserId"
id="nameSelect"
#input="(val)=>{this.handleNameChange(val)}"
/>
then do this:
wrapper.findAll('#nameSelect').at(0).trigger('input')
this works, but for some reason if i do at(1) it does not work. Thankfully for my test case the option at position 0 is fine
This is my final solution to test Vuetify VSelect component in cypressjs:
cy.get('#YourVSelectComponentId', { timeout: 20000 }).should('not.have.attr', 'disabled', 'disabled').click({ force: true }); //find v-select, verify it's visible and then click.
cy.get('.menuable__content__active').first().find('.v-list__tile').first().should('be.visible').click(); //find opened dropdown, then find first item in options, then click
I have been struggling with this as well and finally found a way to do it. I'm using Jest and vue-test-utils. Basically, you have to do it with two separate steps. Mark the option as selected and then trigger the change on the select.
The HTML part is:
<select id="groupid" v-model="groupID">
<option value="">-Select group-</option>
<option v-for="g in groupList"
v-bind:value="g.groupId">{{g.groupId}} - {{g.groupName}}
</option>
</select>
And the test is:
it('should populate the subgroup list when a group is selected', () => {
expect(cmp.vm.groupID).toBe('');
expect(cmp.findAll('select#groupid > option').length).toBe(3);
cmp.findAll('select#groupid > option').at(1).element.selected = true;
cmp.find('select#groupid').trigger('change');
expect(cmp.vm.groupID).not.toBe('');
});
Related
I have a v-select, written like this :
<v-select
ref="v_select_folder"
dense
hide-details
v-model="selectedPlanFolder"
label="PlanFolder"
:items="PlannedFolder"
item-text="node.name"
return-object
#change="setFolderNameAndID"
>
The v-select gets the available options/values dropdown from :items, I would like to know how if there is a simple way I can add an extra aditional option , without touching the items prop. Something like :
<v-select
ref="v_select_folder"
dense
hide-details
v-model="selectedPlanFolder"
label="PlanFolder"
:items="PlannedFolder"
item-text="node.name"
return-object
#change="setFolderNameAndID"
>
<option>This is another select value</option>
</v-select>
You can create a new array in place with the spread operator and add an item to it. You may want to add additional properties to the added item depending on how you process your data.
<v-select
ref="v_select_folder"
dense
hide-details
v-model="selectedPlanFolder"
label="PlanFolder"
:items="[...PlannedFolder, { node: { name: 'name' } }]"
item-text="node.name"
return-object
#change="setFolderNameAndID"
>
</v-select>
I'm using selectize.js for dropdown styling with livewire. I'm using livewire for a data table with sortable columns and pagination. The issue is, every time I make pagination or a sort by column, the javascript goes missing thus, there's no styling for the dropdown. I've solved the styling issue using wire:ignore. Now the new problem that I have is that the data passed to the dropdown is not accurate.
#foreach($applications as $application)
<p>{{$application->status}}</p>
<div wire:ignore>
<select class="selectize" name="status" data-width="200px">
#foreach(['Pending',
'Hired',
'Under consideration'] as $status)
<option
#if($application->status === $status) selected #endif>{{ $status }}</option>
#endforeach
</select>
</div>
#endforeach
Inside the <p>{{$application->status}}</p> tag, I get the status 'Pending' but on the dropdown, it shows 'Hired'. The correct status is 'Pending'.
(from comment) #stalwart1014 for example, when I use "select2" I do this
in content section
<select id="select2" wire:model="some">
//.....
</select>
in script section
$(document).ready(function() {
window.initSelectDrop=()=>{
$('#select2').select2({
placeholder: '{{ __('Select') }}',
allowClear: true});
}
initSelectDrop();
window.livewire.on('select2',()=>{
initSelectDrop();
});
});
and in component
public function hydrate()
{
$this->emit('select2');
}
This not always function properly with JS element...but hope this can help you. Greetings
it's maybe a bit late, but worth to mention for the future, I will do not point directly to your issue but explain the workaround of wire:ignore, the wire:ignore directive ignores the updates or changes for the further requests and updates, this attributes is defined for playing with JS third party library, the wire:ignore directive prevent all it's nested elements from updating if you wish to except Childs from updating you can use wire:ignore.self directive
How does AlpineJS re-render a template ?
<script>let contacts = [];</script>
<div x-data="{ persons: contacts }">
<template x-for=" person in persons ">
<div x-text=" person "></div>
</template>
<button x-on:click="contacts.push('Jack'); persons = contacts; console.log(persons.length);">Click</button>
</div>
I was expecting the div to have multiple text of Jack on click.
In your case/example contacts are out of Alpine's scope, once the component is initiated it's in it's own bubble, anything outside out the component scope x-data won't trigger a re-render.
If you change contacts.push('Jack'); to persons.push('Jack');, that will trigger a re-render.
Maybe it's not the most efficient way but I've had a similar problem, to resolve it I used the get function inspired from this.
My use case is the following:
JS:
get updatedState() {
var config_state = [];
#update your data here
return config_state;
}
HTML:
<template x-for="config in updatedState">
#Do what you want here
</template>
Each time your data changes, your loop will update the data
I need to disable all animations that happen when opening/closing polymer's paper-dropdown-menu element.
Documentation: https://www.webcomponents.org/element/#polymer/paper-dropdown-menu/elements/paper-dropdown-menu#property-noAnimations
The documentation shows that the element has a noAnimations property that I should be able to set to true to disable all animations, but it's not working for me.
<paper-dropdown-menu
noAnimations="true"
selected="{{selected}}"
attr-for-selected="name"
vertical-offset="60"
>
<paper-listbox slot="dropdown-content" selected="1">
<template is="dom-repeat" items="{{sections}}">
<paper-item name$="{{item}}">{{item}}</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
I expected that setting noAnimations="true" would disable all animations, but it does not. Am I missing something?
Polymer attributes format is always lowercase and separated with dashes; so try:
<paper-dropdown-menu
no-animations="true"
selected="{{selected}}"
attr-for-selected="name"
vertical-offset="60"
>
...
instead:
<paper-dropdown-menu
noAnimations="true"
selected="{{selected}}"
attr-for-selected="name"
vertical-offset="60"
>
How does one access the various options for the bootstrap formhelpers library?
I have tried every way of accessing them, but get an error every time.
Specifically, I'm trying to clear out the selected value in a bfh-selectbox
$("#Select").val('');
$("#Select").selectpicker("refresh");
see How to reset value of Bootstrap-select after button click
Its hard to clear the value of a select box since its a dropdown. Do you mean setting the dropdown to a specific option?
For your specic question: You can set and get the value of the bfh-selectbox with JQuery like this:
HTML:
<div id="selBox" class="bfh-selectbox" data-name="selectbox1">
<div data-value="1">Option 1</div>
<div data-value="2">Option 2</div>
<div data-value="3">Option 3</div>
</div>
Get value:
var output = $("#selBox").val();
Set value:
$("#selBox").val([Replace with valid option value]);
BFH are great components, but their documentation is really lacking.