@wandelbots/wandelbots-js-react-components 2.26.0-pr.feature-update-to-react-19.361.3244daa → 2.26.0-pr.feature-update-to-react-19.361.ec4e097

package/dist/test/setup.d.ts

@@ -1,2 +1,2 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";
 //# sourceMappingURL=setup.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.26.0-pr.feature-update-to-react-19.361.3244daa",
+  "version": "2.26.0-pr.feature-update-to-react-19.361.ec4e097",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/robots/RobotAnimator.test.tsx

@@ -0,0 +1,349 @@
+import { Canvas } from "@react-three/fiber"
+import { act, render, waitFor } from "@testing-library/react"
+import type {
+  DHParameter,
+  MotionGroupStateResponse,
+} from "@wandelbots/nova-api/v1"
+import React from "react"
+import { Object3D } from "three"
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+import RobotAnimator from "./RobotAnimator"
+
+// Mock the dependencies
+vi.mock("../utils/hooks", () => ({
+  useAutorun: vi.fn(),
+}))
+
+vi.mock("./robotModelLogic", () => ({
+  collectJoints: vi.fn(),
+}))
+
+vi.mock("@react-spring/three", () => ({
+  Globals: {
+    assign: vi.fn(),
+  },
+  useSpring: vi.fn(),
+}))
+
+vi.mock("@react-three/fiber", async () => {
+  const actual = await vi.importActual("@react-three/fiber")
+  return {
+    ...actual,
+    useThree: () => ({
+      invalidate: vi.fn(),
+    }),
+  }
+})
+
+import { useSpring } from "@react-spring/three"
+import { useAutorun } from "../utils/hooks"
+import { collectJoints } from "./robotModelLogic"
+
+const mockUseAutorun = useAutorun as any
+const mockCollectJoints = collectJoints as any
+const mockUseSpring = useSpring as any
+
+describe("RobotAnimator", () => {
+  const mockMotionState: MotionGroupStateResponse = {
+    state: {
+      joint_position: {
+        joints: [0, 0.5, 1, 1.5, 2, 2.5],
+      },
+    },
+  } as any
+
+  const mockDhParameters: DHParameter[] = [
+    { theta: 0, reverse_rotation_direction: false },
+    { theta: 0.1, reverse_rotation_direction: true },
+    { theta: 0.2, reverse_rotation_direction: false },
+    { theta: 0.3, reverse_rotation_direction: true },
+    { theta: 0.4, reverse_rotation_direction: false },
+    { theta: 0.5, reverse_rotation_direction: true },
+  ]
+
+  let mockJointObjects: Object3D[]
+  let mockAxisValues: any
+  let mockSetSpring: any
+  let mockInvalidate: any
+  let mockSpringConfig: any
+  let mockAutorunCallback: any
+
+  beforeEach(() => {
+    // Create mock joint objects
+    mockJointObjects = Array.from({ length: 6 }, (_, i) => {
+      const obj = new Object3D()
+      obj.name = `Joint_J${i + 1}`
+      obj.rotation.y = 0
+      return obj
+    })
+
+    // Mock axis values object that acts like spring values
+    mockAxisValues = {}
+    for (let i = 0; i < 6; i++) {
+      mockAxisValues[i] = {
+        get: vi
+          .fn()
+          .mockReturnValue(mockMotionState.state.joint_position.joints[i]),
+      }
+    }
+
+    mockSetSpring = {
+      start: vi.fn(),
+    }
+
+    mockInvalidate = vi.fn()
+
+    // Mock spring config that will be returned by useSpring
+    mockSpringConfig = {
+      onChange: vi.fn(),
+      onResolve: vi.fn(),
+    }
+
+    // Mock collectJoints to return our mock joint objects
+    mockCollectJoints.mockReturnValue(mockJointObjects)
+
+    // Mock useSpring to return our mock values and accept a factory function
+    mockUseSpring.mockImplementation((factory: any) => {
+      const config = factory()
+      mockSpringConfig.onChange = config.onChange
+      mockSpringConfig.onResolve = config.onResolve
+      return [mockAxisValues, mockSetSpring]
+    })
+
+    // Mock useAutorun to store the callback
+    mockUseAutorun.mockImplementation((callback: any) => {
+      mockAutorunCallback = callback
+    })
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  const renderRobotAnimator = (
+    props: Partial<React.ComponentProps<typeof RobotAnimator>> = {},
+  ) => {
+    const defaultProps = {
+      rapidlyChangingMotionState: mockMotionState,
+      dhParameters: mockDhParameters,
+      children: <mesh />,
+    }
+
+    return render(
+      <Canvas>
+        <RobotAnimator {...defaultProps} {...props} />
+      </Canvas>,
+    )
+  }
+
+  it("should render without crashing", () => {
+    expect(() => renderRobotAnimator()).not.toThrow()
+  })
+
+  it("should initialize joint objects when group is set", async () => {
+    const { container } = renderRobotAnimator()
+
+    // Wait for the component to render and set up
+    await waitFor(() => {
+      expect(mockCollectJoints).toHaveBeenCalled()
+    })
+  })
+
+  it("should call onRotationChanged when provided", async () => {
+    const mockOnRotationChanged = vi.fn()
+
+    renderRobotAnimator({ onRotationChanged: mockOnRotationChanged })
+
+    // Wait for initialization
+    await waitFor(() => {
+      expect(mockCollectJoints).toHaveBeenCalled()
+    })
+
+    // Simulate spring onChange callback
+    await act(async () => {
+      if (mockSpringConfig.onChange) {
+        mockSpringConfig.onChange()
+      }
+    })
+
+    expect(mockOnRotationChanged).toHaveBeenCalledWith(
+      mockJointObjects,
+      expect.arrayContaining([0, 0.5, 1, 1.5, 2, 2.5]),
+    )
+  })
+
+  it("should update joint rotations when onRotationChanged is not provided", async () => {
+    renderRobotAnimator()
+
+    // Wait for initialization
+    await waitFor(() => {
+      expect(mockCollectJoints).toHaveBeenCalled()
+    })
+
+    await act(async () => {
+      // Simulate spring animation callback
+      if (mockSpringConfig.onChange) {
+        mockSpringConfig.onChange()
+      }
+    })
+
+    // Check that joint rotations were updated according to DH parameters
+    mockJointObjects.forEach((joint, index) => {
+      const dhParam = mockDhParameters[index]
+      const rotationSign = dhParam.reverse_rotation_direction ? -1 : 1
+      const expectedRotation =
+        rotationSign * mockMotionState.state.joint_position.joints[index]! +
+        dhParam.theta!
+
+      expect(joint.rotation.y).toBe(expectedRotation)
+    })
+  })
+
+  it("should not update rotations when not initialized", async () => {
+    // Mock collectJoints to return empty array (not initialized)
+    mockCollectJoints.mockReturnValue([])
+
+    renderRobotAnimator()
+
+    await act(async () => {
+      // Simulate spring animation callback
+      if (mockSpringConfig.onChange) {
+        mockSpringConfig.onChange()
+      }
+    })
+
+    // Verify that joint rotations were not modified
+    mockJointObjects.forEach((joint) => {
+      expect(joint.rotation.y).toBe(0)
+    })
+  })
+
+  it("should handle spring updates correctly", async () => {
+    renderRobotAnimator()
+
+    const newValues = [1, 2, 3, 4, 5, 6]
+
+    // Wait for initialization
+    await waitFor(() => {
+      expect(mockCollectJoints).toHaveBeenCalled()
+    })
+
+    await act(async () => {
+      // Simulate motion state update by calling the autorun callback
+      if (mockAutorunCallback) {
+        mockAutorunCallback()
+      }
+    })
+
+    expect(mockSetSpring.start).toHaveBeenCalledWith(
+      expect.objectContaining({
+        0: 0,
+        1: 0.5,
+        2: 1,
+        3: 1.5,
+        4: 2,
+        5: 2.5,
+      }),
+    )
+  })
+
+  it("should handle group reference being null", async () => {
+    renderRobotAnimator()
+
+    // This should not throw an error
+    await act(async () => {
+      // Component should handle null group reference gracefully
+    })
+
+    expect(mockCollectJoints).toHaveBeenCalled()
+  })
+
+  it("should call invalidate when updating rotations", async () => {
+    renderRobotAnimator()
+
+    // Wait for initialization
+    await waitFor(() => {
+      expect(mockCollectJoints).toHaveBeenCalled()
+    })
+
+    await act(async () => {
+      // Simulate spring animation callback
+      if (mockSpringConfig.onChange) {
+        mockSpringConfig.onChange()
+      }
+    })
+
+    // Note: invalidate is called from useThree hook which is mocked
+    // The actual invalidate call would happen in the real component
+    expect(mockSpringConfig.onChange).toHaveBeenCalled()
+  })
+
+  it("should handle onResolve callback", async () => {
+    const mockOnRotationChanged = vi.fn()
+    renderRobotAnimator({ onRotationChanged: mockOnRotationChanged })
+
+    // Wait for initialization
+    await waitFor(() => {
+      expect(mockCollectJoints).toHaveBeenCalled()
+    })
+
+    await act(async () => {
+      // Simulate spring onResolve callback
+      if (mockSpringConfig.onResolve) {
+        mockSpringConfig.onResolve()
+      }
+    })
+
+    expect(mockOnRotationChanged).toHaveBeenCalled()
+  })
+
+  it("should filter out undefined joint values", async () => {
+    const motionStateWithUndefined = {
+      state: {
+        joint_position: {
+          joints: [1, undefined, 3, undefined, 5, 6],
+        },
+      },
+    } as any
+
+    renderRobotAnimator({
+      rapidlyChangingMotionState: motionStateWithUndefined,
+    })
+
+    // Wait for initialization
+    await waitFor(() => {
+      expect(mockCollectJoints).toHaveBeenCalled()
+    })
+
+    await act(async () => {
+      if (mockAutorunCallback) {
+        mockAutorunCallback()
+      }
+    })
+
+    // Should call setSpring.start with filtered values
+    expect(mockSetSpring.start).toHaveBeenCalledWith(
+      expect.objectContaining({
+        0: 1,
+        1: 3,
+        2: 5,
+        3: 6,
+      }),
+    )
+  })
+
+  it("should handle empty joint objects gracefully", async () => {
+    mockCollectJoints.mockReturnValue([])
+
+    const { container } = renderRobotAnimator()
+
+    await act(async () => {
+      if (mockAutorunCallback) {
+        mockAutorunCallback()
+      }
+    })
+
+    // Should not throw and should not call setSpring.start
+    expect(mockSetSpring.start).not.toHaveBeenCalled()
+  })
+})

package/src/components/robots/RobotAnimator.tsx

@@ -4,7 +4,7 @@ import type {
   DHParameter,
   MotionGroupStateResponse,
 } from "@wandelbots/nova-api/v1"
-import React, { useEffect, useRef, useState, useCallback } from "react"
+import React, { useCallback, useEffect, useRef, useState } from "react"
 import type { Group, Object3D } from "three"
 import { useAutorun } from "../utils/hooks"
 import { collectJoints } from "./robotModelLogic"

package/src/components/robots/RobotAnimator.unit.test.tsx

@@ -1,6 +1,9 @@
-import { vi, describe, it, expect, beforeEach, afterEach } from "vitest"
+import type {
+  DHParameter,
+  MotionGroupStateResponse,
+} from "@wandelbots/nova-api/v1"
 import { Object3D } from "three"
-import type { DHParameter, MotionGroupStateResponse } from "@wandelbots/nova-api/v1"
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
 
 // Import the component for testing
 import RobotAnimator from "./RobotAnimator"
@@ -27,9 +30,9 @@ vi.mock("@react-three/fiber", () => ({
   }),
 }))
 
