@pie-element/hotspot 11.0.5-esm.0 → 11.1.0-next.0

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-container.test.js

@@ -1,8 +1,21 @@
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
 import { Container } from '../hotspot-container';
 import { getAllShapes, groupShapes } from '../utils';
 
+jest.mock('react-konva', () => {
+  const React = require('react');
+  return {
+    Stage: ({ children, ...props }) => React.createElement('div', { 'data-testid': 'stage', ...props }, children),
+    Layer: ({ children, ...props }) => React.createElement('div', { 'data-testid': 'layer', ...props }, children),
+    Rect: (props) => React.createElement('div', { 'data-testid': 'rect', ...props }),
+    Circle: (props) => React.createElement('div', { 'data-testid': 'circle', ...props }),
+    Line: (props) => React.createElement('div', { 'data-testid': 'line', ...props }),
+    Group: ({ children, ...props }) => React.createElement('div', { 'data-testid': 'group', ...props }, children),
+    Image: (props) => React.createElement('div', { 'data-testid': 'image', ...props }),
+  };
+});
+
 const model = () => ({
   imageUrl: 'https://cdn.fluence.net/image/0240eb1455ce4c4bb6180232347b6aef_W',
   shapes: groupShapes(
@@ -114,18 +127,36 @@ describe('HotspotContainer', () => {
         ...extras,
       };
 
-      return shallow(<Container {...props} />);
+      return render(<Container {...props} />);
     };
   });
 
-  describe('render', () => {
-    it('renders', () => {
-      expect(w()).toMatchSnapshot();
-    });
-  });
-
   describe('logic', () => {
-    let wrapper;
+    const createInstance = () => {
+      const props = {
+        classes: {},
+        dimensions: initialModel.dimensions,
+        imageUrl: initialModel.imageUrl,
+        multipleCorrect: initialModel.multipleCorrect,
+        hotspotColor: initialModel.hotspotColor,
+        outlineColor: initialModel.outlineColor,
+        onUpdateImageDimension: onUpdateImageDimension,
+        onUpdateShapes: onUpdateShapes,
+        onDeleteShape: onDeleteShape,
+        onImageUpload: onImageUpload,
+        shapes: initialModel.shapes,
+      };
+      const instance = new Container(props);
+
+      // Mock setState to execute callback immediately for testing
+      instance.setState = jest.fn((state, callback) => {
+        Object.assign(instance.state, typeof state === 'function' ? state(instance.state) : state);
+        if (callback) callback();
+      });
+
+      return instance;
+    };
+
     let formattedShapes = [
       {
         id: '0',
@@ -211,15 +242,13 @@ describe('HotspotContainer', () => {
       },
     ];
 
-    beforeEach(() => {
-      wrapper = w();
-    });
-
     it('state will contain formatted shapes', () => {
-      expect(wrapper.instance().state.shapes).toEqual(expect.arrayContaining(formattedShapes));
+      const instance = createInstance();
+      expect(instance.state.shapes).toEqual(expect.arrayContaining(formattedShapes));
     });
 
     it('onUpdateShapes with new added shape', () => {
+      const instance = createInstance();
       const newShape = {
         id: '8',
         height: 140,
@@ -229,7 +258,7 @@ describe('HotspotContainer', () => {
         group: 'rectangles',
       };
 
-      wrapper.instance().onUpdateShapes([...formattedShapes, newShape]);
+      instance.onUpdateShapes([...formattedShapes, newShape]);
 
       expect(onUpdateShapes).toHaveBeenLastCalledWith({
         rectangles: [
@@ -248,8 +277,8 @@ describe('HotspotContainer', () => {
     });
 
     it('onDeleteShape by id', () => {
-      console.log('wrapper', wrapper.instance());
-      wrapper.instance().onDeleteShape('8');
+      const instance = createInstance();
+      instance.onDeleteShape('8');
       expect(onUpdateShapes).toHaveBeenCalledWith(
         groupShapes([
           { correct: true, group: 'rectangles', height: 140, id: '0', index: 0, width: 130, x: 1, y: 1 },
@@ -314,7 +343,8 @@ describe('HotspotContainer', () => {
     });
 
     it('onUpdateShapes with no shapes', () => {
-      wrapper.instance().onUpdateShapes([]);
+      const instance = createInstance();
+      instance.onUpdateShapes([]);
 
       expect(onUpdateShapes).toHaveBeenLastCalledWith({
         rectangles: [],
@@ -324,7 +354,8 @@ describe('HotspotContainer', () => {
     });
 
     it('handleClearAll', () => {
-      wrapper.instance().handleClearAll();
+      const instance = createInstance();
+      instance.handleClearAll();
       expect(onUpdateShapes).toHaveBeenLastCalledWith({
         rectangles: [],
         polygons: [],

package/configure/src/__tests__/hotspot-drawable.test.js

@@ -1,7 +1,20 @@
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
 import { Drawable } from '../hotspot-drawable';
 
+jest.mock('react-konva', () => {
+  const React = require('react');
+  return {
+    Stage: ({ children, ...props }) => React.createElement('div', { 'data-testid': 'stage', ...props }, children),
+    Layer: ({ children, ...props }) => React.createElement('div', { 'data-testid': 'layer', ...props }, children),
+    Rect: (props) => React.createElement('div', { 'data-testid': 'rect', ...props }),
+    Circle: (props) => React.createElement('div', { 'data-testid': 'circle', ...props }),
+    Line: (props) => React.createElement('div', { 'data-testid': 'line', ...props }),
+    Group: ({ children, ...props }) => React.createElement('div', { 'data-testid': 'group', ...props }, children),
+    Image: (props) => React.createElement('div', { 'data-testid': 'image', ...props }),
+  };
+});
+
 const model = () => ({
   imageUrl: 'https://cdn.fluence.net/image/0240eb1455ce4c4bb6180232347b6aef_W',
   shapes: [
@@ -101,33 +114,35 @@ describe('HotspotDrawable', () => {
         ...extras,
       };
 
-      return shallow(<Drawable {...props} />);
+      return render(<Drawable {...props} />);
     };
   });
 
-  describe('render', () => {
-    it('renders with default strokeWidth', () => {
-      expect(w()).toMatchSnapshot();
-    });
-
-    it('renders with given strokeWidth', () => {
-      expect(w({ strokeWidth: 10 })).toMatchSnapshot();
-    });
-
-    it('renders', () => {
-      expect(w()).toMatchSnapshot();
-    });
-  });
-
   describe('logic', () => {
-    let wrapper;
-
-    beforeEach(() => {
-      wrapper = w();
-    });
+    const createInstance = () => {
+      const props = {
+        classes: {},
+        dimensions: initialModel.dimensions,
+        disableDrag: handleDisableDrag,
+        enableDrag: handleEnableDrag,
+        imageUrl: initialModel.imageUrl,
+        hotspotColor: initialModel.hotspotColor,
+        multipleCorrect: initialModel.multipleCorrect,
+        onUpdateImageDimension: onUpdateImageDimension,
+        onUpdateShapes: onUpdateShapes,
+        outlineColor: initialModel.outlineColor,
+        shapes: initialModel.shapes,
+        strokeWidth: 5,
+        shapeType: 'rectangle',
+        handleFinishDrawing: jest.fn(),
+        onDeleteShape: jest.fn(),
+      };
+      return new Drawable(props);
+    };
 
     it('handleOnMouseDown target != Stage', () => {
-      wrapper.instance().state.stateShapes = initialModel.shapes;
+      const instance = createInstance();
+      instance.state.stateShapes = initialModel.shapes;
 
       const event = {
         target: 'Line',
@@ -138,12 +153,13 @@ describe('HotspotDrawable', () => {
         },
       };
 
-      wrapper.instance().handleOnMouseDown(event);
+      instance.handleOnMouseDown(event);
 
       expect(onUpdateShapes).not.toBeCalled();
     });
 
     it('handleOnMouseDown target = Stage', () => {
+      const instance = createInstance();
       const event = {
         target: 'Stage',
         currentTarget: 'Stage',
@@ -153,7 +169,7 @@ describe('HotspotDrawable', () => {
         },
       };
 
-      wrapper.instance().handleOnMouseDown(event);
+      instance.handleOnMouseDown(event);
 
       expect(onUpdateShapes).toHaveBeenCalledWith([
         ...initialModel.shapes,
@@ -170,10 +186,11 @@ describe('HotspotDrawable', () => {
     });
 
     it('handleOnMouseUp isDrawing = true', () => {
-      wrapper.instance().state.isDrawing = true;
-      wrapper.instance().state.shapes = initialModel.shapes.slice(0, 2);
+      const instance = createInstance();
+      instance.state.isDrawing = true;
+      instance.state.shapes = initialModel.shapes.slice(0, 2);
 
-      wrapper.instance().handleOnMouseUp({
+      instance.handleOnMouseUp({
         evt: {
           layerX: 20,
           layerY: 30,
@@ -183,9 +200,9 @@ describe('HotspotDrawable', () => {
       expect(onUpdateShapes).toHaveBeenCalledWith([...initialModel.shapes.slice(0, 2)]);
 
       // at this point, state.stateShapes is false, so we don't want to update shapes with false (onUpdateShapes)
-      expect(wrapper.instance().state.stateShapes).toEqual(false);
+      expect(instance.state.stateShapes).toEqual(false);
 
-      wrapper.instance().handleOnMouseUp({
+      instance.handleOnMouseUp({
         evt: {
           layerX: 20,
           layerY: 30,
@@ -194,13 +211,14 @@ describe('HotspotDrawable', () => {
 
       expect(onUpdateShapes).not.toBeCalledWith(false);
 
-      wrapper.instance().handleOnMouseUp({});
+      instance.handleOnMouseUp({});
 
       expect(onUpdateShapes).toHaveBeenCalledWith(initialModel.shapes.slice(0, 2));
     });
 
     it('handleOnSetAsCorrect correct', () => {
-      wrapper.instance().handleOnSetAsCorrect({
+      const instance = createInstance();
+      instance.handleOnSetAsCorrect({
         id: '1',
       });
 
@@ -215,7 +233,8 @@ describe('HotspotDrawable', () => {
     });
 
     it('handleOnSetAsCorrect incorrect', () => {
-      wrapper.instance().handleOnSetAsCorrect({
+      const instance = createInstance();
+      instance.handleOnSetAsCorrect({
         id: '0',
       });
 
@@ -229,7 +248,8 @@ describe('HotspotDrawable', () => {
     });
 
     it('handleOnDragEnd', () => {
-      wrapper.instance().handleOnDragEnd('0', { x: 1, y: 1 });
+      const instance = createInstance();
+      instance.handleOnDragEnd('0', { x: 1, y: 1 });
 
       expect(onUpdateShapes).toHaveBeenCalledWith([
         {
@@ -242,7 +262,8 @@ describe('HotspotDrawable', () => {
     });
 
     it('handleOnDragEnd unexistent id', () => {
-      wrapper.instance().handleOnDragEnd('10', { x: 1, y: 1 });
+      const instance = createInstance();
+      instance.handleOnDragEnd('10', { x: 1, y: 1 });
 
       expect(onUpdateShapes).toHaveBeenCalledWith(initialModel.shapes);
     });

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');
+    });
+  });
+});