From 845334143f845ce454fc781c08f09b733c065d30 Mon Sep 17 00:00:00 2001 From: Sergey Melnikov Date: Thu, 1 Apr 2021 16:19:08 -0400 Subject: [PATCH] Revert "Revert "descendants calc always lazy to ensure same order as before"" This reverts commit 418afdd2f5efe7c5940a59474905b9bae3606e1a. --- packages/react-testing/src/element.ts | 3 - packages/react-testing/src/root.tsx | 13 +- .../react-testing/src/tests/element.test.tsx | 167 +++--------------- .../react-testing/src/tests/root.test.tsx | 2 - 4 files changed, 32 insertions(+), 153 deletions(-) diff --git a/packages/react-testing/src/element.ts b/packages/react-testing/src/element.ts index fc97fa130f..2e9f786f31 100644 --- a/packages/react-testing/src/element.ts +++ b/packages/react-testing/src/element.ts @@ -85,14 +85,11 @@ export class Element implements Node { constructor( private readonly tree: Tree, private readonly allChildren: (Element | string)[], - elementDescendants: Element[] | null, public readonly root: Root, ) { this.elementChildren = allChildren.filter( element => typeof element !== 'string', ) as Element[]; - - this.descendantsCache = elementDescendants; } data(key: string): string | undefined { diff --git a/packages/react-testing/src/root.tsx b/packages/react-testing/src/root.tsx index 070b74b232..8e884fcb3c 100644 --- a/packages/react-testing/src/root.tsx +++ b/packages/react-testing/src/root.tsx @@ -287,8 +287,6 @@ function defaultRender(element: React.ReactElement) { function fiberToElement( element: Fiber, root: Root, - descendants = [], - rootLevel = true, ): Element | string { const node: Fiber = findCurrentFiberUsingSlowPath(element); @@ -297,7 +295,7 @@ function fiberToElement( } const props = {...((node.memoizedProps as any) || {})}; - const children = childrenToTree(node.child, root, descendants); + const children = childrenToTree(node.child, root); return new Element( { @@ -307,22 +305,17 @@ function fiberToElement( instance: node.stateNode, }, children, - rootLevel ? descendants.reverse() : null, root, ); } -function childrenToTree(fiber: Fiber | null, root: Root, descendants) { +function childrenToTree(fiber: Fiber | null, root: Root) { let currentFiber = fiber; const children: (string | Element)[] = []; while (currentFiber != null) { - const result = fiberToElement(currentFiber, root, descendants, false); + const result = fiberToElement(currentFiber, root); children.push(result); - if (typeof result !== 'string') { - descendants.push(result); - } - currentFiber = currentFiber.sibling; } diff --git a/packages/react-testing/src/tests/element.test.tsx b/packages/react-testing/src/tests/element.test.tsx index 5755867d1d..074b864d93 100644 --- a/packages/react-testing/src/tests/element.test.tsx +++ b/packages/react-testing/src/tests/element.test.tsx @@ -15,8 +15,7 @@ const defaultTree = { }; const defaultRoot = new Root(); - -const divOne = new Element( +const divTwo = new Element( { ...defaultTree, type: 'div', @@ -24,33 +23,29 @@ const divOne = new Element( instance: document.createElement('div'), }, [], - [], defaultRoot, ); -const divTwo = new Element( +const divOne = new Element( { ...defaultTree, type: 'div', tag: Tag.HostComponent, instance: document.createElement('div'), }, - [], - [], + [divTwo], defaultRoot, ); -const componentOne = new Element( +const componentTwo = new Element( {...defaultTree, type: DummyComponent}, [], - [], defaultRoot, ); -const componentTwo = new Element( +const componentOne = new Element( {...defaultTree, type: DummyComponent}, - [], - [], + [divOne, componentTwo], defaultRoot, ); @@ -58,7 +53,7 @@ describe('Element', () => { describe('#props', () => { it('returns the props from the tree', () => { const props = {foo: 'bar'}; - const element = new Element({...defaultTree, props}, [], [], defaultRoot); + const element = new Element({...defaultTree, props}, [], defaultRoot); expect(element).toHaveProperty('props', props); }); }); @@ -66,7 +61,7 @@ describe('Element', () => { describe('#type', () => { it('returns the type from the tree', () => { const type = DummyComponent; - const element = new Element({...defaultTree, type}, [], [], defaultRoot); + const element = new Element({...defaultTree, type}, [], defaultRoot); expect(element).toHaveProperty('type', type); }); }); @@ -74,12 +69,7 @@ describe('Element', () => { describe('#instance', () => { it('returns the type from the tree', () => { const instance = {}; - const element = new Element( - {...defaultTree, instance}, - [], - [], - defaultRoot, - ); + const element = new Element({...defaultTree, instance}, [], defaultRoot); expect(element).toHaveProperty('instance', instance); }); }); @@ -89,7 +79,6 @@ describe('Element', () => { const element = new Element( {...defaultTree, tag: Tag.MemoComponent}, [], - [], defaultRoot, ); expect(element).toHaveProperty('isDOM', false); @@ -99,7 +88,6 @@ describe('Element', () => { const element = new Element( {...defaultTree, tag: Tag.HostComponent}, [], - [], defaultRoot, ); expect(element).toHaveProperty('isDOM', true); @@ -108,12 +96,7 @@ describe('Element', () => { describe('#children', () => { it('returns element children', () => { - const element = new Element( - defaultTree, - [divOne, divTwo], - [divOne, divTwo], - defaultRoot, - ); + const element = new Element(defaultTree, [divOne, divTwo], defaultRoot); expect(element).toHaveProperty('children', [divOne, divTwo]); }); @@ -122,7 +105,6 @@ describe('Element', () => { const element = new Element( defaultTree, [divOne, 'Some text', divTwo], - [divOne, divTwo], defaultRoot, ); @@ -132,12 +114,7 @@ describe('Element', () => { describe('#descendants', () => { it('returns element descendants', () => { - const element = new Element( - defaultTree, - [divOne], - [divOne, divTwo], - defaultRoot, - ); + const element = new Element(defaultTree, [divOne], defaultRoot); expect(element).toHaveProperty('descendants', [divOne, divTwo]); }); @@ -149,12 +126,7 @@ describe('Element', () => { }); it('returns the instances associated with each child DOM element', () => { - const element = new Element( - defaultTree, - [divOne, divTwo], - [divOne, divTwo], - defaultRoot, - ); + const element = new Element(defaultTree, [divOne, divTwo], defaultRoot); expect(element.domNodes).toStrictEqual([ divOne.instance, @@ -163,23 +135,13 @@ describe('Element', () => { }); it('does not return descendant DOM nodes', () => { - const element = new Element( - defaultTree, - [divOne], - [divOne, divTwo], - defaultRoot, - ); + const element = new Element(defaultTree, [divOne], defaultRoot); expect(element.domNodes).not.toContain(divTwo.instance); }); it('does not return instances for non-DOM nodes', () => { - const element = new Element( - defaultTree, - [componentOne], - [componentOne], - defaultRoot, - ); + const element = new Element(defaultTree, [componentOne], defaultRoot); expect(element.domNodes).not.toContain(componentOne.instance); }); @@ -191,34 +153,19 @@ describe('Element', () => { }); it('returns null if there is no direct child DOM node', () => { - const element = new Element( - defaultTree, - [componentOne], - [componentOne], - defaultRoot, - ); + const element = new Element(defaultTree, [componentOne], defaultRoot); expect(element.domNode).toBeNull(); }); it('returns the DOM node if there is a single DOM child', () => { - const element = new Element( - defaultTree, - [divOne], - [divOne, divTwo], - defaultRoot, - ); + const element = new Element(defaultTree, [divOne], defaultRoot); expect(element.domNode).toBe(divOne.instance); }); it('throws an error if there are multiple top-level DOM nodes', () => { - const element = new Element( - defaultTree, - [divOne, divTwo], - [divOne, divTwo], - defaultRoot, - ); + const element = new Element(defaultTree, [divOne, divTwo], defaultRoot); expect(() => element.domNode).toThrow(/multiple HTML elements/); }); @@ -227,7 +174,7 @@ describe('Element', () => { describe('#prop()', () => { it('returns the prop value for the specified key', () => { const props = {foo: 'bar'}; - const element = new Element({...defaultTree, props}, [], [], defaultRoot); + const element = new Element({...defaultTree, props}, [], defaultRoot); expect(element.prop('foo')).toBe(props.foo); }); }); @@ -242,7 +189,6 @@ describe('Element', () => { const element = new Element( {...defaultTree, tag: Tag.HostComponent, type: 'div', instance: div}, [], - [], defaultRoot, ); @@ -254,13 +200,12 @@ describe('Element', () => { const childTextTwo = 'bar'; const descendantText = ' baz?'; - const elementChild = new Element(defaultTree, [], [], defaultRoot); + const elementChild = new Element(defaultTree, [], defaultRoot); jest.spyOn(elementChild, 'text').mockImplementation(() => childTextOne); const element = new Element( {...defaultTree, tag: Tag.FunctionComponent, type: DummyComponent}, [elementChild, childTextTwo], - [elementChild], defaultRoot, ); @@ -271,7 +216,6 @@ describe('Element', () => { const element = new Element( {...defaultTree, tag: Tag.HostPortal, type: DummyComponent}, ['Hello world'], - [], defaultRoot, ); @@ -289,7 +233,6 @@ describe('Element', () => { const element = new Element( {...defaultTree, tag: Tag.HostComponent, type: 'div', instance: div}, [], - [], defaultRoot, ); @@ -300,13 +243,12 @@ describe('Element', () => { const childHtml = 'foo '; const childText = 'bar'; - const elementChild = new Element(defaultTree, [], [], defaultRoot); + const elementChild = new Element(defaultTree, [], defaultRoot); jest.spyOn(elementChild, 'text').mockImplementation(() => childHtml); const element = new Element( {...defaultTree, tag: Tag.FunctionComponent, type: DummyComponent}, [elementChild, childText], - [elementChild], defaultRoot, ); @@ -317,7 +259,6 @@ describe('Element', () => { const element = new Element( {...defaultTree, tag: Tag.HostPortal, type: DummyComponent}, ['Hello world'], - [], defaultRoot, ); @@ -330,7 +271,6 @@ describe('Element', () => { const element = new Element( {...defaultTree, tag: Tag.HostComponent, type: 'div'}, [], - [], defaultRoot, ); @@ -341,7 +281,6 @@ describe('Element', () => { const element = new Element( {...defaultTree, tag: Tag.FunctionComponent, type: DummyComponent}, [], - [], defaultRoot, ); @@ -351,12 +290,7 @@ describe('Element', () => { describe('#find()', () => { it('finds the first matching DOM node', () => { - const element = new Element( - defaultTree, - [componentOne], - [componentOne, divOne, divTwo], - defaultRoot, - ); + const element = new Element(defaultTree, [componentOne], defaultRoot); expect(element.find('div')).toBe(divOne); }); @@ -364,8 +298,7 @@ describe('Element', () => { it('finds the first matching component', () => { const element = new Element( defaultTree, - [divOne], - [divOne, componentOne, componentTwo], + [divOne, componentOne], defaultRoot, ); @@ -382,7 +315,6 @@ describe('Element', () => { instance: document.createElement('div'), }, [], - [], defaultRoot, ); @@ -395,7 +327,6 @@ describe('Element', () => { instance: document.createElement('div'), }, [], - [], defaultRoot, ); @@ -408,14 +339,12 @@ describe('Element', () => { instance: document.createElement('span'), }, [], - [], defaultRoot, ); const element = new Element( defaultTree, [divOne, divTwo, span], - [divOne, divTwo, span], defaultRoot, ); @@ -427,30 +356,20 @@ describe('Element', () => { }); it('returns null when no match is found', () => { - const element = new Element(defaultTree, [], [], defaultRoot); + const element = new Element(defaultTree, [], defaultRoot); expect(element.find(DummyComponent)).toBeNull(); }); }); describe('#findAll()', () => { it('finds all matching DOM nodes', () => { - const element = new Element( - defaultTree, - [divOne], - [divOne, componentOne, divTwo], - defaultRoot, - ); + const element = new Element(defaultTree, [divOne], defaultRoot); expect(element.findAll('div')).toStrictEqual([divOne, divTwo]); }); it('finds all matching components', () => { - const element = new Element( - defaultTree, - [componentOne], - [componentOne, divOne, componentTwo], - defaultRoot, - ); + const element = new Element(defaultTree, [componentOne], defaultRoot); expect(element.findAll(DummyComponent)).toStrictEqual([ componentOne, @@ -468,7 +387,6 @@ describe('Element', () => { instance: document.createElement('div'), }, [], - [], defaultRoot, ); @@ -481,7 +399,6 @@ describe('Element', () => { instance: document.createElement('div'), }, [], - [], defaultRoot, ); @@ -494,14 +411,12 @@ describe('Element', () => { instance: document.createElement('span'), }, [], - [], defaultRoot, ); const element = new Element( defaultTree, [divOne, divTwo, span], - [divOne, divTwo, span], defaultRoot, ); @@ -515,7 +430,7 @@ describe('Element', () => { }); it('returns an empty array when no matches are found', () => { - const element = new Element(defaultTree, [], [], defaultRoot); + const element = new Element(defaultTree, [], defaultRoot); expect(element.findAll(DummyComponent)).toHaveLength(0); }); }); @@ -526,12 +441,7 @@ describe('Element', () => { (element: Element) => element === divTwo, ); - const element = new Element( - defaultTree, - [componentOne], - [componentOne, divOne, divTwo], - defaultRoot, - ); + const element = new Element(defaultTree, [componentOne], defaultRoot); expect(element.findWhere(matches)).toBe(divTwo); expect(matches).toHaveBeenCalledWith(componentOne); @@ -540,24 +450,14 @@ describe('Element', () => { }); it('returns null when no match is found', () => { - const element = new Element( - defaultTree, - [componentOne], - [componentOne], - defaultRoot, - ); + const element = new Element(defaultTree, [componentOne], defaultRoot); expect(element.findWhere(() => false)).toBeNull(); }); }); describe('#findAllWhere()', () => { it('finds all matching nodes', () => { - const element = new Element( - defaultTree, - [divOne], - [divOne, componentOne, divTwo], - defaultRoot, - ); + const element = new Element(defaultTree, [divOne], defaultRoot); expect( element.findAllWhere(element => element === componentTwo), @@ -582,7 +482,6 @@ describe('Element', () => { const element = new Element( {...defaultTree, type: TriggerableComponent, props: {}}, [], - [], defaultRoot, ); @@ -596,7 +495,6 @@ describe('Element', () => { const element = new Element( {...defaultTree, type: TriggerableComponent, props: {onClick}}, [], - [], defaultRoot, ); @@ -614,7 +512,6 @@ describe('Element', () => { props: {onClick: () => ''}, }, [], - [], defaultRoot, ); @@ -631,7 +528,6 @@ describe('Element', () => { props: {onClick: () => returnValue}, }, [], - [], defaultRoot, ); @@ -647,7 +543,6 @@ describe('Element', () => { props: {onClick: jest.fn()}, }, [], - [], defaultRoot, ); @@ -676,7 +571,6 @@ describe('Element', () => { props: {actions: []}, }, [], - [], defaultRoot, ); @@ -693,7 +587,6 @@ describe('Element', () => { props: {actions: []}, }, [], - [], defaultRoot, ); @@ -713,7 +606,6 @@ describe('Element', () => { props: {actions: [{onAction}]}, }, [], - [], defaultRoot, ); @@ -731,7 +623,6 @@ describe('Element', () => { props: {actions: [{onAction: () => returnValue}]}, }, [], - [], defaultRoot, ); diff --git a/packages/react-testing/src/tests/root.test.tsx b/packages/react-testing/src/tests/root.test.tsx index c0d2baaad8..e4e0b17759 100644 --- a/packages/react-testing/src/tests/root.test.tsx +++ b/packages/react-testing/src/tests/root.test.tsx @@ -23,7 +23,6 @@ describe('Root', () => { instance: childInstance, }, [], - [], root, ); @@ -40,7 +39,6 @@ describe('Root', () => { instance, }, [childElement], - [childElement], root, );