uNmAnNeR / imaskjs

vanilla javascript input mask

Home Page:https://imask.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Error status cannot be verified with testing-library after upgraded to 7.6.0

sucy6330133 opened this issue · comments

Describe the bug
When testing the error status of react-imask with testing-libray after upgrade imask and react-imask to 7.6.0, the attribute of the input 'aria-invalid' is always false.

To Reproduce
For example:
const [accepted, setAccepted] = useState(!isEmpty(value));

<MaskedTextField
mask='aaaaa'
lazy={true}
onAccept={(input: string, mask: any) => {
setAccepted(false);
}}
onComplete={(input: string, mask: any) => {
if (input && input.trim() !== '') {
const regEx = /[a-z]{5}/;
const value = getUnmaskedInput(input, mask);
if (validateRegEx(value, regEx)) {
setAccepted(true);
} else {
setAccepted(false);
}
}
}}
label={label}
aria-label={label}
value={value}
error={!isEmpty(value) && !accepted}
/>

Expected behavior
The unit tests as follows should pass,
const { getByRole } = ;
const input = getByRole('textbox');
fireEvent.change(input, { target: { value: '1a2b3c' } });
fireEvent.blur(input);

expect(input).toHaveValue('abc');
expect(input).toHaveAttribute('aria-invalid', 'true');

fireEvent.change(input, { target: { value: 'abcde' } });
fireEvent.blur(input);
expect(input).toHaveValue('abcde');
expect(input).toHaveAttribute('aria-invalid', 'false');

However, it failed at expect(input).toHaveAttribute('aria-invalid', 'true');
The 'aria-invalid' attribute is always false.
The same test cases are happy in version 7.5.0.

Environment:

  • IMask version: 7.6.0

Additional context
Add any other context about the problem here.

hi, i simplified your example and was not able to reproduce it:

function IMaskHooked () {
  const [accepted, setAccepted] = useState(false);

  const { ref, value, setValue } = useIMask({
    mask: '000',
    lazy: false
  }, {
    onComplete: () => setAccepted(true),
  });

  return React.createElement('input', {
    ref,
    defaultValue: '10000000',
    'aria-invalid': accepted,
  });
}

feel free to reopen if you have more info

Hi, thanks for your reply. The unexpected behaviour only happened in the test cases. It's working fine if it's not triggered by the fireEvent.

Could you please also try my case with testing-library? I cannot reopen the ticket, would you mind reopening at your side? Or do you want me to open another one then ref this ticket?

Hi @sucy6330133, then it seems to me that the problem is not with imask but with the testing library. I will be able to help you only if you provide complete example to run in a sandbox.

Hmm... only the imask 7.6.0 has the problem. It was fine when using 7.5.0 with the same code and settings. I was wondering what behaviour has changed from 7.5 to 7.6 cause the problem.

Hi @uNmAnNeR , I have created a working codeSanbox example for you to play with. Thanks for your time.