Skip to content

Commit

Permalink
feat(getNodeText): Don't join text nodes with whitespace (#87)
Browse files Browse the repository at this point in the history
**What**:

Changes the way `getNodeText` joins nodes. Instead of joining them with a space, it now joins them with an empty string.

<!-- Why are these changes necessary? -->

**Why**:

This PR comes out of testing-library/react-testing-library#53

In React, if you have an element like `<span>{volts}V</span>`, then the generated element will have two text nodes, one for the variable `volts`, and one for the normal string.

When browsers render this, there is no space between the text nodes. Likewise, the `textContent` property on the span will return a string without spaces (e.g. `300V`).

However, the current implementation of `getNodeText` joins all of the nodes with a space, so if you try to use e.g. `queryByText('300V')` it will return `null`.

For a live demo, see https://codesandbox.io/s/w718n5ojq7

<!-- How were these changes implemented? -->

**How**:

- changing `join(' ')` to `join('')` on [line 8 of `src/get-node-text.js`](https://github.com/kentcdodds/dom-testing-library/compare/master...bdchauvette:pr/get-node-text-whitespace?expand=1#diff-6350d468f7684d134aab9d42d96a77beR8)
- adding [a test](https://github.com/kentcdodds/dom-testing-library/compare/master...bdchauvette:pr/get-node-text-whitespace?expand=1#diff-de31c4d0bed96b2a4211de164bb1b589R59) for querying against a DOM element containing adjacent text nodes without any whitespace

<!-- Have you done all of these things?  -->

**Checklist**:

<!-- add "N/A" to the end of each line that's irrelevant to your changes -->

<!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->

- [ ] Documentation - **N/A** (I think?)
- [x] Tests
- [x] Ready to be merged <!-- In your opinion, is this ready to be merged as soon as it's reviewed? -->
- [x] Added myself to contributors table <!-- this is optional, see the contributing guidelines for instructions -->

<!-- feel free to add additional comments -->

Thanks! 馃樃 

Closes testing-library/react-testing-library#53
  • Loading branch information
bdchauvette authored and Kent C. Dodds committed Aug 10, 2018
1 parent fe44799 commit 8ffe6d6
Show file tree
Hide file tree
Showing 5 changed files with 27 additions and 6 deletions.
9 changes: 9 additions & 0 deletions .all-contributorsrc
Expand Up @@ -305,6 +305,15 @@
"contributions": [
"code"
]
},
{
"login": "bdchauvette",
"name": "Ben Chauvette",
"avatar_url": "https://avatars3.githubusercontent.com/u/1448597?v=4",
"profile": "http://bdchauvette.net/",
"contributions": [
"code"
]
}
]
}
6 changes: 3 additions & 3 deletions .size-snapshot.json
@@ -1,7 +1,7 @@
{
"dist/dom-testing-library.umd.js": {
"bundled": 108613,
"minified": 48203,
"gzipped": 14777
"bundled": 111046,
"minified": 49098,
"gzipped": 14989
}
}
4 changes: 2 additions & 2 deletions README.md
Expand Up @@ -16,7 +16,7 @@
[![downloads][downloads-badge]][npmtrends]
[![MIT License][license-badge]][license]

