Update Node tests for transitions

Author: bkrem

src/Node/tests/index.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import Node from '../index';
 
@@ -8,19 +8,24 @@ describe('<Node />', () => {
     id: 'abc123',
     name: 'mockNode',
     depth: 3,
-    x: 123,
-    y: 321,
+    x: 111,
+    y: 222,
+    parent: {
+      x: 999,
+      y: 888,
+    },
   };
 
   const mockProps = {
     nodeData,
     orientation: 'horizontal',
-    transitions: {
-      enabled: true,
-      duration: 500,
-    },
+    transitionDuration: 500,
+    onClick: () => {},
   };
 
+  // Clear method spies on prototype after each test
+  afterEach(() => jest.clearAllMocks());
+
   it('has the correct `id` attribute value', () => {
     const renderedComponent = shallow(
       <Node {...mockProps} />
@@ -67,9 +72,9 @@ describe('<Node />', () => {
     expect(withChildrenComponent.find('circle').prop('style')).toBe(circleStyle);
   });
 
-  it('applies correct `transform` prop, depending on parent `orientation`', () => {
-    const horizontalTransform = `translate(${nodeData.y},${nodeData.x})`;
-    const verticalTransform = `translate(${nodeData.x},${nodeData.y})`;
+  it('applies correct `transform` prop based on its `orientation`', () => {
+    const horizontalTransform = `translate(${nodeData.parent.y},${nodeData.parent.x})`;
+    const verticalTransform = `translate(${nodeData.parent.x},${nodeData.parent.y})`;
     const horizontalComponent = shallow(
       <Node {...mockProps} />
     );
@@ -79,9 +84,8 @@ describe('<Node />', () => {
         orientation="vertical"
       />
     );
-
-    expect(horizontalComponent.prop('transform')).toBe(horizontalTransform);
-    expect(verticalComponent.prop('transform')).toBe(verticalTransform);
+    expect(horizontalComponent.find('g').prop('transform')).toBe(horizontalTransform);
+    expect(verticalComponent.find('g').prop('transform')).toBe(verticalTransform);
   });
 
   it('should take an `onClick` prop', () => {
@@ -95,7 +99,7 @@ describe('<Node />', () => {
     expect(renderedComponent.prop('onClick')).toBeDefined();
   });
 
-  it('handles click events and pass the nodeId to onClick handler', () => {
+  it('handles click events and passes its nodeId to onClick handler', () => {
     const onClickSpy = jest.fn();
     const renderedComponent = shallow(
       <Node
@@ -128,7 +132,7 @@ describe('<Node />', () => {
     ).toBe(1);
   });
 
-  it('mutates a node\'s `y` property according to `depthFactor`, when specified', () => {
+  it('mutates the node\'s `y` property according to `depthFactor`, when specified', () => {
     const depthFactor = 100;
     const expectedY = nodeData.depth * depthFactor;
     const renderedComponent = shallow(
@@ -139,6 +143,56 @@ describe('<Node />', () => {
       />
     );
 
-    expect(renderedComponent.prop('transform')).toBe(`translate(${nodeData.x},${expectedY})`);
+    expect(renderedComponent.prop('transform')).toBe(`translate(${nodeData.parent.x},${expectedY})`);
   });
+
+  it('applies its own x/y coords on `transform` once mounted', () => {
+    jest.spyOn(Node.prototype, 'applyTransform');
+    const fixture = `translate(${nodeData.y},${nodeData.x})`;
+    const renderedComponent = mount(
+      <Node
+        {...mockProps}
+      />
+    );
+
+    expect(renderedComponent.instance().applyTransform).toHaveBeenCalledWith(fixture);
+  });
+
+  it('updates its transform attribute if either the `x` or `y` prop changes', () => {
+    jest.spyOn(Node.prototype, 'applyTransform');
+    const updatedProps = {
+      ...mockProps,
+      nodeData: {
+        ...mockProps.nodeData,
+        x: 1,
+        y: 2,
+      },
+    };
+    const initialTransform = `translate(${mockProps.nodeData.y},${mockProps.nodeData.x})`;
+    const updatedTransform = `translate(${updatedProps.nodeData.y},${updatedProps.nodeData.x})`;
+    const renderedComponent = mount(
+      <Node
+        {...mockProps}
+      />
+    );
+
+    expect(renderedComponent.instance().applyTransform).toHaveBeenCalledWith(initialTransform);
+    renderedComponent.setProps(updatedProps);
+    expect(renderedComponent.instance().applyTransform).toHaveBeenCalledWith(updatedTransform);
+  });
+
+  // TODO Find a way to meaningfully test `componentWillLeave`
+  // it('regresses to its parent coords when unmounting/leaving', () => {
+  //   jest.spyOn(Node.prototype, 'applyTransform');
+  //   const fixture = `translate(${nodeData.parent.y},${nodeData.parent.x})`;
+  //   const renderedComponent = mount(
+  //     <Node
+  //       {...mockProps}
+  //     />
+  //   );
+  //
+  //   renderedComponent.unmount();
+  //   expect(Node.prototype.applyTransform).toHaveBeenCalledWith(fixture);
+  //   expect(Node.prototype.applyTransform).toHaveBeenCalledTimes(1);
+  // });
 });