diff --git a/.all-contributorsrc b/.all-contributorsrc index f7ffca0b..a616a493 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -296,6 +296,15 @@ "contributions": [ "code" ] + }, + { + "login": "wyze", + "name": "Neil Kistner", + "avatar_url": "https://avatars1.githubusercontent.com/u/186971?v=4", + "profile": "https://neilkistner.com/", + "contributions": [ + "code" + ] } ] } diff --git a/README.md b/README.md index e62d73ac..71108d93 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ [![downloads][downloads-badge]][npmtrends] [![MIT License][license-badge]][license] -[![All Contributors](https://img.shields.io/badge/all_contributors-29-orange.svg?style=flat-square)](#contributors) +[![All Contributors](https://img.shields.io/badge/all_contributors-30-orange.svg?style=flat-square)](#contributors) [![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc] @@ -324,6 +324,13 @@ Returns the element that has the matching `title` attribute. const deleteElement = getByTitle(container, 'Delete') ``` +Will also find a `title` element within an SVG. + +```javascript +// Close +const closeElement = getByTitle(container, 'Close') +``` + ### `getByValue` ```typescript @@ -917,7 +924,7 @@ Thanks goes to these people ([emoji key][emojis]): | [
Anto Aravinth](https://github.com/antoaravinth)
[πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=antoaravinth "Code") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=antoaravinth "Tests") [πŸ“–](https://github.com/kentcdodds/dom-testing-library/commits?author=antoaravinth "Documentation") | [
Jonah Moses](https://github.com/JonahMoses)
[πŸ“–](https://github.com/kentcdodds/dom-testing-library/commits?author=JonahMoses "Documentation") | [
Łukasz Gandecki](http://team.thebrain.pro)
[πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=lgandecki "Code") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=lgandecki "Tests") [πŸ“–](https://github.com/kentcdodds/dom-testing-library/commits?author=lgandecki "Documentation") | [
Ivan Babak](https://sompylasar.github.io)
[πŸ›](https://github.com/kentcdodds/dom-testing-library/issues?q=author%3Asompylasar "Bug reports") [πŸ€”](#ideas-sompylasar "Ideas, Planning, & Feedback") [πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=sompylasar "Code") [πŸ“–](https://github.com/kentcdodds/dom-testing-library/commits?author=sompylasar "Documentation") | [
Jesse Day](https://github.com/jday3)
[πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=jday3 "Code") | [
Ernesto GarcΓ­a](http://gnapse.github.io)
[πŸ’¬](#question-gnapse "Answering Questions") [πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=gnapse "Code") [πŸ“–](https://github.com/kentcdodds/dom-testing-library/commits?author=gnapse "Documentation") | [
Josef Maxx Blake](http://jomaxx.com)
[πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=jomaxx "Code") [πŸ“–](https://github.com/kentcdodds/dom-testing-library/commits?author=jomaxx "Documentation") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=jomaxx "Tests") | | [
Alex Cook](https://github.com/alecook)
[πŸ“–](https://github.com/kentcdodds/dom-testing-library/commits?author=alecook "Documentation") [πŸ’‘](#example-alecook "Examples") | [
Daniel Cook](https://github.com/dfcook)
[πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=dfcook "Code") [πŸ“–](https://github.com/kentcdodds/dom-testing-library/commits?author=dfcook "Documentation") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=dfcook "Tests") | [
Thomas Chia](https://github.com/thchia)
[πŸ›](https://github.com/kentcdodds/dom-testing-library/issues?q=author%3Athchia "Bug reports") [πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=thchia "Code") | [
Tim Deschryver](https://github.com/tdeschryver)
[πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=tdeschryver "Code") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=tdeschryver "Tests") | [
Alex Krolick](https://alexkrolick.com)
[πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=alexkrolick "Code") | [
Maddi Joyce](http://www.maddijoyce.com)
[πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=maddijoyce "Code") | [
Peter Kamps](https://github.com/npeterkamps)
[πŸ›](https://github.com/kentcdodds/dom-testing-library/issues?q=author%3Anpeterkamps "Bug reports") [πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=npeterkamps "Code") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=npeterkamps "Tests") | | [
Jonathan Stoye](http://jonathanstoye.de)
[πŸ“–](https://github.com/kentcdodds/dom-testing-library/commits?author=JonathanStoye "Documentation") | [
Sanghyeon Lee](https://github.com/yongdamsh)
[πŸ’‘](#example-yongdamsh "Examples") | [
Justice Mba ](https://github.com/Dajust)
[πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=Dajust "Code") [πŸ“–](https://github.com/kentcdodds/dom-testing-library/commits?author=Dajust "Documentation") [πŸ€”](#ideas-Dajust "Ideas, Planning, & Feedback") | [
Wayne Crouch](https://github.com/wgcrouch)
[πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=wgcrouch "Code") | [
Ben Elliott](http://benjaminelliott.co.uk)
[πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=benelliott "Code") | [
Ruben Costa](http://nuances.co)
[πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=rubencosta "Code") | [
Robert Smith](http://rbrtsmith.com/)
[πŸ›](https://github.com/kentcdodds/dom-testing-library/issues?q=author%3Arbrtsmith "Bug reports") [πŸ€”](#ideas-rbrtsmith "Ideas, Planning, & Feedback") [πŸ“–](https://github.com/kentcdodds/dom-testing-library/commits?author=rbrtsmith "Documentation") | -| [
dadamssg](https://github.com/dadamssg)
[πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=dadamssg "Code") | +| [
dadamssg](https://github.com/dadamssg)
[πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=dadamssg "Code") | [
Neil Kistner](https://neilkistner.com/)
[πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=wyze "Code") | diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js index 1ff35674..f1168f79 100644 --- a/src/__tests__/element-queries.js +++ b/src/__tests__/element-queries.js @@ -146,6 +146,23 @@ test('query/get element by its title', () => { expect(getByTitle('Delete').id).toEqual('2') expect(queryByTitle('Delete').id).toEqual('2') + expect(queryByTitle('Del', {exact: false}).id).toEqual('2') +}) + +test('query/get title element of SVG', () => { + const {getByTitle, queryByTitle} = render(` +
+ + Close + + + + +
+ `) + + expect(getByTitle('Close').id).toEqual('svg-title') + expect(queryByTitle('Close').id).toEqual('svg-title') }) test('query/get element by its value', () => { diff --git a/src/queries.js b/src/queries.js index d57b3520..56e71401 100644 --- a/src/queries.js +++ b/src/queries.js @@ -82,12 +82,28 @@ function queryByText(...args) { return firstResultOrNull(queryAllByText, ...args) } +function queryAllByTitle( + container, + text, + {exact = true, collapseWhitespace = true, trim = true} = {}, +) { + const matcher = exact ? matches : fuzzyMatches + const matchOpts = {collapseWhitespace, trim} + return Array.from(container.querySelectorAll('[title], svg > title')).filter( + node => + matcher(node.getAttribute('title'), node, text, matchOpts) || + matcher(getNodeText(node), node, text, matchOpts), + ) +} + +function queryByTitle(...args) { + return firstResultOrNull(queryAllByTitle, ...args) +} + const queryByPlaceholderText = queryByAttribute.bind(null, 'placeholder') const queryAllByPlaceholderText = queryAllByAttribute.bind(null, 'placeholder') const queryByTestId = queryByAttribute.bind(null, 'data-testid') const queryAllByTestId = queryAllByAttribute.bind(null, 'data-testid') -const queryByTitle = queryByAttribute.bind(null, 'title') -const queryAllByTitle = queryAllByAttribute.bind(null, 'title') const queryByValue = queryByAttribute.bind(null, 'value') const queryAllByValue = queryAllByAttribute.bind(null, 'value')