@pie-element/hotspot 4.10.10 → 4.10.11-beta.1443

package/src/__tests__/rectangle.test.jsx

@@ -0,0 +1,237 @@
+import React from 'react';
+import _ from 'lodash';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import Konva from 'konva';
+import { Rect } from 'react-konva';
+
+import { shallowChild } from '@pie-lib/test-utils';
+
+import Rectangle from '../hotspot/rectangle';
+import Image from '../hotspot/image';
+import { faCorrect, faWrong } from '../hotspot/icons';
+
+global.MutationObserver = class {
+  constructor(callback) {}
+  disconnect() {}
+  observe(element, initObject) {}
+};
+
+Konva.isBrowser = false;
+
+describe('Rectangle', () => {
+  let onClick, wrapper;
+
+  const mkWrapper = (opts = {}) => {
+    opts = _.extend(
+      {
+        classes: {
+          base: 'base',
+        },
+        height: 200,
+        hotspotColor: 'rgba(137, 183, 244, 0.65)',
+        id: '1',
+        isCorrect: false,
+        isEvaluateMode: false,
+        evaluateText: null,
+        disabled: false,
+        outlineColor: 'blue',
+        selected: false,
+        width: 300,
+        x: 5,
+        y: 5,
+      },
+      opts,
+    );
+
+    return shallow(<Rectangle {...opts} onClick={onClick} />);
+  };
+
+  beforeEach(() => {
+    onClick = jest.fn();
+    wrapper = mkWrapper();
+  });
+
+  describe('snapshots', () => {
+    describe('outline color', () => {
+      it('renders', () => {
+        const wrapper = mkWrapper({ outlineColor: 'red' });
+        expect(toJson(wrapper)).toMatchSnapshot();
+      });
+    });
+
+    describe('outline width', () => {
+      it('renders with default border width', () => {
+        const wrapper = mkWrapper();
+        expect(toJson(wrapper)).toMatchSnapshot();
+      });
+
+      it('renders with given border width', () => {
+        const wrapper = mkWrapper({ strokeWidth: 10 });
+        expect(toJson(wrapper)).toMatchSnapshot();
+      });
+    });
+
+    describe('hotspot color', () => {
+      it('renders', () => {
+        const wrapper = mkWrapper({ hotspotColor: 'rgba(217, 30, 24, 0.65)' });
+        expect(toJson(wrapper)).toMatchSnapshot();
+      });
+    });
+
+    describe('evaluate with correct answer', () => {
+      it('renders', () => {
+        const wrapper = mkWrapper({ isEvaluateMode: true, isCorrect: true, evaluateText: 'Correctly\nselected' });
+        expect(toJson(wrapper)).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('in evaluate mode', () => {
+    const defaultModel = {
+      onClick,
+      id: '1',
+      height: 200,
+      hotspotColor: 'rgba(137, 183, 244, 0.65)',
+      disabled: true,
+      width: 300,
+      x: 5,
+      y: 5,
+      selected: false,
+      isCorrect: false,
+      isEvaluateMode: true,
+      evaluateText: null,
+      strokeWidth: 5,
+      outlineColor: 'blue',
+      markAsCorrect: false,
+      showCorrectEnabled: false,
+    };
+
+    const getComponents = (model) => {
+      const testWrapper = shallowChild(
+        Rectangle,
+        {
+          ...defaultModel,
+          ...model,
+        },
+        1,
+      );
+      const rectangleComponent = testWrapper();
+      const rectComponent = rectangleComponent.find(Rect);
+      return {
+        rectangleComponent,
+        rectComponent,
+      };
+    };
+
+    describe('when correctly selected', () => {
+      const { rectangleComponent, rectComponent } = getComponents({
+        selected: true,
+        isCorrect: true,
+      });
+
+      it('should have a blue outline', () => {
+        expect(rectComponent.prop('stroke')).toEqual('blue');
+        expect(rectComponent.prop('strokeWidth')).toEqual(defaultModel.strokeWidth);
+      });
+
+      it('should have a green checkmark icon', () => {
+        const imgComponent = rectangleComponent.find(Image);
+        expect(imgComponent.length).toEqual(1);
+        expect(imgComponent.prop('src')).toEqual(faCorrect);
+      });
+    });
+
+    describe('when correctly not selected', () => {
+      const { rectangleComponent, rectComponent } = getComponents({
+        selected: false,
+        isCorrect: true,
+      });
+
+      it('should have no outline', () => {
+        expect(rectComponent.prop('strokeWidth')).toEqual(0);
+      });
+
+      it('should have no icon', () => {
+        const imgComponent = rectangleComponent.find(Image);
+        expect(imgComponent.length).toEqual(0);
+      });
+    });
+
+    describe('when incorrectly selected', () => {
+      const { rectangleComponent, rectComponent } = getComponents({
+        selected: true,
+        isCorrect: false,
+      });
+
+      it('should have a red outline', () => {
+        expect(rectComponent.prop('stroke')).toEqual('red');
+        expect(rectComponent.prop('strokeWidth')).toEqual(defaultModel.strokeWidth);
+      });
+
+      it('should have a red x icon', () => {
+        const imgComponent = rectangleComponent.find(Image);
+        expect(imgComponent.length).toEqual(1);
+        expect(imgComponent.prop('src')).toEqual(faWrong);
+      });
+    });
+
+    describe('when incorrectly not selected', () => {
+      const { rectangleComponent, rectComponent } = getComponents({
+        selected: false,
+        isCorrect: false,
+      });
+
+      it('should have no outline', () => {
+        expect(rectComponent.prop('strokeWidth')).toEqual(0);
+      });
+
+      it('should have a red x icon', () => {
+        const imgComponent = rectangleComponent.find(Image);
+        expect(imgComponent.length).toEqual(1);
+        expect(imgComponent.prop('src')).toEqual(faWrong);
+      });
+    });
+
+    describe('when showing correct answer (showCorrectEnabled = true)', () => {
+      it('should have a green outline', () => {
+        const { rectComponent } = getComponents({
+          showCorrectEnabled: true,
+          markAsCorrect: true,
+        });
+        expect(rectComponent.prop('stroke')).toEqual('green');
+        expect(rectComponent.prop('strokeWidth')).toEqual(defaultModel.strokeWidth);
+      });
+
+      it('should have a green checkmark icon', () => {
+        const { rectangleComponent } = getComponents({
+          showCorrectEnabled: true,
+          markAsCorrect: true,
+        });
+        const imgComponent = rectangleComponent.find(Image);
+        expect(imgComponent.prop('src')).toEqual(faCorrect);
+      });
+
+      it('should not be selected if the answer is incorrect', () => {
+        const { rectComponent } = getComponents({
+          showCorrectEnabled: true,
+          markAsCorrect: false,
+          selected: true,
+          isCorrect: false,
+        });
+        expect(rectComponent.prop('strokeWidth')).toEqual(0);
+      });
+
+      it('should not render an icon if the answer is incorrect', () => {
+        const { rectangleComponent } = getComponents({
+          showCorrectEnabled: true,
+          markAsCorrect: false,
+          selected: true,
+          isCorrect: false,
+        });
+        const imgComponent = rectangleComponent.find(Image);
+        expect(imgComponent.length).toEqual(0);
+      });
+    });
+  });
+});

package/src/__tests__/{session-updater-test.jsx → session-updater.test.jsx}

@@ -5,38 +5,38 @@ const modelCopy = {
     rectangles: [
       {
         id: '1',
-        correct: true
+        correct: true,
       },
       {
-        id: '2'
+        id: '2',
       },
       {
-        id: '3'
-      }
+        id: '3',
+      },
     ],
     polygons: [
       {
         id: '4',
-        correct: true
+        correct: true,
       },
       {
-        id: '5'
-      }
-    ]
+        id: '5',
+      },
+    ],
   },
   configure: {},
-  multipleCorrect: true
+  multipleCorrect: true,
 };
 
 const sessionCopy = {
   answers: [
     {
-      id: '1'
+      id: '1',
     },
     {
-      id: '2'
-    }
-  ]
+      id: '2',
+    },
+  ],
 };
 
 describe('session-updater', () => {
@@ -51,28 +51,19 @@ describe('session-updater', () => {
     };
 
     describe('deselect', () => {
-      it('deselects shape', assert(
-        sessionCopy,
-        modelCopy,
-        { id: '1', selected: false },
-        [{ id: '2' }]
-      ));
+      it('deselects shape', assert(sessionCopy, modelCopy, { id: '1', selected: false }, [{ id: '2' }]));
     });
 
     describe('select hotspot', () => {
-      it('selects shape in multiple choice mode', assert(
-        sessionCopy,
-        modelCopy,
-        { id: '1', selected: true },
-        [{ id: '2' }, { id: '1' }]
-      ));
+      it(
+        'selects shape in multiple choice mode',
+        assert(sessionCopy, modelCopy, { id: '1', selected: true }, [{ id: '2' }, { id: '1' }]),
+      );
 
-      it('selects shape in single choice mode', assert(
-        sessionCopy,
-        { ...modelCopy, multipleCorrect: false },
-        { id: '1', selected: true },
-        [{ id: '1' }]
-      ));
+      it(
+        'selects shape in single choice mode',
+        assert(sessionCopy, { ...modelCopy, multipleCorrect: false }, { id: '1', selected: true }, [{ id: '1' }]),
+      );
     });
   });
 });

