Is it possible to achive this fireEvent.keyDown(document, { key: '/' }); with userEvent?
This test passes:
test('is visible after pressing `/`', () => {
render( < App / > );
fireEvent.keyDown(document, {
key: '/'
});
const input = screen.getByRole('textbox');
expect(input).toBeVisible();
});
But when I try to do the same with userEvent:
test('is visible after pressing `/`', () => {
render( < App / > );
// Note: I'm not using `userEvent.type` because you can't type on `document`. Also, using `await` doesn't make the test pass.
userEvent.keyboard('/')
const input = screen.getByRole('textbox');
expect(input).toBeVisible();
});
The test fails.
The / has a special meaning with keyboard: to release a held key.
Try escaping it: userEvent.keyboard('\/')
Related
Im trying to change the value of one variable inside onMount, but i cant, this is my attempt, how can I achieve to print, for example this... Here the REPL in svelte.dev
<script>
import { onMount } from "svelte"
let qrActive = false
console.log(qrActive)
const handleQr = () => {
qrActive = !qrActive
}
const qr = (qrActive) => {
if (qrActive) {
console.log("working");
} else {
console.log("Nothing :v")
}
}
$: onMount( () => qr(qrActive))
</script>
<button on:click={handleQr}>
Change!
</button>
onMount only runs once, it cannot be run again.
you might be able to use beforeUpdate or afterUpdate or just reactivity
$: qr(qrActive)
The above code will execute qr everytime qrActive changes
We are able to get a selection range via window.getSelection().
I'm wondering whether there is a way to subscribe to window.getSelection changes.
The only way which came to me is to use timeouts (which is obviously bad) or subscribe to each user's key \ mouse press event and track changes manually.
ANSWER UPD: You are able to use this library, I've published it, as there are no more suitable ones: https://github.com/xnimorz/selection-range-enhancer
Use the onselect event.
function logSelection(event) {
const log = document.getElementById('log');
const selection = event.target.value.substring(event.target.selectionStart, event.target.selectionEnd);
log.textContent = `You selected: ${selection}`;
}
const textarea = document.querySelector('textarea');
textarea.onselect = logSelection;
<textarea>Try selecting some text in this element.</textarea>
<p id="log"></p>
For specific cases such as span contenteditable, you can make a polyfill:
function logSelection() {
const log = document.getElementById('log');
const selection = window.getSelection();
log.textContent = `You selected: ${selection}`;
}
const span = document.querySelector('span');
var down = false;
span.onmousedown = () => { down = true };
span.onmouseup = () => { down = false };
span.onmousemove = () => {
if (down == true) {
logSelection();
}
};
<span contenteditable="true">Try selecting some text in this element.</span>
<p id="log"></p>
if Im undesrting in right way you want to know when user start selection on page you can use DOM onselectstart.
document.onselectstart = function() {
console.log("Selection started!");
};
more info MDN
I am running an experiment on text entry where currently, clicking a button will activate a new trial. I want the new trial to activate without using a button (i.e. to automatically appear when the user enters the last character of the target phrase). Here is the code I have so far:
saveData = () => {
let log_file = JSON.stringify({
targetPhrase: this.state.targetPhrase,
inputPhrase: this.state.inputPhrase,
timeElapsed: (new Date().getTime() - timeStart)/1000,
})
download(log_file, "results.txt", "text/plain");
timer=0;
this.type='normal';
state +=1;
if((state>2 && state <7) || (state>10 && state <15)){
this.type='zoom';
}
};
onClick = () =>{
this.saveData();
this.setState({
targetPhrase : getTargetPhrase(),
inputPhrase: "",
inputChar: "",
});
};
onInput = () =>{return this.state.inputPhrase;};
render(){
Ho would I go about writing the following function in native Javascript?
this.pwdInput.on("keyup change onpaste", function() {
let pwdInputVal = $(this).val();
self.createTests(pwdInputVal);
})
You can try somethind like:
document.getElementById('pwdInput').addEventListener('change', (e) => {
let pwdInputVal = e.target.value;
// ...
});
Here I've created handler for change event, you need to do the same for the rest events.
I followed this tutorial to implement ionicfilterBar on my ionic 1 project. The default function in this tutorial I understood that the searching were during typing. How I want to make it custom so that the search process only when user hit enter key from the keypad or onblur?
Any helps would be appreciated.
Have nice Friday!
$scope.showFilterBar = function () {
filterBarInstance = $ionicFilterBar.show({
items: $scope.items,
update: function (filteredItems, filterText) {
$scope.items = filteredItems;
if (filterText) {
//Start custom function
$rootScope.live_preview_question_ids = filterText;
$ionicHistory.nextViewOptions({
disableBack: false
});
$state.go('live-preview',{
indexId: 0
})
// End custom function
}
}
});
};