@pie-element/hotspot 10.0.0-beta.0 → 10.0.0-next.0

package/configure/src/__tests__/button.test.jsx

@@ -0,0 +1,198 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import RawButton from '../button';
+
+describe('RawButton', () => {
+  describe('rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<RawButton />);
+      expect(container).toBeTruthy();
+    });
+
+    it('should render with default label', () => {
+      const { getByText } = render(<RawButton />);
+      expect(getByText('Add')).toBeInTheDocument();
+    });
+
+    it('should render with custom label', () => {
+      const { getByText } = render(<RawButton label="Custom Label" />);
+      expect(getByText('Custom Label')).toBeInTheDocument();
+    });
+
+    it('should render as a button element', () => {
+      const { getByRole } = render(<RawButton label="Test Button" />);
+      expect(getByRole('button')).toBeInTheDocument();
+    });
+
+    it('should apply custom className', () => {
+      const { getByRole } = render(<RawButton label="Test" className="custom-class" />);
+      const button = getByRole('button');
+      expect(button).toHaveClass('custom-class');
+    });
+  });
+
+  describe('interactions', () => {
+    it('should call onClick when clicked', () => {
+      const onClick = jest.fn();
+      const { getByRole } = render(<RawButton label="Click Me" onClick={onClick} />);
+      
+      const button = getByRole('button');
+      fireEvent.click(button);
+      
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call onClick when disabled', () => {
+      const onClick = jest.fn();
+      const { getByRole } = render(<RawButton label="Disabled" onClick={onClick} disabled={true} />);
+      
+      const button = getByRole('button');
+      fireEvent.click(button);
+      
+      expect(onClick).not.toHaveBeenCalled();
+    });
+
+    it('should call onClick multiple times', () => {
+      const onClick = jest.fn();
+      const { getByRole } = render(<RawButton label="Multi Click" onClick={onClick} />);
+      
+      const button = getByRole('button');
+      fireEvent.click(button);
+      fireEvent.click(button);
+      fireEvent.click(button);
+      
+      expect(onClick).toHaveBeenCalledTimes(3);
+    });
+  });
+
+  describe('disabled state', () => {
+    it('should be enabled by default', () => {
+      const { getByRole } = render(<RawButton label="Test" />);
+      const button = getByRole('button');
+      expect(button).not.toBeDisabled();
+    });
+
+    it('should be disabled when disabled prop is true', () => {
+      const { getByRole } = render(<RawButton label="Test" disabled={true} />);
+      const button = getByRole('button');
+      expect(button).toBeDisabled();
+    });
+
+    it('should be enabled when disabled prop is false', () => {
+      const { getByRole } = render(<RawButton label="Test" disabled={false} />);
+      const button = getByRole('button');
+      expect(button).not.toBeDisabled();
+    });
+  });
+
+  describe('default props', () => {
+    it('should use default onClick when not provided', () => {
+      const { getByRole } = render(<RawButton label="Test" />);
+      const button = getByRole('button');
+      
+      // Should not throw error when clicked
+      expect(() => fireEvent.click(button)).not.toThrow();
+    });
+
+    it('should use default label "Add" when not provided', () => {
+      const { getByText } = render(<RawButton />);
+      expect(getByText('Add')).toBeInTheDocument();
+    });
+
+    it('should use empty className by default', () => {
+      const { getByRole } = render(<RawButton label="Test" />);
+      const button = getByRole('button');
+      expect(button.className).toBeTruthy(); // Will have MUI classes
+    });
+
+    it('should be enabled by default', () => {
+      const { getByRole } = render(<RawButton label="Test" />);
+      const button = getByRole('button');
+      expect(button).not.toBeDisabled();
+    });
+  });
+
+  describe('variant and size', () => {
+    it('should render with contained variant', () => {
+      const { getByRole } = render(<RawButton label="Test" />);
+      const button = getByRole('button');
+      expect(button).toHaveClass('MuiButton-contained');
+    });
+
+    it('should render with small size', () => {
+      const { getByRole } = render(<RawButton label="Test" />);
+      const button = getByRole('button');
+      expect(button).toHaveClass('MuiButton-sizeSmall');
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle empty label', () => {
+      const { getByRole } = render(<RawButton label="" />);
+      const button = getByRole('button');
+      expect(button).toBeInTheDocument();
+      expect(button.textContent).toBe('');
+    });
+
+    it('should handle very long label', () => {
+      const longLabel = 'This is a very long button label that might wrap or overflow';
+      const { getByText } = render(<RawButton label={longLabel} />);
+      expect(getByText(longLabel)).toBeInTheDocument();
+    });
+
+    it('should handle special characters in label', () => {
+      const specialLabel = '!@#$%^&*()_+-=[]{}|;:",.<>?/~`';
+      const { getByText } = render(<RawButton label={specialLabel} />);
+      expect(getByText(specialLabel)).toBeInTheDocument();
+    });
+
+    it('should handle Unicode characters in label', () => {
+      const unicodeLabel = '🚀 Launch 你好 مرحبا';
+      const { getByText } = render(<RawButton label={unicodeLabel} />);
+      expect(getByText(unicodeLabel)).toBeInTheDocument();
+    });
+
+    it('should handle null onClick gracefully with default', () => {
+      const { getByRole } = render(<RawButton label="Test" onClick={null} />);
+      const button = getByRole('button');
+      
+      // Should use default onClick
+      expect(() => fireEvent.click(button)).not.toThrow();
+    });
+  });
+
+  describe('prop updates', () => {
+    it('should update label when prop changes', () => {
+      const { getByText, rerender } = render(<RawButton label="Initial" />);
+      expect(getByText('Initial')).toBeInTheDocument();
+      
+      rerender(<RawButton label="Updated" />);
+      expect(getByText('Updated')).toBeInTheDocument();
+    });
+
+    it('should update disabled state when prop changes', () => {
+      const { getByRole, rerender } = render(<RawButton label="Test" disabled={false} />);
+      const button = getByRole('button');
+      expect(button).not.toBeDisabled();
+      
+      rerender(<RawButton label="Test" disabled={true} />);
+      expect(button).toBeDisabled();
+    });
+
+    it('should update onClick handler when prop changes', () => {
+      const onClick1 = jest.fn();
+      const onClick2 = jest.fn();
+      const { getByRole, rerender } = render(<RawButton label="Test" onClick={onClick1} />);
+      
+      const button = getByRole('button');
+      fireEvent.click(button);
+      expect(onClick1).toHaveBeenCalledTimes(1);
+      expect(onClick2).not.toHaveBeenCalled();
+      
+      rerender(<RawButton label="Test" onClick={onClick2} />);
+      fireEvent.click(button);
+      expect(onClick1).toHaveBeenCalledTimes(1);
+      expect(onClick2).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/configure/src/__tests__/hotspot-circle.test.jsx

@@ -0,0 +1,259 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Konva from 'konva';
+import CircleComponent from '../hotspot-circle';
+
+Konva.isBrowser = false;
+
+jest.mock('react-konva', () => {
+  const React = require('react');
+  return {
+    Circle: React.forwardRef(({ onClick, onTap, onMouseEnter, onMouseLeave, onDragStart, onDragEnd, onTransformStart, onTransformEnd, ...props }, ref) => {
+      const handleClick = (e) => {
+        if (onClick) onClick(e);
+        if (onTap) onTap(e);
+      };
+      return React.createElement('div', {
+        ref,
+        'data-testid': 'circle',
+        onClick: handleClick,
+        onMouseEnter,
+        onMouseLeave,
+        ...props,
+      });
+    }),
+    Group: ({ children, onMouseEnter, onMouseLeave, ...props }) => 
+      React.createElement('div', { 'data-testid': 'group', onMouseEnter, onMouseLeave, ...props }, children),
+    Transformer: React.forwardRef(({ borderStroke, ...props }, ref) => {
+      return React.createElement('div', { ref, 'data-testid': 'transformer', 'data-border-stroke': borderStroke, ...props });
+    }),
+  };
+});
+
+jest.mock('../DeleteWidget', () => {
+  return function DeleteWidget({ id, handleWidgetClick }) {
+    return (
+      <div
+        data-testid="delete-widget"
+        data-id={id}
+        onClick={() => handleWidgetClick(id)}
+      />
+    );
+  };
+});
+
+describe('CircleComponent', () => {
+  let defaultProps;
+
+  beforeEach(() => {
+    defaultProps = {
+      id: 'circle1',
+      x: 100,
+      y: 150,
+      radius: 50,
+      hotspotColor: '#FF0000',
+      selectedHotspotColor: '#00FF00',
+      outlineColor: '#0000FF',
+      hoverOutlineColor: '#FFFF00',
+      correct: false,
+      isDrawing: false,
+      onClick: jest.fn(),
+      onDeleteShape: jest.fn(),
+      onDragEnd: jest.fn(),
+      strokeWidth: 5,
+    };
+
+    document.body.style.cursor = 'default';
+  });
+
+  afterEach(() => {
+    document.body.style.cursor = 'default';
+  });
+
+  describe('rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<CircleComponent {...defaultProps} />);
+      expect(container).toBeTruthy();
+    });
+
+    it('should render Group and Circle', () => {
+      const { getByTestId } = render(<CircleComponent {...defaultProps} />);
+      expect(getByTestId('group')).toBeInTheDocument();
+      expect(getByTestId('circle')).toBeInTheDocument();
+    });
+
+    it('should render with correct radius', () => {
+      const { getByTestId } = render(<CircleComponent {...defaultProps} radius={75} />);
+      const circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('radius', '75');
+    });
+
+    it('should use minimum radius of 5 for invalid radius', () => {
+      const { getByTestId } = render(<CircleComponent {...defaultProps} radius={0} />);
+      const circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('radius', '5');
+    });
+
+    it('should use minimum radius of 5 for NaN radius', () => {
+      const { getByTestId } = render(<CircleComponent {...defaultProps} radius={NaN} />);
+      const circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('radius', '5');
+    });
+
+    it('should use minimum radius of 5 for negative radius', () => {
+      const { getByTestId } = render(<CircleComponent {...defaultProps} radius={-10} />);
+      const circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('radius', '5');
+    });
+
+    it('should render with hotspot color when not correct', () => {
+      const { getByTestId } = render(<CircleComponent {...defaultProps} correct={false} />);
+      const circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('fill', '#FF0000');
+    });
+
+    it('should render with selected color when correct', () => {
+      const { getByTestId } = render(<CircleComponent {...defaultProps} correct={true} />);
+      const circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('fill', '#00FF00');
+    });
+  });
+
+  describe('interactions', () => {
+    it('should call onClick when clicked', () => {
+      const onClick = jest.fn();
+      const { getByTestId } = render(<CircleComponent {...defaultProps} onClick={onClick} />);
+      const circle = getByTestId('circle');
+      
+      fireEvent.click(circle);
+      
+      expect(onClick).toHaveBeenCalledWith('circle1');
+    });
+
+    it('should not call onClick when radius is 0 and isDrawing', () => {
+      const onClick = jest.fn();
+      const { getByTestId } = render(
+        <CircleComponent {...defaultProps} radius={0} isDrawing={true} onClick={onClick} />
+      );
+      const circle = getByTestId('circle');
+      
+      fireEvent.click(circle);
+      
+      expect(onClick).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('hover state', () => {
+    it('should not show Transformer when not hovered', () => {
+      const { queryByTestId } = render(<CircleComponent {...defaultProps} />);
+      
+      expect(queryByTestId('transformer')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('drag functionality', () => {
+    it('should call onDragEnd with new position', () => {
+      const onDragEnd = jest.fn();
+      const { getByTestId } = render(
+        <CircleComponent {...defaultProps} onDragEnd={onDragEnd} />
+      );
+      const circle = getByTestId('circle');
+      
+      const mockEvent = {
+        target: {
+          x: () => 200,
+          y: () => 250,
+        },
+      };
+      
+      if (circle.onDragEnd) {
+        circle.onDragEnd(mockEvent);
+      }
+    });
+  });
+
+  describe('resize functionality', () => {
+    it('should handle resize with minimum radius constraint', () => {
+      const onDragEnd = jest.fn();
+      const { getByTestId } = render(
+        <CircleComponent {...defaultProps} onDragEnd={onDragEnd} />
+      );
+      
+      // This tests the component's ability to handle transforms
+      // In actual usage, the transformer would modify the node's scale
+      const transformer = getByTestId('group');
+      expect(transformer).toBeInTheDocument();
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle very large radius', () => {
+      const { getByTestId } = render(<CircleComponent {...defaultProps} radius={500} />);
+      const circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('radius', '500');
+    });
+
+    it('should handle position at origin', () => {
+      const { getByTestId } = render(<CircleComponent {...defaultProps} x={0} y={0} />);
+      const circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('x', '0');
+      expect(circle).toHaveAttribute('y', '0');
+    });
+
+    it('should handle negative positions', () => {
+      const { getByTestId } = render(<CircleComponent {...defaultProps} x={-50} y={-75} />);
+      const circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('x', '-50');
+      expect(circle).toHaveAttribute('y', '-75');
+    });
+
+    it('should use default correct value of false', () => {
+      const { getByTestId } = render(<CircleComponent {...defaultProps} correct={undefined} />);
+      const circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('fill', '#FF0000');
+    });
+
+    it('should handle missing selectedHotspotColor', () => {
+      const { getByTestId } = render(
+        <CircleComponent {...defaultProps} correct={true} selectedHotspotColor={undefined} />
+      );
+      const circle = getByTestId('circle');
+      // Should fall back to hotspotColor
+      expect(circle).toHaveAttribute('fill', '#FF0000');
+    });
+  });
+
+  describe('prop updates', () => {
+    it('should update radius when prop changes', () => {
+      const { getByTestId, rerender } = render(<CircleComponent {...defaultProps} radius={50} />);
+      let circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('radius', '50');
+      
+      rerender(<CircleComponent {...defaultProps} radius={75} />);
+      circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('radius', '75');
+    });
+
+    it('should update color when correct prop changes', () => {
+      const { getByTestId, rerender } = render(<CircleComponent {...defaultProps} correct={false} />);
+      let circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('fill', '#FF0000');
+      
+      rerender(<CircleComponent {...defaultProps} correct={true} />);
+      circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('fill', '#00FF00');
+    });
+
+    it('should update position when props change', () => {
+      const { getByTestId, rerender } = render(<CircleComponent {...defaultProps} x={100} y={150} />);
+      let circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('x', '100');
+      expect(circle).toHaveAttribute('y', '150');
+      
+      rerender(<CircleComponent {...defaultProps} x={200} y={250} />);
+      circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('x', '200');
+      expect(circle).toHaveAttribute('y', '250');
+    });
+  });
+});

package/configure/src/__tests__/hotspot-palette.test.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Palette from '../hotspot-palette';
+
+describe('Palette', () => {
+  let defaultProps;
+
+  beforeEach(() => {
+    defaultProps = {
+      hotspotColor: '#FF0000',
+      outlineColor: '#0000FF',
+      hotspotList: ['#FF0000', '#00FF00', '#0000FF', '#FFFF00'],
+      outlineList: ['#000000', '#0000FF', '#FF0000', '#00FF00'],
+      onHotspotColorChange: jest.fn(),
+      onOutlineColorChange: jest.fn(),
+    };
+  });
+
+  describe('rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<Palette {...defaultProps} />);
+      expect(container).toBeTruthy();
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle empty hotspot list gracefully', () => {
+      const { container } = render(<Palette {...defaultProps} hotspotList={[]} />);
+      expect(container).toBeTruthy();
+    });
+
+    it('should handle empty outline list gracefully', () => {
+      const { container } = render(<Palette {...defaultProps} outlineList={[]} />);
+      expect(container).toBeTruthy();
+    });
+  });
+
+  describe('onChange handler', () => {
+    it('should create onChange handler for hotspot', () => {
+      const component = new Palette(defaultProps);
+      const handler = component.onChange('hotspot');
+      expect(typeof handler).toBe('function');
+    });
+
+    it('should create onChange handler for outline', () => {
+      const component = new Palette(defaultProps);
+      const handler = component.onChange('outline');
+      expect(typeof handler).toBe('function');
+    });
+
+    it('should call onHotspotColorChange when hotspot handler is invoked', () => {
+      const onHotspotColorChange = jest.fn();
+      const component = new Palette({ ...defaultProps, onHotspotColorChange });
+      const handler = component.onChange('hotspot');
+      
+      handler({ target: { value: '#00FF00' } });
+      
+      expect(onHotspotColorChange).toHaveBeenCalledWith('#00FF00');
+    });
+
+    it('should call onOutlineColorChange when outline handler is invoked', () => {
+      const onOutlineColorChange = jest.fn();
+      const component = new Palette({ ...defaultProps, onOutlineColorChange });
+      const handler = component.onChange('outline');
+      
+      handler({ target: { value: '#FF0000' } });
+      
+      expect(onOutlineColorChange).toHaveBeenCalledWith('#FF0000');
+    });
+  });
+});