Testing keyboard input for blueprint select with react testing library - react-testing-library

I have created a codesandbox to illustrate my issue here:
https://codesandbox.io/s/floral-resonance-z2h43?file=/src/SelectExample.spec.tsx
I am trying to test the keyboard navigation within a blueprint select. That is opening the select by clicking the button, then pressing key arrows untill the desired item is active and confirming with enter which closes the select.
The functionality works perfectly fine.
I however fail to get the unit test(s) to work. As you can see in the linked sandbox a unit test that select the new item via mouseclick works.
I however have run out of ideas how to trigger the onChange of the SelectExample with keyboard inputs.
userEvent.keyboard() doesn't work and fireEvent doesn't either (though I'm not sure what to target considering how blueprint implements the select and that I can only add data-testid to some elements, but going to any number of parentElements from the items which have testids didn't work either). Same issue with userevent.type(), unless the target for that is the desired item in which case the test pases but only because the implementation type() clicks on it before entering its text.
References for the keyboard input:
https://testing-library.com/docs/dom-testing-library/api-events/
https://testing-library.com/docs/ecosystem-user-event/
I'd appreciate any input.

Related

MS Access 2013 textbox update macro

What I am trying to accomplish:
Use button to open a form, filter the form, and set specific value to an unbound textbox in the opened form's header. There are multiple buttons being used open the same form and I would like this textbox to changed every time a specific button is clicked.
What I have done so far:
Used a macro to open the form and the "where" condition to filter the records. I also used "SetProperty" to change the value of the unbound textbox in the opened form's header depending on which button was clicked. When I do used the SetProperty option in the macro I get the error "The control name ... is misspelled or refers to a control that doesn't exist. Error 32004
I have verified numerous times that this is the correct name for the textbox and everything. I am pretty new to access and don't do VBA all that much so any assistance would be greatly appreciated. Thanks.
First Form and Macro for the "Physical Security" Button
Second form with error and unbound txt box I want to change to "Physical Security"
A few Ideas to track down your problem:
Maybe there's a problem with opening and (immediately) accessing the forms controls(?) You could try to fire a macro from within the same from that (only) changes the value of this text-box to make sure it definitely works there. Of course you'd want to make it work there if it failed before you'd go back to your original problem.
Is the property called value? Could it be text?
Are you sure you need to separate (all) hierarchies using !? Just by desperation: Maybe try using Forms!frmVW.txtXY or Forms.frmVW.txtXY
If that doesn't solve it:
It's often best to reduce your problem to it's very basics. Copy your application (!!!!) and radically delete unneeded stuff. Or start a short experiment from scratch (one or two forms, maybe only a button and a textbox, a macro, most probably not even a single Datatable/Source).

Function across multiple view controllers

