@pie-element/hotspot 4.7.18-next.85 → 4.8.1-beta.587

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

@@ -3,48 +3,45 @@ import ReactDOM from 'react-dom';
 
 jest.mock('@pie-lib/config-ui', () => ({
   choiceUtils: {
-    firstAvailableIndex: jest.fn()
+    firstAvailableIndex: jest.fn(),
   },
   settings: {
-    Panel: props => <div {...props} />,
+    Panel: (props) => <div {...props} />,
     toggle: jest.fn(),
-    radio: jest.fn()
-  }
+    radio: jest.fn(),
+  },
 }));
 
 jest.mock('react-dom', () => ({
-  render: jest.fn()
+  render: jest.fn(),
 }));
 
 const model = () => ({
   prompt: 'This is the question prompt',
   imageUrl: '',
   shapes: {
-    rectangles: [
-      { id: '1', correct: true },
-      { id: '2' },
-      { id: '3' }
-    ],
+    rectangles: [{ id: '1', correct: true }, { id: '2' }, { id: '3' }],
     polygons: [
       {
-        'points': [{ x: 1, y: 2 }, { y: 139, x: 1 }, { y: 139, x: 130 }, { x: 130, y: 2 }],
-        'correct': false,
-        'id': '0'
-      }
-    ]
+        points: [
+          { x: 1, y: 2 },
+          { y: 139, x: 1 },
+          { y: 139, x: 130 },
+          { x: 130, y: 2 },
+        ],
+        correct: false,
+        id: '0',
+      },
+    ],
   },
   dimensions: { height: 0, width: 0 },
   hotspotColor: 'rgba(137, 183, 244, 0.65)',
-  hotspotList: [
-    'rgba(137, 183, 244, 0.65)',
-    'rgba(217, 30, 24, 0.65)',
-    'rgba(254, 241, 96, 0.65)'
-  ],
+  hotspotList: ['rgba(137, 183, 244, 0.65)', 'rgba(217, 30, 24, 0.65)', 'rgba(254, 241, 96, 0.65)'],
   outlineColor: 'blue',
   outlineList: ['blue', 'red', 'yellow'],
   configure: {},
   multipleCorrect: true,
-  partialScoring: false
+  partialScoring: false,
 });
 
 describe('index', () => {
@@ -74,16 +71,12 @@ describe('index', () => {
       it('changes partial scoring value', () => {
         el.onModelChangedByConfig({ ...initialModel, partialScoring: true });
 
-        expect(onModelChanged).toBeCalledWith(
-          expect.objectContaining({ partialScoring: true }),
-        );
+        expect(onModelChanged).toBeCalledWith(expect.objectContaining({ partialScoring: true }));
       });
       it('changes multiple correct value', () => {
         el.onModelChangedByConfig({ ...initialModel, multipleCorrect: false });
 
-        expect(onModelChanged).toBeCalledWith(
-          expect.objectContaining({ multipleCorrect: false }),
-        );
+        expect(onModelChanged).toBeCalledWith(expect.objectContaining({ multipleCorrect: false }));
       });
     });
 
@@ -91,17 +84,13 @@ describe('index', () => {
       it('changes hotspot color', () => {
         el.onColorChanged('hotspotColor', 'red');
 
-        expect(onModelChanged).toBeCalledWith(
-          expect.objectContaining({ hotspotColor: 'red' }),
-        );
+        expect(onModelChanged).toBeCalledWith(expect.objectContaining({ hotspotColor: 'red' }));
       });
 
       it('changes outline color', () => {
         el.onColorChanged('outlineColor', 'lightred');
 
-        expect(onModelChanged).toBeCalledWith(
-          expect.objectContaining({ outlineColor: 'lightred' }),
-        );
+        expect(onModelChanged).toBeCalledWith(expect.objectContaining({ outlineColor: 'lightred' }));
       });
     });
 
@@ -110,9 +99,7 @@ describe('index', () => {
         const newPrompt = 'This is the second question prompt';
         el.onPromptChanged(newPrompt);
 
-        expect(onModelChanged).toBeCalledWith(
-          expect.objectContaining({ prompt: newPrompt }),
-        );
+        expect(onModelChanged).toBeCalledWith(expect.objectContaining({ prompt: newPrompt }));
       });
     });
 
