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

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

@@ -1,366 +0,0 @@
-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

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