import { toCanvasPoint } from './canvas-point';

/**
 * Guards the scaling between a canvas's on-screen size and its backing store.
 * Getting this wrong offsets strokes from the cursor — worse the further from
 * the origin — which stays invisible until someone actually tries to sign.
 */
describe('toCanvasPoint', () => {
  const size = { width: 800, height: 260 };
  // Half scale: 400px wide on screen, 800 in the backing store.
  const rect = { left: 100, top: 50, width: 400, height: 130 };

  it('maps the top-left corner to the origin', () => {
    expect(toCanvasPoint(100, 50, rect, size)).toEqual({ x: 0, y: 0 });
  });

  it('maps the bottom-right corner to the full backing-store size', () => {
    expect(toCanvasPoint(500, 180, rect, size)).toEqual({ x: 800, y: 260 });
  });

  it('scales a midpoint rather than using raw client pixels', () => {
    // Raw offset would be (200, 65) — half of the correct answer.
    expect(toCanvasPoint(300, 115, rect, size)).toEqual({ x: 400, y: 130 });
  });

  it('is unscaled when the element is already the backing-store size', () => {
    const exact = { left: 0, top: 0, width: 800, height: 260 };
    expect(toCanvasPoint(123, 45, exact, size)).toEqual({ x: 123, y: 45 });
  });
});
