I'm handling a test on input type number, where I expect increase and decrease value when typing on keyboard arrow up and down respectively. The Issue is that nothing happens, the input value remains the same. Someone could look into my code and see what is happening. I believe that userEvent and input are not communicating with each other in this particular event
it('renders current year', () => {
render(
<input
type="number"
step="1"
name="number"
placeholder="number"
aria-label="number"
defaultValue={0}
/>
);
const input = screen.getByPlaceholderText(/number/i);
user.type(input, '{arrowup}');
console.log(input);
expect(input).toHaveValue(1);
});
Code: https://codesandbox.io/s/late-http-ff27ln?file=/src/App.test.tsx
Related
I am a little confused because this seems to be such a trivial and easy thing, yet there is hardly any proper documentation in Enzyme on how to do this.
I want to do one of the simplest things in the world. I just want to simulate a select event in a drop down select (HTML select/combo) by selecting an option called "dogs".
When I have this option selected would like to see that the option is "selected", and I would also like to see that the select value is set to "dogs".
What am I doing wrong here?
import React from 'react';
import {shallow, mount} from "enzyme"
test(' change ', () => {
let Compoment =
<select className="sel" name="selectComp" required="">
<option value="empty">Please make your choice ...</option>
<option value="cats">feline</option>
<option value="dogs">canine</option>
</select>;
const wrapper = mount(Compoment);
let sel = wrapper.find(".sel").at(0)
sel.simulate('change', { target: { name: 'selectComp', value: "dogs" } });
expect(wrapper.find(".sel").at(0).getElement().value).toBe("dogs")
expect(wrapper.find(".sel").at(0).find("option").at(2).props().selected).toBe(true)
})
React syncs prop=>DOM property only one way.
If you set selected prop on <option> element React would write it into DOM selected property(but you actually don't use selected prop at all).
You browser(or JSDOM in case of Jest tests) also changes selected property for relevant <option> element upon user selection.
So that's why prop does not reflect change.
You can use getDOMNode to access underlying DOM node:
expect(wrapper.find(".sel").at(0).find("option").at(2).getDOMNode().selected).toBe(true)
but know what? you don't need that. This would just test browser highlights right option upon user selection. It's just a wasted time to check if browser and/or React do their job responsibly.
i am using KeyFilter Module of primeng here is my code :
<input type="text" pInputText [(ngModel)]="price.TintCost" [pKeyFilter]="patternDecimal" name="tintCost" required="true" />
here is my typescrip code :
patternDecimal: RegExp = /^[0-9]+(\.[0-9]{1,2})?$/;
and here is version of primeng :|
"primeng": "^5.2.0-rc.1",
i tested in regex then i can type dot(.) but when i apply to KeyFilter, it doesn't allow the dot(.). Someone help me, please
I solved this problem by adding a mask as default
KeyFilter.DEFAULT_MASKS['currencyRegex'] = /^-?(?:0|[1-9]\d{0,2}(?:,?\d{3})*)(?:\.\d+)?$/;
I solved this problem by change the pValidateOnly property to true.
The problem is that the KeyFilter check any press on keyboard and if the complete value is no the correct, then dont permit write, just if you copy and paste the value.
In the documentation say
Instead of blocking a single keypress, the alternative validation mode
which is enabled with pValidateOnly property validates the whole input
with a built-in Angular validator.
https://www.primefaces.org/primeng-6.1.6/#/keyfilter
Example that work for me.
Component.ts
public twoDecimal: RegExp = /^\s*-?(\d+(\.\d{1,2})?|\.\d{1,2})\s*$/
Component.html
<input name="decimalField"
#decimalField="ngModel"
[pKeyFilter]="twoDecimal"
[pValidateOnly]="true"
[(ngModel)]="item.decimalField"
type="text" pInputText>
<div *ngIf="!decimalField.valid" class="alert alert-danger">
<p>Incorrect format.</p>
</div>
The answer of #Norberto Quesada is correct.
Without pValidateOnly the regex will validate on every key stroke.
Let's say you want to enter the value "47.11":
You begin to enter "4" => this would be valid, no input blocked.
Same for "47"
As soon as you enter "47. => validation fails, input blocked.
I was thinking maybe it's possible to enter "4711" first and then the "." in between but for some reason this doesn't seem to work, too... Maybe this is a bug?
Anyways, you can take a look at this stackblitz example for better understanding.
I've also prepared an example of using ValidateOnly and in addition to that restrict the input to only numbers using keyDown event
I'm trying use input with datalist in a lightning component and doesn't seem to work. I've looked around and can't seem to find anything that says i can't. So basically,
<input list="acctlist"/>
<datalist id="acctlist">
<option value="somevalue">
</datalist>
does not work. I want to have an input in a form that a user can type but also able to select from a list returned from the controller. Is there a workaround that would be as simple or is this the following route the best i got.
https://developer.salesforce.com/blogs/developer-relations/2015/06/salesforce-lightning-inputlookup-missing-component.html
The list attribute of input tag is not compatible with lightning component.
When you deploy the components, the attribute is removed.
If you want to use input with datalist, you need to add the attribute in Renderer.js.
datalist.cmp
<input aura:id="acctlistInput" />
<datalist id="acctlist">
<option value="somevalue" />
</datalist>
datalistRenderer.js
afterRender : function(component, helper) {
var acctlistInputCmp = component.find("acctlistInput");
var acctlistInput = acctlistInputCmp.getElement();
acctlistInput.setAttribute("list", "acctlist");
return this.superAfterRender();
}
I'm looking for a regex string for validating time.
I validate my HTML form using ^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$ which works great however I wish to create some sort of input mask for time entry on my HTML text input field which I'll attach to a keydown event to test the input as the user types.
Accepted Values
1
12
12:
12:5
12:59
Input mask for time with partial check
<input type="text" id="timeinput" name="time" value="" onkeyup="validateTime(this);"/>
<span id="validationresult"></span>
<script>
function validateTime(el)
{
var result;
// first, check if input is fully correct
if (el.value.match(/^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/))
result = "OK";
// then, check if it is not wrong
else if (el.value.match(/^([0-9]|0[0-9]|1[0-9]|2[0-3])?(:([0-5]|[0-5][0-9])?)?$/))
result=""; // don't bother user with excess messages
else
result="Please, correct your input";
document.getElementById("validationresult").innerHTML=result;
}
</script>
Feel free to optimize extra match, but here you can see difference between 2 expressions.
I've this code:
<form name="test">
<input type="text" ng-model="code" name="code" ng-pattern="/^code_[0-9]+$/"/>
<div ng-show="test.code.$dirty && test.code.$invalid">
Error:
<span ng-show="test.code.$error.pattern">Pattern fail.</span>
</div>
</form>
I have 2 issues with this code:
Strings like " code_232 ", "code_232 " " code_232" pass the validation. I'm not expert with regex, so this could be an issue simply related to the regex i wrote: /^code_[0-9]+$/
If i start writing "code_23892" (a correct string), i get the error
message while i'm still writing (test.code.$error.pattern = true). Is there a built-in way to avoid this? So my desidered behaviour is:
If i write "cod", and the input has still focus: no error
If i write "cod" and the input loses focus: error.
If i write "a", "ca", "coa" etc.: error, cause the pattern is already violated.
Is this already possible, or i've write a custome validation directive to achieve this?
Thanks in advance.
The reason that whitespace doesn't trigger a failed validation is because ng-model automatically trims the value. If you don't want that, you can add ng-trim="false" to your <input />. Note that ng-trim is a quite new attribute, so you might have to update your Angular version.
About your second question; I don't think you can avoid the validation to run during the time you type, but you could change your code to only display the error when the input looses focus. I don't think that something like ng-blur and ng-focus exists, but it should be pretty simple to implement them.