@pie-element/hotspot 10.0.0-next.43 → 10.1.0-next.0

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

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