@@ -121,9 +108,7 @@ describe('index', () => {
         const newRationale = 'New Rationale';
         el.onRationaleChanged(newRationale);
 
-        expect(onModelChanged).toBeCalledWith(
-          expect.objectContaining({ rationale: newRationale }),
-        );
+        expect(onModelChanged).toBeCalledWith(expect.objectContaining({ rationale: newRationale }));
       });
     });
 
@@ -132,9 +117,7 @@ describe('index', () => {
         const newTeacherInstructions = 'New Teacher Instructions';
         el.onTeacherInstructionsChanged(newTeacherInstructions);
 
-        expect(onModelChanged).toBeCalledWith(
-          expect.objectContaining({ teacherInstructions: newTeacherInstructions }),
-        );
+        expect(onModelChanged).toBeCalledWith(expect.objectContaining({ teacherInstructions: newTeacherInstructions }));
       });
     });
 
@@ -142,9 +125,7 @@ describe('index', () => {
       it('changes the image dimensions', () => {
         el.onUpdateImageDimension({ height: 400, width: 400 });
 
-        expect(onModelChanged).toBeCalledWith(
-          expect.objectContaining({ dimensions: { height: 400, width: 400 } })
-        );
+        expect(onModelChanged).toBeCalledWith(expect.objectContaining({ dimensions: { height: 400, width: 400 } }));
       });
     });
 
@@ -153,9 +134,7 @@ describe('index', () => {
         const shapes = { polygons: [], rectangles: [...initialModel.shapes.rectangles, { id: '2' }] };
         el.onUpdateShapes(shapes);
 
-        expect(onModelChanged).toBeCalledWith(
-          expect.objectContaining({ shapes }),
-        );
+        expect(onModelChanged).toBeCalledWith(expect.objectContaining({ shapes }));
       });
 
       it('removes the latest shape', () => {
@@ -171,9 +150,7 @@ describe('index', () => {
       it('removes all shapes', () => {
         el.onUpdateShapes({ polygons: [], rectangles: [] });
 
-        expect(onModelChanged).toBeCalledWith(
-          expect.objectContaining({ shapes: { polygons: [], rectangles: [] } }),
-        );
+        expect(onModelChanged).toBeCalledWith(expect.objectContaining({ shapes: { polygons: [], rectangles: [] } }));
       });
     });
 

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

@@ -5,16 +5,16 @@ import defaultValues from '../defaults';
 
 jest.mock('@pie-lib/config-ui', () => ({
   choiceUtils: {
-    firstAvailableIndex: jest.fn()
+    firstAvailableIndex: jest.fn(),
   },
   settings: {
-    Panel: props => <div {...props} />,
+    Panel: (props) => <div {...props} />,
     toggle: jest.fn(),
-    radio: jest.fn()
+    radio: jest.fn(),
   },
   layout: {
-    ConfigLayout: ({ children }) => <div>{children}</div>
-  }
+    ConfigLayout: ({ children }) => <div>{children}</div>,
+  },
 }));
 
 const model = () => ({
@@ -28,44 +28,62 @@ const model = () => ({
         width: 130,
         x: 1,
         y: 1,
-        correct: true
-      }, {
+        correct: true,
+      },
+      {
         id: '1',
         height: 140,
         width: 130,
         x: 140,
-        y: 1
-      }, {
+        y: 1,
+      },
+      {
         id: '2',
         height: 140,
         width: 130,
         x: 280,
-        y: 1
-      }
+        y: 1,
+      },
     ],
     polygons: [
       {
-        points: [{ x: 1, y: 148 }, { x: 1, y: 288 }, { y: 288, x: 129 }, { y: 148, x: 129 }],
+        points: [
+          { x: 1, y: 148 },
+          { x: 1, y: 288 },
+          { y: 288, x: 129 },
+          { y: 148, x: 129 },
+        ],
         correct: true,
-        id: '3'
-      }, {
+        id: '3',
+      },
+      {
         id: '4',
-        points: [{ y: 151, x: 141 }, { y: 289, x: 141 }, { y: 289, x: 269 }, { x: 269, y: 151 }],
-        correct: false
-      }, {
-        points: [{ x: 279, y: 149.99999999999997 }, { x: 279, y: 289 }, { x: 407, y: 289 }, {
-          x: 407,
-          y: 149.99999999999997
-        }], correct: false, id: '5'
-      }]
+        points: [
+          { y: 151, x: 141 },
+          { y: 289, x: 141 },
+          { y: 289, x: 269 },
+          { x: 269, y: 151 },
+        ],
+        correct: false,
+      },
+      {
+        points: [
+          { x: 279, y: 149.99999999999997 },
+          { x: 279, y: 289 },
+          { x: 407, y: 289 },
+          {
+            x: 407,
+            y: 149.99999999999997,
+          },
+        ],
+        correct: false,
+        id: '5',
+      },
+    ],
   },
   dimensions: { height: 300, width: 400 },
   hotspotColor: 'rgba(137, 183, 244, 0.65)',
