From 8ffe6d6bf08f0d70040aea665147a791bf48621e Mon Sep 17 00:00:00 2001 From: Ben Chauvette Date: Fri, 10 Aug 2018 13:35:41 -0400 Subject: [PATCH] feat(getNodeText): Don't join text nodes with whitespace (#87) **What**: Changes the way `getNodeText` joins nodes. Instead of joining them with a space, it now joins them with an empty string. **Why**: This PR comes out of https://github.com/kentcdodds/react-testing-library/issues/53 In React, if you have an element like `{volts}V`, 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**: - 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 **Checklist**: - [ ] Documentation - **N/A** (I think?) - [x] Tests - [x] Ready to be merged - [x] Added myself to contributors table Thanks! :smile_cat: Closes kentcdodds/react-testing-library#53 --- .all-contributorsrc | 9 +++++++++ .size-snapshot.json | 6 +++--- README.md | 4 ++-- src/__tests__/element-queries.js | 12 ++++++++++++ src/get-node-text.js | 2 +- 5 files changed, 27 insertions(+), 6 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index a616a493..ac7bafbc 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -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" + ] } ] } diff --git a/.size-snapshot.json b/.size-snapshot.json index 0df0ea7d..87faf7e0 100644 --- a/.size-snapshot.json +++ b/.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 } } diff --git a/README.md b/README.md index 71108d93..5075177f 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-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] @@ -924,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") | [
Neil Kistner](https://neilkistner.com/)
[πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=wyze "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") | [
Ben Chauvette](http://bdchauvette.net/)
[πŸ’»](https://github.com/kentcdodds/dom-testing-library/commits?author=bdchauvette "Code") | diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js index f1168f79..f392741d 100644 --- a/src/__tests__/element-queries.js +++ b/src/__tests__/element-queries.js @@ -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('
') + container.appendChild(textDiv) + expect(queryByText('Β£24.99')).toBeTruthy() +}) + test('matches case with RegExp matcher', () => { const {queryByText} = render(` STEP 1 of 4 diff --git a/src/get-node-text.js b/src/get-node-text.js index 8c50829c..cace4734 100644 --- a/src/get-node-text.js +++ b/src/get-node-text.js @@ -5,7 +5,7 @@ function getNodeText(node) { child.nodeType === window.Node.TEXT_NODE && Boolean(child.textContent), ) .map(c => c.textContent) - .join(' ') + .join('') } export {getNodeText}