tiennm99bot/renderer/test/wheel-layout.test.js

import {describe, expect, test} from 'vitest';
import {
  cssDegreesToPieRadians,
  getFinalWheelRotationDegrees,
  getSliceCenterDegrees,
  getSliceDegrees,
  getSpinProgress,
  getWheelRotationDegrees,
  rightPointerClipPath,
} from '../src/remotion/wheel-layout.js';

describe('wheel layout', () => {
  test('calculates equal slice sizes', () => {
    expect(getSliceDegrees(8)).toBe(45);
  });

  test('calculates center angle from 3h clockwise', () => {
    expect(getSliceCenterDegrees(4, 0)).toBe(45);
    expect(getSliceCenterDegrees(4, 1)).toBe(135);
  });

  test('final rotation places winner center at 3h', () => {
    const optionCount = 8;
    const winnerIndex = 3;
    const rotation = getFinalWheelRotationDegrees(optionCount, winnerIndex, 7);
    const winnerCenter = getSliceCenterDegrees(optionCount, winnerIndex);
    const screenAngle = ((winnerCenter + rotation) % 360 + 360) % 360;

    expect(screenAngle).toBe(0);
  });

  test('converts CSS slice starts to Remotion Pie rotation radians', () => {
    /**
     * @param {number} cssDegrees
     */
    const getRenderedStartDegrees = (cssDegrees) => {
      const rotationDegrees = (cssDegreesToPieRadians(cssDegrees) * 180) / Math.PI;
      return (270 + rotationDegrees + 360) % 360;
    };

    expect(getRenderedStartDegrees(0)).toBe(0);
    expect(getRenderedStartDegrees(45)).toBe(45);
    expect(getRenderedStartDegrees(90)).toBe(90);
    expect(getRenderedStartDegrees(180)).toBe(180);
    expect(getRenderedStartDegrees(270)).toBe(270);
  });

  test('eases spin progress once across the spin duration', () => {
    expect(getSpinProgress(0, 100)).toBe(0);
    expect(getSpinProgress(25, 100)).toBeCloseTo(0.578125);
    expect(getSpinProgress(50, 100)).toBeCloseTo(0.875);
    expect(getSpinProgress(100, 100)).toBe(1);
    expect(getSpinProgress(125, 100)).toBe(1);
  });

  test('maps eased spin progress to wheel rotation', () => {
    const rotation = getWheelRotationDegrees({
      finalRotationDegrees: 696,
      frame: 25,
      spinFrames: 100,
      startRotationDegrees: -24,
    });

    expect(rotation).toBeCloseTo(392.25);
  });

  test('defines a right-side pointer that points into the wheel', () => {
    expect(rightPointerClipPath).toBe('polygon(0 50%, 100% 0, 100% 100%)');
  });
});