+import { useSpring } from "@react-spring/three"
 import { useAutorun } from "../utils/hooks"
 import { collectJoints } from "./robotModelLogic"
-import { useSpring } from "@react-spring/three"
 
 const mockUseAutorun = useAutorun as any
 const mockCollectJoints = collectJoints as any
@@ -72,7 +75,9 @@ describe("RobotAnimator Logic Tests", () => {
     mockAxisValues = {}
     for (let i = 0; i < 6; i++) {
       mockAxisValues[i] = {
-        get: vi.fn().mockReturnValue(mockMotionState.state.joint_position.joints[i]),
+        get: vi
+          .fn()
+          .mockReturnValue(mockMotionState.state.joint_position.joints[i]),
       }
     }
 
@@ -123,7 +128,7 @@ describe("RobotAnimator Logic Tests", () => {
       const dhParam = dhParameters[index]
       const rotationOffset = dhParam.theta || 0
       const rotationSign = dhParam.reverse_rotation_direction ? -1 : 1
-      
+
       joint.rotation.y = rotationSign * jointValues[index]! + rotationOffset
     })
 
@@ -140,7 +145,7 @@ describe("RobotAnimator Logic Tests", () => {
     // Test the filtering logic that removes undefined values
     const inputJoints = [1, undefined, 3, undefined, 5, 6]
     const filteredJoints = inputJoints.filter((item) => item !== undefined)
-    
+
     expect(filteredJoints).toEqual([1, 3, 5, 6])
     expect(filteredJoints.length).toBe(4)
   })
@@ -148,25 +153,25 @@ describe("RobotAnimator Logic Tests", () => {
   it("should test DH parameter application", () => {
     // Test various DH parameter combinations
     const testCases = [
-      { 
-        jointValue: 1.0, 
+      {
+        jointValue: 1.0,
         dhParam: { theta: 0, reverse_rotation_direction: false },
-        expected: 1.0 
+        expected: 1.0,
       },
-      { 
-        jointValue: 1.0, 
+      {
+        jointValue: 1.0,
         dhParam: { theta: 0.5, reverse_rotation_direction: false },
-        expected: 1.5 
+        expected: 1.5,
       },
-      { 
-        jointValue: 1.0, 
+      {
+        jointValue: 1.0,
         dhParam: { theta: 0, reverse_rotation_direction: true },
-        expected: -1.0 
+        expected: -1.0,
       },
-      { 
-        jointValue: 1.0, 
+      {
+        jointValue: 1.0,
         dhParam: { theta: 0.5, reverse_rotation_direction: true },
-        expected: -0.5 
+        expected: -0.5,
       },
     ]
 
@@ -174,9 +179,9 @@ describe("RobotAnimator Logic Tests", () => {
       const joint = new Object3D()
       const rotationOffset = dhParam.theta || 0
       const rotationSign = dhParam.reverse_rotation_direction ? -1 : 1
-      
+
       joint.rotation.y = rotationSign * jointValue + rotationOffset
-      
+
       expect(joint.rotation.y).toBeCloseTo(expected, 5)
     })
   })
@@ -203,10 +208,11 @@ describe("RobotAnimator Logic Tests", () => {
   it("should test empty joint array handling", () => {
     // Test behavior when no joints are available
     const emptyJoints: Object3D[] = []
-    
+
     // This simulates the isInitialized check in the component
-    const isInitialized = emptyJoints.length > 0 && emptyJoints.every((obj) => obj != null)
-    
+    const isInitialized =
+      emptyJoints.length > 0 && emptyJoints.every((obj) => obj != null)
+
     expect(isInitialized).toBe(false)
   })
 
@@ -214,10 +220,12 @@ describe("RobotAnimator Logic Tests", () => {
     // Test the joint object validation logic
     const validJoints = [new Object3D(), new Object3D(), new Object3D()]
     const invalidJoints = [new Object3D(), null, new Object3D()]
-    
-    const isValidJointsInitialized = validJoints.length > 0 && validJoints.every((obj) => obj != null)
-    const isInvalidJointsInitialized = invalidJoints.length > 0 && invalidJoints.every((obj) => obj != null)
-    
+
+    const isValidJointsInitialized =
+      validJoints.length > 0 && validJoints.every((obj) => obj != null)
+    const isInvalidJointsInitialized =
+      invalidJoints.length > 0 && invalidJoints.every((obj) => obj != null)
+
     expect(isValidJointsInitialized).toBe(true)
     expect(isInvalidJointsInitialized).toBe(false)
   })
@@ -227,7 +235,9 @@ describe("RobotAnimator Logic Tests", () => {
     expect(mockMotionState.state).toBeDefined()
     expect(mockMotionState.state.joint_position).toBeDefined()
     expect(mockMotionState.state.joint_position.joints).toBeDefined()
-    expect(Array.isArray(mockMotionState.state.joint_position.joints)).toBe(true)
+    expect(Array.isArray(mockMotionState.state.joint_position.joints)).toBe(
+      true,
+    )
     expect(mockMotionState.state.joint_position.joints.length).toBe(6)
   })
 
@@ -245,10 +255,10 @@ describe("RobotAnimator Logic Tests", () => {
     const mockCallback = vi.fn()
     const testJoints = [new Object3D(), new Object3D()]
     const testValues = [1.0, 2.0]
-    
+
     // Simulate calling the callback
     mockCallback(testJoints, testValues)
-    
+
     expect(mockCallback).toHaveBeenCalledWith(testJoints, testValues)
     expect(mockCallback).toHaveBeenCalledTimes(1)
   })
@@ -257,29 +267,32 @@ describe("RobotAnimator Logic Tests", () => {
     // Test the initialization state logic that prevents race conditions
     let isInitialized = false
     const joints: Object3D[] = []
-    
+
     // Simulate setGroupRef logic
     function simulateSetGroupRef(group: any) {
       if (!group) {
         isInitialized = false
         return
       }
-      
+
       // Simulate collectJoints
       const collectedJoints = group ? [new Object3D(), new Object3D()] : []
-      
+
       // Only mark as initialized if we have valid joint objects
-      if (collectedJoints.length > 0 && collectedJoints.every((obj) => obj != null)) {
+      if (
+        collectedJoints.length > 0 &&
+        collectedJoints.every((obj) => obj != null)
+      ) {
         isInitialized = true
       } else {
         isInitialized = false
       }
     }
-    
+
     // Test null group
     simulateSetGroupRef(null)
     expect(isInitialized).toBe(false)
-    
+
     // Test valid group
     simulateSetGroupRef({ type: "Group" })
     expect(isInitialized).toBe(true)

package/src/test/setup.ts

@@ -1,5 +1,5 @@
-import '@testing-library/jest-dom'
-import { beforeAll, vi } from 'vitest'
+import "@testing-library/jest-dom"
+import { beforeAll, vi } from "vitest"
 
 // Mock ResizeObserver
 global.ResizeObserver = vi.fn().mockImplementation(() => ({
@@ -16,9 +16,9 @@ global.IntersectionObserver = vi.fn().mockImplementation(() => ({
 }))
 
 // Mock matchMedia
-Object.defineProperty(window, 'matchMedia', {
+Object.defineProperty(window, "matchMedia", {
   writable: true,
-  value: vi.fn().mockImplementation(query => ({
+  value: vi.fn().mockImplementation((query) => ({
     matches: false,
     media: query,
     onchange: null,
@@ -95,15 +95,17 @@ const mockWebGLContext = {
   TRUE: 1,
 }
 
-HTMLCanvasElement.prototype.getContext = vi.fn().mockImplementation((contextType) => {
-  if (contextType === 'webgl' || contextType === 'experimental-webgl') {
-    return mockWebGLContext
-  }
-  return null
-})
+HTMLCanvasElement.prototype.getContext = vi
+  .fn()
+  .mockImplementation((contextType) => {
+    if (contextType === "webgl" || contextType === "experimental-webgl") {
+      return mockWebGLContext
+    }
+    return null
+  })
 
 beforeAll(() => {
   // Suppress console errors in tests
-  vi.spyOn(console, 'error').mockImplementation(() => {})
-  vi.spyOn(console, 'warn').mockImplementation(() => {})
+  vi.spyOn(console, "error").mockImplementation(() => {})
+  vi.spyOn(console, "warn").mockImplementation(() => {})
 })