@wandelbots/wandelbots-js-react-components 5.5.1 → 5.5.2-pr.fix-performance-issues.594.c24b644

package/src/components/utils/interpolation.test.ts

@@ -1,1138 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
-import { ValueInterpolator } from "./interpolation"
-
-describe("ValueInterpolator", () => {
-  let interpolator: ValueInterpolator
-  let mockOnChange: ReturnType<typeof vi.fn>
-  let mockOnComplete: ReturnType<typeof vi.fn>
-
-  beforeEach(() => {
-    mockOnChange = vi.fn()
-    mockOnComplete = vi.fn()
-
-    // Mock requestAnimationFrame for testing
-    vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
-      return setTimeout(cb, 16) // Simulate 60fps
-    })
-
-    vi.stubGlobal("cancelAnimationFrame", (id: number) => {
-      clearTimeout(id)
-    })
-  })
-
-  afterEach(() => {
-    interpolator?.destroy()
-    vi.restoreAllMocks()
-    vi.unstubAllGlobals()
-  })
-
-  it("should handle frequent target updates without losing interpolation quality", async () => {
-    interpolator = new ValueInterpolator([0, 0, 0], {
-      tension: 180,
-      friction: 25,
-      threshold: 0.001,
-      onChange: mockOnChange,
-      onComplete: mockOnComplete,
-    })
-
-    // Simulate rapid updates (like robot motion state changes)
-    const rapidUpdates = [
-      [1, 2, 3],
-      [1.1, 2.1, 3.1],
-      [1.2, 2.2, 3.2],
-      [1.3, 2.3, 3.3],
-      [1.5, 2.5, 3.5], // Final target
-    ]
-
-    // Apply updates rapidly
-    rapidUpdates.forEach((values, index) => {
-      setTimeout(() => {
-        interpolator.setTarget(values)
-      }, index * 5)
-    })
-
-    // Simulate frame updates with delta
-    const simulateFrames = async (count: number) => {
-      for (let i = 0; i < count; i++) {
-        interpolator.update(1 / 60) // 60fps
-        await new Promise((resolve) => setTimeout(resolve, 16)) // ~60fps
-      }
-    }
-
-    await simulateFrames(20)
-
-    // Verify interpolation handled rapid updates
-    expect(mockOnChange).toHaveBeenCalled()
-
-    // Final values should be close to the last target
-    const finalValues = interpolator.getCurrentValues()
-    expect(finalValues[0]).toBeCloseTo(1.5, 0)
-    expect(finalValues[1]).toBeCloseTo(2.5, 0)
-    expect(finalValues[2]).toBeCloseTo(3.5, 0)
-  })
-
-  it("should provide smooth spring-like animation characteristics", async () => {
-    const changeHistory: number[][] = []
-
-    interpolator = new ValueInterpolator([0], {
-      tension: 120,
-      friction: 20,
-      threshold: 0.001,
-      onChange: (values) => {
-        changeHistory.push([...values])
-      },
-    })
-
-    interpolator.setTarget([10])
-
-    // Simulate animation frames
-    for (let i = 0; i < 30; i++) {
-      interpolator.update(1 / 60)
-      await new Promise((resolve) => setTimeout(resolve, 5))
-    }
-
-    // Verify we have smooth progression
-    expect(changeHistory.length).toBeGreaterThanOrEqual(1) // At least some animation steps
-
-    // Spring animation should show progression toward target
-    const firstValue = changeHistory[0][0]
-    const lastValue = changeHistory[changeHistory.length - 1][0]
-
-    expect(firstValue).toBeGreaterThan(0) // Should start moving
-    expect(lastValue).toBeGreaterThan(firstValue) // Should progress toward target
-    expect(lastValue).toBeLessThan(15) // Should not overshoot significantly
-  })
-
-  it("should handle different spring configurations correctly", () => {
-    const fastInterpolator = new ValueInterpolator([0], {
-      tension: 200, // Higher tension = faster
-      friction: 30,
-    })
-
-    const normalInterpolator = new ValueInterpolator([0], {
-      tension: 120, // Default tension
-      friction: 20,
-    })
-
-    const slowInterpolator = new ValueInterpolator([0], {
-      tension: 60, // Lower tension = slower
-      friction: 15,
-    })
-
-    // Test that different spring configurations produce different behavior
-    fastInterpolator.setTarget([10])
-    normalInterpolator.setTarget([10])
-    slowInterpolator.setTarget([10])
-
-    // Update once to see the difference
-    fastInterpolator.update(1 / 60)
-    normalInterpolator.update(1 / 60)
-    slowInterpolator.update(1 / 60)
-
-    // After one step, values should be different due to spring settings
-    const fastValue = fastInterpolator.getCurrentValues()[0]
-    const normalValue = normalInterpolator.getCurrentValues()[0]
-    const slowValue = slowInterpolator.getCurrentValues()[0]
-
-    // All should be moving toward target
-    expect(fastValue).toBeGreaterThan(0)
-    expect(normalValue).toBeGreaterThan(0)
-    expect(slowValue).toBeGreaterThan(0)
-
-    // Higher tension should generally move faster initially
-    // Note: actual behavior depends on friction balance, so just verify all move
-    expect(fastValue).toBeGreaterThan(0)
-    expect(normalValue).toBeGreaterThan(0)
-    expect(slowValue).toBeGreaterThan(0)
-
-    fastInterpolator.destroy()
-    normalInterpolator.destroy()
-    slowInterpolator.destroy()
-  })
-
-  it("should handle array length changes gracefully", () => {
-    interpolator = new ValueInterpolator([1, 2], {
-      onChange: mockOnChange,
-    })
-
-    // Expand array
-    interpolator.setTarget([1, 2, 3, 4])
-    expect(interpolator.getCurrentValues()).toHaveLength(4)
-
-    // Shrink array
-    interpolator.setTarget([5, 6])
-    expect(interpolator.getCurrentValues()).toHaveLength(2)
-
-    // Update once to see changes
-    interpolator.update(1 / 60)
-
-    // Values should be updated
-    const values = interpolator.getCurrentValues()
-    expect(values[0]).not.toBe(1) // Should be interpolating toward 5
-    expect(values[1]).not.toBe(2) // Should be interpolating toward 6
-  })
-
-  it("should stop and start interpolation correctly", async () => {
-    interpolator = new ValueInterpolator([0], {
-      // Slow for testing
-      onChange: mockOnChange,
-    })
-
-    interpolator.setTarget([10])
-
-    // Manual update should work
-    interpolator.update(1 / 60)
-    expect(mockOnChange).toHaveBeenCalled()
-
-    const callCountAfterFirst = mockOnChange.mock.calls.length
-
-    interpolator.stop()
-
-    // Should be able to restart
-    interpolator.setTarget([5])
-    interpolator.update(1 / 60)
-    expect(mockOnChange.mock.calls.length).toBeGreaterThan(callCountAfterFirst)
-  })
-
-  it("should not conflict when using manual updates without starting auto-interpolation", () => {
-    let changeCount = 0
-    interpolator = new ValueInterpolator([0], {
-      onChange: () => {
-        changeCount++
-      },
-    })
-
-    // Set target but don't start auto-interpolation
-    interpolator.setTarget([10])
-
-    // Should not have triggered any changes yet (no auto-start)
-    expect(changeCount).toBe(0)
-
-    // Manual update should work
-    interpolator.update(1 / 60)
-    expect(changeCount).toBe(1)
-
-    // Another manual update should continue interpolation
-    interpolator.update(1 / 60)
-    expect(changeCount).toBe(2)
-  })
-
-  it("should work with auto-interpolation when explicitly started", async () => {
-    let changeCount = 0
-    interpolator = new ValueInterpolator([0], {
-      // Faster for testing
-      onChange: () => {
-        changeCount++
-      },
-    })
-
-    // Set target and start auto-interpolation
-    interpolator.setTarget([10])
-    interpolator.startAutoInterpolation()
-
-    // Wait for automatic updates
-    await new Promise((resolve) => setTimeout(resolve, 50))
-
-    // Should have triggered automatic changes
-    expect(changeCount).toBeGreaterThan(0)
-  })
-
-  it("should not double-update when both manual and auto are used incorrectly", () => {
-    let updateCallCount = 0
-    const originalUpdate = ValueInterpolator.prototype.update
-
-    // Spy on update calls to detect conflicts
-    ValueInterpolator.prototype.update = function (delta) {
-      updateCallCount++
-      return originalUpdate.call(this, delta)
-    }
-
-    try {
-      interpolator = new ValueInterpolator([0], {
-        onChange: mockOnChange,
-      })
-
-      interpolator.setTarget([10])
-
-      // Manual update (this should be the only way it updates)
-      interpolator.update(1 / 60)
-
-      // Should only have been called once (no auto-start)
-      expect(updateCallCount).toBe(1)
-      expect(mockOnChange).toHaveBeenCalledTimes(1)
-    } finally {
-      // Restore original method
-      ValueInterpolator.prototype.update = originalUpdate
-    }
-  })
-
-  it("should work correctly in RobotAnimator-like usage pattern", async () => {
-    // Simulate the exact pattern used in RobotAnimator
-    let frameUpdateCount = 0
-    let onChangeCallCount = 0
-
-    interpolator = new ValueInterpolator([0, 0, 0], {
-      tension: 120,
-      friction: 20,
-      threshold: 0.001,
-      onChange: () => {
-        onChangeCallCount++
-      },
-    })
-
-    // Simulate useFrame calling update repeatedly
-    const simulateUseFrame = () => {
-      const animate = () => {
-        frameUpdateCount++
-        interpolator.update(1 / 60)
-
-        if (frameUpdateCount < 20) {
-          setTimeout(animate, 16) // ~60fps
-        }
-      }
-      animate()
-    }
-
-    // Start the animation loop
-    simulateUseFrame()
-
-    // After a few frames, change target (like rapidlyChangingMotionState update)
-    setTimeout(() => {
-      interpolator.setTarget([1, 2, 3])
-    }, 50)
-
-    // Wait for animation to complete
-    await new Promise((resolve) => setTimeout(resolve, 500)) // Slightly longer wait for spring settling
-
-    // Should have smooth updates, not conflicts
-    expect(frameUpdateCount).toBeGreaterThanOrEqual(20)
-    expect(onChangeCallCount).toBeGreaterThan(0)
-    expect(onChangeCallCount).toBeLessThan(frameUpdateCount * 2) // No double updates
-
-    const finalValues = interpolator.getCurrentValues()
-    // Spring physics may not reach exact target quickly, just verify progress
-    expect(finalValues[0]).toBeGreaterThan(0.5) // Should be moving toward 1
-    expect(finalValues[1]).toBeGreaterThan(1.0) // Should be moving toward 2
-    expect(finalValues[2]).toBeGreaterThan(1.5) // Should be moving toward 3
-  })
-
-  it("should handle setImmediate correctly", () => {
-    interpolator = new ValueInterpolator([0, 0], {
-      onChange: mockOnChange,
-    })
-
-    interpolator.setImmediate([5, 10])
-
-    expect(interpolator.getCurrentValues()).toEqual([5, 10])
-    expect(interpolator.isInterpolating()).toBe(false)
-    expect(mockOnChange).toHaveBeenCalledWith([5, 10])
-  })
-
-  it("should handle irregular frame timing smoothly", async () => {
-    const changeHistory: number[][] = []
-
-    interpolator = new ValueInterpolator([0], {
-      threshold: 0.001,
-      onChange: (values) => {
-        changeHistory.push([...values])
-      },
-    })
-
-    interpolator.setTarget([10])
-
-    // Simulate irregular frame timing (like real useFrame behavior)
-    const irregularDeltas = [
-      1 / 60, // Normal frame
-      1 / 30, // Slow frame (frame drop)
-      1 / 120, // Fast frame
-      1 / 45, // Medium frame
-      1 / 60, // Normal frame
-      1 / 20, // Very slow frame
-      1 / 60, // Normal frame
-      1 / 90, // Fast frame
-      1 / 60, // Normal frame
-      1 / 40, // Slow frame
-    ]
-
-    for (const delta of irregularDeltas) {
-      interpolator.update(delta)
-      await new Promise((resolve) => setTimeout(resolve, 5))
-    }
-
-    // Should have smooth progression despite irregular timing
-    expect(changeHistory.length).toBeGreaterThanOrEqual(5)
-
-    // Check that values progress monotonically (no sudden jumps)
-    for (let i = 1; i < changeHistory.length; i++) {
-      const prev = changeHistory[i - 1][0]
-      const curr = changeHistory[i][0]
-
-      // Values should always increase smoothly toward target
-      expect(curr).toBeGreaterThanOrEqual(prev)
-
-      // No huge jumps - change should be reasonable
-      const change = curr - prev
-      expect(change).toBeLessThan(4) // No jump larger than 40% of total range (more lenient)
-    }
-  })
-
-  describe("irregular target updates", () => {
-    it("should smooth rapid target changes", () => {
-      const interpolator = new ValueInterpolator([0], {})
-
-      // Simulate rapid target updates (faster than 16ms)
-      interpolator.setTarget([10]) // t=0
-      interpolator.update(0.008) // 8ms later
-      const result1 = interpolator.getCurrentValues()
-
-      interpolator.setTarget([5]) // New target after 8ms (rapid update)
-      interpolator.update(0.008) // Another 8ms
-      const result2 = interpolator.getCurrentValues()
-
-      // The interpolation should be smoother due to target blending
-      expect(result1[0]).toBeGreaterThan(0)
-      expect(result1[0]).toBeLessThan(10)
-      expect(result2[0]).toBeGreaterThan(result1[0]) // Should continue progressing
-      expect(result2[0]).toBeLessThan(8) // But not jump to the raw blended target
-    })
-
-    it("should adapt responsiveness based on update frequency", () => {
-      const interpolator = new ValueInterpolator([0], {})
-
-      // Test recent target update (high responsiveness)
-      interpolator.setTarget([10])
-      interpolator.update(0.016)
-      const recentUpdateResult = interpolator.getCurrentValues()
-
-      // Test with delayed target update (simulating old update)
-      const interpolator2 = new ValueInterpolator([0], {})
-      interpolator2.setTarget([10])
-
-      // Simulate time passing to make target update "old"
-      // We'll use a longer delay in the update to simulate this
-      interpolator2.update(0.3) // Simulate 300ms delay
-      const oldUpdateResult = interpolator2.getCurrentValues()
-
-      // Recent updates should be more responsive (larger change)
-      expect(recentUpdateResult[0]).toBeGreaterThan(0)
-      expect(oldUpdateResult[0]).toBeGreaterThan(0)
-    })
-
-    it("should handle target blending correctly", () => {
-      const interpolator = new ValueInterpolator([0], {})
-
-      // Set initial target
-      interpolator.setTarget([100])
-
-      // Immediately set new target (should trigger blending)
-      interpolator.setTarget([50])
-
-      // Update and check the result
-      interpolator.update(0.016)
-      const result = interpolator.getCurrentValues()
-
-      // Should move toward blended target, not jump to 50
-      expect(result[0]).toBeGreaterThan(0)
-      expect(result[0]).toBeLessThan(50) // Should be less than the final target due to interpolation
-    })
-  })
-
-  it("should provide smooth initialization without jumpiness", () => {
-    const interpolator = new ValueInterpolator([0], {
-      tension: 120,
-      friction: 20,
-    })
-
-    interpolator.setTarget([10]) // Large target change
-
-    const firstFrameValues: number[] = []
-
-    // Capture values from first few frames
-    for (let frame = 0; frame < 5; frame++) {
-      interpolator.update(1 / 60)
-      firstFrameValues.push(interpolator.getValue(0))
-    }
-
-    // First frame should not jump too aggressively
-    expect(firstFrameValues[0]).toBeLessThan(2) // Should start gently
-    expect(firstFrameValues[0]).toBeGreaterThan(0) // But should move
-
-    // Should show gradual acceleration, not sudden jumps
-    const firstStep = firstFrameValues[1] - firstFrameValues[0]
-    const secondStep = firstFrameValues[2] - firstFrameValues[1]
-
-    expect(secondStep).toBeGreaterThanOrEqual(firstStep) // Should accelerate gradually
-    expect(firstStep).toBeLessThan(1.5) // First step should be modest
-  })
-
-  it("should work correctly when multiple components use separate interpolators", () => {
-    // Test the scenario where two components each have their own interpolator
-    const interpolator1 = new ValueInterpolator([0, 0], {
-      tension: 120,
-      friction: 20,
-      threshold: 0.001,
-    })
-
-    const interpolator2 = new ValueInterpolator([0, 0], {
-      tension: 120,
-      friction: 20,
-      threshold: 0.001,
-    })
-
-    // Set different targets for each interpolator
-    interpolator1.setTarget([5, 10])
-    interpolator2.setTarget([15, 20])
-
-    // Update both interpolators for several frames
-    const values1History: number[][] = []
-    const values2History: number[][] = []
-
-    for (let frame = 0; frame < 30; frame++) {
-      // More frames for spring physics
-      interpolator1.update(1 / 60)
-      interpolator2.update(1 / 60)
-
-      values1History.push([...interpolator1.getCurrentValues()])
-      values2History.push([...interpolator2.getCurrentValues()])
-    }
-
-    // Both interpolators should be moving independently
-    const firstFrame1 = values1History[0]
-    const lastFrame1 = values1History[values1History.length - 1]
-    const firstFrame2 = values2History[0]
-    const lastFrame2 = values2History[values2History.length - 1]
-
-    // Interpolators should be moving independently and at reasonable speed
-    expect(lastFrame1[0]).toBeGreaterThan(firstFrame1[0])
-    expect(lastFrame1[1]).toBeGreaterThan(firstFrame1[1])
-    expect(lastFrame2[0]).toBeGreaterThan(firstFrame2[0])
-    expect(lastFrame2[1]).toBeGreaterThan(firstFrame2[1])
-
-    // Should make meaningful progress toward targets
-    expect(lastFrame1[0]).toBeGreaterThan(1) // Should have made progress toward 5
-    expect(lastFrame1[1]).toBeGreaterThan(2) // Should have made progress toward 10
-    expect(lastFrame2[0]).toBeGreaterThan(3) // Should have made progress toward 15
-    expect(lastFrame2[1]).toBeGreaterThan(4) // Should have made progress toward 20
-
-    // The interpolators should be independent - their values should be different
-    expect(lastFrame1[0]).not.toBeCloseTo(lastFrame2[0], 1)
-    expect(lastFrame1[1]).not.toBeCloseTo(lastFrame2[1], 1)
-
-    // Clean up
-    interpolator1.destroy()
-    interpolator2.destroy()
-  })
-
-  it("should handle multiple interpolators updating in the same frame correctly", async () => {
-    // Simulate a more realistic scenario where multiple components
-    // are updating their interpolators in the same animation frame
-    const interpolators: ValueInterpolator[] = []
-    const changeCallCounts: (() => number)[] = []
-
-    // Create multiple interpolators
-    for (let i = 0; i < 3; i++) {
-      let callCount = 0
-      const interpolator = new ValueInterpolator([0], {
-        onChange: () => {
-          callCount++
-        },
-      })
-      interpolators.push(interpolator)
-      changeCallCounts.push(() => callCount) // Store a function to get current count
-    }
-
-    // Set different targets
-    interpolators[0].setTarget([10])
-    interpolators[1].setTarget([20])
-    interpolators[2].setTarget([30])
-
-    // Simulate a frame where all interpolators update
-    const simulateFrame = () => {
-      interpolators.forEach((interpolator) => {
-        interpolator.update(1 / 60)
-      })
-    }
-
-    // Run several frames (more for spring physics)
-    for (let frame = 0; frame < 40; frame++) {
-      simulateFrame()
-      await new Promise((resolve) => setTimeout(resolve, 1))
-    }
-
-    // Check that all interpolators moved independently
-    const finalValues = interpolators.map(
-      (interpolator) => interpolator.getCurrentValues()[0],
-    )
-
-    expect(finalValues[0]).toBeGreaterThan(1) // Moving toward 10
-    expect(finalValues[1]).toBeGreaterThan(2) // Moving toward 20
-    expect(finalValues[2]).toBeGreaterThan(3) // Moving toward 30
-
-    // All should have different values
-    expect(finalValues[0]).not.toBeCloseTo(finalValues[1], 1)
-    expect(finalValues[1]).not.toBeCloseTo(finalValues[2], 1)
-
-    // All should have triggered onChange callbacks
-    changeCallCounts.forEach((getCount, index) => {
-      expect(getCount()).toBeGreaterThan(0)
-    })
-
-    // Clean up
-    interpolators.forEach((interpolator) => {
-      interpolator.destroy()
-    })
-  })
-
-  it("should handle multiple interpolators using auto-interpolation without interference", async () => {
-    // Test the specific case where multiple interpolators use startAutoInterpolation()
-    // This tests if requestAnimationFrame handling interferes between interpolators
-    const interpolator1 = new ValueInterpolator([0], {
-      tension: 120,
-      friction: 20,
-      threshold: 0.001,
-    })
-
-    const interpolator2 = new ValueInterpolator([0], {
-      tension: 120,
-      friction: 20,
-      threshold: 0.001,
-    })
-
-    const interpolator3 = new ValueInterpolator([0], {
-      tension: 120,
-      friction: 20,
-      threshold: 0.001,
-    })
-
-    // Set different targets
-    interpolator1.setTarget([10])
-    interpolator2.setTarget([20])
-    interpolator3.setTarget([30])
-
-    // Start auto-interpolation for all (this uses requestAnimationFrame internally)
-    interpolator1.startAutoInterpolation()
-    interpolator2.startAutoInterpolation()
-    interpolator3.startAutoInterpolation()
-
-    // Wait for automatic interpolation to progress
-    await new Promise((resolve) => setTimeout(resolve, 500))
-
-    // Check that all interpolators are moving independently
-    const values1 = interpolator1.getCurrentValues()
-    const values2 = interpolator2.getCurrentValues()
-    const values3 = interpolator3.getCurrentValues()
-
-    console.log("Auto-interpolation values:", { values1, values2, values3 })
-
-    // All should have made significant progress toward their targets
-    expect(values1[0]).toBeGreaterThan(1) // Moving toward 10
-    expect(values2[0]).toBeGreaterThan(2) // Moving toward 20
-    expect(values3[0]).toBeGreaterThan(3) // Moving toward 30
-
-    // All should be running their own interpolation
-    expect(interpolator1.isInterpolating()).toBe(true)
-    expect(interpolator2.isInterpolating()).toBe(true)
-    expect(interpolator3.isInterpolating()).toBe(true)
-
-    // Values should be different (independent interpolation)
-    expect(values1[0]).not.toBeCloseTo(values2[0], 1)
-    expect(values2[0]).not.toBeCloseTo(values3[0], 1)
-
-    // Clean up
-    interpolator1.destroy()
-    interpolator2.destroy()
-    interpolator3.destroy()
-  })
-
-  it("should not interfere between manual and auto interpolation modes", async () => {
-    // Test mixing manual update() calls with auto-interpolation
-    const manualInterpolator = new ValueInterpolator([0], {
-      tension: 120,
-      friction: 20,
-      threshold: 0.001,
-    })
-
-    const autoInterpolator = new ValueInterpolator([0], {
-      tension: 120,
-      friction: 20,
-      threshold: 0.001,
-    })
-
-    // Set targets
-    manualInterpolator.setTarget([10])
-    autoInterpolator.setTarget([10])
-
-    // Start auto-interpolation for one
-    autoInterpolator.startAutoInterpolation()
-
-    // Manual updates for the other
-    const manualValues: number[] = []
-    for (let frame = 0; frame < 30; frame++) {
-      manualInterpolator.update(1 / 60)
-      manualValues.push(manualInterpolator.getCurrentValues()[0])
-      await new Promise((resolve) => setTimeout(resolve, 16)) // ~60fps
-    }
-
-    // Check auto interpolator after same time
-    const autoValue = autoInterpolator.getCurrentValues()[0]
-
-    console.log(
-      "Mixed mode - Manual final:",
-      manualValues[manualValues.length - 1],
-      "Auto final:",
-      autoValue,
-    )
-
-    // Both should have made progress
-    expect(manualValues[manualValues.length - 1]).toBeGreaterThan(0.5)
-    expect(autoValue).toBeGreaterThan(0.5)
-
-    // Manual interpolator should not be auto-interpolating
-    expect(manualInterpolator.isInterpolating()).toBe(false)
-    expect(autoInterpolator.isInterpolating()).toBe(true)
-
-    // Clean up
-    manualInterpolator.destroy()
-    autoInterpolator.destroy()
-  })
-
-  it("should handle rapid start/stop of auto-interpolation correctly", async () => {
-    // Test the edge case of rapidly starting and stopping auto-interpolation
-    const interpolator = new ValueInterpolator([0], {
-      tension: 120,
-      friction: 20,
-      threshold: 0.001,
-    })
-
-    interpolator.setTarget([10])
-
-    // Rapidly start and stop multiple times
-    for (let i = 0; i < 5; i++) {
-      interpolator.startAutoInterpolation()
-      expect(interpolator.isInterpolating()).toBe(true)
-
-      interpolator.stop()
-      expect(interpolator.isInterpolating()).toBe(false)
-
-      await new Promise((resolve) => setTimeout(resolve, 10))
-    }
-
-    // Final start
-    interpolator.startAutoInterpolation()
-    await new Promise((resolve) => setTimeout(resolve, 200))
-
-    // Should still be working correctly
-    const finalValue = interpolator.getCurrentValues()[0]
-    expect(finalValue).toBeGreaterThan(0.5)
-    expect(interpolator.isInterpolating()).toBe(true)
-
-    // Clean up
-    interpolator.destroy()
-  })
-
-  it("should handle multiple interpolators with rapid requestAnimationFrame setTarget calls", async () => {
-    // This test simulates the exact pattern used in RobotAnimator:
-    // useAutorun(() => {
-    //   requestAnimationFrame(() => updateJoints(newJointValues))
-    // })
-
-    const interpolator1 = new ValueInterpolator([0, 0, 0], {
-      tension: 120,
-      friction: 20,
-      threshold: 0.001,
-    })
-
-    const interpolator2 = new ValueInterpolator([0, 0, 0], {
-      tension: 120,
-      friction: 20,
-      threshold: 0.001,
-    })
-
-    const interpolator3 = new ValueInterpolator([0, 0, 0], {
-      tension: 120,
-      friction: 20,
-      threshold: 0.001,
-    })
-
-    const interpolators = [interpolator1, interpolator2, interpolator3]
-
-    // Simulate the RobotAnimator pattern where multiple components
-    // schedule setTarget calls via requestAnimationFrame
-    const targetSets = [
-      [1, 2, 3],
-      [4, 5, 6],
-      [7, 8, 9],
-    ]
-
-    // Schedule all setTarget calls via requestAnimationFrame (like RobotAnimator does)
-    targetSets.forEach((targets, index) => {
-      requestAnimationFrame(() => {
-        interpolators[index].setTarget(targets)
-      })
-    })
-
-    // Wait for requestAnimationFrame calls to execute
-    await new Promise((resolve) => setTimeout(resolve, 50))
-
-    // Now manually update all interpolators for several frames
-    for (let frame = 0; frame < 30; frame++) {
-      interpolators.forEach((interpolator) => {
-        interpolator.update(1 / 60)
-      })
-      await new Promise((resolve) => setTimeout(resolve, 16))
-    }
-
-    // Check the results
-    const finalValues = interpolators.map((interpolator) =>
-      interpolator.getCurrentValues(),
-    )
-
-    console.log("RAF setTarget pattern results:", finalValues)
-
-    // All should have made progress toward their respective targets
-    expect(finalValues[0][0]).toBeGreaterThan(0.3) // Moving toward 1
-    expect(finalValues[1][0]).toBeGreaterThan(1.0) // Moving toward 4
-    expect(finalValues[2][0]).toBeGreaterThan(2.0) // Moving toward 7
-
-    // Values should be different (no interference)
-    expect(finalValues[0][0]).not.toBeCloseTo(finalValues[1][0], 0)
-    expect(finalValues[1][0]).not.toBeCloseTo(finalValues[2][0], 0)
-
-    // Clean up
-    interpolators.forEach((interpolator) => {
-      interpolator.destroy()
-    })
-  })
-
-  it("should handle simultaneous setTarget calls without target blending interference", () => {
-    // Test the specific case where setTarget is called on multiple interpolators
-    // at nearly the same time (which could trigger the target blending bug)
-
-    const interpolator1 = new ValueInterpolator([0], {
-      tension: 120,
-      friction: 20,
-      threshold: 0.001,
-    })
-
-    const interpolator2 = new ValueInterpolator([0], {
-      tension: 120,
-      friction: 20,
-      threshold: 0.001,
-    })
-
-    // Call setTarget on both interpolators immediately (same timestamp)
-    const now = performance.now()
-    interpolator1.setTarget([10])
-    interpolator2.setTarget([20])
-
-    // Verify the targets were set correctly (not blended)
-    expect(interpolator1.getCurrentValues()[0]).toBe(0) // Should start at 0
-    expect(interpolator2.getCurrentValues()[0]).toBe(0) // Should start at 0
-
-    // Update once and check the direction of movement
-    interpolator1.update(1 / 60)
-    interpolator2.update(1 / 60)
-
-    const values1 = interpolator1.getCurrentValues()[0]
-    const values2 = interpolator2.getCurrentValues()[0]
-
-    console.log("Simultaneous setTarget - Values after 1 frame:", {
-      values1,
-      values2,
-    })
-
-    // Both should be moving in the right direction
-    expect(values1).toBeGreaterThan(0) // Moving toward 10
-    expect(values2).toBeGreaterThan(0) // Moving toward 20
-
-    // Interpolator2 should be moving faster (higher target)
-    expect(values2).toBeGreaterThan(values1)
-
-    // Clean up
-    interpolator1.destroy()
-    interpolator2.destroy()
-  })
-
-  it("should handle multiple interpolators with real requestAnimationFrame without interference", async () => {
-    // This test uses REAL requestAnimationFrame to simulate actual browser behavior
-    // Remove mocks temporarily for this test
-    vi.restoreAllMocks()
-
-    const interpolator1 = new ValueInterpolator([0], {
-      tension: 120,
-      friction: 20,
-      threshold: 0.001,
-    })
-
-    const interpolator2 = new ValueInterpolator([0], {
-      tension: 120,
-      friction: 20,
-      threshold: 0.001,
-    })
-
-    const interpolator3 = new ValueInterpolator([0], {
-      tension: 120,
-      friction: 20,
-      threshold: 0.001,
-    })
-
-    // Set targets
-    interpolator1.setTarget([10])
-    interpolator2.setTarget([20])
-    interpolator3.setTarget([30])
-
-    // Start real auto-interpolation (uses real requestAnimationFrame)
-    interpolator1.startAutoInterpolation()
-    interpolator2.startAutoInterpolation()
-    interpolator3.startAutoInterpolation()
-
-    // Wait for REAL animation frames to process
-    await new Promise((resolve) => {
-      let frameCount = 0
-      const checkProgress = () => {
-        frameCount++
-        if (frameCount >= 30) {
-          // Wait for ~30 real frames
-          resolve(undefined)
-        } else {
-          requestAnimationFrame(checkProgress)
-        }
-      }
-      requestAnimationFrame(checkProgress)
-    })
-
-    // Check results after real animation frames
-    const values1 = interpolator1.getCurrentValues()[0]
-    const values2 = interpolator2.getCurrentValues()[0]
-    const values3 = interpolator3.getCurrentValues()[0]
-
-    console.log("Real RAF test results:", { values1, values2, values3 })
-
-    // All should have made significant progress
-    expect(values1).toBeGreaterThan(1)
-    expect(values2).toBeGreaterThan(2)
-    expect(values3).toBeGreaterThan(3)
-
-    // Values should be proportional to their targets
-    expect(values2).toBeGreaterThan(values1 * 1.5) // 20 is 2x 10
-    expect(values3).toBeGreaterThan(values1 * 2.5) // 30 is 3x 10
-
-    // All should still be interpolating
-    expect(interpolator1.isInterpolating()).toBe(true)
-    expect(interpolator2.isInterpolating()).toBe(true)
-    expect(interpolator3.isInterpolating()).toBe(true)
-
-    // Clean up
-    interpolator1.destroy()
-    interpolator2.destroy()
-    interpolator3.destroy()
-
-    // Restore mocks for other tests
-    vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
-      return setTimeout(cb, 16)
-    })
-    vi.stubGlobal("cancelAnimationFrame", (id: number) => {
-      clearTimeout(id)
-    })
-  })
-
-  it("should handle multiple useFrame-like manual updates without interference", async () => {
-    // Simulate multiple React Three Fiber components using useFrame
-    const interpolator1 = new ValueInterpolator([0, 0, 0], {
-      tension: 120,
-      friction: 20,
-      threshold: 0.001,
-    })
-
-    const interpolator2 = new ValueInterpolator([0, 0, 0], {
-      tension: 120,
-      friction: 20,
-      threshold: 0.001,
-    })
-
-    // Set targets (like RobotAnimator would)
-    interpolator1.setTarget([1, 2, 3])
-    interpolator2.setTarget([4, 5, 6])
-
-    // Simulate useFrame callbacks running simultaneously for 500ms
-    const startTime = performance.now()
-    let lastTime = startTime
-
-    const runSimulation = () => {
-      return new Promise<void>((resolve) => {
-        const frame = () => {
-          const currentTime = performance.now()
-          const deltaTime = (currentTime - lastTime) / 1000 // Convert to seconds
-          lastTime = currentTime
-
-          // Both interpolators update with real delta timing (like useFrame)
-          interpolator1.update(deltaTime)
-          interpolator2.update(deltaTime)
-
-          // Continue for 500ms
-          if (currentTime - startTime < 500) {
-            requestAnimationFrame(frame)
-          } else {
-            resolve()
-          }
-        }
-        requestAnimationFrame(frame)
-      })
-    }
-
-    await runSimulation()
-
-    const values1 = interpolator1.getCurrentValues()
-    const values2 = interpolator2.getCurrentValues()
-
-    console.log("useFrame simulation results:", { values1, values2 })
-
-    // Both should have made good progress
-    expect(values1[0]).toBeGreaterThan(0.5) // Moving toward 1
-    expect(values1[1]).toBeGreaterThan(1.0) // Moving toward 2
-    expect(values1[2]).toBeGreaterThan(1.5) // Moving toward 3
-
-    expect(values2[0]).toBeGreaterThan(2.0) // Moving toward 4
-    expect(values2[1]).toBeGreaterThan(2.5) // Moving toward 5
-    expect(values2[2]).toBeGreaterThan(3.0) // Moving toward 6
-
-    // Values should be different (no interference)
-    expect(values1[0]).not.toBeCloseTo(values2[0], 0)
-    expect(values1[1]).not.toBeCloseTo(values2[1], 0)
-
-    // Clean up
-    interpolator1.destroy()
-    interpolator2.destroy()
-  })
-
-  it("should handle CartesianJoggingAxisVisualization pattern with multiple components", async () => {
-    // This test replicates the exact pattern from CartesianJoggingAxisVisualization
-    // where multiple components watch the same MobX observable and call setTarget via RAF
-
-    const interpolator1 = new ValueInterpolator([0, 0, 0, 0, 0, 0, 1], {
-      tension: 120,
-      friction: 20,
-      threshold: 0.001,
-    })
-
-    const interpolator2 = new ValueInterpolator([0, 0, 0, 0, 0, 0, 1], {
-      tension: 120,
-      friction: 20,
-      threshold: 0.001,
-    })
-
-    const interpolator3 = new ValueInterpolator([0, 0, 0, 0, 0, 0, 1], {
-      tension: 120,
-      friction: 20,
-      threshold: 0.001,
-    })
-
-    // Simulate poseToArray function results
-    const pose1 = [0.1, 0.2, 0.3, 0, 0, 0, 1] // Different poses for each component
-    const pose2 = [0.4, 0.5, 0.6, 0, 0, 0, 1]
-    const pose3 = [0.7, 0.8, 0.9, 0, 0, 0, 1]
-
-    // Simulate the useAutorun pattern where all components respond to the same data change
-    // and schedule their setTarget calls via requestAnimationFrame
-    const updateFlangePose1 = (newPose: number[]) => {
-      interpolator1.setTarget(newPose)
-    }
-    const updateFlangePose2 = (newPose: number[]) => {
-      interpolator2.setTarget(newPose)
-    }
-    const updateFlangePose3 = (newPose: number[]) => {
-      interpolator3.setTarget(newPose)
-    }
-
-    // All three components react to the same observable change and schedule RAF calls
-    requestAnimationFrame(() => updateFlangePose1(pose1))
-    requestAnimationFrame(() => updateFlangePose2(pose2))
-    requestAnimationFrame(() => updateFlangePose3(pose3))
-
-    // Wait for RAF calls to execute
-    await new Promise((resolve) => setTimeout(resolve, 32))
-
-    // Now simulate useFrame updates for all three interpolators
-    for (let frame = 0; frame < 30; frame++) {
-      const delta = 1 / 60
-      interpolator1.update(delta)
-      interpolator2.update(delta)
-      interpolator3.update(delta)
-      await new Promise((resolve) => setTimeout(resolve, 16))
-    }
-
-    const values1 = interpolator1.getCurrentValues()
-    const values2 = interpolator2.getCurrentValues()
-    const values3 = interpolator3.getCurrentValues()
-
-    console.log("CartesianJoggingAxisVisualization pattern results:")
-    console.log("Component 1:", values1.slice(0, 3))
-    console.log("Component 2:", values2.slice(0, 3))
-    console.log("Component 3:", values3.slice(0, 3))
-
-    // Each interpolator should be moving toward its own target
-    expect(values1[0]).toBeCloseTo(0.1, 1) // Should be close to target 0.1
-    expect(values1[1]).toBeCloseTo(0.2, 1) // Should be close to target 0.2
-    expect(values1[2]).toBeCloseTo(0.3, 1) // Should be close to target 0.3
-
-    expect(values2[0]).toBeCloseTo(0.4, 1) // Should be close to target 0.4
-    expect(values2[1]).toBeCloseTo(0.5, 1) // Should be close to target 0.5
-    expect(values2[2]).toBeCloseTo(0.6, 1) // Should be close to target 0.6
-
-    expect(values3[0]).toBeCloseTo(0.7, 1) // Should be close to target 0.7
-    expect(values3[1]).toBeCloseTo(0.8, 1) // Should be close to target 0.8
-    expect(values3[2]).toBeCloseTo(0.9, 1) // Should be close to target 0.9
-
-    // Clean up
-    interpolator1.destroy()
-    interpolator2.destroy()
-    interpolator3.destroy()
-  })
-
-  it("should handle rapid pose updates like MobX observable changes", async () => {
-    // Test the scenario where MobX triggers rapid updates to multiple components
-    const interpolator = new ValueInterpolator([0, 0, 0, 0, 0, 0, 1], {
-      tension: 120,
-      friction: 20,
-      threshold: 0.001,
-    })
-
-    // Simulate rapid pose changes (like rapidlyChangingMotionState.flange_pose)
-    const poseSequence = [
-      [0.1, 0.1, 0.1, 0, 0, 0, 1],
-      [0.11, 0.11, 0.11, 0, 0, 0, 1],
-      [0.12, 0.12, 0.12, 0, 0, 0, 1],
-      [0.13, 0.13, 0.13, 0, 0, 0, 1],
-      [0.15, 0.15, 0.15, 0, 0, 0, 1], // Final target
-    ]
-
-    // Simulate useAutorun triggering for each pose change with RAF delay
-    poseSequence.forEach((pose, index) => {
-      setTimeout(() => {
-        requestAnimationFrame(() => {
-          interpolator.setTarget(pose)
-        })
-      }, index * 5) // 5ms apart (very rapid)
-    })
-
-    // Wait for all RAF calls to execute
-    await new Promise((resolve) => setTimeout(resolve, 100))
-
-    // Run interpolation for a while
-    for (let frame = 0; frame < 50; frame++) {
-      interpolator.update(1 / 60)
-      await new Promise((resolve) => setTimeout(resolve, 16))
-    }
-
-    const finalValues = interpolator.getCurrentValues()
-    console.log("Rapid pose updates result:", finalValues.slice(0, 3))
-
-    // Should converge toward the final target [0.15, 0.15, 0.15]
-    expect(finalValues[0]).toBeCloseTo(0.15, 1)
-    expect(finalValues[1]).toBeCloseTo(0.15, 1)
-    expect(finalValues[2]).toBeCloseTo(0.15, 1)
-
-    // Clean up
-    interpolator.destroy()
-  })
-})