The React Testing Library docs specify that userEvent is to be preferred to fireEvent. However, I can't figure out a userEvent way to click to a particular value on a slider. With fireEvent, we can do:
fireEvent.change(screen.getByRole('slider'), { target: { value: '3000' } })
Is this possible with userEvent? Or are there some capabilities that fireEvent has that userEvent does not?
It turns out that this is not currently possible - userEvent cannot test clicking a particular value on a slider, and using fireEvent is the correct approach. See this issue for details.
Related
I am making a game where you must open or activate the UI with the space bar. Now, this works perfectly fine, but it is pretty annoying that every time you open the UI you must click on the inputfield to write in it. Is there any way around this? So is there a way to open or activate the UI without having to click on the field to be able to write in it?
I looked for YouTube videos and tried to find similar problems in other forums, but wasn't able to find a script, nor was I able to find some Unity settings to do so.
You could use e.g.
private class SelectOnEnable : MonoBehaviour
{
private void OnEnable()
{
EventSystem.current.SetSelectedGameObject(null);
EventSystem.current.SetSelectedGameObject(gameObject);
}
}
and attach it to whatever object that should become the selected one everytime it is enabled. See EventSystem.SetSelectedGameObject
Can't test it right now but it might still require the User to hit Enter in order to also actually set the Input field into edit mode. The upper line only sets it as selected UI element (similar to using TAB in a browser).
Otherwise I think you would go through
yourInputField.DeactivateInputField()
yourInputField.ActivateInputField();
to directly set it active. See InputField.ActivateInputField. Might have to do both in combination - again can't test right now ;)
Thank you very much, derHugo! Everything works like a charm now! You saved me a lot of time. Referring to your last comment, I used both of them, and it seems to work very well for me. Here is the code I used:
`private void OnEnable()
{
EventSystem.current.SetSelectedGameObject(gameObject);
GameManager.GetComponent().inputFieldInMainUi.ActivateInputField();
EventSystem.current.SetSelectedGameObject(null);
GameManager.GetComponent<InputFieldComparision>().inputFieldInMainUi.DeactivateInputField();
}`
I have a problem that some variables in screen reset back to initiated value when I navigate to another screen.
Is there a way to save these variables values even if I go to another screen?
I would recommend to check Flutter official documentation - btw they're great!
Adding Interactivity to your app:
https://flutter.dev/docs/development/ui/interactive
Usage of SetState for controlling state of your app:
https://api.flutter.dev/flutter/widgets/State/setState.html
...and some deep dive into State Management in Flutter:
https://flutter.dev/docs/development/data-and-backend/state-mgmt
To be able to properly save the variables I'ld suggest you to look up for a State Management Architecture for your app. It'll be a lot helpful in long run too.
I'ld personally suggest ProviderModel. If you havent used that before it isnt much difficult to understand.
THE BELOW MENTIONED WAY IS NOT THE RIGHT WAY, AS I SAID ABOVE TO DO IT PROPERLY USE A STATE MANAGEMENT ARCHITECTURE
BUT if in some case you dont want to do that.
You can make a class object with the member variables as the variables that you are using inside the Widget.
class CounterModel{
int counter;
CounterModel(){
counter = 0;
}
}
and onDispose inside widget you can save a copy of that class object globally.
Declare a global class object like this
CounterModel model;
and populate it on dispose.
onDispose(){
model = new CounterModel();
model.counter = <currentCounter>;
super.dispose();
}
now whenever you build the widget u can use this global object to access all it values no matter what page you are on.
BUT AGAIN YOU SHOULD NEVER DO THIS
I am hiding driving instructions by default:
var directions = new MapboxDirections({
accessToken: mapboxgl.accessToken,
controls: { instructions: false }
});
I want to have ability to display/hide it on button click and not sure how it needs to be done.
The mapbox-gl-directions plugin does not provide a setter method for the options.controls.instructions parameter. In other words, the boolean value specified at creation of the MapboxDirections instance cannot be toggled using a button. All instance members for MapboxDirections are documented in API.md.
You could experiment with implementing this custom functionality yourself by forking the plugin or opening a pull request to add a MapboxDirections#setControlsInstructions method, or something similar, to src/directions.js. This method could then be used with the button's click listener. This would require some careful state object management to ensure all visual interface elements are properly updated when the button is toggled (see src/reducers/index.js and src/controls/instructions.js).
I'm building a VS Code extension and it uses a TreeDataProvider to create a list of items. The list has nested children and I would like to show a count for these in the parent.
I've looked for examples and tried to understand how the git extension does it but no luck. Perhaps someone can provide an example of how to do this.
Support for custom decorations in views appears to be a work-in-progress. There has been an API for it in the "proposed state" for a while, see:
Make decoration provider API public (#54938)
relevant section in vscode.proposed.d.ts
Source Control and Problem decorations already shown in custom views if TreeView.resourceUri is set.
Source Control decorations are managed via the Source Control API - each SourceControlResourceState instance can have decorations attached to it. That would be how the Git extension you mentioned does it.
Problem decorations are derived from the "problems" (errors, warnings...) associated with a URI. These are also shown in the Problems panel. Problems can be created using the Diagnostics API or with a problem matcher.
As of VS code version 1.52, the FileDecorationProvider is available to use, which is a way to add a text badge to a TreeItem. Related GitHub issue here for more context.
If you are using TreeItem then you will need to specify a resourceUri property which you then use to identify where to apply the badge.
To be clear the badge is limited to text and does not include the option to put it in a circle badge, like in the first picture of the question.
Here is a simple code snippet on how to use it:
class CountDecorationProvider {
constructor() {
this.disposables = [];
this.disposables.push(vscode.window.registerFileDecorationProvider(this));
}
provideFileDecoration(uri) {
const showCountFor = "/aUserHere";
if (uri.path === showCountFor) {
return {
badge: "10",
tooltip: "User count"
};
}
}
dispose() {
this.disposables.forEach((d) => d.dispose());
}
}
I am creating very basic ionic app. I want to show splash, then admob interstitial and on close of interstitial, i want to redirect to home page.
The only problem which I am facing here is updating the view in the home page. In home page, i have very simple text box and button. I am using 2 way data binding here and its not working at all.
I have created repo for this if somebody wants to have a look and let me know why the view is not updating.
https://github.com/krishnaa99/admobissue
Demo Video
https://www.youtube.com/watch?v=t_BKJ1mGpag
if the value is changing in component but not in view(html) then after action in component use this.
import { ChangeDetectorRef } from '#angular/core';
constructor(private changeRef: ChangeDetectorRef){}
this.changeRef.detectChanges();
i hope it can help.
Possible solutions you can try
you should check the logs for errors
Assign clear type to "input" variable. ( try making it explicitly
public )
"input" may be considered as a keyword, try using a different
variable name ( less likely )