I am trying to make a function so that I request a 'manager override' where it presents a screen for a manager to enter their password and press an approve button. How should I do this? Will it have to be in multiple functions? Is there a way that I can call one function and it present the information back? Would a completion work for what I need? I have no ideas where to start for this.
My set up is as follows:
A view controller asks for manager approval, then a screen slides up with text boxes and an approve button. I want the approve button to trigger authenticating and dismissing the screen
Assuming you don't want a Framework target (that sounds like overkill for what you want) simply mark the function as "public" and move it outside of any class. I just tried in a sample project and it works.
It looks important - remember to keep it in a file already in the project. (My sample project didn't work with menu option File|Add|New|File.)
Now, if you really want portability, check out how to create a Framework project.

Protractor : How to select an item from list when right-clicked

I am trying to Right click on an element and then select an option "Rename" from the list. I have got "right clicking" working but can't select option from the list. Referred links 1, 2
Note 1:
1: On right click the menu options that are visible are native context menus. So, they don't appear in my DOM that I can see.
2: The App runs only in Chrome browser(not sure if it is a browser issue)
I have tried the following code:
browser.actions().mouseMove(elementVar).perform();
browser.actions().click(protractor.Button.RIGHT).click(protractor.Button.ARROW_DOWN).click(protractor.Button.ARROW_DOWN).click(protractor.Button.ARROW_DOWN).perform();
Consider, "Rename" to be the third option in the list.
Note 2:
If I am just running the app and enter 'R' from my keyboard, it selects the "Rename" option. But when I tried to run it in my test, it doesn't select the "Rename" option. See below code I tried:
browser.actions().mouseMove(elementVar).perform();
browser.actions().click(protractor.Button.ARROW_RIGHT).sendKeys('R',protractor.Key.ENTER).perform();
None of the above code works. Let me know if more information is required.
EDIT:
I am guessing the following to be happening:
once I mouse over, the script "right clicks" and after that the "tooltip" is displayed. Since the "tooltip" is displayed after "right click" I think the menu list goes to the background(the list is still visible along with the tool-tip), which is why the arrow down keys aren't working. Is this possible? If yes, how can I wait for the tooltip to be invisible and then right click?
Input: I tried to wait for tool-tip to be invisible and then right click, but still the "Arrow_down" doesn't work.
Is there a way to bring the menu list in the front once we have right clicked?
IMPORTANT:
I took a screenshot after I right clicked on the element, and the screenshot doesn't show the "menu list". Below is the code for screenshot:
browser.actions().click(protractor.Button.RIGHT).perform()
.then(function() {
browser.takeScreenshot().then(function(screenShot) {
writeScreenShot(screenShot, "image.png");
});
});
//writeScreenShot takes two variables actual screenshot data and the file name. And the screenshot is saved as "image.png"
What needs to be done?
When you send ARROW keys to the browser, you have to send them as keys instead of passing them to click() function and the ARROW_DOWN key is part of Key object and not BUTTON. Here's how -
browser.actions().mouseMove(elementVar).perform();
browser.actions().click(protractor.Button.RIGHT).sendKeys(protractor.Key.ARROW_DOWN).sendKeys(protractor.Key.ARROW_DOWN).sendKeys(protractor.Key.ARROW_DOWN).perform();
For your second try, you should send RIGHT in the place of protractor.Button.ARROW_RIGHT to right click. When you send two actions/keys to sendKeys() function, you have to join them using chord object which combines the action of pressing two keys at a time(ex: CTRL+C for copy). But in your case i don't think its really necessary. Here's how to use it -
browser.actions().mouseMove(elementVar).perform();
browser.actions().click(protractor.Button.RIGHT).sendKeys(protractor.Key.chord("r", protractor.Key.ENTER).perform(); //Not necessary as you wont be pressing R+ENTER in your keyboard
OR
browser.actions().click(protractor.Button.RIGHT).sendKeys('R').sendKeys(protractor.Key.ENTER).perform();
Hope this helps.
use XPath to solve your problem
browser.actions().mouseMove(target).perform();
browser.actions().click(protractor.Button.RIGHT).perform();
element(by.xpath('//*[#id="context-menu"]/ul/li[1]')).click();
In your case it will be "//*[#id="context-menu"]/ul/li[3]" most probably.

Prevent users from typing and clicking in MS Word Add-in

I am writting a MS Word Add-in, I create a button to run a long time work with text. My work requires that during the time it is excuted, no change can be made by user ( typing, clicking, deleting ...) When this work is completed, user can type and click as usual.
I have used
this.Application.Options.AllowClickAndTypeMouse = false;
However, this doesn't work.
Who can help me!
First, your approach is wrong. The Click and Type is Word functionality and has nothing to do with disabling user Mouse clicks
(For more information about Click and Type refer to here).
Now for your question, here is one approach I would suggest:
If the user is not able to do any action, I would expect an appropriate message, so my idea is to create a modal form by using:
myForm.ShowDialog();
It should do the job and block the active document until it get closed.
I would also add a nice progress bar and "Close" button which you will enable when work has done.

mousedown event on options in select with jquery .on

I was reading the documentation of the .on event handler of jQuery and I started playing around with it.
I have a simple <select> element with the multiple attribute set to true.
However, I want the user to be able to select multiple items without having to press the ctrl or shift key(s)
According to the .on documentation, if you specify a selector it will automatically add those event handlers to any new items added inside that container that match the selector specified.
So in my case, I could for example decide to replace the <option> elements available in the listbox, but I still want to have the same functionality for those options without having to rebind those events etc.
One might think that the following snippet should do the trick (atleast, I did):
$('#dropdownlist').on('mousedown', 'option', function(e){
e.preventDefault();
$(this).prop('selected', $(this).prop('selected') ? false : true);
return false;
});
So when a users clicks on an option in that listbox, the default action will be cancelled and depending wether the item is already selected or not, it will invert that selection.
I have created a small fiddle demonstrating this behaviour: fiddle
In that fiddle, the first dropdownlist is behaving as expected, but the functionality is lost when replacing the items. This only works in FF & Chrome.
The second dropdownlist is how I thought it should've been (event handling wise), but that doesn't seem to work besides in Chrome -.-
The functionality is kept when replacing items, because the console will still log '2' when clicking on an item after replacing them.
Can someone explain me why this is happening? Am I doing something wrong?
Please point me in the right direction!
Thanks!
~ Dirk
IE doesn't respect the mousedown event on the option tag itself. You've got to use the OnChange event of the select tag, which is not what you (nor I) want. I was trying to do the exact same thing as you and was stopped at every attempt. I finally gave up and made it a list of checkboxes because I can get the same behavior out of mine that you are trying to do here.
You can see this question for some options, but I never did get it to work the way you are describing.