@pie-element/hotspot 4.8.0 → 4.8.1-beta.587

package/configure/src/__tests__/__snapshots__/hotspot-container.test.js.snap

@@ -3,11 +3,12 @@
 exports[`HotspotContainer render renders 1`] = `
 <div>
   <div
-    className="undefined "
+    className=""
     onDragExit={[Function]}
     onDragLeave={[Function]}
     onDragOver={[Function]}
     onDrop={[Function]}
+    onPaste={[Function]}
   >
     <div>
       <WithStyles(UploadControl)

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

@@ -3,10 +3,22 @@
 exports[`Root render renders 1`] = `
 <div>
   <ConfigLayout
+    hideSettings={false}
     settings={
       <Panel
         configuration={
           Object {
+            "maxImageHeight": Object {
+              "prompt": 300,
+              "rationale": 300,
+              "teacherInstructions": 300,
+            },
+            "maxImageWidth": Object {
+              "prompt": 300,
+              "rationale": 300,
+              "teacherInstructions": 300,
+            },
+            "minShapes": 2,
             "multipleCorrect": Object {
               "label": "Multiple Correct Responses",
               "settings": true,
@@ -28,16 +40,28 @@ exports[`Root render renders 1`] = `
               "label": "Rationale",
               "settings": true,
             },
+            "settingsPanelDisabled": false,
+            "spellCheck": Object {
+              "enabled": true,
+              "label": "Spellcheck",
+              "settings": false,
+            },
             "teacherInstructions": Object {
               "label": "Teacher Instructions",
               "settings": true,
             },
+            "withRubric": Object {
+              "label": "Add Rubric",
+              "settings": false,
+            },
           }
         }
         groups={
           Object {
             "Properties": Object {
               "rationaleEnabled": undefined,
+              "rubricEnabled": false,
+              "spellCheckEnabled": false,
               "teacherInstructionsEnabled": undefined,
             },
             "Settings": Object {
@@ -170,11 +194,38 @@ exports[`Root render renders 1`] = `
     }
   >
     <div>
-      <WithStyles(Typography)
-        variant="subheading"
+      <div
+        className=""
       >
-        Define Hotspot
-      </WithStyles(Typography)>
+        <WithStyles(Typography)
+          variant="subheading"
+        >
+          Define Hotspot
+        </WithStyles(Typography)>
+        <WithStyles(Tooltip)
+          classes={
+            Object {
+              "tooltip": undefined,
+            }
+          }
+          disableFocusListener={true}
+          disableTouchListener={true}
+          placement="left"
+          title="Validation requirements:
+There should be at least 2 shapes defined.
+There should be at least 1 shape selected."
+        >
+          <pure(InfoIcon)
+            color="primary"
+            fontSize="small"
+            style={
+              Object {
+                "float": "right",
+              }
+            }
+          />
+        </WithStyles(Tooltip)>
+      </div>
       <WithStyles(Palette)
         hotspotColor="rgba(137, 183, 244, 0.65)"
         hotspotList={
@@ -202,6 +253,7 @@ exports[`Root render renders 1`] = `
             "width": 400,
           }
         }
+        hasErrors={false}
         hotspotColor="rgba(137, 183, 244, 0.65)"
         imageUrl="https://cdn.fluence.net/image/0240eb1455ce4c4bb6180232347b6aef_W"
         multipleCorrect={true}

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

@@ -5,50 +5,73 @@ import { getAllShapes, groupShapes } from '../utils';
 
 const model = () => ({
   imageUrl: 'https://cdn.fluence.net/image/0240eb1455ce4c4bb6180232347b6aef_W',
-  shapes: groupShapes(getAllShapes({
-    rectangles: [
-      {
-        id: '0',
-        height: 140,
-        width: 130,
-        x: 1,
-        y: 1,
-        correct: true
-      }, {
-        id: '1',
-        height: 140,
-        width: 130,
-        x: 140,
-        y: 1
-      }, {
-        id: '2',
-        height: 140,
-        width: 130,
-        x: 280,
-        y: 1
-      }
-    ],
-    polygons: [
-      {
-        id: '3',
-        points: [{ x: 1, y: 148 }, { x: 1, y: 288 }, { y: 288, x: 129 }, { y: 148, x: 129 }],
-        correct: true
-      }, {
-        id: '4',
-        points: [{ y: 151, x: 141 }, { y: 289, x: 141 }, { y: 289, x: 269 }, { x: 269, y: 151 }],
-        correct: false
-      }, {
-        id: '5',
-        points: [{ x: 279, y: 150 }, { x: 279, y: 289 }, { x: 407, y: 289 }, { x: 407, y: 150 }],
-        correct: false
-      }]
-  })),
+  shapes: groupShapes(
+    getAllShapes({
+      rectangles: [
+        {
+          id: '0',
+          height: 140,
+          width: 130,
+          x: 1,
+          y: 1,
+          correct: true,
+        },
+        {
+          id: '1',
+          height: 140,
+          width: 130,
+          x: 140,
+          y: 1,
+        },
+        {
+          id: '2',
+          height: 140,
+          width: 130,
+          x: 280,
+          y: 1,
+        },
+      ],
+      polygons: [
+        {
+          id: '3',
+          points: [
+            { x: 1, y: 148 },
+            { x: 1, y: 288 },
+            { y: 288, x: 129 },
+            { y: 148, x: 129 },
+          ],
+          correct: true,
+        },
+        {
+          id: '4',
+          points: [
+            { y: 151, x: 141 },
+            { y: 289, x: 141 },
+            { y: 289, x: 269 },
+            { x: 269, y: 151 },
+          ],
+          correct: false,
+        },
+        {
+          id: '5',
+          points: [
+            { x: 279, y: 150 },
+            { x: 279, y: 289 },
+            { x: 407, y: 289 },
+            { x: 407, y: 150 },
+          ],
+          correct: false,
+        },
+      ],
+    }),
+  ),
   dimensions: {
-    height: 291, width: 410
+    height: 291,
+    width: 410,
   },
   hotspotColor: 'rgba(137, 183, 244, 0.65)',
   outlineColor: 'blue',
-  multipleCorrect: true
+  multipleCorrect: true,
 });
 
 describe('HotspotContainer', () => {
@@ -56,11 +79,9 @@ describe('HotspotContainer', () => {
     onImageUpload = jest.fn(),
     onUpdateImageDimension = jest.fn(),
     onUpdateShapes = jest.fn(),
-    initialModel = model()
-  ;
-
+    initialModel = model();
   beforeEach(() => {
-    w = extras => {
+    w = (extras) => {
       const props = {
         classes: {},
         dimensions: initialModel.dimensions,
@@ -72,17 +93,17 @@ describe('HotspotContainer', () => {
         onUpdateShapes: onUpdateShapes,
         onImageUpload: onImageUpload,
         shapes: initialModel.shapes,
-        ...extras
+        ...extras,
       };
 
       return shallow(<Container {...props} />);
-    }
+    };
   });
 
   describe('render', () => {
     it('renders', () => {
       expect(w()).toMatchSnapshot();
-    })
+    });
   });
 
   describe('logic', () => {
@@ -96,23 +117,25 @@ describe('HotspotContainer', () => {
         y: 1,
         correct: true,
         group: 'rectangles',
-        index: 0
-      }, {
+        index: 0,
+      },
+      {
         id: '1',
         height: 140,
         width: 130,
         x: 140,
         y: 1,
         group: 'rectangles',
-        index: 1
-      }, {
+        index: 1,
+      },
+      {
         id: '2',
         height: 140,
         width: 130,
         x: 280,
         y: 1,
         group: 'rectangles',
-        index: 2
+        index: 2,
       },
       {
         id: '3',
@@ -120,32 +143,36 @@ describe('HotspotContainer', () => {
           { x: 1, y: 148 },
           { x: 1, y: 288 },
           { y: 288, x: 129 },
-          { y: 148, x: 129 }],
+          { y: 148, x: 129 },
+        ],
         correct: true,
         group: 'polygons',
-        index: 3
-      }, {
+        index: 3,
+      },
+      {
         id: '4',
         points: [
           { y: 151, x: 141 },
           { y: 289, x: 141 },
           { y: 289, x: 269 },
-          { x: 269, y: 151 }],
+          { x: 269, y: 151 },
+        ],
         correct: false,
         group: 'polygons',
-        index: 4
-      }, {
+        index: 4,
+      },
+      {
         id: '5',
         points: [
           { x: 279, y: 150 },
           { x: 279, y: 289 },
           { x: 407, y: 289 },
-          { x: 407, y: 150 }
+          { x: 407, y: 150 },
         ],
         correct: false,
         group: 'polygons',
-        index: 5
-      }
+        index: 5,
+      },
     ];
 
     beforeEach(() => {
@@ -163,7 +190,7 @@ describe('HotspotContainer', () => {
         width: 130,
         x: 280,
         y: 1,
-        group: 'rectangles'
+        group: 'rectangles',
       };
 
       wrapper.instance().onUpdateShapes([...formattedShapes, newShape]);
@@ -177,10 +204,10 @@ describe('HotspotContainer', () => {
             width: 130,
             x: 280,
             y: 1,
-          }
+          },
         ],
-        polygons: initialModel.shapes.polygons
-      })
+        polygons: initialModel.shapes.polygons,
+      });
     });
 
     it('onUpdateShapes with no shapes', () => {
@@ -188,15 +215,15 @@ describe('HotspotContainer', () => {
 
       expect(onUpdateShapes).toHaveBeenLastCalledWith({
         rectangles: [],
-        polygons: []
-      })
+        polygons: [],
+      });
     });
 
     it('handleUndo if no new shape was added', () => {
       wrapper.instance().handleUndo();
       expect(onUpdateShapes).toHaveBeenLastCalledWith({
         ...initialModel.shapes,
-        polygons: initialModel.shapes.polygons.slice(0, -1)
+        polygons: initialModel.shapes.polygons.slice(0, -1),
       });
     });
 
@@ -207,13 +234,13 @@ describe('HotspotContainer', () => {
         width: 130,
         x: 280,
         y: 1,
-        index: 6
+        index: 6,
       };
 
       // first, add a new shape
       wrapper.instance().state.shapes = getAllShapes({
         ...initialModel.shapes,
-        rectangles: [ ...initialModel.shapes.rectangles, newShape],
+        rectangles: [...initialModel.shapes.rectangles, newShape],
       });
       wrapper.instance().handleUndo();
       expect(onUpdateShapes).toBeCalledWith(initialModel.shapes);
@@ -223,7 +250,7 @@ describe('HotspotContainer', () => {
       wrapper.instance().handleClearAll();
       expect(onUpdateShapes).toHaveBeenLastCalledWith({
         rectangles: [],
-        polygons: []
+        polygons: [],
       });
     });
   });

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

@@ -12,21 +12,23 @@ const model = () => ({
       x: 1,
       y: 1,
       correct: true,
-      group: 'rectangles'
-    }, {
+      group: 'rectangles',
+    },
+    {
       id: '1',
       height: 140,
       width: 130,
       x: 140,
       y: 1,
-      group: 'rectangles'
-    }, {
+      group: 'rectangles',
+    },
+    {
       id: '2',
       height: 140,
       width: 130,
       x: 280,
       y: 1,
-      group: 'rectangles'
+      group: 'rectangles',
     },
     {
       id: '3',
@@ -34,32 +36,37 @@ const model = () => ({
         { x: 1, y: 148 },
         { x: 1, y: 288 },
         { y: 288, x: 129 },
-        { y: 148, x: 129 }],
+        { y: 148, x: 129 },
+      ],
       correct: true,
-      group: 'polygons'
-    }, {
+      group: 'polygons',
+    },
+    {
       id: '4',
       points: [
         { y: 151, x: 141 },
         { y: 289, x: 141 },
         { y: 289, x: 269 },
-        { x: 269, y: 151 }],
+        { x: 269, y: 151 },
+      ],
       correct: false,
-      group: 'polygons'
-    }, {
+      group: 'polygons',
+    },
+    {
       id: '5',
       points: [
         { x: 279, y: 150 },
         { x: 279, y: 289 },
         { x: 407, y: 289 },
-        { x: 407, y: 150 }
+        { x: 407, y: 150 },
       ],
       correct: false,
-      group: 'polygons'
-    }
+      group: 'polygons',
+    },
   ],
   dimensions: {
-    height: 291, width: 410
+    height: 291,
+    width: 410,
   },
   hotspotColor: 'rgba(137, 183, 244, 0.65)',
   outlineColor: 'blue',
@@ -72,11 +79,9 @@ describe('HotspotDrawable', () => {
     handleEnableDrag = jest.fn(),
     onUpdateImageDimension = jest.fn(),
     onUpdateShapes = jest.fn(),
-    initialModel = model()
-  ;
-
+    initialModel = model();
   beforeEach(() => {
-    w = extras => {
+    w = (extras) => {
       const props = {
         classes: {},
         dimensions: initialModel.dimensions,
@@ -90,11 +95,11 @@ describe('HotspotDrawable', () => {
         outlineColor: initialModel.outlineColor,
         shapes: initialModel.shapes,
         strokeWidth: 5,
-        ...extras
+        ...extras,
       };
 
       return shallow(<Drawable {...props} />);
-    }
+    };
   });
 
   describe('render', () => {
@@ -126,8 +131,8 @@ describe('HotspotDrawable', () => {
         currentTarget: 'Stage',
         evt: {
           layerX: 20,
-          layerY: 30
-        }
+          layerY: 30,
+        },
       };
 
       wrapper.instance().handleOnMouseDown(event);
@@ -141,8 +146,8 @@ describe('HotspotDrawable', () => {
         currentTarget: 'Stage',
         evt: {
           layerX: 20,
-          layerY: 30
-        }
+          layerY: 30,
+        },
       };
 
       wrapper.instance().handleOnMouseDown(event);
@@ -156,8 +161,8 @@ describe('HotspotDrawable', () => {
           x: 20,
           y: 30,
           group: 'rectangles',
-          index: 6
-        }
+          index: 6,
+        },
       ]);
     });
 
@@ -168,8 +173,8 @@ describe('HotspotDrawable', () => {
       wrapper.instance().handleOnMouseUp({
         evt: {
           layerX: 20,
-          layerY: 30
-        }
+          layerY: 30,
+        },
       });
 
       expect(onUpdateShapes).toHaveBeenCalledWith([...initialModel.shapes.slice(0, 2)]);
@@ -180,48 +185,43 @@ describe('HotspotDrawable', () => {
       wrapper.instance().handleOnMouseUp({
         evt: {
           layerX: 20,
-          layerY: 30
-        }
+          layerY: 30,
+        },
       });
 
       expect(onUpdateShapes).not.toBeCalledWith(false);
 
-
       wrapper.instance().handleOnMouseUp({});
 
       expect(onUpdateShapes).toHaveBeenCalledWith(initialModel.shapes.slice(0, 2));
     });
 
     it('handleOnSetAsCorrect correct', () => {
-      wrapper.instance().handleOnSetAsCorrect(
-        {
-          id: '1'
-        }
-      );
+      wrapper.instance().handleOnSetAsCorrect({
+        id: '1',
+      });
 
       expect(onUpdateShapes).toHaveBeenCalledWith([
         initialModel.shapes[0],
         {
           ...initialModel.shapes[1],
-          correct: true
+          correct: true,
         },
-        ...initialModel.shapes.slice(2)
+        ...initialModel.shapes.slice(2),
       ]);
     });
 
     it('handleOnSetAsCorrect incorrect', () => {
-      wrapper.instance().handleOnSetAsCorrect(
-        {
-          id: '0'
-        }
-      );
+      wrapper.instance().handleOnSetAsCorrect({
+        id: '0',
+      });
 
       expect(onUpdateShapes).toHaveBeenCalledWith([
         {
           ...initialModel.shapes[0],
-          correct: false
+          correct: false,
         },
-        ...initialModel.shapes.slice(1)
+        ...initialModel.shapes.slice(1),
       ]);
     });
 
@@ -232,9 +232,9 @@ describe('HotspotDrawable', () => {
         {
           ...initialModel.shapes[0],
           x: 1,
-          y: 1
+          y: 1,
         },
-        ...initialModel.shapes.slice(1)
+        ...initialModel.shapes.slice(1),
       ]);
     });
 
@@ -243,6 +243,5 @@ describe('HotspotDrawable', () => {
 
       expect(onUpdateShapes).toHaveBeenCalledWith(initialModel.shapes);
     });
-
   });
 });