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

package/configure/src/__tests__/DeleteWidget.test.jsx

@@ -0,0 +1,366 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Konva from 'konva';
+import DeleteWidget from '../DeleteWidget';
+
+Konva.isBrowser = false;
+
+jest.mock('react-konva', () => {
+  const React = require('react');
+  return {
+    Group: ({ children, onClick, ...props }) => {
+      return React.createElement('div', { 'data-testid': 'group', onClick, ...props }, children);
+    },
+  };
+});
+
+jest.mock('../image-konva', () => {
+  return function ImageComponent({ src, x, y }) {
+    return <div data-testid="delete-icon" data-src={src} data-x={x} data-y={y} />;
+  };
+});
+
+jest.mock('../utils', () => ({
+  calculate: jest.fn((points) => {
+    const xValues = points.map(p => p.x);
+    const yValues = points.map(p => p.y);
+    return {
+      x: Math.max(...xValues),
+      y: Math.max(...yValues),
+    };
+  }),
+}));
+
+describe('DeleteWidget', () => {
+  let defaultProps;
+
+  beforeEach(() => {
+    defaultProps = {
+      id: 'shape1',
+      x: 100,
+      y: 150,
+      handleWidgetClick: jest.fn(),
+    };
+  });
+
+  describe('rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<DeleteWidget {...defaultProps} width={200} height={150} />);
+      expect(container).toBeTruthy();
+    });
+
+    it('should render Group component', () => {
+      const { getByTestId } = render(<DeleteWidget {...defaultProps} width={200} height={150} />);
+      expect(getByTestId('group')).toBeInTheDocument();
+    });
+
+    it('should render delete icon', () => {
+      const { getByTestId } = render(<DeleteWidget {...defaultProps} width={200} height={150} />);
+      expect(getByTestId('delete-icon')).toBeInTheDocument();
+    });
+  });
+
+  describe('rectangle positioning', () => {
+    it('should position delete icon at bottom-right for rectangles', () => {
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          x={100}
+          y={150}
+          width={200}
+          height={150}
+        />
+      );
+      
+      const icon = getByTestId('delete-icon');
+      // positionX = x + width - offset = 100 + 200 - 20 = 280
+      // positionY = y + height - offset = 150 + 150 - 20 = 280
+      expect(icon).toHaveAttribute('data-x', '280');
+      expect(icon).toHaveAttribute('data-y', '280');
+    });
+
+    it('should handle different rectangle dimensions', () => {
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          x={50}
+          y={75}
+          width={300}
+          height={200}
+        />
+      );
+      
+      const icon = getByTestId('delete-icon');
+      // positionX = 50 + 300 - 20 = 330
+      // positionY = 75 + 200 - 20 = 255
+      expect(icon).toHaveAttribute('data-x', '330');
+      expect(icon).toHaveAttribute('data-y', '255');
+    });
+  });
+
+  describe('circle positioning', () => {
+    it('should position delete icon above circle', () => {
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          x={200}
+          y={200}
+          isCircle={true}
+          radius={50}
+        />
+      );
+      
+      const icon = getByTestId('delete-icon');
+      // positionX = x + radius - offset = 200 + 50 - 20 = 230
+      // positionY = y = 200
+      expect(icon).toHaveAttribute('data-x', '230');
+      expect(icon).toHaveAttribute('data-y', '200');
+    });
+
+    it('should handle different circle sizes', () => {
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          x={100}
+          y={100}
+          isCircle={true}
+          radius={75}
+        />
+      );
+      
+      const icon = getByTestId('delete-icon');
+      // positionX = 100 + 75 - 20 = 155
+      // positionY = 100
+      expect(icon).toHaveAttribute('data-x', '155');
+      expect(icon).toHaveAttribute('data-y', '100');
+    });
+
+    it('should handle small circles', () => {
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          x={150}
+          y={150}
+          isCircle={true}
+          radius={20}
+        />
+      );
+      
+      const icon = getByTestId('delete-icon');
+      // positionX = 150 + 20 - 20 = 150
+      // positionY = 150
+      expect(icon).toHaveAttribute('data-x', '150');
+      expect(icon).toHaveAttribute('data-y', '150');
+    });
+  });
+
+  describe('polygon positioning', () => {
+    it('should position delete icon using calculate function for polygons', () => {
+      const { calculate } = require('../utils');
+      const points = [
+        { x: 10, y: 10 },
+        { x: 100, y: 20 },
+        { x: 90, y: 90 },
+        { x: 20, y: 80 },
+      ];
+      
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          points={points}
+        />
+      );
+      
+      expect(calculate).toHaveBeenCalledWith(points);
+      
+      const icon = getByTestId('delete-icon');
+      // Based on mocked calculate function: max x = 100, max y = 90
+      expect(icon).toHaveAttribute('data-x', '100');
+      expect(icon).toHaveAttribute('data-y', '90');
+    });
+
+    it('should handle triangular polygons', () => {
+      const { calculate } = require('../utils');
+      const points = [
+        { x: 50, y: 0 },
+        { x: 100, y: 100 },
+        { x: 0, y: 100 },
+      ];
+      
+      render(
+        <DeleteWidget
+          {...defaultProps}
+          points={points}
+        />
+      );
+      
+      expect(calculate).toHaveBeenCalledWith(points);
+    });
+
+    it('should handle complex polygons', () => {
+      const { calculate } = require('../utils');
+      const points = [
+        { x: 10, y: 10 },
+        { x: 50, y: 5 },
+        { x: 90, y: 10 },
+        { x: 100, y: 50 },
+        { x: 90, y: 90 },
+        { x: 50, y: 100 },
+        { x: 10, y: 90 },
+        { x: 0, y: 50 },
+      ];
+      
+      render(
+        <DeleteWidget
+          {...defaultProps}
+          points={points}
+        />
+      );
+      
+      expect(calculate).toHaveBeenCalledWith(points);
+    });
+  });
+
+  describe('interactions', () => {
+    it('should call handleWidgetClick when clicked', () => {
+      const handleWidgetClick = jest.fn();
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          handleWidgetClick={handleWidgetClick}
+          width={200}
+          height={150}
+        />
+      );
+      
+      const group = getByTestId('group');
+      fireEvent.click(group);
+      
+      expect(handleWidgetClick).toHaveBeenCalledWith('shape1');
+    });
+
+    it('should call handleWidgetClick with correct id for circles', () => {
+      const handleWidgetClick = jest.fn();
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          id="circle1"
+          handleWidgetClick={handleWidgetClick}
+          isCircle={true}
+          radius={50}
+        />
+      );
+      
+      const group = getByTestId('group');
+      fireEvent.click(group);
+      
+      expect(handleWidgetClick).toHaveBeenCalledWith('circle1');
+    });
+
+    it('should call handleWidgetClick with correct id for polygons', () => {
+      const handleWidgetClick = jest.fn();
+      const points = [
+        { x: 10, y: 10 },
+        { x: 100, y: 20 },
+        { x: 50, y: 100 },
+      ];
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          id="polygon1"
+          handleWidgetClick={handleWidgetClick}
+          points={points}
+        />
+      );
+      
+      const group = getByTestId('group');
+      fireEvent.click(group);
+      
+      expect(handleWidgetClick).toHaveBeenCalledWith('polygon1');
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle zero dimensions for rectangles', () => {
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          x={0}
+          y={0}
+          width={0}
+          height={0}
+        />
+      );
+      
+      const icon = getByTestId('delete-icon');
+      // positionX = 0 + 0 - 20 = -20
+      // positionY = 0 + 0 - 20 = -20
+      expect(icon).toHaveAttribute('data-x', '-20');
+      expect(icon).toHaveAttribute('data-y', '-20');
+    });
+
+    it('should handle zero radius for circles', () => {
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          x={100}
+          y={100}
+          isCircle={true}
+          radius={0}
+        />
+      );
+      
+      const icon = getByTestId('delete-icon');
+      // positionX = 100 + 0 - 20 = 80
+      // positionY = 100
+      expect(icon).toHaveAttribute('data-x', '80');
+      expect(icon).toHaveAttribute('data-y', '100');
+    });
+
+    it('should handle negative coordinates', () => {
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          x={-50}
+          y={-75}
+          width={100}
+          height={100}
+        />
+      );
+      
+      const icon = getByTestId('delete-icon');
+      // positionX = -50 + 100 - 20 = 30
+      // positionY = -75 + 100 - 20 = 5
+      expect(icon).toHaveAttribute('data-x', '30');
+      expect(icon).toHaveAttribute('data-y', '5');
+    });
+
+    it('should handle single point polygon', () => {
+      const points = [{ x: 50, y: 50 }];
+      
+      const { container } = render(
+        <DeleteWidget
+          {...defaultProps}
+          points={points}
+        />
+      );
+      
+      expect(container).toBeTruthy();
+    });
+  });
+
+  describe('icon rendering', () => {
+    it('should pass correct src to ImageComponent', () => {
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          width={200}
+          height={150}
+        />
+      );
+      
+      const icon = getByTestId('delete-icon');
+      expect(icon).toHaveAttribute('data-src');
+    });
+  });
+});

