@pie-lib/tools 0.29.2-next.0 → 0.29.2-next.164

package/src/protractor/__tests__/graphic.test.jsx

@@ -1,13 +1,64 @@
-import toJson from 'enzyme-to-json';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { Graphic } from '../graphic';
 import React from 'react';
 
 describe('graphic', () => {
-  describe('snapshot', () => {
-    it('renders', () => {
-      const wrapper = shallow(<Graphic classes={{ path: 'path', line: 'line', circle: 'circle' }} />);
-      expect(toJson(wrapper)).toMatchSnapshot();
+  const theme = createTheme();
+
+  const renderComponent = (props = {}) => {
+    return render(
+      <ThemeProvider theme={theme}>
+        <Graphic {...props} />
+      </ThemeProvider>
+    );
+  };
+
+  describe('rendering', () => {
+    it('renders svg with correct viewBox', () => {
+      const { container } = renderComponent();
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+      expect(svg).toHaveAttribute('viewBox', '0 0 102 61');
+    });
+
+    it('renders path element', () => {
+      const { container } = renderComponent();
+      const path = container.querySelector('path');
+      expect(path).toBeInTheDocument();
+      expect(path).toHaveAttribute('d', 'M 1,50 A 1,1 0 0 1 100,50 L 100,60 L 1,60 Z');
+    });
+
+    it('renders circle element', () => {
+      const { container } = renderComponent();
+      const circle = container.querySelector('circle');
+      expect(circle).toBeInTheDocument();
+      expect(circle).toHaveAttribute('r', '4');
+      expect(circle).toHaveAttribute('cx', '50.5');
+      expect(circle).toHaveAttribute('cy', '50');
+    });
+
+    it('renders multiple line elements', () => {
+      const { container } = renderComponent();
+      const lines = container.querySelectorAll('line');
+      // Should render 181 angle lines + 2 crosshair lines = 183+ lines
+      expect(lines.length).toBeGreaterThan(180);
+    });
+
+    it('renders text elements for angles', () => {
+      const { container } = renderComponent();
+      const texts = container.querySelectorAll('text');
+      // Should render text for angles 0, 10, 20, ..., 180 (19 texts)
+      expect(texts.length).toBeGreaterThan(15);
+    });
+
+    it('renders correct angle labels', () => {
+      const { container } = renderComponent();
+      const texts = container.querySelectorAll('text');
+      const textContents = Array.from(texts).map(t => t.textContent);
+      expect(textContents).toContain('0');
+      expect(textContents).toContain('90');
+      expect(textContents).toContain('180');
     });
   });
 });

package/src/protractor/__tests__/index.test.jsx

@@ -1,13 +1,65 @@
-import toJson from 'enzyme-to-json';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { Protractor } from '../index';
 import React from 'react';
 
+// Mock the Rotatable component to avoid complex DOM interactions
+jest.mock('../../rotatable', () => {
+  return function MockRotatable({ children }) {
+    return <div data-testid="rotatable">{children}</div>;
+  };
+});
+
+// Mock the Graphic component
+jest.mock('../graphic', () => {
+  return function MockGraphic() {
+    return <div data-testid="protractor-graphic" />;
+  };
+});
+
 describe('protractor', () => {
-  describe('snapshot', () => {
-    it('renders', () => {
-      const wrapper = shallow(<Protractor classes={{}} />);
-      expect(toJson(wrapper)).toMatchSnapshot();
+  const theme = createTheme();
+
+  const renderComponent = (props = {}) => {
+    const defaultProps = {
+      width: 450,
+      ...props,
+    };
+
+    return render(
+      <ThemeProvider theme={theme}>
+        <Protractor {...defaultProps} />
+      </ThemeProvider>
+    );
+  };
+
+  describe('rendering', () => {
+    it('renders protractor component', () => {
+      renderComponent();
+      expect(screen.getByTestId('rotatable')).toBeInTheDocument();
+      expect(screen.getByTestId('protractor-graphic')).toBeInTheDocument();
+    });
+
+    it('renders with default width', () => {
+      const { container } = renderComponent();
+      const protractorDiv = container.querySelector('div[style*="width"]');
+      expect(protractorDiv).toHaveStyle({ width: '450px' });
+    });
+
+    it('renders with custom width', () => {
+      const { container } = renderComponent({ width: 600 });
+      const protractorDiv = container.querySelector('div[style*="width"]');
+      expect(protractorDiv).toHaveStyle({ width: '600px' });
+    });
+
+    it('renders with custom startPosition', () => {
+      renderComponent({ startPosition: { left: 100, top: 200 } });
+      expect(screen.getByTestId('protractor-graphic')).toBeInTheDocument();
+    });
+
+    it('renders with className', () => {
+      const { container } = renderComponent({ className: 'custom-class' });
+      expect(screen.getByTestId('rotatable')).toBeInTheDocument();
     });
   });
 });

package/src/protractor/graphic.jsx

@@ -1,58 +1,67 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import range from 'lodash/range';
-import PropTypes from 'prop-types';
 import { strokeColor, noSelect } from '../style-utils';
 
-const Line = withStyles((theme) => ({
-  line: {
-    strokeWidth: '0.2',
-    stroke: strokeColor(theme),
-  },
-}))(({ angle, classes, major, minor }) => (
-  <line
+const StyledLine = styled('line')(({ theme }) => ({
+  strokeWidth: '0.2',
+  stroke: strokeColor(theme),
+}));
+
+const Line = ({ angle, major, minor }) => (
+  <StyledLine
     transform={`rotate(${angle}, 50.5,50)`}
-    className={classes.line}
     style={{}}
     x1="1"
     x2={major ? 10 : minor ? 6 : 3}
     y1="50"
     y2="50"
   />
-));
+);
+
+const StyledSpikeLine = styled('line')(({ theme }) => ({
+  strokeWidth: '0.2',
+  stroke: strokeColor(theme),
+}));
 
-const Spike = withStyles((theme) => ({
-  line: {
-    strokeWidth: '0.2',
-    stroke: strokeColor(theme),
-  },
-}))(({ angle, classes }) => (
-  <line transform={`rotate(${angle}, 50.5,50)`} className={classes.line} style={{}} x1="15" x2={'46'} y1="50" y2="50" />
-));
+const Spike = ({ angle }) => (
+  <StyledSpikeLine transform={`rotate(${angle}, 50.5,50)`} style={{}} x1="15" x2={'46'} y1="50" y2="50" />
+);
 
-const Text = withStyles((theme) => ({
-  text: {
-    fontSize: '2.5px',
-    textAnchor: 'middle',
-    fill: strokeColor(theme),
-    ...noSelect(),
-  },
-}))(({ angle, classes }) => (
-  <text transform={`rotate(${angle - 90}, 50.5, 50)`} className={classes.text} x="50" y="12.5">
+const StyledText = styled('text')(({ theme }) => ({
+  fontSize: '2.5px',
+  textAnchor: 'middle',
+  fill: strokeColor(theme),
+  ...noSelect(),
+}));
+
+const Text = ({ angle }) => (
+  <StyledText transform={`rotate(${angle - 90}, 50.5, 50)`} x="50" y="12.5">
     {angle}
-  </text>
-));
+  </StyledText>
+);
 
-export class Graphic extends React.PureComponent {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-  };
+const StyledPath = styled('path')(({ theme }) => ({
+  strokeWidth: '0.2',
+  stroke: strokeColor(theme),
+}));
 
+const StyledGraphicLine = styled('line')(({ theme }) => ({
+  strokeWidth: '0.2',
+  stroke: strokeColor(theme),
+}));
+
+const StyledCircle = styled('circle')(({ theme }) => ({
+  strokeWidth: '0.2',
+  stroke: strokeColor(theme),
+  fill: 'none',
+}));
+
+export class Graphic extends React.PureComponent {
   render() {
-    const { classes } = this.props;
     return (
       <svg viewBox="0 0 102 61">
-        <path className={classes.path} d="M 1,50 A 1,1 0 0 1 100,50 L 100,60 L 1,60 Z" fill="none" />
+        <StyledPath d="M 1,50 A 1,1 0 0 1 100,50 L 100,60 L 1,60 Z" fill="none" />
         {range(0, 181).map((r) => (
           <Line minor={r % 5 === 0} major={r % 10 === 0} angle={r} key={r} />
         ))}
@@ -62,26 +71,12 @@ export class Graphic extends React.PureComponent {
             <Text angle={r} />
           </React.Fragment>
         ))}
-        <circle r="4" cx="50.5" cy="50" className={classes.circle} />
-        <line className={classes.line} x1="48.5" x2="52.5" y1="50" y2="50" />
-        <line className={classes.line} transform={'rotate(90 50.5 50)'} x1="48.5" x2="52.5" y1="50" y2="50" />
+        <StyledCircle r="4" cx="50.5" cy="50" />
+        <StyledGraphicLine x1="48.5" x2="52.5" y1="50" y2="50" />
+        <StyledGraphicLine transform={'rotate(90 50.5 50)'} x1="48.5" x2="52.5" y1="50" y2="50" />
       </svg>
     );
   }
 }
 
-export default withStyles((theme) => ({
-  path: {
-    strokeWidth: '0.2',
-    stroke: strokeColor(theme),
-  },
-  line: {
-    strokeWidth: '0.2',
-    stroke: strokeColor(theme),
-  },
-  circle: {
-    strokeWidth: '0.2',
-    stroke: strokeColor(theme),
-    fill: 'none',
-  },
-}))(Graphic);
+export default Graphic;

package/src/protractor/index.jsx

@@ -1,14 +1,28 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import Graphic from './graphic';
 import Anchor from '../anchor';
 import Rotatable from '../rotatable';
-import classNames from 'classnames';
+
+const StyledProtractor = styled('div')(() => ({
+  position: 'relative',
+}));
+
+const StyledLeftAnchor = styled(Anchor)(() => ({
+  position: 'absolute',
+  left: 0,
+  bottom: 0,
+}));
+
+const StyledRightAnchor = styled(Anchor)(() => ({
+  position: 'absolute',
+  right: 0,
+  bottom: 0,
+}));
 
 export class Protractor extends React.Component {
   static propTypes = {
-    classes: PropTypes.object.isRequired,
     width: PropTypes.number.isRequired,
     className: PropTypes.string,
     startPosition: PropTypes.shape({
@@ -23,10 +37,10 @@ export class Protractor extends React.Component {
   };
 
   render() {
-    const { classes, width, className, startPosition } = this.props;
+    const { width, startPosition } = this.props;
+
     return (
       <Rotatable
-        className={className}
         startPosition={startPosition}
         handle={[
           {
@@ -39,27 +53,15 @@ export class Protractor extends React.Component {
           },
         ]}
       >
-        <div className={classes.protractor} style={{ width: `${width}px` }}>
+        <StyledProtractor style={{ width: `${width}px` }}>
           <Graphic />
 
-          <Anchor className={classNames('leftAnchor', classes.leftAnchor)} />
-          <Anchor className={classNames('rightAnchor', classes.rightAnchor)} />
-        </div>
+          <StyledLeftAnchor className="leftAnchor" />
+          <StyledRightAnchor className="rightAnchor" />
+        </StyledProtractor>
       </Rotatable>
     );
   }
 }
 
-export default withStyles(() => ({
-  protractor: { position: 'relative' },
-  leftAnchor: {
-    position: 'absolute',
-    left: 0,
-    bottom: 0,
-  },
-  rightAnchor: {
-    position: 'absolute',
-    right: 0,
-    bottom: 0,
-  },
-}))(Protractor);
+export default Protractor;

package/src/rotatable.jsx

@@ -1,44 +1,47 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { getAnchor as calcAnchor, distanceBetween, arctangent } from './anchor-utils';
 import { Portal } from 'react-portal';
 import Point from '@mapbox/point-geometry';
 import { parse as parseOrigin } from './transform-origin';
-import classNames from 'classnames';
-
-const Anchor = withStyles({
-  anchor: {
-    position: 'absolute',
-    zIndex: 100,
-    width: '200px',
-    height: '80px',
-  },
-})(({ classes, left, top, color, fill }) => {
+
+const AnchorSvg = styled('svg')({
+  position: 'absolute',
+  zIndex: 100,
+  width: '200px',
+  height: '80px',
+});
+
+const Anchor = ({ left, top, color, fill }) => {
   color = color || 'green';
   fill = fill || 'white';
   return (
     <Portal>
-      <svg
-        className={classes.anchor}
+      <AnchorSvg
         style={{
           left: left - 10,
           top: top - 10,
         }}
       >
         <circle cx={10} cy={10} r={8} strokeWidth={1} stroke={color} fill={fill} />
-      </svg>
+      </AnchorSvg>
     </Portal>
   );
-});
+};
 
 /**
  * Tip o' the hat to:
  * https://bl.ocks.org/joyrexus/7207044
  */
+const RotatableContainer = styled('div')({
+  position: 'relative',
+  display: 'inline-block',
+  cursor: 'move',
+});
+
 export class Rotatable extends React.Component {
   static propTypes = {
-    classes: PropTypes.object.isRequired,
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
     showAnchor: PropTypes.bool,
     handle: PropTypes.arrayOf(
@@ -47,7 +50,6 @@ export class Rotatable extends React.Component {
         origin: PropTypes.string,
       }),
     ),
-    className: PropTypes.string,
     startPosition: PropTypes.shape({
       left: PropTypes.number,
       top: PropTypes.number,
@@ -259,7 +261,7 @@ export class Rotatable extends React.Component {
   };
 
   render() {
-    const { children, classes, showAnchor, className } = this.props;
+    const { children, showAnchor } = this.props;
     const { rotation, anchor, origin, translate, position } = this.state;
 
     const t = translate ? `translate(${translate.x}px, ${translate.y}px)` : '';
@@ -272,8 +274,7 @@ export class Rotatable extends React.Component {
     };
 
     return (
-      <div
-        className={classNames(classes.rotatable, className)}
+      <RotatableContainer
         style={style}
         ref={(r) => (this.rotatable = r)}
         onMouseDown={this.mouseDown}
@@ -281,15 +282,9 @@ export class Rotatable extends React.Component {
       >
         {anchor && showAnchor && <Anchor {...anchor} />}
         {children}
-      </div>
+      </RotatableContainer>
     );
   }
 }
 
-export default withStyles({
-  rotatable: {
-    position: 'relative',
-    display: 'inline-block',
-    cursor: 'move',
-  },
-})(Rotatable);
+export default Rotatable;

package/src/ruler/__tests__/graphic.test.jsx

@@ -1,23 +1,64 @@
-import toJson from 'enzyme-to-json';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { Graphic } from '../graphic';
 import React from 'react';
 
 describe('graphic', () => {
-  describe('snapshot', () => {
-    it('renders', () => {
-      const wrapper = shallow(
-        <Graphic
-          width={300}
-          height={100}
-          units={12}
-          unit={{
-            type: 'in',
-          }}
-          classes={{ bg: 'bg' }}
-        />,
-      );
-      expect(toJson(wrapper)).toMatchSnapshot();
+  const theme = createTheme();
+
+  const renderComponent = (props = {}) => {
+    const defaultProps = {
+      width: 300,
+      height: 100,
+      units: 12,
+      unit: {
+        type: 'in',
+        ticks: 16,
+      },
+      ...props,
+    };
+
+    return render(
+      <ThemeProvider theme={theme}>
+        <Graphic {...defaultProps} />
+      </ThemeProvider>
+    );
+  };
+
+  describe('rendering', () => {
+    it('renders svg with correct viewBox', () => {
+      const { container } = renderComponent({ width: 300, height: 100 });
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+      expect(svg).toHaveAttribute('viewBox', '0 0 300 100');
+    });
+
+    it('renders background rect with correct dimensions', () => {
+      const { container } = renderComponent({ width: 300, height: 100 });
+      const rect = container.querySelector('rect');
+      expect(rect).toBeInTheDocument();
+      expect(rect).toHaveAttribute('width', '300');
+      expect(rect).toHaveAttribute('height', '100');
+    });
+
+    it('renders correct number of unit markers', () => {
+      const { container } = renderComponent({ units: 12 });
+      const svg = container.querySelector('svg');
+      // Each unit renders as a group element with a specific structure
+      const groups = svg.querySelectorAll('g');
+      expect(groups.length).toBeGreaterThan(0);
+    });
+
+    it('renders with different unit types', () => {
+      const { container } = renderComponent({ unit: { type: 'cm', ticks: 10 } });
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+    });
+
+    it('renders with custom dimensions', () => {
+      const { container } = renderComponent({ width: 480, height: 60, units: 10 });
+      const svg = container.querySelector('svg');
+      expect(svg).toHaveAttribute('viewBox', '0 0 480 60');
     });
   });
 });

package/src/ruler/__tests__/index.test.jsx

@@ -1,28 +1,86 @@
-import toJson from 'enzyme-to-json';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { Ruler } from '../index';
 import RulerGraphic from '../graphic';
 import React from 'react';
 
+// Mock the Rotatable component to avoid complex DOM interactions
+jest.mock('../../rotatable', () => {
+  return function MockRotatable({ children }) {
+    return <div data-testid="rotatable">{children}</div>;
+  };
+});
+
+// Mock the RulerGraphic component to verify props
+jest.mock('../graphic', () => {
+  return function MockRulerGraphic(props) {
+    return <div data-testid="ruler-graphic" data-unit={JSON.stringify(props.unit)} />;
+  };
+});
+
 describe('ruler', () => {
-  describe('snapshot', () => {
-    it('renders', () => {
-      const wrapper = shallow(<Ruler classes={{}} />);
-      expect(toJson(wrapper)).toMatchSnapshot();
+  const theme = createTheme();
+
+  const renderComponent = (props = {}) => {
+    const defaultProps = {
+      units: 12,
+      measure: 'imperial',
+      ...props,
+    };
+
+    return render(
+      <ThemeProvider theme={theme}>
+        <Ruler {...defaultProps} />
+      </ThemeProvider>
+    );
+  };
+
+  describe('rendering', () => {
+    it('renders ruler component', () => {
+      renderComponent();
+      expect(screen.getByTestId('rotatable')).toBeInTheDocument();
+      expect(screen.getByTestId('ruler-graphic')).toBeInTheDocument();
+    });
+
+    it('renders with default props', () => {
+      renderComponent();
+      const graphic = screen.getByTestId('ruler-graphic');
+      expect(graphic).toBeInTheDocument();
+    });
+
+    it('renders with custom startPosition', () => {
+      renderComponent({ startPosition: { left: 100, top: 200 } });
+      expect(screen.getByTestId('ruler-graphic')).toBeInTheDocument();
     });
   });
 
   describe('logic', () => {
     it('sets unit for imperial', () => {
-      const wrapper = shallow(<Ruler measure={'imperial'} classes={{}} label={'in'} />);
-      const r = wrapper.find(RulerGraphic);
-      expect(r.prop('unit')).toEqual({ ticks: 16, type: 'in' });
+      renderComponent({ measure: 'imperial', label: 'in' });
+      const graphic = screen.getByTestId('ruler-graphic');
+      const unit = JSON.parse(graphic.getAttribute('data-unit'));
+      expect(unit).toEqual({ ticks: 16, type: 'in' });
     });
 
     it('sets unit for metric', () => {
-      const wrapper = shallow(<Ruler measure={'metric'} classes={{}} label={'cm'} />);
-      const r = wrapper.find(RulerGraphic);
-      expect(r.prop('unit')).toEqual({ ticks: 10, type: 'cm' });
+      renderComponent({ measure: 'metric', label: 'cm' });
+      const graphic = screen.getByTestId('ruler-graphic');
+      const unit = JSON.parse(graphic.getAttribute('data-unit'));
+      expect(unit).toEqual({ ticks: 10, type: 'cm' });
+    });
+
+    it('sets custom tick count for imperial when divisible by 4', () => {
+      renderComponent({ measure: 'imperial', label: 'in', tickCount: 8 });
+      const graphic = screen.getByTestId('ruler-graphic');
+      const unit = JSON.parse(graphic.getAttribute('data-unit'));
+      expect(unit).toEqual({ ticks: 8, type: 'in' });
+    });
+
+    it('defaults to 16 ticks for imperial when tickCount not divisible by 4', () => {
+      renderComponent({ measure: 'imperial', label: 'in', tickCount: 7 });
+      const graphic = screen.getByTestId('ruler-graphic');
+      const unit = JSON.parse(graphic.getAttribute('data-unit'));
+      expect(unit).toEqual({ ticks: 16, type: 'in' });
     });
   });
 });