Skip to content
This repository was archived by the owner on Apr 29, 2021. It is now read-only.
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -82,5 +82,10 @@ You can pass a `className` like `test-class.test-class--modified` to find a comp
Find only one instance of a component in the tree with a ref that matches `ref`.

```javascript
ReactComponent findWithRef(ReactComponent tree, string ref)
ReactComponent|ReactComponent[] findWithRef(ReactComponent tree, string ref [, string ref...])
```
#### Usage
```
const header = ShallowTestUtils.findWithRef(component, 'head')
const [list, close] = ShallowTestUtils.findWithRef(component, 'list', 'close-button')
```
10 changes: 10 additions & 0 deletions specs/find-with-ref-spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,4 +46,14 @@ describe('`findWithRef`', function() {
expect(() => findWithRef(this.tree, 'non-existing')).toThrow();
});

it('should find multiple refs', function() {
expect(findWithRef(this.tree, 'input-ref', 'other-component-ref').length).toBe(2);
expect(findWithRef(this.tree, 'input-ref', 'other-component-ref')[0].props.className).toBe('input-ref-class');
expect(findWithRef(this.tree, 'input-ref', 'other-component-ref')[1].props.test).toBe('test');
});

it('should not find anything if one of the multiple refs in not found', function() {
expect(() => findWithRef(this.tree, 'input-ref', 'non-existing')).toThrow();
});

});
15 changes: 11 additions & 4 deletions src/find-with-ref.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ import findAll from './find-all';
* Finds component in the tree with a ref that matches
* `ref`.
*
* @param {ReactComponent} tree the rendered tree to traverse
* @param {String} ref to find
* @return {ReactComponent} found component
* @param {ReactComponent} tree the rendered tree to traverse
* @param {...String} ref the ref(s) to find
* @return {ReactComponent|ReactComponent[]} found component or an array of it
*/
export default function findWithRef(tree, ref) {
function findWithRefForOne(tree, ref) {
const found = findAll(tree, component => {
if (React.isValidElement(component)) {
return component.ref != null && component.ref === ref;
Expand All @@ -24,3 +24,10 @@ export default function findWithRef(tree, ref) {

return found[0];
}

export default function findWithRef(root, ...refs) {
if(refs.length == 1)
return findWithRefForOne(root, refs[0]);

return refs.map(ref => findWithRefForOne(root, ref));
Copy link
Author

Choose a reason for hiding this comment

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

We could optimize this by changing the findAll function to take in multiple options so that it does the tree traversal only once. But if we need this just for findWithRef those changes would seem unnecessary

}