Unable to use short cut keys (hotKeys) - keyboard-shortcuts

I am writing e2e tests in NightWatch v2.1.3 using page objects.
There are list of items, and an item can be selected either by click or by hotKey of its index.
Example: second element can be selected by click or shift+2.
Following code i have written, taking reference from the docs, but it is not working
browser.perform(function () {
const actions = this.actions({async: true});
console.log('performing hotKeys');
actions
.click('#option1')
.keyDown(Keys.SHIFT)
.keyDown(Keys.NUMPAD2)
.keyUp(Keys.NUMPAD2)
.keyUp(Keys.SHIFT);
});
Console is happening but the click and keyUp, keyDown is not working, when kept inside the .perform method.
What need to be fixed here?

return keyword is important. (silly mistake here)
Use 'a', 'b', '1', '2' for normal keys (single quotes are important, even for numbers)
click is not working, inside actions api. Better use the api click instead of userActions click. No idea why this click is added under new user-actions. The documentations does not have enough examples, one need to find out through hit and trial method.
Example:
For SHIFT + 1
browser
.pause(3000)
.perform(function () {
const actions = this.actions({ async: true });
return actions
.keyDown(Keys.SHIFT)
.keyDown('1')
.keyUp('1')
.keyUp(Keys.SHIFT);
})
.pause(2000);
For Shift + 10
(This depends on the way feature is developed, if app need both 1 and 0 to be pressed or not)
browser
.pause(3000)
.perform(function () {
const actions = this.actions({ async: true });
return actions
.keyDown(Keys.SHIFT)
.keyDown('1')
.keyUp('1')
.keyDown('0')
.keyUp('0')
.keyUp(Keys.SHIFT);
})
.pause(2000);
// keyUp('10') wont work, it is not a valid key in your keyboard
For simple 'a'
(This depends on the way feature is developed, if app need both 1 and 0 to be pressed or not)
browser
.pause(3000)
.perform(function () {
const actions = this.actions({ async: true });
return actions
.keyDown('a')
.keyUp('a')
})
.pause(2000);

Related

storybook add message to interaction testing?

I was wondering if it is possible to add a message instead of showing the values when the interactions tests are run in storybook.
for example:
FilledForm.play = async ({ canvasElement }) => {
const buttonEl = getByRole('button')
await expect(buttonEl.textContent).toContain('some button text');
//this gives `expect('some button text').toContain('some button text')`
//would have been better if it gave: `expect textContent to contain 'some button text'`;
any clue if that is possible? FYI it is not a deal breaker for me, it a cheaper alternative to have the test-runner and it works on a case by case, just want to know if there is a way to put extra message when showing the test result.

How would you simulate typing via Jest and Vue-Test-Utils?

For my test, I am expecting it to start with a value of length 39 (maxlength: 40), and when I press a key (ie: 'a'), the length should then be 40. However, anything I try or look up doesn't seem to allow me to trigger a keypress/keydown/keyup event.
My Component:
<q-input
v-model="name"
class="my-class"
maxlength="40"
\>
My Test:
it('Input should change', async() => {
let wrapper = mount(Component, { name: 'M'.repeat(39) })
let name = wrapper.find('.my-class')
console.log(name.vm.$options.propsData.value) // prints 39 M's as expected
name.trigger('click') // I try clicking the input. I've also tried triggering 'focus'
await wrapper.vm.$nextTick() // I've also tried with and without this
// I've also tried await name.vm.$nextTick()
name.trigger('keydown', { key: 'a' }) // According to their testing docs, this should press 'a'
// I've also tried name.trigger('keyup', { key: 'a' })
// and name.trigger('keypress', { key: 'a' })
await wrapper.vm.$nextTick()
console.log(name.vm.$options.propsData.value) // prints 39 M's without the additional 'a'
expect(name.vm.$options.propsData.value.length).toBe(40)
})
Why does not the value change after triggering keydown?
In short: you can't change the value of input/texarea with dispatching KeyboardEvent programmatically.
How actually do chars come into input? On MDN you can find the description of Keyboardevent sequence (assuming that preventDefault is not called):
A keydown event is first fired. If the key is held down further and the key produces a character key, then the event continues to be emitted in a platform implementation dependent interval and the KeyboardEvent.repeat read only property is set to true.
If the key produces a character key that would result in a character being inserted into possibly an <input>, <textarea> or an element with HTMLElement.contentEditable set to true, the beforeinput and input event types are fired in that order. Note that some other implementations may fire keypress event if supported. The events will be fired repeatedly while the key is held down.
A keyup event is fired once the key is released. This completes the process.
So, keydown leads to input event by default. But that is true only for trusted events:
Most untrusted events will not trigger default actions, with the exception of the click event... All other untrusted events behave as if the preventDefault() method had been called on that event.
Basically trusted events are those initiated by a user and untrusted events are initiated with a script. In most browsers, each event has an attribute isTrusted indicating if the event is trusted or not.
And how to test KeyboardEvents on inputs then?
Well, it depends on what is going on in your KeyboardEvent handler. E.g. if you call preventDefault in certain conditions then you can check if it was called or not in a test using a spy. Here is an example with sinon as a spy and chai as assertion library.
const myEvent = new KeyboardEvent('keydown', { key: 'a' })
sinon.spy(myEvent, 'preventDefault')
await wrapper.find('input').element.dispatchEvent(myEvent)
expect(myEvent.preventDefault.calledOnce).to.equal(true)
But sometimes you even don't need a KeyboardEvent handler. E.g. in your question you write about an input with maximum value length 40 characters. Actually you can just use maxlength HTML attribute for the input to prevent input of more than 40 characters. But just for a study example, we can just cut the value in input handler (it will control the length not only when a user types but also when a user copy-and-pastes a string):
onInput (event) {
event.target.value = event.target.value.substr(0, 40)
...
}
The test for this may look like this:
await wrapper.find('input').setValue('M'.repeat(41))
expect(wrapper.find('input').element.value).to.equal('M'.repeat(40))
So here, we directly change the value of input, not by KeyboardEvent.
I don't know where dialog comes from, but should you not be searching for the element inside wrapper?
wrapper.find('.my-class')
Also most examples I see use mount instead of factory
const wrapper = mount(component)
Here is an example from the docs:
it('Magic character "a" sets quantity to 13', () => {
const wrapper = mount(QuantityComponent)
wrapper.trigger('keydown', {
key: 'a'
})
expect(wrapper.vm.quantity).toBe(13)
})
})

