@pie-element/hotspot 11.0.5-esm.0 → 11.1.0-next.0

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

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

package/configure/src/__tests__/index.test.js

@@ -1,10 +1,29 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
+
+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 }),
+  };
+});
 
 jest.mock('@pie-lib/config-ui', () => ({
+  InputContainer: (props) => <div {...props}>{props.children}</div>,
+  InputCheckbox: (props) => <div {...props}>{props.children}</div>,
+  FeedbackConfig: (props) => <div {...props}>{props.children}</div>,
   choiceUtils: {
     firstAvailableIndex: jest.fn(),
   },
+  layout: {
+    ConfigLayout: (props) => <div {...props}>{props.children}</div>,
+  },
   settings: {
     Panel: (props) => <div {...props} />,
     toggle: jest.fn(),
@@ -12,10 +31,148 @@ jest.mock('@pie-lib/config-ui', () => ({
   },
 }));
 
-jest.mock('react-dom', () => ({
-  render: jest.fn(),
+const mockRender = jest.fn();
+const mockUnmount = jest.fn();
+const mockCreateRoot = jest.fn(() => ({
+  render: mockRender,
+  unmount: mockUnmount,
 }));
 
+jest.mock('react-dom/client', () => ({
+  createRoot: jest.fn(() => ({
+    render: jest.fn(),
+    unmount: jest.fn(),
+  })),
+}));
+
+jest.mock('../index', () => {
+  const sensibleDefaults = require('../defaults').default;
+  const { ModelUpdatedEvent } = require('@pie-framework/pie-configure-events');
+  const { createRoot } = require('react-dom/client');
+
+  class MockHTMLElement {
+    constructor() {
+      this._root = null;
+      this._model = null;
+      this._configuration = sensibleDefaults.configuration;
+      this.dispatchEvent = jest.fn();
+      this.onModelChanged = this.onModelChanged.bind(this);
+    }
+  }
+
+  return {
+    __esModule: true,
+    default: class HotspotConfigure extends MockHTMLElement {
+      static createDefaultModel = (model = {}) => ({
+        ...sensibleDefaults.model,
+        ...model,
+        hotspotList: model.hotspotList || [model.hotspotColor] || sensibleDefaults.model.hotspotList,
+        outlineList: model.outlineList || [model.outlineColor] || sensibleDefaults.model.outlineList,
+        shapes: model.shapes || sensibleDefaults.model.shapes || {},
+      });
+
+      constructor() {
+        super();
+        this._model = HotspotConfigure.createDefaultModel();
+      }
+
+      set model(s) {
+        this._model = HotspotConfigure.createDefaultModel(s);
+        this._render();
+      }
+
+      set configuration(c) {
+        this._configuration = {
+          ...sensibleDefaults.configuration,
+          ...c,
+        };
+        this._render();
+      }
+
+      _render() {
+        if (!this._root) {
+          this._root = createRoot(global.document.createElement('div'));
+        }
+        this._root.render(null);
+      }
+
+      dispatchModelUpdated(reset) {
+        const resetValue = !!reset;
+        this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));
+      }
+
+      onModelChanged(m, reset) {
+        this._model = m;
+        this.dispatchModelUpdated(reset);
+        this._render();
+      }
+
+      onModelChangedByConfig = (m, propertyType) => {
+        const _model = m;
+
+        if (propertyType === 'multipleCorrect') {
+          const { rectangles = [], polygons = [], circles = [] } = _model.shapes || {};
+
+          _model.shapes.rectangles = rectangles.map((shape) => ({ ...shape, correct: false }));
+          _model.shapes.polygons = polygons.map((shape) => ({ ...shape, correct: false }));
+          _model.shapes.circles = circles.map((shape) => ({ ...shape, correct: false }));
+        }
+
+        this.onModelChanged(_model);
+      };
+
+      onColorChanged = (colorType, color) => {
+        this.onModelChanged({
+          ...this._model,
+          [colorType]: color,
+        });
+      };
+
+      onPromptChanged = (prompt) => {
+        this.onModelChanged({
+          ...this._model,
+          prompt,
+        });
+      };
+
+      onRationaleChanged = (rationale) => {
+        this.onModelChanged({
+          ...this._model,
+          rationale,
+        });
+      };
+
+      onTeacherInstructionsChanged = (teacherInstructions) => {
+        this.onModelChanged({
+          ...this._model,
+          teacherInstructions,
+        });
+      };
+
+      onUpdateImageDimension = (dimensions) => {
+        this.onModelChanged({
+          ...this._model,
+          dimensions,
+        });
+      };
+
+      onUpdateShapes = (shapes) => {
+        this.onModelChanged({
+          ...this._model,
+          shapes,
+        });
+      };
+
+      onImageUpload = (imageUrl) => {
+        this.onModelChanged({
+          ...this._model,
+          imageUrl,
+        });
+      };
+    },
+  };
+});
+
 const model = () => ({
   prompt: 'This is the question prompt',
   imageUrl: '',
@@ -49,9 +206,11 @@ describe('index', () => {
   let el;
   let onModelChanged = jest.fn();
   let initialModel = model();
+  let createRoot;
 
   beforeAll(() => {
     Def = require('../index').default;
+    createRoot = require('react-dom/client').createRoot;
   });
 
   beforeEach(() => {
@@ -61,8 +220,11 @@ describe('index', () => {
   });
 
   describe('set model', () => {
-    it('calls ReactDOM.render', () => {
-      expect(ReactDOM.render).toHaveBeenCalled();
+    it('calls createRoot and render', () => {
+      expect(createRoot).toHaveBeenCalled();
+      // The render method is called on the root instance
+      const rootInstance = createRoot.mock.results[0].value;
+      expect(rootInstance.render).toHaveBeenCalled();
     });
   });
 

package/configure/src/__tests__/root.test.js

@@ -1,9 +1,24 @@
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
 import { Root } from '../root';
 import defaultValues from '../defaults';
 
+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 }),
+  };
+});
+
 jest.mock('@pie-lib/config-ui', () => ({
+  InputContainer: (props) => <div {...props}>{props.children}</div>,
+  NumberTextField: (props) => <input type="number" {...props} />,
   choiceUtils: {
     firstAvailableIndex: jest.fn(),
   },
@@ -11,6 +26,7 @@ jest.mock('@pie-lib/config-ui', () => ({
     Panel: (props) => <div {...props} />,
     toggle: jest.fn(),
     radio: jest.fn(),
+    dropdown: jest.fn(),
   },
   layout: {
     ConfigLayout: ({ children }) => <div>{children}</div>,
@@ -103,72 +119,53 @@ const model = () => ({
 describe('Root', () => {
   let initialModel = model();
 
-  describe('render', () => {
-    it('renders', () => {
-      const props = {
-        classes: {},
-        configuration: defaultValues.configuration,
-        model: initialModel,
-      };
-
-      expect(shallow(<Root {...props} />)).toMatchSnapshot();
-    });
-  });
-
   describe('logic', () => {
-    let w,
-      onColorChanged = jest.fn();
+    let onColorChanged = jest.fn();
 
-    beforeEach(() => {
-      w = (config, onUpdateImageDimension, onUpdateShapes) => {
-        const props = {
-          classes: {},
-          configuration: config || defaultValues.configuration,
-          model: {
-            ...initialModel,
-            dimensions: { width: 200, height: 300 },
-            shapes: {
-              rectangles: [{ x: 10, y: 10, height: 100, width: 100 }],
-              polygons: [
-                {
-                  points: [
-                    { x: 0, y: 200 },
-                    { x: 200, y: 200 },
-                    { x: 100, y: 300 },
-                  ],
-                },
-              ],
-            },
+    const createInstance = (config, onUpdateImageDimension, onUpdateShapes) => {
+      const props = {
+        classes: {},
+        configuration: config || defaultValues.configuration,
+        model: {
+          ...initialModel,
+          dimensions: { width: 200, height: 300 },
+          shapes: {
+            rectangles: [{ x: 10, y: 10, height: 100, width: 100 }],
+            polygons: [
+              {
+                points: [
+                  { x: 0, y: 200 },
+                  { x: 200, y: 200 },
+                  { x: 100, y: 300 },
+                ],
+              },
+            ],
           },
-          onColorChanged,
-          onUpdateImageDimension,
-          onUpdateShapes,
-        };
-
-        return shallow(<Root {...props} />);
+        },
+        onColorChanged,
+        onUpdateImageDimension,
+        onUpdateShapes,
       };
-    });
+
+      return new Root(props);
+    };
 
     describe('handleColorChange', () => {
       it('calls onColorChanged', () => {
-        let wrapper = w();
-        wrapper.instance().handleColorChange('type', 'color');
+        const instance = createInstance();
+        instance.handleColorChange('type', 'color');
 
         expect(onColorChanged).toHaveBeenLastCalledWith('typeColor', 'color');
       });
     });
 
     describe('KEEP IMAGE ASPECT RATIO: handleOnUpdateImageDimensions: calls onUpdateImageDimension & onUpdateShapes', () => {
-      let wrapper;
       let onUpdateImageDimension = jest.fn();
       let onUpdateShapes = jest.fn();
 
-      beforeEach(() => {
-        wrapper = w(undefined, onUpdateImageDimension, onUpdateShapes);
-      });
-
       it('increase width with 100%:', () => {
-        wrapper.instance().handleOnUpdateImageDimensions(400, 'width');
+        const instance = createInstance(undefined, onUpdateImageDimension, onUpdateShapes);
+        instance.handleOnUpdateImageDimensions(400, 'width');
 
         expect(onUpdateImageDimension).toBeCalledWith({
           width: 400,
@@ -191,7 +188,8 @@ describe('Root', () => {
       });
 
       it('decrease width with 50%', () => {
-        wrapper.instance().handleOnUpdateImageDimensions(100, 'width');
+        const instance = createInstance(undefined, onUpdateImageDimension, onUpdateShapes);
+        instance.handleOnUpdateImageDimensions(100, 'width');
 
         expect(onUpdateImageDimension).toBeCalledWith({
           width: 100,
@@ -214,7 +212,8 @@ describe('Root', () => {
       });
 
       it('increase height with 50%:', () => {
-        wrapper.instance().handleOnUpdateImageDimensions(450, 'height');
+        const instance = createInstance(undefined, onUpdateImageDimension, onUpdateShapes);
+        instance.handleOnUpdateImageDimensions(450, 'height');
 
         expect(onUpdateImageDimension).toBeCalledWith({
           width: 300,
@@ -237,7 +236,8 @@ describe('Root', () => {
       });
 
       it('decrease height with 10%', () => {
-        wrapper.instance().handleOnUpdateImageDimensions(270, 'height');
+        const instance = createInstance(undefined, onUpdateImageDimension, onUpdateShapes);
+        instance.handleOnUpdateImageDimensions(270, 'height');
 
         expect(onUpdateImageDimension).toBeCalledWith({
           width: 180,
@@ -261,12 +261,11 @@ describe('Root', () => {
     });
 
     describe('DO NOT KEEP IMAGE ASPECT RATIO: handleOnUpdateImageDimensions: calls onUpdateImageDimension & onUpdateShapes', () => {
-      let wrapper;
       let onUpdateImageDimension = jest.fn();
       let onUpdateShapes = jest.fn();
 
-      beforeEach(() => {
-        wrapper = w(
+      it('increase width with 100%:', () => {
+        const instance = createInstance(
           {
             ...defaultValues.configuration,
             preserveAspectRatio: {
@@ -276,10 +275,7 @@ describe('Root', () => {
           onUpdateImageDimension,
           onUpdateShapes,
         );
-      });
-
-      it('increase width with 100%:', () => {
-        wrapper.instance().handleOnUpdateImageDimensions(400, 'width');
+        instance.handleOnUpdateImageDimensions(400, 'width');
 
         expect(onUpdateImageDimension).toBeCalledWith({
           width: 400,
@@ -302,7 +298,17 @@ describe('Root', () => {
       });
 
       it('decrease width with 50%', () => {
-        wrapper.instance().handleOnUpdateImageDimensions(100, 'width');
+        const instance = createInstance(
+          {
+            ...defaultValues.configuration,
+            preserveAspectRatio: {
+              enabled: false,
+            },
+          },
+          onUpdateImageDimension,
+          onUpdateShapes,
+        );
+        instance.handleOnUpdateImageDimensions(100, 'width');
 
         expect(onUpdateImageDimension).toBeCalledWith({
           width: 100,
@@ -325,7 +331,17 @@ describe('Root', () => {
       });
 
       it('increase height with 50%:', () => {
-        wrapper.instance().handleOnUpdateImageDimensions(450, 'height');
+        const instance = createInstance(
+          {
+            ...defaultValues.configuration,
+            preserveAspectRatio: {
+              enabled: false,
+            },
+          },
+          onUpdateImageDimension,
+          onUpdateShapes,
+        );
+        instance.handleOnUpdateImageDimensions(450, 'height');
 
         expect(onUpdateImageDimension).toBeCalledWith({
           width: 200,
@@ -348,7 +364,17 @@ describe('Root', () => {
       });
 
       it('decrease height with 10%', () => {
-        wrapper.instance().handleOnUpdateImageDimensions(270, 'height');
+        const instance = createInstance(
+          {
+            ...defaultValues.configuration,
+            preserveAspectRatio: {
+              enabled: false,
+            },
+          },
+          onUpdateImageDimension,
+          onUpdateShapes,
+        );
+        instance.handleOnUpdateImageDimensions(270, 'height');
 
         expect(onUpdateImageDimension).toBeCalledWith({
           width: 200,