@pie-element/hotspot 11.2.0-beta.0 → 11.2.0-next.18

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

@@ -1,271 +0,0 @@
-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: [
-    {
-      id: '0',
-      height: 140,
-      width: 130,
-      x: 1,
-      y: 1,
-      correct: true,
-      group: 'rectangles',
-    },
-    {
-      id: '1',
-      height: 140,
-      width: 130,
-      x: 140,
-      y: 1,
-      group: 'rectangles',
-    },
-    {
-      id: '2',
-      height: 140,
-      width: 130,
-      x: 280,
-      y: 1,
-      group: 'rectangles',
-    },
-    {
-      id: '3',
-      points: [
-        { x: 1, y: 148 },
-        { x: 1, y: 288 },
-        { y: 288, x: 129 },
-        { y: 148, x: 129 },
-      ],
-      correct: true,
-      group: 'polygons',
-    },
-    {
-      id: '4',
-      points: [
-        { y: 151, x: 141 },
-        { y: 289, x: 141 },
-        { y: 289, x: 269 },
-        { x: 269, y: 151 },
-      ],
-      correct: false,
-      group: 'polygons',
-    },
-    {
-      id: '5',
-      points: [
-        { x: 279, y: 150 },
-        { x: 279, y: 289 },
-        { x: 407, y: 289 },
-        { x: 407, y: 150 },
-      ],
-      correct: false,
-      group: 'polygons',
-    },
-  ],
-  dimensions: {
-    height: 291,
-    width: 410,
-  },
-  hotspotColor: 'rgba(137, 183, 244, 0.65)',
-  outlineColor: 'blue',
-  multipleCorrect: true,
-});
-
-describe('HotspotDrawable', () => {
-  let w,
-    handleDisableDrag = jest.fn(),
-    handleEnableDrag = jest.fn(),
-    onUpdateImageDimension = jest.fn(),
-    onUpdateShapes = jest.fn(),
-    initialModel = model();
-  beforeEach(() => {
-    w = (extras) => {
-      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(),
-        ...extras,
-      };
-
-      return render(<Drawable {...props} />);
-    };
-  });
-
-  describe('logic', () => {
-    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', () => {
-      const instance = createInstance();
-      instance.state.stateShapes = initialModel.shapes;
-
-      const event = {
-        target: 'Line',
-        currentTarget: 'Stage',
-        evt: {
-          layerX: 20,
-          layerY: 30,
-        },
-      };
-
-      instance.handleOnMouseDown(event);
-
-      expect(onUpdateShapes).not.toBeCalled();
-    });
-
-    it('handleOnMouseDown target = Stage', () => {
-      const instance = createInstance();
-      const event = {
-        target: 'Stage',
-        currentTarget: 'Stage',
-        evt: {
-          layerX: 20,
-          layerY: 30,
-        },
-      };
-
-      instance.handleOnMouseDown(event);
-
-      expect(onUpdateShapes).toHaveBeenCalledWith([
-        ...initialModel.shapes,
-        {
-          id: '6',
-          height: 0,
-          width: 0,
-          x: 20,
-          y: 30,
-          group: 'rectangles',
-          index: 6,
-        },
-      ]);
-    });
-
-    it('handleOnMouseUp isDrawing = true', () => {
-      const instance = createInstance();
-      instance.state.isDrawing = true;
-      instance.state.shapes = initialModel.shapes.slice(0, 2);
-
-      instance.handleOnMouseUp({
-        evt: {
-          layerX: 20,
-          layerY: 30,
-        },
-      });
-
-      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(instance.state.stateShapes).toEqual(false);
-
-      instance.handleOnMouseUp({
-        evt: {
-          layerX: 20,
-          layerY: 30,
-        },
-      });
-
-      expect(onUpdateShapes).not.toBeCalledWith(false);
-
-      instance.handleOnMouseUp({});
-
-      expect(onUpdateShapes).toHaveBeenCalledWith(initialModel.shapes.slice(0, 2));
-    });
-
-    it('handleOnSetAsCorrect correct', () => {
-      const instance = createInstance();
-      instance.handleOnSetAsCorrect({
-        id: '1',
-      });
-
-      expect(onUpdateShapes).toHaveBeenCalledWith([
-        initialModel.shapes[0],
-        {
-          ...initialModel.shapes[1],
-          correct: true,
-        },
-        ...initialModel.shapes.slice(2),
-      ]);
-    });
-
-    it('handleOnSetAsCorrect incorrect', () => {
-      const instance = createInstance();
-      instance.handleOnSetAsCorrect({
-        id: '0',
-      });
-
-      expect(onUpdateShapes).toHaveBeenCalledWith([
-        {
-          ...initialModel.shapes[0],
-          correct: false,
-        },
-        ...initialModel.shapes.slice(1),
-      ]);
-    });
-
-    it('handleOnDragEnd', () => {
-      const instance = createInstance();
-      instance.handleOnDragEnd('0', { x: 1, y: 1 });
-
-      expect(onUpdateShapes).toHaveBeenCalledWith([
-        {
-          ...initialModel.shapes[0],
-          x: 1,
-          y: 1,
-        },
-        ...initialModel.shapes.slice(1),
-      ]);
-    });
-
-    it('handleOnDragEnd unexistent id', () => {
-      const instance = createInstance();
-      instance.handleOnDragEnd('10', { x: 1, y: 1 });
-
-      expect(onUpdateShapes).toHaveBeenCalledWith(initialModel.shapes);
-    });
-  });
-});

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