package/src/hotspot/container.jsx

@@ -9,11 +9,11 @@ import Polygon from './polygon';
 
 export class Container extends React.Component {
   isSelected(shape) {
-    const selectedShape = this.props.session.answers.filter(answer => answer.id === shape.id)[0];
+    const selectedShape = this.props.session.answers.filter((answer) => answer.id === shape.id)[0];
     return !!selectedShape;
   }
 
-  correctness = (isCorrect, isChecked) => isCorrect ? isChecked : !isChecked;
+  correctness = (isCorrect, isChecked) => (isCorrect ? isChecked : !isChecked);
 
   getEvaluateText = (isCorrect, selected) => {
     if (selected && isCorrect) {
@@ -34,7 +34,7 @@ export class Container extends React.Component {
   render() {
     const {
       classes,
-      dimensions: { width, height },
+      dimensions: { width: withProp, height: heightProp },
       disabled,
       hotspotColor,
       imageUrl,
@@ -42,17 +42,20 @@ export class Container extends React.Component {
       outlineColor,
       onSelectChoice,
       shapes: { rectangles, polygons },
-      strokeWidth
+      scale: SCALE,
+      strokeWidth,
+      showCorrect,
     } = this.props;
 
+    const width = withProp * SCALE;
+    const height = heightProp * SCALE;
+
     return (
-      <div
-        className={classes.base}
-        style={{ padding: strokeWidth / 2 }}
-      >
+      <div className={classes.base} style={{ padding: strokeWidth / 2 }}>
         {imageUrl ? (
           <div className={classes.imageContainer}>
             <img
+              alt="hotspot-image"
               className={classes.image}
               height="auto"
               src={imageUrl}
@@ -73,9 +76,11 @@ export class Container extends React.Component {
               const selected = this.isSelected(shape);
               const isCorrect = isEvaluateMode ? this.correctness(shape.correct, selected) : undefined;
               const evaluateText = isEvaluateMode ? this.getEvaluateText(shape.correct, selected) : null;
+              const markAsCorrect = !!(isEvaluateMode && showCorrect && shape.correct);
 
               return (
                 <Rectangle
+                  scale={SCALE}
                   isEvaluateMode={isEvaluateMode}
                   isCorrect={isCorrect}
                   evaluateText={evaluateText}
@@ -91,16 +96,20 @@ export class Container extends React.Component {
                   x={shape.x}
                   y={shape.y}
                   strokeWidth={strokeWidth}
+                  markAsCorrect={markAsCorrect}
+                  showCorrectEnabled={showCorrect}
                 />
-              )
+              );
             })}
             {polygons.map((polygon) => {
               const selected = this.isSelected(polygon);
               const isCorrect = isEvaluateMode ? this.correctness(polygon.correct, selected) : undefined;
               const evaluateText = isEvaluateMode ? this.getEvaluateText(polygon.correct, selected) : null;
+              const markAsCorrect = !!(isEvaluateMode && showCorrect && polygon.correct);
 
               return (
                 <Polygon
+                  scale={SCALE}
                   isEvaluateMode={isEvaluateMode}
                   isCorrect={!!isCorrect}
                   evaluateText={evaluateText}
@@ -113,8 +122,10 @@ export class Container extends React.Component {
                   outlineColor={outlineColor}
                   points={polygon.points}
                   strokeWidth={strokeWidth}
+                  markAsCorrect={markAsCorrect}
+                  showCorrectEnabled={showCorrect}
                 />
-              )
+              );
             })}
           </Layer>
         </Stage>
@@ -123,10 +134,10 @@ export class Container extends React.Component {
   }
 }
 
-const styles = theme => ({
+const styles = (theme) => ({
   base: {
     marginTop: theme.spacing.unit * 3,
-    position: 'relative'
+    position: 'relative',
   },
   image: {
     alignItems: 'center',
@@ -135,12 +146,12 @@ const styles = theme => ({
   },
   imageContainer: {
     position: 'relative',
-    width: 'fit-content'
+    width: 'fit-content',
   },
   stage: {
     left: 0,
     top: 0,
-    position: 'absolute'
+    position: 'absolute',
   },
   resize: {
     borderBottom: `1px solid ${color.disabled()}`,
@@ -151,21 +162,27 @@ const styles = theme => ({
     position: 'absolute',
     right: '-10px',
     width: '10px',
-  }
+  },
 });
 
 Container.propTypes = {
   classes: PropTypes.object.isRequired,
   dimensions: PropTypes.object.isRequired,
   disabled: PropTypes.bool.isRequired,
-  hotspotColor:PropTypes.string.isRequired,
-  imageUrl:PropTypes.string.isRequired,
-  isEvaluateMode:PropTypes.bool.isRequired,
-  onSelectChoice:PropTypes.func.isRequired,
-  outlineColor:PropTypes.string.isRequired,
-  session:PropTypes.object.isRequired,
-  shapes:PropTypes.object.isRequired,
-  strokeWidth: PropTypes.number
+  hotspotColor: PropTypes.string.isRequired,
+  imageUrl: PropTypes.string.isRequired,
+  isEvaluateMode: PropTypes.bool.isRequired,
+  onSelectChoice: PropTypes.func.isRequired,
+  outlineColor: PropTypes.string.isRequired,
+  session: PropTypes.object.isRequired,
+  shapes: PropTypes.object.isRequired,
+  strokeWidth: PropTypes.number,
+  scale: PropTypes.number,
+  showCorrect: PropTypes.bool,
+};
+
+Container.defaultProps = {
+  scale: 1,
 };
 
 export default withStyles(styles)(Container);