@pie-element/hotspot 11.1.1 → 11.1.2-next.0

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

@@ -1,259 +0,0 @@
-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,366 +0,0 @@
-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: [],
-      });
-    });
-  });
-});