From 0bdab5d06cedf276d721ed4ea070f2e0b5347533 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Augustin=20Le=20F=C3=A8vre?= Date: Fri, 7 Aug 2020 13:31:00 +0200 Subject: [PATCH 1/7] fix: Return closest Text matching a query --- src/__tests__/queryByApi.test.js | 28 +++++++++++++++++++++++++++- src/helpers/getByAPI.js | 12 ++++++++++++ 2 files changed, 39 insertions(+), 1 deletion(-) diff --git a/src/__tests__/queryByApi.test.js b/src/__tests__/queryByApi.test.js index 5ca5a06cc..92cb72e4b 100644 --- a/src/__tests__/queryByApi.test.js +++ b/src/__tests__/queryByApi.test.js @@ -48,7 +48,7 @@ test('queryByText not found', () => { ).toBeFalsy(); }); -test('queryByText nested multiple in ', () => { +test('queryByText nested text across multiple in ', () => { expect( render( @@ -62,6 +62,18 @@ test('queryByText nested multiple in ', () => { ).toBeTruthy(); }); +test('queryByText with nested Text components return the closest Text', () => { + const NestedTexts = () => ( + + My text + + ); + + const { getByText } = render(); + + expect(getByText('My text').props.nativeID).toBe('2'); +}); + test('queryByText nested in ', () => { const CustomText = ({ children }) => { return {children}; @@ -75,3 +87,17 @@ test('queryByText nested in ', () => { ).queryByText('Hello World!') ).toBeTruthy(); }); + +test('queryByText nested deep in ', () => { + const CustomText = ({ children }) => { + return {children}; + }; + + expect( + render( + + Hello World! + + ).queryByText('Hello World!') + ).toBeTruthy(); +}); diff --git a/src/helpers/getByAPI.js b/src/helpers/getByAPI.js index 723cc20e5..44366c0ea 100644 --- a/src/helpers/getByAPI.js +++ b/src/helpers/getByAPI.js @@ -44,6 +44,18 @@ const getChildrenAsText = (children, TextComponent, textContent = []) => { } if (child?.props?.children) { + // This means that down in the tree of a there's another TextComponent that + // contains a string, but the parent itself doesn't contain any other string + // We should then match against this child, since querying aims to always return the element + // the closest to the target text. For instance in this example we don't want + // getChildrenAsText to match on the Text of nativeID "1", but the one of nativeID "2" + // + // My text + // + if (filterNodeByType(child, TextComponent) && textContent.length === 0) { + return; + } + getChildrenAsText(child.props.children, TextComponent, textContent); } }); From c36e5345394c967afbcb657fd34195a976dd12b9 Mon Sep 17 00:00:00 2001 From: Augustin Date: Mon, 10 Aug 2020 13:37:22 +0200 Subject: [PATCH 2/7] Add test for another edge case --- src/__tests__/queryByApi.test.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/__tests__/queryByApi.test.js b/src/__tests__/queryByApi.test.js index 92cb72e4b..d5ea8945b 100644 --- a/src/__tests__/queryByApi.test.js +++ b/src/__tests__/queryByApi.test.js @@ -74,6 +74,21 @@ test('queryByText with nested Text components return the closest Text', () => { expect(getByText('My text').props.nativeID).toBe('2'); }); +test('queryByText with nested Text components each with text return the lowest one', () => { + const NestedTexts = () => ( + + bob + My text + + ); + + const { getByText } = render(); + + expect(getByText('My text').props.nativeID).toBe('2'); +}); + + + test('queryByText nested in ', () => { const CustomText = ({ children }) => { return {children}; From 5c0f28dafa55de7922e55a0c840f5def6214aacb Mon Sep 17 00:00:00 2001 From: Augustin Date: Mon, 10 Aug 2020 13:44:46 +0200 Subject: [PATCH 3/7] Fix whitespaces --- src/__tests__/queryByApi.test.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/__tests__/queryByApi.test.js b/src/__tests__/queryByApi.test.js index d5ea8945b..b49112f92 100644 --- a/src/__tests__/queryByApi.test.js +++ b/src/__tests__/queryByApi.test.js @@ -87,8 +87,6 @@ test('queryByText with nested Text components each with text return the lowest o expect(getByText('My text').props.nativeID).toBe('2'); }); - - test('queryByText nested in ', () => { const CustomText = ({ children }) => { return {children}; From 66bc184b0ddb2e8a165e81d63956448d8d80330d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Fri, 14 Aug 2020 16:56:41 +0200 Subject: [PATCH 4/7] adjust comment --- src/helpers/getByAPI.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/helpers/getByAPI.js b/src/helpers/getByAPI.js index 44366c0ea..c7236efcb 100644 --- a/src/helpers/getByAPI.js +++ b/src/helpers/getByAPI.js @@ -44,14 +44,10 @@ const getChildrenAsText = (children, TextComponent, textContent = []) => { } if (child?.props?.children) { - // This means that down in the tree of a there's another TextComponent that - // contains a string, but the parent itself doesn't contain any other string - // We should then match against this child, since querying aims to always return the element - // the closest to the target text. For instance in this example we don't want - // getChildrenAsText to match on the Text of nativeID "1", but the one of nativeID "2" - // - // My text - // + // Bail on traversing text children down the tree if current node (child) + // has no text. In such situations, react-test-renderer will traverse down + // this tree in a separate call and run this query again. As a result, the + // query will match a deeper text node that may have text some content. if (filterNodeByType(child, TextComponent) && textContent.length === 0) { return; } From 7630499e505b65f75799f73b8a16057168d0f760 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Sat, 15 Aug 2020 11:54:38 +0200 Subject: [PATCH 5/7] Update src/helpers/getByAPI.js Co-authored-by: Maciej Jastrzebski --- src/helpers/getByAPI.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/helpers/getByAPI.js b/src/helpers/getByAPI.js index c7236efcb..18409d052 100644 --- a/src/helpers/getByAPI.js +++ b/src/helpers/getByAPI.js @@ -47,7 +47,7 @@ const getChildrenAsText = (children, TextComponent, textContent = []) => { // Bail on traversing text children down the tree if current node (child) // has no text. In such situations, react-test-renderer will traverse down // this tree in a separate call and run this query again. As a result, the - // query will match a deeper text node that may have text some content. + // query will match the deepest text node that matches requested text. if (filterNodeByType(child, TextComponent) && textContent.length === 0) { return; } From 5cd6fff51097a1f9e940238befcc73374fcbf5a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Sat, 15 Aug 2020 17:23:34 +0200 Subject: [PATCH 6/7] update test --- src/__tests__/queryByApi.test.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/__tests__/queryByApi.test.js b/src/__tests__/queryByApi.test.js index b49112f92..a6d9fb602 100644 --- a/src/__tests__/queryByApi.test.js +++ b/src/__tests__/queryByApi.test.js @@ -49,17 +49,17 @@ test('queryByText not found', () => { }); test('queryByText nested text across multiple in ', () => { - expect( - render( - - Hello{' '} - - World - !{true} - + const { queryByText } = render( + + Hello{' '} + + World + !{true} - ).queryByText('Hello World!') - ).toBeTruthy(); + + ); + + expect(queryByText('Hello World!')?.props.nativeID).toBe('1'); }); test('queryByText with nested Text components return the closest Text', () => { From 1868923472c6c82ea3a8f09aceeb16ad8f8dc463 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Sat, 15 Aug 2020 17:25:22 +0200 Subject: [PATCH 7/7] use queryBy --- src/__tests__/queryByApi.test.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/__tests__/queryByApi.test.js b/src/__tests__/queryByApi.test.js index a6d9fb602..f7f39b991 100644 --- a/src/__tests__/queryByApi.test.js +++ b/src/__tests__/queryByApi.test.js @@ -69,9 +69,9 @@ test('queryByText with nested Text components return the closest Text', () => { ); - const { getByText } = render(); + const { queryByText } = render(); - expect(getByText('My text').props.nativeID).toBe('2'); + expect(queryByText('My text')?.props.nativeID).toBe('2'); }); test('queryByText with nested Text components each with text return the lowest one', () => { @@ -82,9 +82,9 @@ test('queryByText with nested Text components each with text return the lowest o ); - const { getByText } = render(); + const { queryByText } = render(); - expect(getByText('My text').props.nativeID).toBe('2'); + expect(queryByText('My text')?.props.nativeID).toBe('2'); }); test('queryByText nested in ', () => {