Problem: can't trigger Vue-Select3 item dropdown selection programmatically in unit-tests.
I have tried with both vue-test-utils and #testing-library/vue as well as triggering a click event programmatically in a browser to force list item selection. However, none of these worked. The only way I managed to trigger selection is by getting a VueSelect instance and emitting 'input' event. I also tried to trigger different events on dropdown container, etc.
// Failed
// testing-library
const dropdownItem = getAllByTestId('dropdown-item')
fireEvent.click(dropdownItem[0])
// test-utils
wrapper.find('[data-testid=dropdown-item]').trigger('click')
// In browser
document.querySelectorAll('.vs__dropdown-item')[0].click()
// Success
wrapper.find(VueSelect).vm.$emit('input', payload)
Current result: When a click event is triggered nothing happens.
Expected result: When a click event is triggered Vue-Select should select the item and emit 'input' event.
I found a way of selecting an option directly. You can use the select function of the VueSelect component, like that:
const wrapper = mount(YourComponent)
const vueSelect = wrapper.find(VueSelect)
vueSelect.vm.select(yourOptionToSelect)
That will work if you just want to select a specific option.
But yes, if you want to simulate the click on one of the options, that would not be helpful. And I know that this way of changing the state of a component is not the preferred way of doing this, but it is the only solution I've found.
Related
I am writing the Unit Test cases in JEST for Stencil-Js project. There are several mouse & keyboard event in my component, as follows.
Click on button to open the Dropdown List
With Specbar Key, open the Dropdown List
With up/Down arrow keys, navigate the list
On click/Enter select the value of Dropdown List item
I don't know about the, can we write the test case of events or not.
Please guide.
Have a look at https://github.com/ionic-team/stencil/issues/572
There you can see how a KeyboardEvent is succesfully dispatched, with a code like this:
const body = window.document.body;
body.dispatchEvent(new(window.window as any).KeyboardEvent('keyup', {
keyCode: 27,
bubbles: true,
cancelable: true
}));
You can pick your own element to dispatch it
Let's say that I have a group of radio items in a wxMenu. I know that exactly one of these will be checked at any given time.
Does the wxMenu or some other construct hold onto the index of the checked item, or do I need to call the isChecked on each radio item till I find the checked element to find it's index?
I've asked this question about how to do that, but I'd much prefer wxWidgets saved me from doing that everywhere.
No, saving the index of the last selected item (as shown in ravenspoint's answer) or using wxMenuBarBase::IsChecked() until you find the selected radio button is the only way to do it.
For wxWidgets to provide access to the currently selected button it would need not only to store it (which means not forgetting to update not only when the selected changes, but also when items are inserted into/deleted from the menu, so it's already not completely trivial), but to somehow provide access to the radio items group you're interested in, which would require being able to identify it and currently there is no way to do it and adding it isn't going to be particularly simple.
What could be done easily, however, is writing a reusable function int GetIndexOfSelectedRadioItem(int firstItem) that would start at the given item and call IsChecked() on subsequent items until it returns true and return the offset of the item. You should be able to do it in your own code, but if you'd like to include such function in wxWidgets itself (as a static wxMenuBar method, probably), please don't hesitate to send patches/pull requests doing it!
It is easy enough to roll your own.
Bind an event handler to wxEVT_COMMAND_RADIOBUTTON_SELECTED for every button. In the handler, extract the ID of the selected radio button and store it somewhere.
Like this:
ResolMenu = new wxMenu();
ResolMenu->AppendRadioItem(idRcvLoRez,"Low Resolution");
ResolMenu->AppendRadioItem(idRcvMeRez,"Medium Resolution");
ResolMenu->AppendRadioItem(idRcvHiRez,"High Resolution");
ResolMenu->Check( idRcvLoRez, true );
Bind(wxEVT_MENU,&cFrame::onRcvRez,this,idRcvLoRez);
Bind(wxEVT_MENU,&cFrame::onRcvRez,this,idRcvMeRez);
Bind(wxEVT_MENU,&cFrame::onRcvRez,this,idRcvHiRez);
void onRcvRez( wxCommandEvent& event )
{
myRezID = event.GetId();
I have one page where i have about 8 tab region. Each region has a select statment. They are executed when accessing the page (page load) at the same time. Because i have 8 select statment that executes at same time it leads to pure performance.
My question is how to execute the query only on active region.
You can try this one
Create Dynamic Action on event "Page Load"
Create true action "Execute javaScript Code":
window.setTimeout(function(){
$('.a-Region-carouselLink').click(function(){
apex.event.trigger(document, 'tabChanged', this);
})
}, 500);
Set "Fire On Page Load" to "Yes"
Create Custom event "tabChanged"
Create true action in DA custom event "Execute JavaScript Code":
console.log(this.data);
Test it - each time you click the tab, DA prints to console currently clicked anchor.
Of course it is not perfect because of the 0.5s delay. Still it allows you to listen what tab was "clicked".
To make your scenario work I would do:
create page item PX_TAB
create true action in custom event to set value of PX_TAB
create true actions in custom event to refresh reports within tabs
set "Page Items to Submit" to "PX_TAB" in each report to be refreshed
add condition to each report comparing value of item PX_TAB - it will execute SQL query only when PX_TAB has expected value
edit 2016.08.13
You can bind tabs by simple adding listener to the tabs
$(document).on('mousedown', 'a.t-Tabs-link', function(){
//this is an anchor used as tab
console.log(this)
})
If you want to keep it in APEX way enter code from below in Execute when Page Loads page section or create new dynamic action On page load
$(document).on('mousedown', 'a.t-Tabs-link', function(){
apex.event.trigger(document,'tabChanged', this);
})
and then add dynamic action bound to Custom event named tabChanged. Whenever tab is clicked the tabChanged event is triggered, and in Execute JavaScript Code you can reference current tab by this.data
Try to create buttons and set behavior of each button to display required region and hide others (create hidden item, then create buttons that set values 1,2,3 etc., then add conditions to every region to display region 1 only when hidden item equal 1, region 2 for item value 2 etc.
I've created a wxGrid, populated it with data, and have created a column that contains checkboxes, and made them editable. All good so far.
co_Grid->SetReadOnly(at_RowCount, 24, false);
co_Grid->SetCellRenderer(at_RowCount, 24, new wxGridCellBoolRenderer);
co_Grid->SetCellEditor(at_RowCount, 24, new wxGridCellBoolEditor);
What I want to be able to do now is to add an event handler for the checkbox toggle event.
I've tried using the OnCellValueChanged event for the grid, but that only fires after the user leaves the cell, because before then the editor is still open (and the cell hasn't actually changed yet)
I'm pretty sure that I need to create an event handler for the wxGridCellBoolEditor but that's where I'm struggling.
I tried connecting an event in the OnEditorShown event, but that didn't go well (unhandled exception when I click on the cell to open the editor):
void cTeamGrid::OnEditorShown( wxGridEvent& ev )
{
int row = ev.GetRow(),
col = ev.GetCol();
co_Grid->GetCellEditor(row, col)->GetControl()->Connect(wxEVT_COMMAND_CHECKBOX_CLICKED,
wxCommandEventHandler(cTeamGrid::OnGridCheckChange), NULL, this);
}
What am I doing wrong?
I had a similar problem myself. I bypassed it by setting the checkbox column to read-only and having the wxGrid control manually handle the click event to toggle the checkbox state (you also have to manage the double-click). This method is not the most orthodox, also because now each click on the cell, and not on the checkbox, will change the state. In my opinion, however, this can also be a desirable behaviour. In addition, this enables you to let the user change the checkbox with the keyboard (by capturing the KeyPress events).
Just wondering what the difference between MFC control messages prefixed with the following is:
LVN (e.g. LVN_ITEMCHANGED)
HDN (e.g. HDN_TRACK)
NM (e.g. NM_HOVER)
Also, I am using a ListControl and trapping when the user clicks on an item using the NM_CLICK message. I also want to trap when a user selects a new item view a key e.g. up/down arrow keys. Can anyone tell me which message I should be trapping for this?
Thanks
LVN = ListView Notification
HDN = HeaDer control Notification
NM = er..um.. "Notification for Mouse" ?
For change in selection, you need to handle the LVN_ITEMCHANGED notification:
NMLISTVIEW & nm = *(NMLISTVIEW *) pnmh;
if ( (nm.uNewState ^ nm.uOldState) & LVIS_SELECTED)
{
// nm.iItem was selected or deselected
if (!m_internalUIChange)
{
// see below
}
}
The first "if" checks if the "selected" state has changed. Note that, when selecting a different item in the list, this still fires twice: once for the old item to be deselected, and once for the new item to be selected. This is necessary, however, to fetch a "complete deselect".
This notification fires very often - even when you modify the control programmatically. If your handler should react only to user events, you will need at least a flag that you set durign these operations (I use a class together with a RAII-Lock for that, so I don't forget to reset it)