Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

fix(ByRole): filter by name or description when hidden #1161

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

Open
viniciuslagedo wants to merge 5 commits into testing-library:main
base: main
Choose a base branch
Loading
from viniciuslagedo:pr/byrole-read-hidden-names

Conversation

Copy link

@viniciuslagedo viniciuslagedo commented Aug 31, 2022
edited
Loading

What: Fixes the ByRole methods to accept filter hidden elements using name and description. Also fixes the logs to show the accessible name in case of not found error. Related to #846

Why: If we have two hidden elements with the same role we can't filter that using the name. Also when we have hidden elements on logs they don't have the name filled, they are always equal ""

How: By adding the hidden option when use computeAccessibleDescription and computeAccessibleName to get the accessible description and name

Checklist:

  • Documentation added to the
    docs site N/A
  • Tests
  • TypeScript definitions updated N/A
  • Ready to be merged

rafarubim, cseas, and gbonhoure reacted with thumbs up emoji
Copy link

codesandbox-ci bot commented Aug 31, 2022
edited
Loading

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 64e243b:

Sandbox Source
react-testing-library-examples Configuration


test('when hidden: true logs available roles when it fails', () => {
const {getByRole} = render(`<div hidden><h1>Hi</h1></div>`)
const {getByRole} = render(`<h1 hidden>Hi</h1>`)
Copy link
Member

@eps1lon eps1lon Sep 5, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's keep this test. I don't think it's relevant to the change. If there is something important here, lets's add a new test instead so that we can better track what changed

Copy link
Author

@viniciuslagedo viniciuslagedo Sep 6, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The idea was to test the case where an element had a name available to be filtered but is hidden, before that change the name was always empty. May we can add a test specifically for that case? What do you think?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Always add test instead of re-purposing existing tests. Existing tests should only change their assertions if they relied on buggy behavior.

viniciuslagedo reacted with heart emoji
Copy link
Author

@viniciuslagedo viniciuslagedo Sep 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you! I'm learning about all that tests concepts and patterns.

Copy link
Author

@viniciuslagedo viniciuslagedo Oct 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@eps1lon can you check this again? :3

Copy link

codecov bot commented Oct 5, 2022
edited
Loading

Codecov Report

Merging #1161 (64e243b) into main (edffb7c) will not change coverage.
The diff coverage is n/a.

@@ Coverage Diff @@
## main #1161 +/- ##
=========================================
 Coverage 100.00% 100.00% 
=========================================
 Files 24 24 
 Lines 998 998 
 Branches 326 326 
=========================================
 Hits 998 998 
Flag Coverage Δ
node-12 100.00% <ø> (ø)
node-14 100.00% <ø> (ø)
node-16 100.00% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
src/queries/role.js 100.00% <ø> (ø)
src/role-helpers.js 100.00% <ø> (ø)

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

Copy link
Member

eps1lon commented Oct 31, 2022

The problem is that the accessible name is different if the element is hidden. See #846 (comment)

So this adds a footgun where you just flip hidden and expect name to return the same set. I wasn't convinced by #846 fully to implement this so let's add some concrete, high level use cases to #846 first (e.g. what are you testing?).

@eps1lon eps1lon linked an issue Oct 31, 2022 that may be closed by this pull request
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@eps1lon eps1lon eps1lon left review comments

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

*ByRole reads hidden element names as ""

AltStyle によって変換されたページ (->オリジナル) /