[![All Contributors](https://img.shields.io/badge/all_contributors-30-orange.svg?style=flat-square)](#contributors)
[![All Contributors](https://img.shields.io/badge/all_contributors-31-orange.svg?style=flat-square)](#contributors)
[![PRs Welcome][prs-badge]][prs]
[![Code of Conduct][coc-badge]][coc]

Expand Down Expand Up @@ -924,7 +924,7 @@ Thanks goes to these people ([emoji key][emojis]):
| [<img src="https://avatars1.githubusercontent.com/u/1241511?s=460&v=4" width="100px;"/><br /><sub><b>Anto Aravinth</b></sub>](https://github.com/antoaravinth)<br />[馃捇](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") | [<img src="https://avatars2.githubusercontent.com/u/3462296?v=4" width="100px;"/><br /><sub><b>Jonah Moses</b></sub>](https://github.com/JonahMoses)<br />[馃摉](https://github.com/kentcdodds/dom-testing-library/commits?author=JonahMoses "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/4002543?v=4" width="100px;"/><br /><sub><b>艁ukasz Gandecki</b></sub>](http://team.thebrain.pro)<br />[馃捇](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") | [<img src="https://avatars2.githubusercontent.com/u/498274?v=4" width="100px;"/><br /><sub><b>Ivan Babak</b></sub>](https://sompylasar.github.io)<br />[馃悰](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") | [<img src="https://avatars3.githubusercontent.com/u/4439618?v=4" width="100px;"/><br /><sub><b>Jesse Day</b></sub>](https://github.com/jday3)<br />[馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=jday3 "Code") | [<img src="https://avatars0.githubusercontent.com/u/15199?v=4" width="100px;"/><br /><sub><b>Ernesto Garc铆a</b></sub>](http://gnapse.github.io)<br />[馃挰](#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") | [<img src="https://avatars2.githubusercontent.com/u/2747424?v=4" width="100px;"/><br /><sub><b>Josef Maxx Blake</b></sub>](http://jomaxx.com)<br />[馃捇](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") |
| [<img src="https://avatars3.githubusercontent.com/u/725236?v=4" width="100px;"/><br /><sub><b>Alex Cook</b></sub>](https://github.com/alecook)<br />[馃摉](https://github.com/kentcdodds/dom-testing-library/commits?author=alecook "Documentation") [馃挕](#example-alecook "Examples") | [<img src="https://avatars3.githubusercontent.com/u/10348212?v=4" width="100px;"/><br /><sub><b>Daniel Cook</b></sub>](https://github.com/dfcook)<br />[馃捇](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") | [<img src="https://avatars2.githubusercontent.com/u/21194045?s=400&v=4" width="100px;"/><br /><sub><b>Thomas Chia</b></sub>](https://github.com/thchia)<br />[馃悰](https://github.com/kentcdodds/dom-testing-library/issues?q=author%3Athchia "Bug reports") [馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=thchia "Code") | [<img src="https://avatars1.githubusercontent.com/u/28659384?v=4" width="100px;"/><br /><sub><b>Tim Deschryver</b></sub>](https://github.com/tdeschryver)<br />[馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=tdeschryver "Code") [鈿狅笍](https://github.com/kentcdodds/dom-testing-library/commits?author=tdeschryver "Tests") | [<img src="https://avatars3.githubusercontent.com/u/1571667?v=4" width="100px;"/><br /><sub><b>Alex Krolick</b></sub>](https://alexkrolick.com)<br />[馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=alexkrolick "Code") | [<img src="https://avatars2.githubusercontent.com/u/2224291?v=4" width="100px;"/><br /><sub><b>Maddi Joyce</b></sub>](http://www.maddijoyce.com)<br />[馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=maddijoyce "Code") | [<img src="https://avatars1.githubusercontent.com/u/25429764?v=4" width="100px;"/><br /><sub><b>Peter Kamps</b></sub>](https://github.com/npeterkamps)<br />[馃悰](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") |
| [<img src="https://avatars2.githubusercontent.com/u/21689428?v=4" width="100px;"/><br /><sub><b>Jonathan Stoye</b></sub>](http://jonathanstoye.de)<br />[馃摉](https://github.com/kentcdodds/dom-testing-library/commits?author=JonathanStoye "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/4126644?v=4" width="100px;"/><br /><sub><b>Sanghyeon Lee</b></sub>](https://github.com/yongdamsh)<br />[馃挕](#example-yongdamsh "Examples") | [<img src="https://avatars3.githubusercontent.com/u/8015514?v=4" width="100px;"/><br /><sub><b>Justice Mba </b></sub>](https://github.com/Dajust)<br />[馃捇](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") | [<img src="https://avatars3.githubusercontent.com/u/340761?v=4" width="100px;"/><br /><sub><b>Wayne Crouch</b></sub>](https://github.com/wgcrouch)<br />[馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=wgcrouch "Code") | [<img src="https://avatars1.githubusercontent.com/u/4996462?v=4" width="100px;"/><br /><sub><b>Ben Elliott</b></sub>](http://benjaminelliott.co.uk)<br />[馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=benelliott "Code") | [<img src="https://avatars3.githubusercontent.com/u/577921?v=4" width="100px;"/><br /><sub><b>Ruben Costa</b></sub>](http://nuances.co)<br />[馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=rubencosta "Code") | [<img src="https://avatars2.githubusercontent.com/u/4982001?v=4" width="100px;"/><br /><sub><b>Robert Smith</b></sub>](http://rbrtsmith.com/)<br />[馃悰](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") |
| [<img src="https://avatars3.githubusercontent.com/u/881986?v=4" width="100px;"/><br /><sub><b>dadamssg</b></sub>](https://github.com/dadamssg)<br />[馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=dadamssg "Code") | [<img src="https://avatars1.githubusercontent.com/u/186971?v=4" width="100px;"/><br /><sub><b>Neil Kistner</b></sub>](https://neilkistner.com/)<br />[馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=wyze "Code") |
| [<img src="https://avatars3.githubusercontent.com/u/881986?v=4" width="100px;"/><br /><sub><b>dadamssg</b></sub>](https://github.com/dadamssg)<br />[馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=dadamssg "Code") | [<img src="https://avatars1.githubusercontent.com/u/186971?v=4" width="100px;"/><br /><sub><b>Neil Kistner</b></sub>](https://neilkistner.com/)<br />[馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=wyze "Code") | [<img src="https://avatars3.githubusercontent.com/u/1448597?v=4" width="100px;"/><br /><sub><b>Ben Chauvette</b></sub>](http://bdchauvette.net/)<br />[馃捇](https://github.com/kentcdodds/dom-testing-library/commits?author=bdchauvette "Code") |

<!-- ALL-CONTRIBUTORS-LIST:END -->

Expand Down
12 changes: 12 additions & 0 deletions src/__tests__/element-queries.js
Expand Up @@ -56,6 +56,18 @@ test('can get elements by matching their text content', () => {
expect(queryByText('Step 1 of 4')).toBeTruthy()
})

test('can get elements by matching their text across adjacent text nodes', () => {
const textDiv = document.createElement('div')
const textNodeContent = ['拢', '24', '.', '99']
textNodeContent
.map(text => document.createTextNode(text))
.forEach(textNode => textDiv.appendChild(textNode))

const {container, queryByText} = render('<div />')
container.appendChild(textDiv)
expect(queryByText('拢24.99')).toBeTruthy()
})

test('matches case with RegExp matcher', () => {
const {queryByText} = render(`
<span>STEP 1 of 4</span>
Expand Down
2 changes: 1 addition & 1 deletion src/get-node-text.js
Expand Up @@ -5,7 +5,7 @@ function getNodeText(node) {
child.nodeType === window.Node.TEXT_NODE && Boolean(child.textContent),
)
.map(c => c.textContent)
.join(' ')
.join('')
}

export {getNodeText}

0 comments on commit 8ffe6d6

Please sign in to comment.