-  hotspotList: [
-    'rgba(137, 183, 244, 0.65)',
-    'rgba(217, 30, 24, 0.65)',
-    'rgba(254, 241, 96, 0.65)'
-  ],
+  hotspotList: ['rgba(137, 183, 244, 0.65)', 'rgba(217, 30, 24, 0.65)', 'rgba(254, 241, 96, 0.65)'],
   outlineColor: 'blue',
   outlineList: ['blue', 'red', 'yellow'],
   configure: {},
@@ -85,11 +103,12 @@ describe('Root', () => {
       };
 
       expect(shallow(<Root {...props} />)).toMatchSnapshot();
-    })
+    });
   });
 
   describe('logic', () => {
-    let w, onColorChanged = jest.fn();
+    let w,
+      onColorChanged = jest.fn();
 
     beforeEach(() => {
       w = (config, onUpdateImageDimension, onUpdateShapes) => {
@@ -101,10 +120,16 @@ describe('Root', () => {
             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 }]
-              }]
-            }
+              polygons: [
+                {
+                  points: [
+                    { x: 0, y: 200 },
+                    { x: 200, y: 200 },
+                    { x: 100, y: 300 },
+                  ],
+                },
+              ],
+            },
           },
           onColorChanged,
           onUpdateImageDimension,
@@ -112,7 +137,7 @@ describe('Root', () => {
         };
 
         return shallow(<Root {...props} />);
-      }
+      };
     });
 
     describe('handleColorChange', () => {
@@ -138,13 +163,20 @@ describe('Root', () => {
 
         expect(onUpdateImageDimension).toBeCalledWith({
           width: 400,
-          height: 600
+          height: 600,
         });
         expect(onUpdateShapes).toBeCalledWith({
           rectangles: [{ x: 20, y: 20, height: 200, width: 200, index: 0 }],
-          polygons: [{
-            points: [{ x: 0, y: 400 }, { x: 400, y: 400 }, { x: 200, y: 600 }], index: 1
-          }]
+          polygons: [
+            {
+              points: [
+                { x: 0, y: 400 },
+                { x: 400, y: 400 },
+                { x: 200, y: 600 },
+              ],
+              index: 1,
+            },
+          ],
         });
       });
 
@@ -153,13 +185,20 @@ describe('Root', () => {
 
         expect(onUpdateImageDimension).toBeCalledWith({
           width: 100,
-          height: 150
+          height: 150,
         });
         expect(onUpdateShapes).toBeCalledWith({
           rectangles: [{ x: 5, y: 5, height: 50, width: 50, index: 0 }],
-          polygons: [{
-            points: [{ x: 0, y: 100 }, { x: 100, y: 100 }, { x: 50, y: 150 }], index: 1
-          }]
+          polygons: [
+            {
+              points: [
+                { x: 0, y: 100 },
+                { x: 100, y: 100 },
+                { x: 50, y: 150 },
+              ],
+              index: 1,
+            },
+          ],
         });
       });
 
@@ -168,13 +207,20 @@ describe('Root', () => {
 
         expect(onUpdateImageDimension).toBeCalledWith({
           width: 300,
-          height: 450
+          height: 450,
         });
         expect(onUpdateShapes).toBeCalledWith({
           rectangles: [{ x: 15, y: 15, height: 150, width: 150, index: 0 }],
-          polygons: [{
-            points: [{ x: 0, y: 300 }, { x: 300, y: 300 }, { x: 150, y: 450 }], index: 1
-          }]
+          polygons: [
+            {
+              points: [
+                { x: 0, y: 300 },
+                { x: 300, y: 300 },
+                { x: 150, y: 450 },
+              ],
+              index: 1,
+            },
+          ],
         });
       });
 
@@ -183,13 +229,20 @@ describe('Root', () => {
 
         expect(onUpdateImageDimension).toBeCalledWith({
           width: 180,
-          height: 270
+          height: 270,
         });
         expect(onUpdateShapes).toBeCalledWith({
           rectangles: [{ x: 9, y: 9, height: 90, width: 90, index: 0 }],
-          polygons: [{
-            points: [{ x: 0, y: 180 }, { x: 180, y: 180 }, { x: 90, y: 270 }], index: 1
-          }]
+          polygons: [
+            {
+              points: [
+                { x: 0, y: 180 },
+                { x: 180, y: 180 },
+                { x: 90, y: 270 },
+              ],
+              index: 1,
+            },
+          ],
         });
       });
     });
