testing-library / dom-testing-library

🐙 Simple and complete DOM testing utilities that encourage good testing practices.
https://testing-library.com/dom
MIT License
3.26k stars 467 forks source link

Re-export computeAccessibleName and computeAccessibleDescription for UMD uses #1142

Open dantman opened 2 years ago

dantman commented 2 years ago

Describe the feature you'd like:

I would like it if @testing-library/dom would re-export the computeAccessibleName and computeAccessibleDescription functions from dom-accessibility-api. At least as part of the dist/dom.umd.js bundle.

computeAccessibleName is what findByRole uses for the name option. In the UMD bundle dom-accessibility-api is bundled together with @testing-library/dom's code, but in a way it cannot be used outside the library.

I was using @testing-library/testcafe and had a use case where instead of finding an element by it's accessible name I wanted to assert the accessible text of an element.

Unfortunately while investigating I found that:

Suggested implementation:

computeAccessibleName and computeAccessibleDescription could be included as part of the dom-testing-library API, perhaps under names like getAccessibleName and getAccessibleDescription to match getNodeText.

Not part of this issue, but perhaps @testing-library/testcafe could also include a custom selector property for these.

Describe alternatives you've considered:

I considered using dom-accessibility-api directly. However dom-accessibility-api does not include a UMD build and TestCafe will not accept any of the formats that dom-accessibility-api does include in its dist folder.

The only option I seem to have right now would be to build my own UMD bundle of dom-accessibility-api just to inject a duplicate definition of code that @testing-library/dom's bundle has already included in the page, but kept hidden.

Teachability, Documentation, Adoption, Migration Strategy:

The functions should be documented on https://testing-library.com/docs/dom-testing-library/api-custom-queries/ along with getNodeText.

getAccessibilityName should be documented as returning the same accessibility name that getByRole's name option matches, documented on https://testing-library.com/docs/queries/about.

zinckiwi commented 9 months ago

Would be very handy. Just came across this issue after being a similar situation to yours. I want to assert that a collection of buttons and links exactly corresponds to a list of aria-accessible strings, e.g.:

expect(
  screen
    .getAllByRole(/^button|link$/)
    .map(getAccessibleName)
).toEqual([ ... ])
MatanBobi commented 9 months ago

@eps1lon I don't mind doing this but I'd love to hear your take on it.