Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Filter by description on findByLabel for password input tests #1156

Open
e-compton opened this issue Nov 25, 2022 · 1 comment
Open

Filter by description on findByLabel for password input tests #1156

e-compton opened this issue Nov 25, 2022 · 1 comment

Comments

@e-compton
Copy link

Is your feature request related to a problem? Please describe.

I am trying to test that the inputs in my form have correct inline validation errors set as aria descriptions. This works great when the input is simply a textbox:

<Label>
  Email
  <input type="text' aria-describedby="emailError" />
</Label>
<div id="emailError">Please enter a valid email address</div>

...

expect(findbyRole('textbox', {
    name: 'Email',
    description: 'Please enter a valid email'
})).toBeInTheDocument();

However, when the input is a password since it has no role I cannot use the description field on getByRole to find the element.

Describe the solution you'd like

This issue recommends using getByLabelText for password inputs, so it would be a lot easier if that query could also search by description.

<Label>
  Password
  <input type="password' aria-describedby="passwordError" />
</Label>
<div id="passwordError">Please enter your password</div>

...

expect(findByLabelText('Password', {
    description: 'Please enter your password'
})).toBeInTheDocument();

Describe alternatives you've considered

Alternatively, if react-testing library could do some magic that means findByRole('password') just works, then that would be a very simple solution and most users probably wouldn't event have to think about it.

For now my tests merely assert that the error exists in the page and ignore the describedby connection.

expect(await screen.findByText('Please enter your new password')).toBeInTheDocument();

Additional context Add any other context or screenshots about the feature
request here.

@hjonasson
Copy link

If I understand your specific case correctly you want to test that there is a password error? In that case I think this might be the query for you:

screen.getByLabelText('password', {description: 'passwordError'})

You can try adding a password input into testing playground. I get this interesting recommendation

image

So this doesn't seem like a fully solved problem indeed.

@e-compton although findByRole('password') would be convenient, and it seems that selecting an input type='password comes up often, there is a good reason for not doing that. The reason is that the roles are not decided by testing-library but rather are defined by W3 (or some other body at least). You have a list of roles here. (Notice that you can add role=email if you want) which I find very helpful.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants