@pie-element/hotspot 11.1.2-next.2 → 11.1.2

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

@@ -0,0 +1,366 @@
+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(
+    getAllShapes({
+      rectangles: [
+        {
+          id: '0',
+          height: 140,
+          width: 130,
+          x: 1,
+          y: 1,
+          correct: true,
+        },
+        {
+          id: '1',
+          height: 140,
+          width: 130,
+          x: 140,
+          y: 1,
+        },
+        {
+          id: '2',
+          height: 140,
+          width: 130,
+          x: 280,
+          y: 1,
+        },
+      ],
+      polygons: [
+        {
+          id: '3',
+          points: [
+            { x: 1, y: 148 },
+            { x: 1, y: 288 },
+            { y: 288, x: 129 },
+            { y: 148, x: 129 },
+          ],
+          correct: true,
+        },
+        {
+          id: '4',
+          points: [
+            { y: 151, x: 141 },
+            { y: 289, x: 141 },
+            { y: 289, x: 269 },
+            { x: 269, y: 151 },
+          ],
+          correct: false,
+        },
+        {
+          id: '5',
+          points: [
+            { x: 279, y: 150 },
+            { x: 279, y: 289 },
+            { x: 407, y: 289 },
+            { x: 407, y: 150 },
+          ],
+          correct: false,
+        },
+      ],
+      circles: [
+        {
+          id: '6',
+          radius: 70,
+          x: 100,
+          y: 100,
+          correct: false,
+        },
+        {
+          id: '7',
+          radius: 30,
+          x: 200,
+          y: 150,
+          correct: true,
+        },
+      ],
+    }),
+  ),
+  dimensions: {
+    height: 291,
+    width: 410,
+  },
+  hotspotColor: 'rgba(137, 183, 244, 0.65)',
+  outlineColor: 'blue',
+  multipleCorrect: true,
+});
+
+describe('HotspotContainer', () => {
+  let w,
+    onImageUpload = jest.fn(),
+    onUpdateImageDimension = jest.fn(),
+    onDeleteShape = jest.fn(),
+    onUpdateShapes = jest.fn(),
+    initialModel = model();
+  beforeEach(() => {
+    w = (extras) => {
+      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,
+        ...extras,
+      };
+
+      return render(<Container {...props} />);
+    };
+  });
+
+  describe('logic', () => {
+    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',
+        height: 140,
+        width: 130,
+        x: 1,
+        y: 1,
+        correct: true,
+        group: 'rectangles',
+        index: 0,
+      },
+      {
+        id: '1',
+        height: 140,
+        width: 130,
+        x: 140,
+        y: 1,
+        group: 'rectangles',
+        index: 1,
+      },
+      {
+        id: '2',
+        height: 140,
+        width: 130,
+        x: 280,
+        y: 1,
+        group: 'rectangles',
+        index: 2,
+      },
+      {
+        id: '3',
+        points: [
+          { x: 1, y: 148 },
+          { x: 1, y: 288 },
+          { y: 288, x: 129 },
+          { y: 148, x: 129 },
+        ],
+        correct: true,
+        group: 'polygons',
+        index: 3,
+      },
+      {
+        id: '4',
+        points: [
+          { y: 151, x: 141 },
+          { y: 289, x: 141 },
+          { y: 289, x: 269 },
+          { x: 269, y: 151 },
+        ],
+        correct: false,
+        group: 'polygons',
+        index: 4,
+      },
+      {
+        id: '5',
+        points: [
+          { x: 279, y: 150 },
+          { x: 279, y: 289 },
+          { x: 407, y: 289 },
+          { x: 407, y: 150 },
+        ],
+        correct: false,
+        group: 'polygons',
+        index: 5,
+      },
+      {
+        id: '6',
+        radius: 70,
+        x: 100,
+        y: 100,
+        correct: false,
+        group: 'circles',
+        index: 6,
+      },
+      {
+        id: '7',
+        radius: 30,
+        x: 200,
+        y: 150,
+        correct: true,
+        group: 'circles',
+        index: 7,
+      },
+    ];
+
+    it('state will contain formatted shapes', () => {
+      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,
+        width: 130,
+        x: 280,
+        y: 1,
+        group: 'rectangles',
+      };
+
+      instance.onUpdateShapes([...formattedShapes, newShape]);
+
+      expect(onUpdateShapes).toHaveBeenLastCalledWith({
+        rectangles: [
+          ...initialModel.shapes.rectangles,
+          {
+            id: '8',
+            height: 140,
+            width: 130,
+            x: 280,
+            y: 1,
+          },
+        ],
+        polygons: initialModel.shapes.polygons,
+        circles: initialModel.shapes.circles,
+      });
+    });
+
+    it('onDeleteShape by id', () => {
+      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 },
+          { group: 'rectangles', height: 140, id: '1', index: 1, width: 130, x: 140, y: 1 },
+          { group: 'rectangles', height: 140, id: '2', index: 2, width: 130, x: 280, y: 1 },
+          {
+            correct: true,
+            group: 'polygons',
+            id: '3',
+            index: 3,
+            points: [
+              { x: 1, y: 148 },
+              { x: 1, y: 288 },
+              { x: 129, y: 288 },
+              { x: 129, y: 148 },
+            ],
+          },
+          {
+            correct: false,
+            group: 'polygons',
+            id: '4',
+            index: 4,
+            points: [
+              { x: 141, y: 151 },
+              { x: 141, y: 289 },
+              { x: 269, y: 289 },
+              { x: 269, y: 151 },
+            ],
+          },
+          {
+            correct: false,
+            group: 'polygons',
+            id: '5',
+            index: 5,
+            points: [
+              { x: 279, y: 150 },
+              { x: 279, y: 289 },
+              { x: 407, y: 289 },
+              { x: 407, y: 150 },
+            ],
+          },
+          {
+            id: '6',
+            radius: 70,
+            x: 100,
+            y: 100,
+            correct: false,
+            group: 'circles',
+            index: 6,
+          },
+          {
+            id: '7',
+            radius: 30,
+            x: 200,
+            y: 150,
+            correct: true,
+            group: 'circles',
+            index: 7,
+          },
+        ]),
+      );
+    });
+
+    it('onUpdateShapes with no shapes', () => {
+      const instance = createInstance();
+      instance.onUpdateShapes([]);
+
+      expect(onUpdateShapes).toHaveBeenLastCalledWith({
+        rectangles: [],
+        polygons: [],
+        circles: [],
+      });
+    });
+
+    it('handleClearAll', () => {
+      const instance = createInstance();
+      instance.handleClearAll();
+      expect(onUpdateShapes).toHaveBeenLastCalledWith({
+        rectangles: [],
+        polygons: [],
+        circles: [],
+      });
+    });
+  });
+});