@pie-lib/graphing 4.0.4 → 4.0.5-next.0

package/src/__tests__/key-legend.test.jsx

@@ -1,260 +0,0 @@
-import React from 'react';
-import { render } from '@pie-lib/test-utils';
-import KeyLegend from '../key-legend';
-
-describe('KeyLegend', () => {
-  describe('rendering', () => {
-    it('renders without crashing', () => {
-      const { container } = render(<KeyLegend />);
-      expect(container).toBeTruthy();
-    });
-
-    it('renders the title "Key"', () => {
-      const { getByText } = render(<KeyLegend />);
-      expect(getByText('Key')).toBeTruthy();
-    });
-
-    it('applies custom className when provided', () => {
-      const { container } = render(<KeyLegend className="custom-class" />);
-      const mainContainer = container.firstChild;
-      expect(mainContainer).toHaveClass('custom-class');
-    });
-
-    it('renders without className', () => {
-      const { container } = render(<KeyLegend />);
-      expect(container.firstChild).toBeTruthy();
-    });
-  });
-
-  describe('without label support (isLabelAvailable=false)', () => {
-    it('renders Answer Key Correct row', () => {
-      const { getByText } = render(<KeyLegend isLabelAvailable={false} />);
-      expect(getByText('Answer Key Correct')).toBeTruthy();
-    });
-
-    it('renders Student Incorrect row', () => {
-      const { getByText } = render(<KeyLegend isLabelAvailable={false} />);
-      expect(getByText('Student Incorrect')).toBeTruthy();
-    });
-
-    it('does not render Missing Required Label row', () => {
-      const { queryByText } = render(<KeyLegend isLabelAvailable={false} />);
-      expect(queryByText('Missing Required Label')).toBeFalsy();
-    });
-
-    it('does not render Answer Key Correct Label row', () => {
-      const { queryByText } = render(<KeyLegend isLabelAvailable={false} />);
-      expect(queryByText('Answer Key Correct Label')).toBeFalsy();
-    });
-
-    it('does not render Incorrect Student Label row', () => {
-      const { queryByText } = render(<KeyLegend isLabelAvailable={false} />);
-      expect(queryByText('Incorrect Student Label')).toBeFalsy();
-    });
-
-    it('renders exactly 2 rows (correct + incorrect)', () => {
-      const { getByText } = render(<KeyLegend isLabelAvailable={false} />);
-      // Verify the 2 text labels are present (one per row)
-      expect(getByText('Answer Key Correct')).toBeTruthy();
-      expect(getByText('Student Incorrect')).toBeTruthy();
-    });
-  });
-
-  describe('with label support (isLabelAvailable=true)', () => {
-    it('renders Missing Required Label row', () => {
-      const { getByText } = render(<KeyLegend isLabelAvailable={true} />);
-      expect(getByText('Missing Required Label')).toBeTruthy();
-    });
-
-    it('renders Answer Key Correct row', () => {
-      const { getByText } = render(<KeyLegend isLabelAvailable={true} />);
-      expect(getByText('Answer Key Correct')).toBeTruthy();
-    });
-
-    it('renders Answer Key Correct Label row', () => {
-      const { getByText } = render(<KeyLegend isLabelAvailable={true} />);
-      expect(getByText('Answer Key Correct Label')).toBeTruthy();
-    });
-
-    it('renders Student Incorrect row', () => {
-      const { getByText } = render(<KeyLegend isLabelAvailable={true} />);
-      expect(getByText('Student Incorrect')).toBeTruthy();
-    });
-
-    it('renders Incorrect Student Label row', () => {
-      const { getByText } = render(<KeyLegend isLabelAvailable={true} />);
-      expect(getByText('Incorrect Student Label')).toBeTruthy();
-    });
-
-    it('renders exactly 5 rows (all legend items)', () => {
-      const { getByText } = render(<KeyLegend isLabelAvailable={true} />);
-      // Verify all 5 text labels are present (one per row)
-      expect(getByText('Missing Required Label')).toBeTruthy();
-      expect(getByText('Answer Key Correct')).toBeTruthy();
-      expect(getByText('Answer Key Correct Label')).toBeTruthy();
-      expect(getByText('Student Incorrect')).toBeTruthy();
-      expect(getByText('Incorrect Student Label')).toBeTruthy();
-    });
-  });
-
-  describe('default behavior', () => {
-    it('treats undefined isLabelAvailable as false', () => {
-      const { queryByText } = render(<KeyLegend />);
-      expect(queryByText('Missing Required Label')).toBeFalsy();
-      expect(queryByText('Answer Key Correct Label')).toBeFalsy();
-      expect(queryByText('Incorrect Student Label')).toBeFalsy();
-    });
-  });
-
-  describe('SVG icons', () => {
-    it('renders SVG for Missing Required Label', () => {
-      const { container } = render(<KeyLegend isLabelAvailable={true} />);
-      const svgs = container.querySelectorAll('svg');
-      expect(svgs.length).toBeGreaterThan(0);
-    });
-
-    it('renders SVG for Answer Key Correct', () => {
-      const { container } = render(<KeyLegend isLabelAvailable={false} />);
-      const svgs = container.querySelectorAll('svg');
-      expect(svgs.length).toBeGreaterThan(0);
-    });
-
-    it('renders SVG for Student Incorrect', () => {
-      const { container } = render(<KeyLegend isLabelAvailable={false} />);
-      const svgs = container.querySelectorAll('svg');
-      // There are 3 SVGs: 2 for rows + possibly decorative elements
-      expect(svgs.length).toBeGreaterThanOrEqual(2);
-    });
-
-    it('renders more SVGs when labels are available', () => {
-      const { container: withoutLabels } = render(<KeyLegend isLabelAvailable={false} />);
-      const svgsWithoutLabels = withoutLabels.querySelectorAll('svg');
-
-      const { container: withLabels } = render(<KeyLegend isLabelAvailable={true} />);
-      const svgsWithLabels = withLabels.querySelectorAll('svg');
-
-      expect(svgsWithLabels.length).toBeGreaterThan(svgsWithoutLabels.length);
-    });
-  });
-
-  describe('styling', () => {
-    it('applies container styles', () => {
-      const { container } = render(<KeyLegend />);
-      const mainContainer = container.firstChild;
-
-      expect(mainContainer).toHaveStyle({
-        padding: '20px',
-        width: '355px',
-      });
-    });
-
-    it('renders title with correct styling', () => {
-      const { getByText } = render(<KeyLegend />);
-      const title = getByText('Key');
-
-      expect(title).toHaveStyle({
-        marginLeft: '30px',
-        fontWeight: '700',
-        marginBottom: '10px',
-      });
-    });
-  });
-
-  describe('row structure', () => {
-    it('each row contains text and SVG', () => {
-      const { getByText, container } = render(<KeyLegend isLabelAvailable={true} />);
-
-      // Verify that text labels exist
-      expect(getByText('Missing Required Label')).toBeTruthy();
-      expect(getByText('Answer Key Correct')).toBeTruthy();
-      expect(getByText('Answer Key Correct Label')).toBeTruthy();
-      expect(getByText('Student Incorrect')).toBeTruthy();
-      expect(getByText('Incorrect Student Label')).toBeTruthy();
-
-      // Verify SVGs exist
-      const svgs = container.querySelectorAll('svg');
-      expect(svgs.length).toBeGreaterThanOrEqual(5);
-    });
-
-    it('displays correct text alignment', () => {
-      const { getByText } = render(<KeyLegend />);
-      const text = getByText('Answer Key Correct');
-
-      expect(text).toHaveStyle({
-        textAlign: 'right',
-        marginRight: '10px',
-      });
-    });
-  });
-
-  describe('accessibility', () => {
-    it('includes descriptive text for each legend item', () => {
-      const { getByText } = render(<KeyLegend isLabelAvailable={true} />);
-
-      expect(getByText('Missing Required Label')).toBeTruthy();
-      expect(getByText('Answer Key Correct')).toBeTruthy();
-      expect(getByText('Answer Key Correct Label')).toBeTruthy();
-      expect(getByText('Student Incorrect')).toBeTruthy();
-      expect(getByText('Incorrect Student Label')).toBeTruthy();
-    });
-
-    it('SVGs are decorative (no role or aria-label needed)', () => {
-      const { container } = render(<KeyLegend isLabelAvailable={true} />);
-      const svgs = container.querySelectorAll('svg');
-
-      svgs.forEach((svg) => {
-        // SVGs should not have interactive roles
-        expect(svg.getAttribute('role')).toBeFalsy();
-      });
-    });
-  });
-
-  describe('edge cases', () => {
-    it('handles isLabelAvailable as boolean true', () => {
-      const { queryByText } = render(<KeyLegend isLabelAvailable={true} />);
-      expect(queryByText('Missing Required Label')).toBeTruthy();
-    });
-
-    it('handles isLabelAvailable as boolean false', () => {
-      const { queryByText } = render(<KeyLegend isLabelAvailable={false} />);
-      expect(queryByText('Missing Required Label')).toBeFalsy();
-    });
-
-    it('handles isLabelAvailable as truthy value', () => {
-      const { queryByText } = render(<KeyLegend isLabelAvailable={1} />);
-      expect(queryByText('Missing Required Label')).toBeTruthy();
-    });
-
-    it('handles isLabelAvailable as falsy value', () => {
-      const { queryByText } = render(<KeyLegend isLabelAvailable={0} />);
-      expect(queryByText('Missing Required Label')).toBeFalsy();
-    });
-  });
-
-  describe('updates', () => {
-    it('updates when isLabelAvailable changes from false to true', () => {
-      const { queryByText, rerender } = render(<KeyLegend isLabelAvailable={false} />);
-      expect(queryByText('Missing Required Label')).toBeFalsy();
-
-      rerender(<KeyLegend isLabelAvailable={true} />);
-      expect(queryByText('Missing Required Label')).toBeTruthy();
-    });
-
-    it('updates when isLabelAvailable changes from true to false', () => {
-      const { queryByText, rerender } = render(<KeyLegend isLabelAvailable={true} />);
-      expect(queryByText('Missing Required Label')).toBeTruthy();
-
-      rerender(<KeyLegend isLabelAvailable={false} />);
-      expect(queryByText('Missing Required Label')).toBeFalsy();
-    });
-
-    it('updates className on rerender', () => {
-      const { container, rerender } = render(<KeyLegend className="class1" />);
-      expect(container.firstChild).toHaveClass('class1');
-
-      rerender(<KeyLegend className="class2" />);
-      expect(container.firstChild).toHaveClass('class2');
-      expect(container.firstChild).not.toHaveClass('class1');
-    });
-  });
-});