@@ -200,12 +253,16 @@ describe('Root', () => {
       let onUpdateShapes = jest.fn();
 
       beforeEach(() => {
-        wrapper = w({
-          ...defaultValues.configuration,
-          preserveAspectRatio: {
-            enabled: false
-          }
-        }, onUpdateImageDimension, onUpdateShapes);
+        wrapper = w(
+          {
+            ...defaultValues.configuration,
+            preserveAspectRatio: {
+              enabled: false,
+            },
+          },
+          onUpdateImageDimension,
+          onUpdateShapes,
+        );
       });
 
       it('increase width with 100%:', () => {
@@ -213,13 +270,20 @@ describe('Root', () => {
 
         expect(onUpdateImageDimension).toBeCalledWith({
           width: 400,
-          height: 300
+          height: 300,
         });
         expect(onUpdateShapes).toBeCalledWith({
           rectangles: [{ x: 20, y: 10, height: 100, width: 200, index: 0 }],
-          polygons: [{
-            points: [{ x: 0, y: 200 }, { x: 400, y: 200 }, { x: 200, y: 300 }], index: 1
-          }]
+          polygons: [
+            {
+              points: [
+                { x: 0, y: 200 },
+                { x: 400, y: 200 },
+                { x: 200, y: 300 },
+              ],
+              index: 1,
+            },
+          ],
         });
       });
 
@@ -228,15 +292,21 @@ describe('Root', () => {
 
         expect(onUpdateImageDimension).toBeCalledWith({
           width: 100,
-          height: 300
+          height: 300,
         });
         expect(onUpdateShapes).toBeCalledWith({
-            rectangles: [{ x: 5, y: 10, height: 100, width: 50, index: 0 }],
-            polygons: [{
-              points: [{ x: 0, y: 200 }, { x: 100, y: 200 }, { x: 50, y: 300 }], index: 1
-            }]
-          }
-        );
+          rectangles: [{ x: 5, y: 10, height: 100, width: 50, index: 0 }],
+          polygons: [
+            {
+              points: [
+                { x: 0, y: 200 },
+                { x: 100, y: 200 },
+                { x: 50, y: 300 },
+              ],
+              index: 1,
+            },
+          ],
+        });
       });
 
       it('increase height with 50%:', () => {
@@ -244,16 +314,21 @@ describe('Root', () => {
 
         expect(onUpdateImageDimension).toBeCalledWith({
           width: 200,
-          height: 450
+          height: 450,
         });
         expect(onUpdateShapes).toBeCalledWith({
-            rectangles: [{ x: 10, y: 15, height: 150, width: 100, index: 0 }],
-            polygons: [{
+          rectangles: [{ x: 10, y: 15, height: 150, width: 100, index: 0 }],
+          polygons: [
+            {
               index: 1,
-              points: [{ x: 0, y: 300 }, { x: 200, y: 300 }, { x: 100, y: 450 }]
-            }]
-          }
-        );
+              points: [
+                { x: 0, y: 300 },
+                { x: 200, y: 300 },
+                { x: 100, y: 450 },
+              ],
+            },
+          ],
+        });
       });
 
       it('decrease height with 10%', () => {
@@ -261,16 +336,21 @@ describe('Root', () => {
 
         expect(onUpdateImageDimension).toBeCalledWith({
           width: 200,
-          height: 270
+          height: 270,
         });
         expect(onUpdateShapes).toBeCalledWith({
-            rectangles: [{ x: 10, y: 9, height: 90, width: 100, index: 0 }],
-            polygons: [{
-              points: [{ x: 0, y: 180 }, { x: 200, y: 180 }, { x: 100, y: 270 }],
-              index: 1
-            }]
-          }
-        );
+          rectangles: [{ x: 10, y: 9, height: 90, width: 100, index: 0 }],
+          polygons: [
+            {
+              points: [
+                { x: 0, y: 180 },
+                { x: 200, y: 180 },
+                { x: 100, y: 270 },
+              ],
+              index: 1,
+            },
+          ],
+        });
       });
     });
   });