package/configure/src/__tests__/button.test.jsx

@@ -0,0 +1,198 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import RawButton from '../button';
+
+describe('RawButton', () => {
+  describe('rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<RawButton />);
+      expect(container).toBeTruthy();
+    });
+
+    it('should render with default label', () => {
+      const { getByText } = render(<RawButton />);
+      expect(getByText('Add')).toBeInTheDocument();
+    });
+
+    it('should render with custom label', () => {
+      const { getByText } = render(<RawButton label="Custom Label" />);
+      expect(getByText('Custom Label')).toBeInTheDocument();
+    });
+
+    it('should render as a button element', () => {
+      const { getByRole } = render(<RawButton label="Test Button" />);
+      expect(getByRole('button')).toBeInTheDocument();
+    });
+
+    it('should apply custom className', () => {
+      const { getByRole } = render(<RawButton label="Test" className="custom-class" />);
+      const button = getByRole('button');
+      expect(button).toHaveClass('custom-class');
+    });
+  });
+
+  describe('interactions', () => {
+    it('should call onClick when clicked', () => {
+      const onClick = jest.fn();
+      const { getByRole } = render(<RawButton label="Click Me" onClick={onClick} />);
+      
+      const button = getByRole('button');
+      fireEvent.click(button);
+      
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call onClick when disabled', () => {
+      const onClick = jest.fn();
+      const { getByRole } = render(<RawButton label="Disabled" onClick={onClick} disabled={true} />);
+      
+      const button = getByRole('button');
+      fireEvent.click(button);
+      
+      expect(onClick).not.toHaveBeenCalled();
+    });
+
+    it('should call onClick multiple times', () => {
+      const onClick = jest.fn();
+      const { getByRole } = render(<RawButton label="Multi Click" onClick={onClick} />);
+      
+      const button = getByRole('button');
+      fireEvent.click(button);
+      fireEvent.click(button);
+      fireEvent.click(button);
+      
+      expect(onClick).toHaveBeenCalledTimes(3);
+    });
+  });
+
+  describe('disabled state', () => {
+    it('should be enabled by default', () => {
+      const { getByRole } = render(<RawButton label="Test" />);
+      const button = getByRole('button');
+      expect(button).not.toBeDisabled();
+    });
+
+    it('should be disabled when disabled prop is true', () => {
+      const { getByRole } = render(<RawButton label="Test" disabled={true} />);
+      const button = getByRole('button');
+      expect(button).toBeDisabled();
+    });
+
+    it('should be enabled when disabled prop is false', () => {
+      const { getByRole } = render(<RawButton label="Test" disabled={false} />);
+      const button = getByRole('button');
+      expect(button).not.toBeDisabled();
+    });
+  });
+
+  describe('default props', () => {
+    it('should use default onClick when not provided', () => {
+      const { getByRole } = render(<RawButton label="Test" />);
+      const button = getByRole('button');
+      
+      // Should not throw error when clicked
+      expect(() => fireEvent.click(button)).not.toThrow();
+    });
+
+    it('should use default label "Add" when not provided', () => {
+      const { getByText } = render(<RawButton />);
+      expect(getByText('Add')).toBeInTheDocument();
+    });
+
+    it('should use empty className by default', () => {
+      const { getByRole } = render(<RawButton label="Test" />);
+      const button = getByRole('button');
+      expect(button.className).toBeTruthy(); // Will have MUI classes
+    });
+
+    it('should be enabled by default', () => {
+      const { getByRole } = render(<RawButton label="Test" />);
+      const button = getByRole('button');
+      expect(button).not.toBeDisabled();
+    });
+  });
+
+  describe('variant and size', () => {
+    it('should render with contained variant', () => {
+      const { getByRole } = render(<RawButton label="Test" />);
+      const button = getByRole('button');
+      expect(button).toHaveClass('MuiButton-contained');
+    });
+
+    it('should render with small size', () => {
+      const { getByRole } = render(<RawButton label="Test" />);
+      const button = getByRole('button');
+      expect(button).toHaveClass('MuiButton-sizeSmall');
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle empty label', () => {
+      const { getByRole } = render(<RawButton label="" />);
+      const button = getByRole('button');
+      expect(button).toBeInTheDocument();
+      expect(button.textContent).toBe('');
+    });
+
+    it('should handle very long label', () => {
+      const longLabel = 'This is a very long button label that might wrap or overflow';
+      const { getByText } = render(<RawButton label={longLabel} />);
+      expect(getByText(longLabel)).toBeInTheDocument();
+    });
+
+    it('should handle special characters in label', () => {
+      const specialLabel = '!@#$%^&*()_+-=[]{}|;:",.<>?/~`';
+      const { getByText } = render(<RawButton label={specialLabel} />);
+      expect(getByText(specialLabel)).toBeInTheDocument();
+    });
+
+    it('should handle Unicode characters in label', () => {
+      const unicodeLabel = '🚀 Launch 你好 مرحبا';
+      const { getByText } = render(<RawButton label={unicodeLabel} />);
+      expect(getByText(unicodeLabel)).toBeInTheDocument();
+    });
+
+    it('should handle null onClick gracefully with default', () => {
+      const { getByRole } = render(<RawButton label="Test" onClick={null} />);
+      const button = getByRole('button');
+      
+      // Should use default onClick
+      expect(() => fireEvent.click(button)).not.toThrow();
+    });
+  });
+
+  describe('prop updates', () => {
+    it('should update label when prop changes', () => {
+      const { getByText, rerender } = render(<RawButton label="Initial" />);
+      expect(getByText('Initial')).toBeInTheDocument();
+      
+      rerender(<RawButton label="Updated" />);
+      expect(getByText('Updated')).toBeInTheDocument();
+    });
+
+    it('should update disabled state when prop changes', () => {
+      const { getByRole, rerender } = render(<RawButton label="Test" disabled={false} />);
+      const button = getByRole('button');
+      expect(button).not.toBeDisabled();
+      
+      rerender(<RawButton label="Test" disabled={true} />);
+      expect(button).toBeDisabled();
+    });
+
+    it('should update onClick handler when prop changes', () => {
+      const onClick1 = jest.fn();
+      const onClick2 = jest.fn();
+      const { getByRole, rerender } = render(<RawButton label="Test" onClick={onClick1} />);
+      
+      const button = getByRole('button');
+      fireEvent.click(button);
+      expect(onClick1).toHaveBeenCalledTimes(1);
+      expect(onClick2).not.toHaveBeenCalled();
+      
+      rerender(<RawButton label="Test" onClick={onClick2} />);
+      fireEvent.click(button);
+      expect(onClick1).toHaveBeenCalledTimes(1);
+      expect(onClick2).toHaveBeenCalledTimes(1);
+    });
+  });
+});