@pie-element/hotspot 9.3.4-next.0 → 10.0.0-beta.0

package/configure/src/__tests__/hotspot-drawable.test.js

@@ -1,7 +1,20 @@
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
 import { Drawable } from '../hotspot-drawable';
 
+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 }),
+  };
+});
+
 const model = () => ({
   imageUrl: 'https://cdn.fluence.net/image/0240eb1455ce4c4bb6180232347b6aef_W',
   shapes: [
@@ -101,33 +114,35 @@ describe('HotspotDrawable', () => {
         ...extras,
       };
 
-      return shallow(<Drawable {...props} />);
+      return render(<Drawable {...props} />);
     };
   });
 
-  describe('render', () => {
-    it('renders with default strokeWidth', () => {
-      expect(w()).toMatchSnapshot();
-    });
-
-    it('renders with given strokeWidth', () => {
-      expect(w({ strokeWidth: 10 })).toMatchSnapshot();
-    });
-
-    it('renders', () => {
-      expect(w()).toMatchSnapshot();
-    });
-  });
-
   describe('logic', () => {
-    let wrapper;
-
-    beforeEach(() => {
-      wrapper = w();
-    });
+    const createInstance = () => {
+      const props = {
+        classes: {},
+        dimensions: initialModel.dimensions,
+        disableDrag: handleDisableDrag,
+        enableDrag: handleEnableDrag,
+        imageUrl: initialModel.imageUrl,
+        hotspotColor: initialModel.hotspotColor,
+        multipleCorrect: initialModel.multipleCorrect,
+        onUpdateImageDimension: onUpdateImageDimension,
+        onUpdateShapes: onUpdateShapes,
+        outlineColor: initialModel.outlineColor,
+        shapes: initialModel.shapes,
+        strokeWidth: 5,
+        shapeType: 'rectangle',
+        handleFinishDrawing: jest.fn(),
+        onDeleteShape: jest.fn(),
+      };
+      return new Drawable(props);
+    };
 
     it('handleOnMouseDown target != Stage', () => {
-      wrapper.instance().state.stateShapes = initialModel.shapes;
+      const instance = createInstance();
+      instance.state.stateShapes = initialModel.shapes;
 
       const event = {
         target: 'Line',
@@ -138,12 +153,13 @@ describe('HotspotDrawable', () => {
         },
       };
 
-      wrapper.instance().handleOnMouseDown(event);
+      instance.handleOnMouseDown(event);
 
       expect(onUpdateShapes).not.toBeCalled();
     });
 
     it('handleOnMouseDown target = Stage', () => {
+      const instance = createInstance();
       const event = {
         target: 'Stage',
         currentTarget: 'Stage',
@@ -153,7 +169,7 @@ describe('HotspotDrawable', () => {
         },
       };
 
-      wrapper.instance().handleOnMouseDown(event);
+      instance.handleOnMouseDown(event);
 
       expect(onUpdateShapes).toHaveBeenCalledWith([
         ...initialModel.shapes,
@@ -170,10 +186,11 @@ describe('HotspotDrawable', () => {
     });
 
     it('handleOnMouseUp isDrawing = true', () => {
-      wrapper.instance().state.isDrawing = true;
-      wrapper.instance().state.shapes = initialModel.shapes.slice(0, 2);
+      const instance = createInstance();
+      instance.state.isDrawing = true;
+      instance.state.shapes = initialModel.shapes.slice(0, 2);
 
-      wrapper.instance().handleOnMouseUp({
+      instance.handleOnMouseUp({
         evt: {
           layerX: 20,
           layerY: 30,
@@ -183,9 +200,9 @@ describe('HotspotDrawable', () => {
       expect(onUpdateShapes).toHaveBeenCalledWith([...initialModel.shapes.slice(0, 2)]);
 
       // at this point, state.stateShapes is false, so we don't want to update shapes with false (onUpdateShapes)
-      expect(wrapper.instance().state.stateShapes).toEqual(false);
+      expect(instance.state.stateShapes).toEqual(false);
 
-      wrapper.instance().handleOnMouseUp({
+      instance.handleOnMouseUp({
         evt: {
           layerX: 20,
           layerY: 30,
@@ -194,13 +211,14 @@ describe('HotspotDrawable', () => {
 
       expect(onUpdateShapes).not.toBeCalledWith(false);
 
-      wrapper.instance().handleOnMouseUp({});
+      instance.handleOnMouseUp({});
 
       expect(onUpdateShapes).toHaveBeenCalledWith(initialModel.shapes.slice(0, 2));
     });
 
     it('handleOnSetAsCorrect correct', () => {
-      wrapper.instance().handleOnSetAsCorrect({
+      const instance = createInstance();
+      instance.handleOnSetAsCorrect({
         id: '1',
       });
 
@@ -215,7 +233,8 @@ describe('HotspotDrawable', () => {
     });
 
     it('handleOnSetAsCorrect incorrect', () => {
-      wrapper.instance().handleOnSetAsCorrect({
+      const instance = createInstance();
+      instance.handleOnSetAsCorrect({
         id: '0',
       });
 
@@ -229,7 +248,8 @@ describe('HotspotDrawable', () => {
     });
 
     it('handleOnDragEnd', () => {
-      wrapper.instance().handleOnDragEnd('0', { x: 1, y: 1 });
+      const instance = createInstance();
+      instance.handleOnDragEnd('0', { x: 1, y: 1 });
 
       expect(onUpdateShapes).toHaveBeenCalledWith([
         {
@@ -242,7 +262,8 @@ describe('HotspotDrawable', () => {
     });
 
     it('handleOnDragEnd unexistent id', () => {
-      wrapper.instance().handleOnDragEnd('10', { x: 1, y: 1 });
+      const instance = createInstance();
+      instance.handleOnDragEnd('10', { x: 1, y: 1 });
 
       expect(onUpdateShapes).toHaveBeenCalledWith(initialModel.shapes);
     });

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,

package/configure/src/button.jsx

@@ -1,24 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
-import Button from '@material-ui/core/Button';
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
 
-const RawButton = ({ classes, className, label, onClick, disabled }) => (
-  <Button
+const StyledButton = styled(Button)(({ theme }) => ({
+  marginLeft: theme.spacing(1),
+}));
+
+const RawButton = ({ className, label, onClick, disabled }) => (
+  <StyledButton
     onClick={onClick}
     disabled={disabled}
-    className={classNames(classes.addButton, className)}
+    className={className}
     size="small"
-    variant="contained"
-    color="default"
-  >
+    variant="contained">
     {label}
-  </Button>
+  </StyledButton>
 );
 
 RawButton.propTypes = {
-  classes: PropTypes.object.isRequired,
   className: PropTypes.string,
   disabled: PropTypes.bool,
   label: PropTypes.string,
@@ -32,12 +32,4 @@ RawButton.defaultProps = {
   onClick: () => {},
 };
 
-const styles = (theme) => ({
-  addButton: {
-    marginLeft: theme.spacing.unit,
-  },
-});
-
-const ButtonStyled = withStyles(styles)(RawButton);
-
-export default ButtonStyled;
+export default RawButton;