I'm currently writing a test that checks for a simple input component:
it("Renders TextInput Component with correct display value", ()=>{
const textInput = screen.getByRole("textbox");
})
If I wanted to check the value of the text input, should I be checking the attribute or using RTL's screen method (is there a preferred way of doing this?)
expect(screen.getByDisplayValue(defaultProps.value));
expect(textInput).toHaveAttribute('name', defaultProps.name);
I would like to start using more of RTL but I'm finding some attributes I pass down are harder to check like the ones below.
expect(textInput).toHaveAttribute('placeholder', defaultProps.label);
expect(textInput).toHaveAttribute('type', defaultProps.type);
Yep, screen is the preferred way for sure. Read this article for more info on that and more tips.
On your question about how to check the value of an input fields, you can do it like this:
it("Renders TextInput Component with correct display value", ()=>{
expect(screen.getByDisplayValue('my text')).toBeInTheDocument().
})
This will attempt to find an input with a value of "my text", just like a real user would. If it does find it then it's deemed a pass.
Related
I would like to reset/clear my MUI Autocomplete component.
I have two of them with model like { label: string, value: string } and if first will change its value then I would like to clear the second one since second will get options by selected value in first one.
Moreover - I am using react-hook-form with setValue. I use as value in this method { label: '', value: '' } but it causes warning that in my new sort of options there is no such option to select (this is minor issue I think) but it does not reset second Autocomplete input but partially. I still see X to clear value. I used null as value in setValue but it does not cleat input as well.
What I want to achieve is - selecting some option on first input I would like to reset second input like clicking on X does. Is it possible ?
Cheers!
I found what caused the issue I describe above. It was because Autocomplete in my codebase was declared with clearOnBlur={false} props. It prevented to clear value of my Autocomplete when I was doing setValue(autocompleteFieldName, null) via react-hook-form. I hope it helps someone with the same strange issue since I was not interacting with input at all to invoke onBlur event. Cheers!
With the sap.m.DateTimePicker, it's possible for a user to either select a value from the drop-down list or enter it manually. I'm wondering if there's a way to add a mask to the manual input box that matches the valueFormat of the DateTimePicker.
I know there's a sap.m.MaskInput as well, so maybe there's a way to combine the two elements.
There is a new private module named sap.m.MaskEnabler which the sap.m.InputBase (i.e. DateTimePicker) is supposed to make use of.
(MaskEnabler) should be applied to the prototype of a sap.m.InputBase.
The mask feature is currently enabled only in sap.m.TimePicker (v1.54). According to this commit message, however, the same feature will arrive to the Date(Time)Picker as well:
This change prepares for refactoring of DatePicker and TimePicker so the
common code of both pickers can be moved to a new common control that
they may extend.
Therefore, if it's not urgent, and depending on your project, I'd not create a new custom control and then throw it away once the mask feature has arrived.
I'll update my answer when it's available.
Until then (and even afterwards), you can still guide the user to enter the data in the correct format via OData binding type sap.ui.model.odata.type.DateTime:
<DateTimePicker
value="{
path: 'myODataModel>myDateTime',
type: 'sap.ui.model.odata.type.DateTime',
constraints: {
isDateOnly: true,
displayFormat: 'Date'
}
}"
minDate="{...}"
maxDate="{...}"
/>
In contrast to formatter, type allows us to keep two-way data binding.
The entered value is automatically intercepted from updating the model data when...
It could not be parsed due to an invalid format (fires parseError)
It could be parsed but the constraints were violated (fires validationError)
If you enable handling UI messages
additionally, the framework will then take care of creating the appropriate
message for the user:
Example: https://stackoverflow.com/a/48482544
I think the only way to combine the two sap.m.DateTimePicker and sap.m.MaskInput is to develop your own control . Documentation : https://sapui5.hana.ondemand.com/#/topic/91f1703b6f4d1014b6dd926db0e91070.
Another way is to just use the Placeholder of the DateTimePicker Input field. This does not provide the same functionality as a MaskInput, but helps the user which valueFormat is expected in the input when entering it manually.
If you have a binding in your input box, you could set the type in the binding to eg. sap.ui.model.type.Date. This way you get some automatic formatting when field validation is triggered. There are other types available and you could inherit from sap.ui.model.SimpleType to code your own.
My goal is to extend umbraco's Rich Text Editor data type to include a "char limit" field. Then, when using the data type in document type editor, there would be a field for a char limit to be set (rather than using a regex validation for that).
I have googled but the only thing I found until now was how to extend the RTE to add more buttons.
Is this achievable?
Thanks ;)
You can overwrite RTE's 'onKeyDown' event and handle the limit in the function's body. The url you provided in example shows how to create a field.
tinyMCE.activeEditor.on("keydown", function(e){
console.log(e.keyCode); //Your logic goes here
});
The next steps depend on how you are going to create your char limit. The easier solution is to set up a validation onSave event, also you can parse keydown's event object and return false, if the limit is exceeded
I wish to create a VSCode extension with an entry form on it - some way of input. So far I have only seen document processing or output for an extension.
How can you display a form of input fields in a vscode extension?
How much data do they need to enter? If it's not much, you should be able to handle it with a series of InputBoxes
From https://code.visualstudio.com/docs/extensionAPI/vscode-api
showInputBox(options?: InputBoxOptions): Thenable<string>
Opens an input box to ask the user for input.
The returned value will be undefined if the input box was canceled (e.g. pressing ESC). Otherwise the returned value will be the string typed by the user or an empty string if the user did not type anything but dismissed the input box with OK.
Parameter Description
options?: InputBoxOptions
Configures the behavior of the input box.
Returns Description
Thenable<string>
A promise that resolves to a string the user provided or to undefined in case of dismissal.
The Visual Studio Code API does not have any native methods to display forms to collect input. You can however, chain together Input Boxes, Quick Picks, etc... You can find all these methods under vscode.window.(...).
If these do not satisfy your needs you can implement a webview which allows you to render integrated HTML in Visual Studio Code and trade messages with the extension.
The most simple aproach would be to simple send all collected data from the form to the extension once you hit the submit button or something similar.
You have a nice little tutorial on how to do that here.
Another approach is to see how far you can go with editing JSON objects in settings.json. I thought I would need a form for 8-10 fields, but it turns out that I can create a settings template that has a series of labels and and entry fields (with type validation).
I'm trying to implement a live search combo. It suppose to work like this:
When I enter a character into the combo field I read the current value and send it as a parameter to the store's url. In the backend the parameter is used to return any value from the database that contains it, so the store behind the combo gets filled only with those filtered values.
As I continue to enter characters into the combo, the parameter should be updated and sent again to the backend and so on, getting like this a smaller and smaller store.
I tryied to achieve this behaviour using the combo's event keypress, even keyup, but the problem is it's impossible for me to get access to the current value from the combo field.
For example, when I entered the "for" string into the combo, how can I obtain this value using the combo object? comboName.getValue() doesn't work, it returns nothing "".
I already saw the live combo example here: http://docs.sencha.com/extjs/4.2.2/#!/example/form/forum-search.html but doesnt help me at all.
So my big question is: how do i get the current value while still editing the combo's field?
Any help would be appreciated, thanks.
You should be able to use
comboName.getValue();
or
comboName.getRawValue();
Where comboName is your combo box. Are neither working- I note in your post you state getValues() which is an improper method. You may want to also check whether when you're referring to your combo box object, that the reference is actually correct. The first argument from the key events is actually the object itself, so you should be able to do, e.g.
listeners:{
keyup:function(comboBox){
var value = comboBox.getValue() || comboBox.getRawValue();
console.log(value);
}
}
Swapping you the value getting method as appropriate.
I found that the combo already has a quick search behaviour, I just have to set queryMode on 'remote' and some other small configurations. More details here:
Ext Js 4.2.2 combobox queryMode