package/src/__tests__/label-svg-icon.test.jsx

@@ -1,278 +0,0 @@
-import React from 'react';
-import { render } from '@pie-lib/test-utils';
-
-import SvgIcon from '../label-svg-icon';
-
-describe('SvgIcon', () => {
-  describe('rendering', () => {
-    it('renders without crashing with correct type', () => {
-      const { container } = render(<SvgIcon type="correct" />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders correct icon type', () => {
-      const { container } = render(<SvgIcon type="correct" />);
-      const svg = container.querySelector('svg');
-      expect(svg).toBeInTheDocument();
-      expect(svg).toHaveAttribute('width', '8');
-      expect(svg).toHaveAttribute('height', '6');
-    });
-
-    it('renders incorrect icon type', () => {
-      const { container } = render(<SvgIcon type="incorrect" />);
-      const svg = container.querySelector('svg');
-      expect(svg).toBeInTheDocument();
-      expect(svg).toHaveAttribute('width', '7');
-      expect(svg).toHaveAttribute('height', '7');
-    });
-
-    it('renders empty icon type', () => {
-      const { container } = render(<SvgIcon type="empty" />);
-      const svg = container.querySelector('svg');
-      expect(svg).toBeInTheDocument();
-      expect(svg).toHaveAttribute('width', '11');
-      expect(svg).toHaveAttribute('height', '12');
-    });
-
-    it('renders null for unknown icon type', () => {
-      const { container } = render(<SvgIcon type="unknown" />);
-      expect(container.firstChild).toBeNull();
-    });
-
-    it('renders null for invalid icon type', () => {
-      const { container } = render(<SvgIcon type="invalid" />);
-      expect(container.firstChild).toBeNull();
-    });
-  });
-
-  describe('correct icon', () => {
-    it('has correct viewBox attribute', () => {
-      const { container } = render(<SvgIcon type="correct" />);
-      const svg = container.querySelector('svg');
-      expect(svg).toHaveAttribute('viewBox', '0 0 8 6');
-    });
-
-    it('has correct fill color for path', () => {
-      const { container } = render(<SvgIcon type="correct" />);
-      const path = container.querySelector('path');
-      expect(path).toHaveAttribute('fill', '#0B7D38');
-    });
-
-    it('has correct path d attribute for checkmark', () => {
-      const { container } = render(<SvgIcon type="correct" />);
-      const path = container.querySelector('path');
-      expect(path).toHaveAttribute('d');
-      const dAttribute = path.getAttribute('d');
-      expect(dAttribute).toContain('M6.79688');
-    });
-
-    it('has xmlns attribute', () => {
-      const { container } = render(<SvgIcon type="correct" />);
-      const svg = container.querySelector('svg');
-      expect(svg).toHaveAttribute('xmlns', 'http://www.w3.org/2000/svg');
-    });
-  });
-
-  describe('incorrect icon', () => {
-    it('has correct viewBox attribute', () => {
-      const { container } = render(<SvgIcon type="incorrect" />);
-      const svg = container.querySelector('svg');
-      expect(svg).toHaveAttribute('viewBox', '0 0 7 7');
-    });
-
-    it('has correct fill color for path', () => {
-      const { container } = render(<SvgIcon type="incorrect" />);
-      const path = container.querySelector('path');
-      expect(path).toHaveAttribute('fill', '#BF0D00');
-    });
-
-    it('has correct path d attribute for X mark', () => {
-      const { container } = render(<SvgIcon type="incorrect" />);
-      const path = container.querySelector('path');
-      expect(path).toHaveAttribute('d');
-      const dAttribute = path.getAttribute('d');
-      expect(dAttribute).toContain('M4.23438');
-    });
-
-    it('has xmlns attribute', () => {
-      const { container } = render(<SvgIcon type="incorrect" />);
-      const svg = container.querySelector('svg');
-      expect(svg).toHaveAttribute('xmlns', 'http://www.w3.org/2000/svg');
-    });
-  });
-
-  describe('empty icon', () => {
-    it('has correct viewBox attribute', () => {
-      const { container } = render(<SvgIcon type="empty" />);
-      const svg = container.querySelector('svg');
-      expect(svg).toHaveAttribute('viewBox', '0 0 11 12');
-    });
-
-    it('has correct fill color for path', () => {
-      const { container } = render(<SvgIcon type="empty" />);
-      const path = container.querySelector('path');
-      expect(path).toHaveAttribute('fill', '#BF0D00');
-    });
-
-    it('has correct path d attribute for empty frame', () => {
-      const { container } = render(<SvgIcon type="empty" />);
-      const path = container.querySelector('path');
-      expect(path).toHaveAttribute('d');
-      const dAttribute = path.getAttribute('d');
-      expect(dAttribute).toContain('M0.25');
-    });
-
-    it('has xmlns attribute', () => {
-      const { container } = render(<SvgIcon type="empty" />);
-      const svg = container.querySelector('svg');
-      expect(svg).toHaveAttribute('xmlns', 'http://www.w3.org/2000/svg');
-    });
-  });
-
-  describe('icon structure', () => {
-    it('correct icon has one path element', () => {
-      const { container } = render(<SvgIcon type="correct" />);
-      const paths = container.querySelectorAll('path');
-      expect(paths.length).toBe(1);
-    });
-
-    it('incorrect icon has one path element', () => {
-      const { container } = render(<SvgIcon type="incorrect" />);
-      const paths = container.querySelectorAll('path');
-      expect(paths.length).toBe(1);
-    });
-
-    it('empty icon has one path element', () => {
-      const { container } = render(<SvgIcon type="empty" />);
-      const paths = container.querySelectorAll('path');
-      expect(paths.length).toBe(1);
-    });
-
-    it('each icon renders only one svg element', () => {
-      const { container: correctContainer } = render(<SvgIcon type="correct" />);
-      const { container: incorrectContainer } = render(<SvgIcon type="incorrect" />);
-      const { container: emptyContainer } = render(<SvgIcon type="empty" />);
-
-      expect(correctContainer.querySelectorAll('svg').length).toBe(1);
-      expect(incorrectContainer.querySelectorAll('svg').length).toBe(1);
-      expect(emptyContainer.querySelectorAll('svg').length).toBe(1);
-    });
-  });
-
-  describe('edge cases', () => {
-    it('handles empty string type gracefully', () => {
-      const { container } = render(<SvgIcon type="" />);
-      expect(container.firstChild).toBeNull();
-    });
-
-    it('handles null type gracefully', () => {
-      const { container } = render(<SvgIcon type={null} />);
-      expect(container.firstChild).toBeNull();
-    });
-
-    it('handles undefined type gracefully', () => {
-      const { container } = render(<SvgIcon type={undefined} />);
-      expect(container.firstChild).toBeNull();
-    });
-
-    it('handles numeric type gracefully', () => {
-      const { container } = render(<SvgIcon type={123} />);
-      expect(container.firstChild).toBeNull();
-    });
-
-    it('handles object type gracefully', () => {
-      const { container } = render(<SvgIcon type={{}} />);
-      expect(container.firstChild).toBeNull();
-    });
-  });
-
-  describe('icon differentiation', () => {
-    it('correct and incorrect icons have different dimensions', () => {
-      const { container: correctContainer } = render(<SvgIcon type="correct" />);
-      const { container: incorrectContainer } = render(<SvgIcon type="incorrect" />);
-
-      const correctSvg = correctContainer.querySelector('svg');
-      const incorrectSvg = incorrectContainer.querySelector('svg');
-
-      expect(correctSvg.getAttribute('width')).not.toBe(incorrectSvg.getAttribute('width'));
-    });
-
-    it('correct and empty icons have different fill colors', () => {
-      const { container: correctContainer } = render(<SvgIcon type="correct" />);
-      const { container: emptyContainer } = render(<SvgIcon type="empty" />);
-
-      const correctPath = correctContainer.querySelector('path');
-      const emptyPath = emptyContainer.querySelector('path');
-
-      expect(correctPath.getAttribute('fill')).not.toBe(emptyPath.getAttribute('fill'));
-    });
-
-    it('incorrect and empty icons have same fill color', () => {
-      const { container: incorrectContainer } = render(<SvgIcon type="incorrect" />);
-      const { container: emptyContainer } = render(<SvgIcon type="empty" />);
-
-      const incorrectPath = incorrectContainer.querySelector('path');
-      const emptyPath = emptyContainer.querySelector('path');
-
-      expect(incorrectPath.getAttribute('fill')).toBe(emptyPath.getAttribute('fill'));
-    });
-
-    it('each icon type has unique path data', () => {
-      const { container: correctContainer } = render(<SvgIcon type="correct" />);
-      const { container: incorrectContainer } = render(<SvgIcon type="incorrect" />);
-      const { container: emptyContainer } = render(<SvgIcon type="empty" />);
-
-      const correctPath = correctContainer.querySelector('path').getAttribute('d');
-      const incorrectPath = incorrectContainer.querySelector('path').getAttribute('d');
-      const emptyPath = emptyContainer.querySelector('path').getAttribute('d');
-
-      expect(correctPath).not.toBe(incorrectPath);
-      expect(correctPath).not.toBe(emptyPath);
-      expect(incorrectPath).not.toBe(emptyPath);
-    });
-  });
-
-  describe('SVG attributes', () => {
-    it('all icons have fill="none" on svg element', () => {
-      const { container: correctContainer } = render(<SvgIcon type="correct" />);
-      const { container: incorrectContainer } = render(<SvgIcon type="incorrect" />);
-      const { container: emptyContainer } = render(<SvgIcon type="empty" />);
-
-      expect(correctContainer.querySelector('svg')).toHaveAttribute('fill', 'none');
-      expect(incorrectContainer.querySelector('svg')).toHaveAttribute('fill', 'none');
-      expect(emptyContainer.querySelector('svg')).toHaveAttribute('fill', 'none');
-    });
-
-    it('all icons have proper xmlns namespace', () => {
-      const { container: correctContainer } = render(<SvgIcon type="correct" />);
-      const { container: incorrectContainer } = render(<SvgIcon type="incorrect" />);
-      const { container: emptyContainer } = render(<SvgIcon type="empty" />);
-
-      const xmlns = 'http://www.w3.org/2000/svg';
-      expect(correctContainer.querySelector('svg')).toHaveAttribute('xmlns', xmlns);
-      expect(incorrectContainer.querySelector('svg')).toHaveAttribute('xmlns', xmlns);
-      expect(emptyContainer.querySelector('svg')).toHaveAttribute('xmlns', xmlns);
-    });
-  });
-
-  describe('accessibility', () => {
-    it('svg elements are properly structured for screen readers', () => {
-      const { container } = render(<SvgIcon type="correct" />);
-      const svg = container.querySelector('svg');
-
-      // SVG should be in DOM
-      expect(svg).toBeInTheDocument();
-
-      // Should have valid viewBox for proper scaling
-      expect(svg.getAttribute('viewBox')).toBeTruthy();
-    });
-
-    it('icons render as inline elements', () => {
-      const { container } = render(<SvgIcon type="correct" />);
-      const svg = container.querySelector('svg');
-
-      // SVG should be direct child (inline)
-      expect(container.firstChild).toBe(svg);
-    });
-  });
-});

package/src/__tests__/labels.test.jsx

@@ -1,55 +0,0 @@
-import { render } from '@pie-lib/test-utils';
-import React from 'react';
-
-import Labels, { getTransform } from '../labels';
-
-describe('Labels', () => {
-  let onChange = jest.fn();
-  const renderComponent = (extras) => {
-    const defaults = {
-      classes: {},
-      className: 'className',
-      onChange,
-      graphProps: {
-        size: {
-          width: 400,
-          height: 400,
-        },
-        domain: {
-          min: 0,
-          max: 10,
-          step: 1,
-          padding: 0,
-        },
-        range: {
-          min: 0,
-          max: 10,
-          step: 1,
-          padding: 0,
-        },
-      },
-    };
-    const props = { ...defaults, ...extras };
-    return render(<Labels {...props} />);
-  };
-  describe('rendering', () => {
-    it('renders without crashing', () => {
-      const { container } = renderComponent();
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-});
-
-describe('getTransform', () => {
-  const assertTransform = (side, expected) => {
-    it(`returns ${expected} for ${side}`, () => {
-      const r = getTransform('left', 100, 100);
-      expect(r).toEqual('translate(-20, 50), rotate(-90)');
-    });
-  };
-
-  assertTransform('left', 'translate(-20, 50), rotate(-90)');
-  assertTransform('right', 'translate(130, 50), rotate(90)');
-  assertTransform('top', 'translate(50, -20), rotate(0)');
-  assertTransform('bottom', 'translate(50, 130), rotate(0)');
-});

package/src/__tests__/mark-label.test.jsx

@@ -1,63 +0,0 @@
-import { render } from '@pie-lib/test-utils';
-import React from 'react';
-import { coordinates, MarkLabel, position } from '../mark-label';
-import { graphProps as getGraphProps } from './utils';
-
-describe('MarkLabel', () => {
-  let onChange = jest.fn();
-  let inputRef = jest.fn();
-  const renderComponent = (extras) => {
-    const defaults = {
-      classes: {},
-      className: 'className',
-      onChange,
-      inputRef,
-      mark: { x: 1, y: 1 },
-      graphProps: getGraphProps(0, 10, 0, 10),
-    };
-    const props = { ...defaults, ...extras };
-    return render(<MarkLabel {...props} />);
-  };
-  describe('rendering', () => {
-    it('renders without crashing', () => {
-      const { container } = renderComponent();
-      expect(container.firstChild).toBeInTheDocument();
-    });
-    it('renders with different mark position', () => {
-      const { container } = renderComponent({ mark: { x: 10, y: 10 } });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-});
-
-describe('position', () => {
-  const assertPosition = (mark, rect, expected) => {
-    it(`${mark.x},${mark.y} + ${rect.width},${rect.height} => ${expected}`, () => {
-      // we set range.min to a value because in pixels - the greater the Y the lower down on the screen.
-      const graphProps = getGraphProps(0, 12, 12, 0);
-      const result = position(graphProps, mark, rect);
-      expect(result).toEqual(expected);
-    });
-  };
-
-  assertPosition({ x: 0, y: 0 }, { width: 10, height: 10 }, 'top-left');
-  assertPosition({ x: 0, y: 0 }, { width: 1, height: 1 }, 'bottom-right');
-  assertPosition({ x: 0, y: 0 }, { width: 10, height: 0 }, 'bottom-left');
-  assertPosition({ x: 0, y: 0 }, { width: 0, height: 10 }, 'top-right');
-});
-
-describe('coordinates', () => {
-  const assertCoordinates = (mark, rect, pos, expected) => {
-    it(`${mark.x}, ${mark.y} -> ${pos} = ${expected.left}, ${expected.top}`, () => {
-      const result = coordinates(getGraphProps(), mark, rect, pos);
-      expect(result).toEqual(expected);
-    });
-  };
-  assertCoordinates({ x: 0, y: 0 }, { width: 0, height: 0 }, 'top-left', { left: -5, top: -5 });
-  assertCoordinates({ x: 0, y: 0 }, { width: 0, height: 0 }, 'bottom-left', { left: -5, top: 5 });
-  assertCoordinates({ x: 0, y: 0 }, { width: 0, height: 0 }, 'top-right', { left: 5, top: -5 });
-  assertCoordinates({ x: 0, y: 0 }, { width: 0, height: 0 }, 'bottom-right', {
-    left: 5,
-    top: 5,
-  });
-});