@pie-lib/graphing 2.46.0-mui-update.0 → 3.0.0-next.0

package/src/tools/shared/line/line-path.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { types } from '@pie-lib/plot';
 import { disabled, correct, incorrect, missing, disabledSecondary } from '../styles';
-import * as vx from '@vx/shape';
+import * as vx from '@visx/shape';
 import { color } from '@pie-lib/render-ui';
 
 const dragging = () => ({
@@ -11,7 +11,7 @@ const dragging = () => ({
   stroke: color.defaults.BLACK,
 });
 
-const StyledDrawLine = styled(vx.LinePath)(({ theme, disabled: isDisabled, correctness }) => ({
+const StyledDrawLine = styled(vx.LinePath)(({ disabled: isDisabled, correctness }) => ({
   fill: 'none',
   strokeWidth: 2,
   stroke: color.black(),

package/src/tools/shared/line/with-root-edge.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { types } from '@pie-lib/plot';
 import { LinePath } from './line-path';
-import { curveMonotoneX } from '@vx/curve';
+import { curveMonotoneX } from '@visx/curve';
 import { lineBase, lineToolComponent } from './index';
 
 const toRootEdge = (m) => {

package/src/tools/shared/point/__tests__/arrow-point.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme/build';
+import { render } from '@pie-lib/test-utils';
 import React from 'react';
 import { ArrowPoint } from '../index';
 import { graphProps } from '../../../../__tests__/utils';
@@ -7,10 +7,12 @@ import { gridDraggable, utils } from '@pie-lib/plot';
 
 const { xy } = utils;
 jest.mock('../../../../utils', () => {
-  const { point } = jest.requireActual('../../../../utils');
+  const { point, getAngleDeg, arrowDimensions } = jest.requireActual('../../../../utils');
   return {
     bounds: jest.fn(),
     point,
+    getAngleDeg,
+    arrowDimensions,
   };
 });
 
@@ -24,9 +26,8 @@ jest.mock('@pie-lib/plot', () => {
 });
 
 describe('ArrowPoint', () => {
-  let w;
   let onChange = jest.fn();
-  const wrapper = (extras) => {
+  const renderComponent = (extras) => {
     const defaults = {
       classes: {},
       className: 'className',
@@ -34,17 +35,20 @@ describe('ArrowPoint', () => {
       graphProps: graphProps(),
       from: xy(0, 0),
       to: xy(1, 1),
+      x: 0,
+      y: 0,
     };
     const props = { ...defaults, ...extras };
-    return shallow(<ArrowPoint {...props} />);
+    return render(<ArrowPoint {...props} />);
   };
 
-  describe('snapshot', () => {
-    it('renders', () => {
-      w = wrapper();
-      expect(w).toMatchSnapshot();
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
     });
   });
+
   describe('gridDraggable options', () => {
     let opts;
     let domain;
@@ -60,8 +64,8 @@ describe('ArrowPoint', () => {
         max: 1,
         step: 1,
       };
-      const w = wrapper();
-      opts = gridDraggable.mock.calls[0][0];
+      renderComponent();
+      opts = gridDraggable.mock.calls[gridDraggable.mock.calls.length - 1][0];
     });
 
     describe('bounds', () => {

package/src/tools/shared/point/__tests__/base-point.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme/build';
+import { render } from '@pie-lib/test-utils';
 import React from 'react';
 import { BasePoint } from '../index';
 import { gridDraggable } from '@pie-lib/plot';
@@ -6,10 +6,11 @@ import { graphProps } from '../../../../__tests__/utils';
 import { bounds } from '../../../../utils';
 
 jest.mock('../../../../utils', () => {
-  const { point } = jest.requireActual('../../../../utils');
+  const { point, thinnerShapesNeeded } = jest.requireActual('../../../../utils');
   return {
     bounds: jest.fn(),
     point,
+    thinnerShapesNeeded,
   };
 });
 
@@ -23,25 +24,27 @@ jest.mock('@pie-lib/plot', () => {
 });
 
 describe('BasePoint', () => {
-  let w;
   let onChange = jest.fn();
-  const wrapper = (extras) => {
+  const renderComponent = (extras) => {
     const defaults = {
       classes: {},
       className: 'className',
       onChange,
       graphProps: graphProps(),
+      x: 0,
+      y: 0,
     };
     const props = { ...defaults, ...extras };
-    return shallow(<BasePoint {...props} />);
+    return render(<BasePoint {...props} />);
   };
 
-  describe('snapshot', () => {
-    it('renders', () => {
-      w = wrapper();
-      expect(w).toMatchSnapshot();
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
     });
   });
+
   describe('gridDraggable options', () => {
     let opts;
     let domain;
@@ -57,8 +60,8 @@ describe('BasePoint', () => {
         max: 1,
         step: 1,
       };
-      const w = wrapper();
-      opts = gridDraggable.mock.calls[0][0];
+      renderComponent();
+      opts = gridDraggable.mock.calls[gridDraggable.mock.calls.length - 1][0];
     });
 
     describe('bounds', () => {

package/src/tools/shared/point/arrow-point.jsx

@@ -27,7 +27,7 @@ export class RawArrow extends React.Component {
   };
 
   render() {
-    const { className, x, y, disabled, correctness, graphProps, from, to, ...rest } = this.props;
+    const { className, x, y, graphProps, from, to, ...rest } = this.props;
     const { scale } = graphProps;
 
     const angle = from && to ? getAngleDeg(from.x, from.y, to.x, to.y) : 0;

package/src/tools/shared/point/arrow.jsx

@@ -16,7 +16,7 @@ export class BaseArrow extends React.Component {
   };
 
   render() {
-    const { className, angle, x, y, disabled, correctness, graphProps, ...rest } = this.props;
+    const { className, angle, x, y, correctness, graphProps, ...rest } = this.props;
     const size = thinnerShapesNeeded(graphProps) ? 12 : 14;
     const { scale } = graphProps;
 

package/src/tools/vector/__tests__/component.test.jsx

@@ -1,12 +1,11 @@
-import { shallow } from 'enzyme';
+import { render } from '@pie-lib/test-utils';
 import React from 'react';
 import { Line } from '../component';
 import { graphProps as getGraphProps } from '../../../__tests__/utils';
 import { utils } from '@pie-lib/plot';
 
 describe('Line', () => {
-  let w;
-  const wrapper = (extras) => {
+  const renderComponent = (extras) => {
     const defaults = {
       classes: {},
       className: 'className',
@@ -15,12 +14,12 @@ describe('Line', () => {
       to: utils.xy(1, 1),
     };
     const props = { ...defaults, ...extras };
-    return shallow(<Line {...props} />);
+    return render(<Line {...props} />);
   };
-  describe('snapshot', () => {
-    it('renders', () => {
-      const w = wrapper();
-      expect(w).toMatchSnapshot();
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
     });
   });
 });

package/src/__tests__/__snapshots__/graph-with-controls.test.jsx.snap

@@ -1,237 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`GraphWithControls snapshot renders 1`] = `
-<div
-  className=""
->
-  <div>
-    <ToolMenu
-      currentToolType="circle"
-      disabled={false}
-      labelModeEnabled={false}
-      onChange={[Function]}
-      toolbarTools={
-        Array [
-          "circle",
-          "line",
-          "label",
-          "parabola",
-          "point",
-          "polygon",
-          "ray",
-          "segment",
-          "sine",
-          "vector",
-          "absolute",
-          "exponential",
-        ]
-      }
-    />
-    <WithStyles(UndoRedo) />
-  </div>
-  <div />
-  <Graph
-    axesSettings={
-      Object {
-        "includeArrows": true,
-      }
-    }
-    backgroundMarks={
-      Array [
-        Object {
-          "label": "Point",
-          "showLabel": true,
-          "type": "point",
-          "x": 2,
-          "y": 2,
-        },
-        Object {
-          "building": true,
-          "from": Object {
-            "x": 0,
-            "y": 0,
-          },
-          "label": "Line",
-          "to": Object {
-            "x": 1,
-            "y": 1,
-          },
-          "type": "line",
-        },
-        Object {
-          "edge": Object {
-            "x": 0,
-            "y": 0,
-          },
-          "root": Object {
-            "x": 2,
-            "y": 2,
-          },
-          "type": "line",
-        },
-      ]
-    }
-    coordinatesOnHover={false}
-    currentTool={
-      Object {
-        "Component": [Function],
-        "addPoint": [Function],
-        "hover": [Function],
-        "toolbar": true,
-        "type": "circle",
-      }
-    }
-    disabledLabels={false}
-    disabledTitle={false}
-    domain={
-      Object {
-        "max": 10,
-        "min": 0,
-        "step": 1,
-      }
-    }
-    labelModeEnabled={false}
-    labels={
-      Object {
-        "bottom": "d",
-        "left": "b",
-        "right": "c",
-        "top": "a",
-      }
-    }
-    marks={
-      Array [
-        Object {
-          "label": "Point",
-          "showLabel": true,
-          "type": "point",
-          "x": 2,
-          "y": 2,
-        },
-        Object {
-          "building": true,
-          "from": Object {
-            "x": 0,
-            "y": 0,
-          },
-          "label": "Line",
-          "to": Object {
-            "x": 1,
-            "y": 1,
-          },
-          "type": "line",
-        },
-        Object {
-          "edge": Object {
-            "x": 0,
-            "y": 0,
-          },
-          "root": Object {
-            "x": 2,
-            "y": 2,
-          },
-          "type": "line",
-        },
-      ]
-    }
-    onChangeMarks={[MockFunction]}
-    range={
-      Object {
-        "max": 10,
-        "min": 0,
-        "step": 1,
-      }
-    }
-    showLabels={true}
-    showTitle={true}
-    size={
-      Object {
-        "height": 500,
-        "width": 500,
-      }
-    }
-    title="Title"
-    tools={
-      Array [
-        Object {
-          "Component": [Function],
-          "addPoint": [Function],
-          "hover": [Function],
-          "toolbar": true,
-          "type": "circle",
-        },
-        Object {
-          "Component": [Function],
-          "addPoint": [Function],
-          "toolbar": true,
-          "type": "line",
-        },
-        Object {
-          "Component": [Function],
-          "addPoint": [Function],
-          "complete": [Function],
-          "toolbar": true,
-          "type": "parabola",
-        },
-        Object {
-          "Component": [Function],
-          "addPoint": [Function],
-          "label": "Point",
-          "toolbar": true,
-          "type": "point",
-        },
-        Object {
-          "Component": [Function],
-          "addPoint": [Function],
-          "complete": [Function],
-          "toolbar": true,
-          "type": "polygon",
-        },
-        Object {
-          "Component": [Function],
-          "addPoint": [Function],
-          "toolbar": true,
-          "type": "ray",
-        },
-        Object {
-          "Component": [Function],
-          "addPoint": [Function],
-          "toolbar": true,
-          "type": "segment",
-        },
-        Object {
-          "Component": [Function],
-          "addPoint": [Function],
-          "complete": [Function],
-          "toolbar": true,
-          "type": "sine",
-        },
-        Object {
-          "Component": [Function],
-          "addPoint": [Function],
-          "toolbar": true,
-          "type": "vector",
-        },
-        Object {
-          "Component": [Function],
-          "addPoint": [Function],
-          "complete": [Function],
-          "toolbar": true,
-          "type": "absolute",
-        },
-        Object {
-          "Component": [Function],
-          "addPoint": [Function],
-          "complete": [Function],
-          "toolbar": true,
-          "type": "exponential",
-        },
-        Object {
-          "toolbar": true,
-          "type": "label",
-        },
-      ]
-    }
-  />
-</div>
-`;

package/src/__tests__/__snapshots__/graph.test.jsx.snap

@@ -1,211 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Graph snapshot renders 1`] = `
-<WithStyles(Root)
-  disabledLabels={false}
-  disabledTitle={false}
-  graphProps={
-    Object {
-      "domain": Object {
-        "max": 1,
-        "min": 0,
-        "step": 1,
-      },
-      "getRootNode": [Function],
-      "range": Object {
-        "max": 1,
-        "min": 0,
-        "step": 1,
-      },
-      "scale": Object {
-        "x": [Function],
-        "y": [Function],
-      },
-      "size": Object {
-        "height": 400,
-        "width": 400,
-      },
-      "snap": Object {
-        "x": [Function],
-        "y": [Function],
-      },
-    }
-  }
-  labelsPlaceholders={Object {}}
-  mathMlOptions={Object {}}
-  rootRef={[Function]}
->
-  <g>
-    <WithStyles(Grid)
-      graphProps={
-        Object {
-          "domain": Object {
-            "max": 1,
-            "min": 0,
-            "step": 1,
-          },
-          "getRootNode": [Function],
-          "range": Object {
-            "max": 1,
-            "min": 0,
-            "step": 1,
-          },
-          "scale": Object {
-            "x": [Function],
-            "y": [Function],
-          },
-          "size": Object {
-            "height": 400,
-            "width": 400,
-          },
-          "snap": Object {
-            "x": [Function],
-            "y": [Function],
-          },
-        }
-      }
-    />
-    <Axes
-      graphProps={
-        Object {
-          "domain": Object {
-            "max": 1,
-            "min": 0,
-            "step": 1,
-          },
-          "getRootNode": [Function],
-          "range": Object {
-            "max": 1,
-            "min": 0,
-            "step": 1,
-          },
-          "scale": Object {
-            "x": [Function],
-            "y": [Function],
-          },
-          "size": Object {
-            "height": 400,
-            "width": 400,
-          },
-          "snap": Object {
-            "x": [Function],
-            "y": [Function],
-          },
-        }
-      }
-      includeArrows={
-        Object {
-          "down": true,
-          "left": true,
-          "right": true,
-          "up": true,
-        }
-      }
-    />
-    <Bg
-      graphProps={
-        Object {
-          "domain": Object {
-            "max": 1,
-            "min": 0,
-            "step": 1,
-          },
-          "getRootNode": [Function],
-          "range": Object {
-            "max": 1,
-            "min": 0,
-            "step": 1,
-          },
-          "scale": Object {
-            "x": [Function],
-            "y": [Function],
-          },
-          "size": Object {
-            "height": 400,
-            "width": 400,
-          },
-          "snap": Object {
-            "x": [Function],
-            "y": [Function],
-          },
-        }
-      }
-      height={400}
-      onClick={[Function]}
-      width={400}
-    />
-    <mask
-      id="graph-1618"
-    >
-      <rect
-        fill="white"
-        height={446}
-        width={446}
-        x={-23}
-        y={-23}
-      />
-       
-    </mask>
-    <g
-      id="marks"
-      mask="url('#graph-1618')"
-    >
-      <Point
-        graphProps={
-          Object {
-            "domain": Object {
-              "max": 1,
-              "min": 0,
-              "step": 1,
-            },
-            "getRootNode": [Function],
-            "range": Object {
-              "max": 1,
-              "min": 0,
-              "step": 1,
-            },
-            "scale": Object {
-              "x": [Function],
-              "y": [Function],
-            },
-            "size": Object {
-              "height": 400,
-              "width": 400,
-            },
-            "snap": Object {
-              "x": [Function],
-              "y": [Function],
-            },
-          }
-        }
-        isToolActive={false}
-        key="point-0"
-        mark={
-          Object {
-            "label": "Point",
-            "showLabel": true,
-            "type": "point",
-            "x": 2,
-            "y": 2,
-          }
-        }
-        onChange={[Function]}
-        onClick={[Function]}
-        onComplete={[Function]}
-      />
-      <foreignObject
-        height={400}
-        style={
-          Object {
-            "fontSize": "14px",
-            "pointerEvents": "none",
-          }
-        }
-        width={400}
-        x="0"
-        y="0"
-      />
-    </g>
-  </g>
-</WithStyles(Root)>
-`;