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

package/src/hotspot/__tests__/container.test.jsx

@@ -1,546 +0,0 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import Konva from 'konva';
-import { Container } from '../container';
-
-Konva.isBrowser = false;
-
-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),
-  };
-});
-
-jest.mock('../rectangle', () => {
-  return function Rectangle(props) {
-    return (
-      <div
-        data-testid={`rectangle-${props.id}`}
-        data-selected={props.selected}
-        data-iscorrect={props.isCorrect}
-        data-disabled={props.disabled}
-        onClick={() => props.onClick({ id: props.id, selected: !props.selected })}
-      />
-    );
-  };
-});
-
-jest.mock('../polygon', () => {
-  return function Polygon(props) {
-    return (
-      <div
-        data-testid={`polygon-${props.id}`}
-        data-selected={props.selected}
-        data-iscorrect={props.isCorrect}
-        data-disabled={props.disabled}
-        onClick={() => props.onClick({ id: props.id, selected: !props.selected })}
-      />
-    );
-  };
-});
-
-jest.mock('../circle', () => {
-  return function Circle(props) {
-    return (
-      <div
-        data-testid={`circle-${props.id}`}
-        data-selected={props.selected}
-        data-iscorrect={props.isCorrect}
-        data-disabled={props.disabled}
-        onClick={() => props.onClick({ id: props.id, selected: !props.selected })}
-      />
-    );
-  };
-});
-
-describe('Container', () => {
-  let defaultProps;
-
-  beforeEach(() => {
-    defaultProps = {
-      dimensions: { width: 800, height: 600 },
-      disabled: false,
-      hotspotColor: '#FF0000',
-      hoverOutlineColor: '#FFFF00',
-      selectedHotspotColor: '#00FF00',
-      imageUrl: 'http://example.com/image.png',
-      isEvaluateMode: false,
-      onSelectChoice: jest.fn(),
-      outlineColor: '#0000FF',
-      session: { answers: [] },
-      shapes: {
-        rectangles: [],
-        polygons: [],
-        circles: [],
-      },
-      strokeWidth: 5,
-      scale: 1,
-      showCorrect: false,
-    };
-  });
-
-  describe('rendering', () => {
-    it('should render without crashing', () => {
-      const { container } = render(<Container {...defaultProps} />);
-      expect(container).toBeTruthy();
-    });
-
-    it('should render image when imageUrl is provided', () => {
-      const { getByAltText } = render(<Container {...defaultProps} />);
-      const image = getByAltText('hotspot-image');
-      expect(image).toBeInTheDocument();
-      expect(image).toHaveAttribute('src', 'http://example.com/image.png');
-    });
-
-    it('should not render image when imageUrl is not provided', () => {
-      const { queryByAltText } = render(<Container {...defaultProps} imageUrl="" />);
-      expect(queryByAltText('hotspot-image')).not.toBeInTheDocument();
-    });
-
-    it('should render Stage with correct dimensions', () => {
-      const { getByTestId } = render(<Container {...defaultProps} />);
-      const stage = getByTestId('stage');
-      expect(stage).toHaveAttribute('height', '605'); // 600 + strokeWidth
-      expect(stage).toHaveAttribute('width', '805'); // 800 + strokeWidth
-    });
-
-    it('should apply scale to dimensions', () => {
-      const { getByTestId } = render(<Container {...defaultProps} scale={2} />);
-      const stage = getByTestId('stage');
-      expect(stage).toHaveAttribute('height', '1205'); // (600 * 2) + strokeWidth
-      expect(stage).toHaveAttribute('width', '1605'); // (800 * 2) + strokeWidth
-    });
-
-    it('should render Layer inside Stage', () => {
-      const { getByTestId } = render(<Container {...defaultProps} />);
-      const layer = getByTestId('layer');
-      expect(layer).toBeInTheDocument();
-    });
-  });
-
-  describe('rectangle shapes', () => {
-    it('should render rectangles', () => {
-      const props = {
-        ...defaultProps,
-        shapes: {
-          rectangles: [
-            { id: 'rect1', x: 10, y: 20, width: 100, height: 80, correct: false },
-            { id: 'rect2', x: 150, y: 200, width: 120, height: 90, correct: false },
-          ],
-          polygons: [],
-          circles: [],
-        },
-      };
-      const { getByTestId } = render(<Container {...props} />);
-      
-      expect(getByTestId('rectangle-rect1')).toBeInTheDocument();
-      expect(getByTestId('rectangle-rect2')).toBeInTheDocument();
-    });
-
-    it('should mark rectangle as selected when in session answers', () => {
-      const props = {
-        ...defaultProps,
-        session: { answers: [{ id: 'rect1' }] },
-        shapes: {
-          rectangles: [
-            { id: 'rect1', x: 10, y: 20, width: 100, height: 80, correct: false },
-          ],
-          polygons: [],
-          circles: [],
-        },
-      };
-      const { getByTestId } = render(<Container {...props} />);
-      
-      const rect = getByTestId('rectangle-rect1');
-      expect(rect).toHaveAttribute('data-selected', 'true');
-    });
-
-    it('should call onSelectChoice when rectangle is clicked', () => {
-      const onSelectChoice = jest.fn();
-      const props = {
-        ...defaultProps,
-        onSelectChoice,
-        shapes: {
-          rectangles: [
-            { id: 'rect1', x: 10, y: 20, width: 100, height: 80, correct: false },
-          ],
-          polygons: [],
-          circles: [],
-        },
-      };
-      const { getByTestId } = render(<Container {...props} />);
-      
-      const rect = getByTestId('rectangle-rect1');
-      fireEvent.click(rect);
-      
-      expect(onSelectChoice).toHaveBeenCalledWith({ id: 'rect1', selected: true });
-    });
-  });
-
-  describe('polygon shapes', () => {
-    it('should render polygons', () => {
-      const props = {
-        ...defaultProps,
-        shapes: {
-          rectangles: [],
-          polygons: [
-            {
-              id: 'poly1',
-              points: [{ x: 10, y: 10 }, { x: 100, y: 10 }, { x: 50, y: 100 }],
-              correct: false,
-            },
-          ],
-          circles: [],
-        },
-      };
-      const { getByTestId } = render(<Container {...props} />);
-      
-      expect(getByTestId('polygon-poly1')).toBeInTheDocument();
-    });
-
-    it('should mark polygon as selected when in session answers', () => {
-      const props = {
-        ...defaultProps,
-        session: { answers: [{ id: 'poly1' }] },
-        shapes: {
-          rectangles: [],
-          polygons: [
-            {
-              id: 'poly1',
-              points: [{ x: 10, y: 10 }, { x: 100, y: 10 }, { x: 50, y: 100 }],
-              correct: false,
-            },
-          ],
-          circles: [],
-        },
-      };
-      const { getByTestId } = render(<Container {...props} />);
-      
-      const polygon = getByTestId('polygon-poly1');
-      expect(polygon).toHaveAttribute('data-selected', 'true');
-    });
-
-    it('should call onSelectChoice when polygon is clicked', () => {
-      const onSelectChoice = jest.fn();
-      const props = {
-        ...defaultProps,
-        onSelectChoice,
-        shapes: {
-          rectangles: [],
-          polygons: [
-            {
-              id: 'poly1',
-              points: [{ x: 10, y: 10 }, { x: 100, y: 10 }, { x: 50, y: 100 }],
-              correct: false,
-            },
-          ],
-          circles: [],
-        },
-      };
-      const { getByTestId } = render(<Container {...props} />);
-      
-      const polygon = getByTestId('polygon-poly1');
-      fireEvent.click(polygon);
-      
-      expect(onSelectChoice).toHaveBeenCalledWith({ id: 'poly1', selected: true });
-    });
-  });
-
-  describe('circle shapes', () => {
-    it('should render circles', () => {
-      const props = {
-        ...defaultProps,
-        shapes: {
-          rectangles: [],
-          polygons: [],
-          circles: [
-            { id: 'circle1', x: 100, y: 100, radius: 50, correct: false },
-          ],
-        },
-      };
-      const { getByTestId } = render(<Container {...props} />);
-      
-      expect(getByTestId('circle-circle1')).toBeInTheDocument();
-    });
-
-    it('should mark circle as selected when in session answers', () => {
-      const props = {
-        ...defaultProps,
-        session: { answers: [{ id: 'circle1' }] },
-        shapes: {
-          rectangles: [],
-          polygons: [],
-          circles: [
-            { id: 'circle1', x: 100, y: 100, radius: 50, correct: false },
-          ],
-        },
-      };
-      const { getByTestId } = render(<Container {...props} />);
-      
-      const circle = getByTestId('circle-circle1');
-      expect(circle).toHaveAttribute('data-selected', 'true');
-    });
-
-    it('should call onSelectChoice when circle is clicked', () => {
-      const onSelectChoice = jest.fn();
-      const props = {
-        ...defaultProps,
-        onSelectChoice,
-        shapes: {
-          rectangles: [],
-          polygons: [],
-          circles: [
-            { id: 'circle1', x: 100, y: 100, radius: 50, correct: false },
-          ],
-        },
-      };
-      const { getByTestId } = render(<Container {...props} />);
-      
-      const circle = getByTestId('circle-circle1');
-      fireEvent.click(circle);
-      
-      expect(onSelectChoice).toHaveBeenCalledWith({ id: 'circle1', selected: true });
-    });
-  });
-
-  describe('evaluate mode', () => {
-    it('should show correctness when in evaluate mode', () => {
-      const props = {
-        ...defaultProps,
-        isEvaluateMode: true,
-        session: { answers: [{ id: 'rect1' }] },
-        shapes: {
-          rectangles: [
-            { id: 'rect1', x: 10, y: 20, width: 100, height: 80, correct: true },
-          ],
-          polygons: [],
-          circles: [],
-        },
-      };
-      const { getByTestId } = render(<Container {...props} />);
-      
-      const rect = getByTestId('rectangle-rect1');
-      expect(rect).toHaveAttribute('data-iscorrect', 'true');
-    });
-
-    it('should show incorrect when selected but not correct', () => {
-      const props = {
-        ...defaultProps,
-        isEvaluateMode: true,
-        session: { answers: [{ id: 'rect1' }] },
-        shapes: {
-          rectangles: [
-            { id: 'rect1', x: 10, y: 20, width: 100, height: 80, correct: false },
-          ],
-          polygons: [],
-          circles: [],
-        },
-      };
-      const { getByTestId } = render(<Container {...props} />);
-      
-      const rect = getByTestId('rectangle-rect1');
-      expect(rect).toHaveAttribute('data-iscorrect', 'false');
-    });
-
-    it('should show incorrect when not selected but correct', () => {
-      const props = {
-        ...defaultProps,
-        isEvaluateMode: true,
-        session: { answers: [] },
-        shapes: {
-          rectangles: [
-            { id: 'rect1', x: 10, y: 20, width: 100, height: 80, correct: true },
-          ],
-          polygons: [],
-          circles: [],
-        },
-      };
-      const { getByTestId } = render(<Container {...props} />);
-      
-      const rect = getByTestId('rectangle-rect1');
-      expect(rect).toHaveAttribute('data-iscorrect', 'false');
-    });
-
-    it('should show correct when not selected and not correct', () => {
-      const props = {
-        ...defaultProps,
-        isEvaluateMode: true,
-        session: { answers: [] },
-        shapes: {
-          rectangles: [
-            { id: 'rect1', x: 10, y: 20, width: 100, height: 80, correct: false },
-          ],
-          polygons: [],
-          circles: [],
-        },
-      };
-      const { getByTestId } = render(<Container {...props} />);
-      
-      const rect = getByTestId('rectangle-rect1');
-      expect(rect).toHaveAttribute('data-iscorrect', 'true');
-    });
-  });
-
-  describe('disabled state', () => {
-    it('should pass disabled prop to shapes', () => {
-      const props = {
-        ...defaultProps,
-        disabled: true,
-        shapes: {
-          rectangles: [
-            { id: 'rect1', x: 10, y: 20, width: 100, height: 80, correct: false },
-          ],
-          polygons: [],
-          circles: [],
-        },
-      };
-      const { getByTestId } = render(<Container {...props} />);
-      
-      const rect = getByTestId('rectangle-rect1');
-      expect(rect).toHaveAttribute('data-disabled', 'true');
-    });
-  });
-
-  describe('mixed shapes', () => {
-    it('should render all types of shapes together', () => {
-      const props = {
-        ...defaultProps,
-        shapes: {
-          rectangles: [
-            { id: 'rect1', x: 10, y: 20, width: 100, height: 80, correct: false },
-          ],
-          polygons: [
-            {
-              id: 'poly1',
-              points: [{ x: 10, y: 10 }, { x: 100, y: 10 }, { x: 50, y: 100 }],
-              correct: false,
-            },
-          ],
-          circles: [
-            { id: 'circle1', x: 100, y: 100, radius: 50, correct: false },
-          ],
-        },
-      };
-      const { getByTestId } = render(<Container {...props} />);
-      
-      expect(getByTestId('rectangle-rect1')).toBeInTheDocument();
-      expect(getByTestId('polygon-poly1')).toBeInTheDocument();
-      expect(getByTestId('circle-circle1')).toBeInTheDocument();
-    });
-
-    it('should handle multiple selections across different shape types', () => {
-      const props = {
-        ...defaultProps,
-        session: { answers: [{ id: 'rect1' }, { id: 'poly1' }, { id: 'circle1' }] },
-        shapes: {
-          rectangles: [
-            { id: 'rect1', x: 10, y: 20, width: 100, height: 80, correct: false },
-          ],
-          polygons: [
-            {
-              id: 'poly1',
-              points: [{ x: 10, y: 10 }, { x: 100, y: 10 }, { x: 50, y: 100 }],
-              correct: false,
-            },
-          ],
-          circles: [
-            { id: 'circle1', x: 100, y: 100, radius: 50, correct: false },
-          ],
-        },
-      };
-      const { getByTestId } = render(<Container {...props} />);
-      
-      expect(getByTestId('rectangle-rect1')).toHaveAttribute('data-selected', 'true');
-      expect(getByTestId('polygon-poly1')).toHaveAttribute('data-selected', 'true');
-      expect(getByTestId('circle-circle1')).toHaveAttribute('data-selected', 'true');
-    });
-  });
-
-  describe('showCorrect mode', () => {
-    it('should pass showCorrect prop to shapes in evaluate mode', () => {
-      const props = {
-        ...defaultProps,
-        isEvaluateMode: true,
-        showCorrect: true,
-        shapes: {
-          rectangles: [
-            { id: 'rect1', x: 10, y: 20, width: 100, height: 80, correct: true },
-          ],
-          polygons: [],
-          circles: [],
-        },
-      };
-      const { container } = render(<Container {...props} />);
-      expect(container).toBeTruthy();
-    });
-  });
-
-  describe('getEvaluateText', () => {
-    it('should return correct text for correctly selected', () => {
-      const component = new Container(defaultProps);
-      const text = component.getEvaluateText(true, true);
-      expect(text).toBe('Correctly\nselected');
-    });
-
-    it('should return correct text for incorrectly selected', () => {
-      const component = new Container(defaultProps);
-      const text = component.getEvaluateText(false, true);
-      expect(text).toBe('Should not have\nbeen selected');
-    });
-
-    it('should return correct text for should have been selected', () => {
-      const component = new Container(defaultProps);
-      const text = component.getEvaluateText(true, false);
-      expect(text).toBe('Should have\nbeen selected');
-    });
-
-    it('should return null for correctly not selected', () => {
-      const component = new Container(defaultProps);
-      const text = component.getEvaluateText(false, false);
-      expect(text).toBeNull();
-    });
-  });
-
-  describe('correctness calculation', () => {
-    it('should calculate correctness properly', () => {
-      const component = new Container(defaultProps);
-      
-      expect(component.correctness(true, true)).toBe(true);
-      expect(component.correctness(true, false)).toBe(false);
-      expect(component.correctness(false, true)).toBe(false);
-      expect(component.correctness(false, false)).toBe(true);
-    });
-  });
-
-  describe('edge cases', () => {
-    it('should handle empty shapes object', () => {
-      const props = {
-        ...defaultProps,
-        shapes: {},
-      };
-      const { container } = render(<Container {...props} />);
-      expect(container).toBeTruthy();
-    });
-
-    it('should handle null imageUrl', () => {
-      const props = {
-        ...defaultProps,
-        imageUrl: null,
-      };
-      const { queryByAltText } = render(<Container {...props} />);
-      expect(queryByAltText('hotspot-image')).not.toBeInTheDocument();
-    });
-
-    it('should handle default scale value', () => {
-      const props = {
-        ...defaultProps,
-        scale: undefined,
-      };
-      const { getByTestId } = render(<Container {...props} />);
-      const stage = getByTestId('stage');
-      expect(stage).toBeInTheDocument();
-    });
-  });
-});