@@ -1,71 +0,0 @@
-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');
-    });
-  });
-});

package/configure/src/__tests__/image-konva.test.jsx

@@ -1,226 +0,0 @@
-import React from 'react';
-import { render, waitFor } from '@testing-library/react';
-import Konva from 'konva';
-import ImageComponent from '../image-konva';
-
-Konva.isBrowser = false;
-
-jest.mock('react-konva', () => {
-  const React = require('react');
-  return {
-    Image: (props) => React.createElement('div', { 'data-testid': 'image', ...props }),
-  };
-});
-
-describe('ImageComponent', () => {
-  let defaultProps;
-
-  beforeEach(() => {
-    defaultProps = {
-      src: 'test-image.png',
-      x: 100,
-      y: 150,
-    };
-  });
-
-  describe('rendering', () => {
-    it('should render without crashing', () => {
-      const { container } = render(<ImageComponent {...defaultProps} />);
-      expect(container).toBeTruthy();
-    });
-
-    it('should render Image component', () => {
-      const { getByTestId } = render(<ImageComponent {...defaultProps} />);
-      expect(getByTestId('image')).toBeInTheDocument();
-    });
-
-    it('should render with correct position', () => {
-      const { getByTestId } = render(<ImageComponent {...defaultProps} x={200} y={250} />);
-      const image = getByTestId('image');
-      expect(image).toHaveAttribute('x', '200');
-      expect(image).toHaveAttribute('y', '250');
-    });
-
-    it('should render with fixed dimensions', () => {
-      const { getByTestId } = render(<ImageComponent {...defaultProps} />);
-      const image = getByTestId('image');
-      expect(image).toHaveAttribute('width', '20');
-      expect(image).toHaveAttribute('height', '20');
-    });
-
-    it('should render at origin (0, 0)', () => {
-      const { getByTestId } = render(<ImageComponent {...defaultProps} x={0} y={0} />);
-      const image = getByTestId('image');
-      expect(image).toHaveAttribute('x', '0');
-      expect(image).toHaveAttribute('y', '0');
-    });
-  });
-
-  describe('image loading', () => {
-    it('should load image on mount', async () => {
-      const { getByTestId } = render(<ImageComponent {...defaultProps} />);
-      
-      const image = getByTestId('image');
-      expect(image).toBeInTheDocument();
-    });
-
-    it('should call loadImage on mount', () => {
-      const { container } = render(<ImageComponent {...defaultProps} src="custom-image.jpg" />);
-      
-      expect(container).toBeTruthy();
-    });
-  });
-
-  describe('component lifecycle', () => {
-    it('should reload image when src changes', async () => {
-      const { rerender, container } = render(<ImageComponent {...defaultProps} src="image1.png" />);
-      
-      expect(container).toBeTruthy();
-      
-      rerender(<ImageComponent {...defaultProps} src="image2.png" />);
-      
-      expect(container).toBeTruthy();
-    });
-
-    it('should not reload image when src stays the same', async () => {
-      const { rerender, getByTestId } = render(<ImageComponent {...defaultProps} src="same-image.png" />);
-      
-      const image = getByTestId('image');
-      expect(image).toBeInTheDocument();
-      
-      rerender(<ImageComponent {...defaultProps} src="same-image.png" x={200} y={250} />);
-      
-      const updatedImage = getByTestId('image');
-      expect(updatedImage).toHaveAttribute('x', '200');
-      expect(updatedImage).toHaveAttribute('y', '250');
-    });
-
-    it('should clean up event listener on unmount', () => {
-      const { unmount } = render(<ImageComponent {...defaultProps} />);
-      
-      expect(() => {
-        unmount();
-      }).not.toThrow();
-    });
-
-    it('should handle multiple mount/unmount cycles', () => {
-      const { unmount } = render(<ImageComponent {...defaultProps} />);
-      unmount();
-      
-      expect(() => {
-        render(<ImageComponent {...defaultProps} />);
-      }).not.toThrow();
-    });
-  });
-
-  describe('position updates', () => {
-    it('should update x position', () => {
-      const { getByTestId, rerender } = render(<ImageComponent {...defaultProps} x={100} />);
-      let image = getByTestId('image');
-      expect(image).toHaveAttribute('x', '100');
-      
-      rerender(<ImageComponent {...defaultProps} x={200} />);
-      image = getByTestId('image');
-      expect(image).toHaveAttribute('x', '200');
-    });
-
-    it('should update y position', () => {
-      const { getByTestId, rerender } = render(<ImageComponent {...defaultProps} y={150} />);
-      let image = getByTestId('image');
-      expect(image).toHaveAttribute('y', '150');
-      
-      rerender(<ImageComponent {...defaultProps} y={250} />);
-      image = getByTestId('image');
-      expect(image).toHaveAttribute('y', '250');
-    });
-
-    it('should update both x and y positions', () => {
-      const { getByTestId, rerender } = render(<ImageComponent {...defaultProps} x={100} y={150} />);
-      let image = getByTestId('image');
-      expect(image).toHaveAttribute('x', '100');
-      expect(image).toHaveAttribute('y', '150');
-      
-      rerender(<ImageComponent {...defaultProps} x={300} y={400} />);
-      image = getByTestId('image');
-      expect(image).toHaveAttribute('x', '300');
-      expect(image).toHaveAttribute('y', '400');
-    });
-  });
-
-  describe('edge cases', () => {
-    it('should handle negative positions', () => {
-      const { getByTestId } = render(<ImageComponent {...defaultProps} x={-50} y={-75} />);
-      const image = getByTestId('image');
-      expect(image).toHaveAttribute('x', '-50');
-      expect(image).toHaveAttribute('y', '-75');
-    });
-
-    it('should handle very large positions', () => {
-      const { getByTestId } = render(<ImageComponent {...defaultProps} x={10000} y={20000} />);
-      const image = getByTestId('image');
-      expect(image).toHaveAttribute('x', '10000');
-      expect(image).toHaveAttribute('y', '20000');
-    });
-
-    it('should handle data URI as src', () => {
-      const dataUri = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
-      const { container } = render(<ImageComponent {...defaultProps} src={dataUri} />);
-      
-      expect(container).toBeTruthy();
-    });
-
-    it('should handle SVG as src', () => {
-      const { container } = render(<ImageComponent {...defaultProps} src="icon.svg" />);
-      expect(container).toBeTruthy();
-    });
-
-    it('should handle empty src', () => {
-      const { container } = render(<ImageComponent {...defaultProps} src="" />);
-      expect(container).toBeTruthy();
-    });
-
-    it('should handle URL with query parameters', () => {
-      const srcWithParams = 'image.png?width=100&height=100';
-      const { container } = render(<ImageComponent {...defaultProps} src={srcWithParams} />);
-      
-      expect(container).toBeTruthy();
-    });
-
-    it('should handle relative paths', () => {
-      const { container } = render(<ImageComponent {...defaultProps} src="./images/icon.png" />);
-      expect(container).toBeTruthy();
-    });
-
-    it('should handle absolute paths', () => {
-      const { container } = render(<ImageComponent {...defaultProps} src="/assets/icon.png" />);
-      expect(container).toBeTruthy();
-    });
-  });
-
-  describe('image state', () => {
-    it('should initially render without image loaded', () => {
-      const { getByTestId } = render(<ImageComponent {...defaultProps} />);
-      const image = getByTestId('image');
-      expect(image).toBeInTheDocument();
-    });
-
-    it('should render component regardless of image load state', () => {
-      const { getByTestId } = render(<ImageComponent {...defaultProps} />);
-      const image = getByTestId('image');
-      expect(image).toBeInTheDocument();
-    });
-  });
-
-  describe('error handling', () => {
-    it('should handle image load error gracefully', () => {
-      const { container } = render(<ImageComponent {...defaultProps} src="nonexistent.png" />);
-      
-      const imgElements = document.querySelectorAll('img[src="nonexistent.png"]');
-      imgElements.forEach(img => {
-        img.dispatchEvent(new Event('error'));
-      });
-      
-      expect(container).toBeTruthy();
-    });
-  });
-});