fix test and final adjustements and code cleanup

andrico1234 · Nov 10, 2019 · e2af65a · e2af65a
1 parent a3d3625
commit e2af65a
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 384 deletions.
diff --git a/src/components/SkillEdge.tsx b/src/components/SkillEdge.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
-import { NodeState } from '../models';
+import { NodeState, Direction } from '../models';
 import Line from './ui/Line';
 import UpperAngledLine from './ui/UpperAngledLine';
 import MiddleAngledLine from './ui/MiddleAngledLine';
 import LowerAngledLine from './ui/LowerAngledLine';
 
-interface Props {
+export interface Props {
   parentHasMultipleChildren: boolean;
   state: NodeState;
-  direction: 'left' | 'right';
+  direction: Direction;
   parentCenterPosition: number;
   childCenterPosition: number;
 }
@@ -25,7 +25,7 @@ function SkillEdge(props: Props) {
   if (!parentHasMultipleChildren) return <Line state={state} />;
 
   return (
-    <>
+    <div style={{ height: '56px' }}>
       <UpperAngledLine state={state} direction={direction} />
       <div style={{ position: 'relative' }}>
         <MiddleAngledLine
@@ -36,7 +36,7 @@ function SkillEdge(props: Props) {
         />
         <LowerAngledLine direction={direction} state={state} />
       </div>
-    </>
+    </div>
   );
 }
 

diff --git a/src/components/SkillNode.tsx b/src/components/SkillNode.tsx
@@ -40,25 +40,18 @@ function SkillNode({
   const { direction = 'top', content } = tooltip;
   const { isMobile } = React.useContext(MobileContext);
   const [parentPosition, setParentPosition] = React.useState({
-    bottom: 0,
     center: 0,
   });
 
   const skillNodeRef: React.RefObject<HTMLDivElement> = React.useRef(null);
   const childWidth: React.MutableRefObject<number> = React.useRef(0);
 
   function calculatePosition() {
-    const {
-      bottom,
-      left,
-      right,
-    } = skillNodeRef.current!.getBoundingClientRect();
+    const { left, right } = skillNodeRef.current!.getBoundingClientRect();
 
     const scrollX = window.scrollX;
-    const scrollY = window.scrollY;
 
     setParentPosition({
-      bottom: bottom + scrollY,
       center: (right - left) / 2 + left + scrollX,
     });
   }

diff --git a/src/components/SkillTree.tsx b/src/components/SkillTree.tsx
@@ -21,7 +21,6 @@ interface Props {
 }
 
 const defaultParentPosition = {
-  bottom: 0,
   center: 0,
 };
 

diff --git a/src/components/__tests__/SkillEdge.test.tsx b/src/components/__tests__/SkillEdge.test.tsx
@@ -1,33 +1,29 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import SkillEdge from '../SkillEdge';
-import { NodeState } from 'models';
+import SkillEdge, { Props } from '../SkillEdge';
 import { ThemeProvider } from 'styled-components';
 import defaultTheme from '../../theme';
 
-const defaultPosition = {
-  topX: 0,
-  topY: 0,
-  bottomX: 0,
+const defaultProps: Props = {
+  parentHasMultipleChildren: false,
+  state: 'unlocked',
+  direction: 'right',
+  parentCenterPosition: 0,
+  childCenterPosition: 0,
 };
 
-function renderComponent(startingState: NodeState, position = defaultPosition) {
-  let state = startingState;
-  const { topX, topY, bottomX } = position;
-
+function renderComponent(props = defaultProps) {
   return render(
     <ThemeProvider theme={defaultTheme}>
-      <SkillEdge nodeState={state} topX={topX} topY={topY} bottomX={bottomX} />
+      <SkillEdge {...props} />
     </ThemeProvider>
   );
 }
 
 describe('SkillEdge', () => {
   describe('straight lines', () => {
     it('should be inactive if the next node is unlocked', async () => {
-      const startingState = 'unlocked';
-
-      const { getByTestId } = renderComponent(startingState);
+      const { getByTestId } = renderComponent();
 
       const skillEdge = getByTestId('straight-line');
 
@@ -39,9 +35,7 @@ describe('SkillEdge', () => {
     });
 
     it('should be inactive if the next node is locked', () => {
-      const startingState = 'unlocked';
-
-      const { getByTestId } = renderComponent(startingState);
+      const { getByTestId } = renderComponent();
 
       const skillEdge = getByTestId('straight-line');
 
@@ -53,9 +47,9 @@ describe('SkillEdge', () => {
     });
 
     it('should be active if the next node is selected', () => {
-      const startingState = 'selected';
+      const props: Props = { ...defaultProps, state: 'selected' };
 
-      const { getByTestId } = renderComponent(startingState);
+      const { getByTestId } = renderComponent(props);
 
       const skillEdge = getByTestId('straight-line');
 
@@ -66,28 +60,27 @@ describe('SkillEdge', () => {
 
   describe('angled lines', () => {
     const leftAngledLinePosition = {
-      topX: 100,
-      topY: 100,
-      bottomX: 50,
+      parentCenterPosition: 100,
+      childCenterPosition: 100,
     };
 
     const rightAngledLinePosition = {
-      topX: 100,
-      topY: 100,
-      bottomX: 150,
+      parentCenterPosition: 100,
+      childCenterPosition: 150,
     };
 
     it('should be inactive if the next node is unlocked', async () => {
-      const startingState = 'unlocked';
+      const props = {
+        ...defaultProps,
+        ...leftAngledLinePosition,
+        parentHasMultipleChildren: true,
+      };
 
-      const { getByTestId } = renderComponent(
-        startingState,
-        leftAngledLinePosition
-      );
+      const { getByTestId } = renderComponent(props);
 
-      const skillEdgeOne = getByTestId('angled-line-one');
-      const skillEdgeTwo = getByTestId('angled-line-two');
-      const skillEdgeThree = getByTestId('angled-line-three');
+      const skillEdgeOne = getByTestId('upper-angled-line');
+      const skillEdgeTwo = getByTestId('middle-angled-line');
+      const skillEdgeThree = getByTestId('lower-angled-line');
 
       expect(skillEdgeOne).toHaveStyleRule('opacity', '1');
       expect(skillEdgeOne).not.toHaveStyleRule(
@@ -109,16 +102,17 @@ describe('SkillEdge', () => {
     });
 
     it('should be inactive if the next node is locked', () => {
-      const startingState = 'unlocked';
+      const props = {
+        ...defaultProps,
+        ...leftAngledLinePosition,
+        parentHasMultipleChildren: true,
+      };
 
-      const { getByTestId } = renderComponent(
-        startingState,
-        leftAngledLinePosition
-      );
+      const { getByTestId } = renderComponent(props);
 
-      const skillEdgeOne = getByTestId('angled-line-one');
-      const skillEdgeTwo = getByTestId('angled-line-two');
-      const skillEdgeThree = getByTestId('angled-line-three');
+      const skillEdgeOne = getByTestId('upper-angled-line');
+      const skillEdgeTwo = getByTestId('middle-angled-line');
+      const skillEdgeThree = getByTestId('lower-angled-line');
 
       expect(skillEdgeOne).not.toHaveStyleRule(
         'background-position',
@@ -135,28 +129,23 @@ describe('SkillEdge', () => {
     });
 
     it('should be active if the next node is selected', () => {
-      const startingState = 'selected';
+      const props = {
+        ...defaultProps,
+        ...rightAngledLinePosition,
+        parentHasMultipleChildren: true,
+      };
 
-      const { getByTestId } = renderComponent(
-        startingState,
-        rightAngledLinePosition
-      );
+      const { getByTestId } = renderComponent(props);
 
-      const skillEdgeOne = getByTestId('angled-line-one');
-      const skillEdgeTwo = getByTestId('angled-line-two');
-      const skillEdgeThree = getByTestId('angled-line-three');
+      const skillEdgeOne = getByTestId('upper-angled-line');
+      const skillEdgeTwo = getByTestId('middle-angled-line');
+      const skillEdgeThree = getByTestId('lower-angled-line');
 
-      expect(skillEdgeOne).toHaveStyleRule(
-        'background-position',
-        'left bottom'
-      );
-      expect(skillEdgeTwo).toHaveStyleRule(
-        'background-position',
-        'left bottom'
-      );
+      expect(skillEdgeOne).toHaveStyleRule('background-position', 'right top');
+      expect(skillEdgeTwo).toHaveStyleRule('background-position', 'right top');
       expect(skillEdgeThree).toHaveStyleRule(
         'background-position',
-        'left bottom'
+        'right top'
       );
     });
   });