Updates Tree tests

Author: bkrem

src/Tree/index.js

@@ -14,21 +14,23 @@ export default class Tree extends React.Component {
     super(props);
     this.state = {
       initialRender: true,
-      data: this.assignInternalProperties(clone(this.props.data)),
+      data: this.assignInternalProperties(clone(props.data)),
       zoom: undefined,
     };
     this.findNodesById = this.findNodesById.bind(this);
     this.collapseNode = this.collapseNode.bind(this);
     this.handleNodeToggle = this.handleNodeToggle.bind(this);
   }
 
+
   componentDidMount() {
     this.bindZoomListener();
 
     // TODO find better way of setting initialDepth, re-render here is suboptimal
     this.setState({ initialRender: false }); // eslint-disable-line
   }
 
+
   componentWillReceiveProps(nextProps) {
     // Clone new data & assign internal properties
     if (this.props.data !== nextProps.data) {

src/Tree/tests/index.test.js

@@ -34,17 +34,48 @@ describe('<Tree />', () => {
     },
   ];
 
-  // Clear method spies on prototype before each test
+  const mockData2 = [
+    {
+      name: 'Top Level',
+      parent: 'null',
+      attributes: {
+        keyA: 'val A',
+        keyB: 'val B',
+        keyC: 'val C',
+      },
+      children: [
+        {
+          name: 'Level 2: A',
+          parent: 'Top Level',
+          attributes: {
+            keyA: 'val A',
+            keyB: 'val B',
+            keyC: 'val C',
+          },
+        },
+      ],
+    },
+  ];
+
+  jest.spyOn(Tree.prototype, 'generateTree');
+  jest.spyOn(Tree.prototype, 'assignInternalProperties');
+  jest.spyOn(Tree.prototype, 'handleNodeToggle');
+  jest.spyOn(Tree.prototype, 'collapseNode');
+  jest.spyOn(Tree.prototype, 'expandNode');
+  jest.spyOn(Tree.prototype, 'setInitialTreeDepth');
+
+  // Clear method spies on prototype after each test
   afterEach(() => jest.clearAllMocks());
 
+
   it('builds a tree on each render', () => {
-    jest.spyOn(Tree.prototype, 'generateTree');
     const renderedComponent = shallow(
       <Tree data={mockData} />
     );
     expect(renderedComponent.instance().generateTree).toHaveBeenCalled();
   });
 
+
   it('maps every node onto a <Node />', () => {
     const nodeCount = 3; // 1 top level node + 2 child nodes in mockData
     const renderedComponent = shallow(
@@ -54,6 +85,7 @@ describe('<Tree />', () => {
     expect(renderedComponent.find(Node).length).toBe(nodeCount);
   });
 
+
   it('maps every parent-child relation onto a <Link />', () => {
     const linkCount = 2;
     const renderedComponent = shallow(
@@ -63,6 +95,28 @@ describe('<Tree />', () => {
     expect(renderedComponent.find(Link).length).toBe(linkCount);
   });
 
+
+  it('reassigns internal props if `props.data` changes', () => {
+    // `assignInternalProperties` recurses by depth: 1 level -> 1 call
+    const mockDataDepth = 2;
+    const mockData2Depth = 2;
+    const nextProps = {
+      data: mockData2,
+    };
+    const renderedComponent = mount(
+      <Tree data={mockData} />
+    );
+
+    expect(renderedComponent.instance().assignInternalProperties)
+    .toHaveBeenCalledTimes(mockDataDepth);
+
+    renderedComponent.setProps(nextProps);
+
+    expect(renderedComponent.instance().assignInternalProperties)
+    .toHaveBeenCalledTimes(mockDataDepth + mockData2Depth);
+  });
+
+
   it('applies the `translate` prop when specified', () => {
     const fixture = { x: 123, y: 321 };
     const expected = `translate(${fixture.x},${fixture.y})`;
@@ -75,6 +129,7 @@ describe('<Tree />', () => {
     expect(renderedComponent.find(TransitionGroup).prop('transform')).toBe(expected);
   });
 
+
   it('passes `props.orientation` to its <Node /> and <Link /> children', () => {
     const fixture = 'vertical';
     const renderedComponent = shallow(
@@ -92,6 +147,7 @@ describe('<Tree />', () => {
     ).toBe(true);
   });
 
+
   it('passes `handleNodeToggle()` to its <Node /> children as onClick prop', () => {
     const renderedComponent = shallow(
       <Tree data={mockData} />
@@ -102,9 +158,8 @@ describe('<Tree />', () => {
     ).toBe(true);
   });
 
+
   it('collapses a node\'s children when it is clicked in an expanded state', () => {
-    jest.spyOn(Tree.prototype, 'handleNodeToggle');
-    jest.spyOn(Tree.prototype, 'collapseNode');
     const renderedComponent = mount(
       <Tree data={mockData} />
     );
@@ -114,10 +169,8 @@ describe('<Tree />', () => {
     expect(Tree.prototype.collapseNode).toHaveBeenCalled();
   });
 
+
   it('expands a node\'s children when it is clicked in a collapsed state', () => {
-    jest.spyOn(Tree.prototype, 'handleNodeToggle');
-    jest.spyOn(Tree.prototype, 'collapseNode');
-    jest.spyOn(Tree.prototype, 'expandNode');
     const renderedComponent = mount(
       <Tree data={mockData} />
     );
@@ -129,9 +182,8 @@ describe('<Tree />', () => {
     expect(Tree.prototype.expandNode).toHaveBeenCalled();
   });
 
+
   it('does not collapse a node if `props.collapsible` is false', () => {
-    jest.spyOn(Tree.prototype, 'handleNodeToggle');
-    jest.spyOn(Tree.prototype, 'collapseNode');
     const renderedComponent = mount(
       <Tree
         data={mockData}
@@ -144,8 +196,8 @@ describe('<Tree />', () => {
     expect(Tree.prototype.collapseNode).toHaveBeenCalledTimes(0);
   });
 
+
   it('sets tree depth to `props.initialDepth` if specified', () => {
-    jest.spyOn(Tree.prototype, 'setInitialTreeDepth');
     mount(
       <Tree
         data={mockData}
@@ -156,6 +208,7 @@ describe('<Tree />', () => {
     expect(Tree.prototype.setInitialTreeDepth).toHaveBeenCalled();
   });
 
+
   // it('allows zooming in/out according to `props.scaleExtent` if `props.zoomable`', () => {
   //   const zoomableComponent = mount(
   //     <Tree