@pie-lib/graphing 4.0.5-next.30 → 4.0.5-next.34

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

@@ -0,0 +1,260 @@
+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

@@ -0,0 +1,278 @@
+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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,63 @@
+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,
+  });
+});