React Native - Saving search terms after delay

I am creating a search toolbar that allows the user to see their most recent searches, using Realm Browser as my database. I save a search whenever the user types in the TextInput component, however, I don't want to add a search term after each key stroke, but only after the user has stopped typing for certain amount of time.
handleOnChange function will update state and only call getResults after 2 seconds
handleOnChange(text) {
this.setState({
searchStr: text
}, () => setTimeout(() => {
this.getResults()
}, 2000))
}
In getResults, I call my addRecentSearch function if certain criteria is met.
getResults() {
let searchTags = []
let searchCalcs = []
let tagNames = this.state.tags.map((tag) => {
return tag.name
})
if (this.state.searchStr.length >= 2 || this.state.tags.length !== 0) {
searchCalcs = Realm.searchCalcs(this.state.searchStr, tagNames)
Realm.addRecentSearch(this.state.searchStr)
}
this.setState({
results: searchCalcs,
tagsForFiltering: searchTags
})
}
So I use setTimeout to allow enough time for my state to get updated when the user types. Then, once the states been updated, I will want to add the search query. However, I'm not getting the results I expected when grabbing the most recent searches.
For example:
Type: "h"
Result: nothing happens as str must be at least 2 characters in length
Type: "he"
Result: meets criteria, and will add "he" as a recent search term.
Arr: ["he"]
Type: "heart" (Note: adding 3 characters in succession)
Result: It seems that even with the timeout function, my getResults function is being called (thus adding the search query for each character I added)
Arr: ["he", "heart", "heart", "heart"]
I want my arr to look like:
arr: ["he", "heart"]
You aren't fully debouncing in your example. You are only delaying everything by 2000ms. You need to create a timer and then reset it every time a change happens (by clearing and starting timer again). In this way, only the final 'delay' takes effect. Make sense?
You are very close to have written your own debounce function, so you can use clearTimeout, or there are some libraries that do it. See Lodash https://lodash.com/docs/#debounce

How to disable right click during navigation from one web page to other?

I have disabled right click by adding the following code. However, when I navigate from one page to other, during that window of time, on right click, the right click menu is opening.
document.onmousedown = function (event)
{
event = (event || window.event);
if (event.button == 2 )
{
alert("right click");
}
}
You can use oncontextmenu for this:
document.oncontextmenu = function () {return false;}
This can happen for case if document.onmousedown = function (event) isn't yet executed for some reason. Among reasons can be errors in java script or browser yet didn't execute document.onmousedown = function (event) because it is in process of executing some other javascript code.
Another proposal for consideration can be another way of disabling:
<body oncontextmenu="return false">

How to trigger <enter> in an input in Angular scenario test?

I'm writing tests with Angular Scenario test runner. Within a traditional form, I can enter text into an input, but I need to press enter to execute the query and there is no button to click on. Surely there is some easy way to do this, but I do not know what it is.
input('query').enter('foo bar');
// ... now what?
I tried to simulate a keypress with JQuery, but as this answer indicates JQuery is not loaded in the e2e scenarios scope. So I followed his advice (as well as that of this answer) to simulate the keypress:
element('#search_input').query(function(el, done){
var press = document.createEvent('keypress');
press.which = 13;
press.trigger(evt);
done();
});
But to this Angular replies:
NotSupportedError: DOM Exception 9
Error: The implementation did not support the requested type of object or operation.
Update
I realized that a very easy workaround is to include a hidden submit input in my form:
<input id="search-submit" type="submit" style="display:none;">
Then in the scenario: element('#search-submit').click(); does what is needed.
For a purer solution which doesn't involve modifying the HTML for the sake of testing, #florian-f's answer (as well as this one) provides access to jQuery within the DSL via:
var $ = $window.$;
which can be used there or passed to the callback. However, even with this access when triggering a press of enter I was not able to submit my form in the following manner:
$(selector).trigger($.Event('keypress', { which: 13 }));
This must be another issue all together. But I did find jQuery's submit function to do the trick:
$(#the_form).submit();
You can access to the app (runner in an iframe) instance of jQuery :
angular.scenario.dsl('appElement', function() {
return function(selector, fn) {
return this.addFutureAction('element ' + selector, function($window, $document, done) {
fn.call(this, $window.angular.element(selector));
done();
});
};
});
Then you can call the trigger method of jQuery in your test :
appElement('yourSelector', function(elm) {
elm.trigger('enter');//or keypress
});
There is also another possibility to trigger a key event. While your first approach
element('#search_input').query(function(el, done){
var press = document.createEvent('keypress');
press.which = 13;
press.trigger(evt);
done();
});
will be blocked by angular, this one
element(<selector>).query(function($el, done) {
var event = new CustomEvent('keyup');
event.keyCode = 13;
$el.val(2);
$el.get(0).dispatchEvent(event);
done();
});
will pass and trigger a keyup event on the element specified by the selector (keyCode = 13 = Enter Key). See https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent for further information.