@pie-element/hotspot 4.8.4-next.1099 → 4.8.4-next.1113

package/src/__tests__/__snapshots__/{polygon-test.jsx.snap → polygon.test.jsx.snap}

@@ -8,6 +8,8 @@ exports[`Polygon snapshots evaluate with correct answer renders 1`] = `
     }
   }
   disabled={false}
+  evaluateText="Correctly
+selected"
   height={200}
   hotspotColor="rgba(137, 183, 244, 0.65)"
   id="1"
@@ -31,6 +33,7 @@ exports[`Polygon snapshots evaluate with correct answer renders 1`] = `
       },
     ]
   }
+  scale={1}
   selected={false}
   strokeWidth={5}
 />
@@ -44,6 +47,7 @@ exports[`Polygon snapshots hotspot color renders 1`] = `
     }
   }
   disabled={false}
+  evaluateText={null}
   height={200}
   hotspotColor="rgba(217, 30, 24, 0.65)"
   id="1"
@@ -67,6 +71,7 @@ exports[`Polygon snapshots hotspot color renders 1`] = `
       },
     ]
   }
+  scale={1}
   selected={false}
   strokeWidth={5}
 />
@@ -80,6 +85,7 @@ exports[`Polygon snapshots outline color renders 1`] = `
     }
   }
   disabled={false}
+  evaluateText={null}
   height={200}
   hotspotColor="rgba(137, 183, 244, 0.65)"
   id="1"
@@ -103,6 +109,7 @@ exports[`Polygon snapshots outline color renders 1`] = `
       },
     ]
   }
+  scale={1}
   selected={false}
   strokeWidth={5}
 />
@@ -116,6 +123,7 @@ exports[`Polygon snapshots outline width renders with default border width 1`] =
     }
   }
   disabled={false}
+  evaluateText={null}
   height={200}
   hotspotColor="rgba(137, 183, 244, 0.65)"
   id="1"
@@ -139,6 +147,7 @@ exports[`Polygon snapshots outline width renders with default border width 1`] =
       },
     ]
   }
+  scale={1}
   selected={false}
   strokeWidth={5}
 />
@@ -152,6 +161,7 @@ exports[`Polygon snapshots outline width renders with given border width 1`] = `
     }
   }
   disabled={false}
+  evaluateText={null}
   height={200}
   hotspotColor="rgba(137, 183, 244, 0.65)"
   id="1"
@@ -175,6 +185,7 @@ exports[`Polygon snapshots outline width renders with given border width 1`] = `
       },
     ]
   }
+  scale={1}
   selected={false}
   strokeWidth={10}
 />

package/src/__tests__/__snapshots__/{rectangle-test.jsx.snap → rectangle.test.jsx.snap}

@@ -8,6 +8,8 @@ exports[`Rectangle snapshots evaluate with correct answer renders 1`] = `
     }
   }
   disabled={false}
+  evaluateText="Correctly
+selected"
   height={200}
   hotspotColor="rgba(137, 183, 244, 0.65)"
   id="1"
@@ -15,6 +17,7 @@ exports[`Rectangle snapshots evaluate with correct answer renders 1`] = `
   isEvaluateMode={true}
   onClick={[MockFunction]}
   outlineColor="blue"
+  scale={1}
   selected={false}
   strokeWidth={5}
   width={300}
@@ -31,6 +34,7 @@ exports[`Rectangle snapshots hotspot color renders 1`] = `
     }
   }
   disabled={false}
+  evaluateText={null}
   height={200}
   hotspotColor="rgba(217, 30, 24, 0.65)"
   id="1"
@@ -38,6 +42,7 @@ exports[`Rectangle snapshots hotspot color renders 1`] = `
   isEvaluateMode={false}
   onClick={[MockFunction]}
   outlineColor="blue"
+  scale={1}
   selected={false}
   strokeWidth={5}
   width={300}
@@ -54,6 +59,7 @@ exports[`Rectangle snapshots outline color renders 1`] = `
     }
   }
   disabled={false}
+  evaluateText={null}
   height={200}
   hotspotColor="rgba(137, 183, 244, 0.65)"
   id="1"
@@ -61,6 +67,7 @@ exports[`Rectangle snapshots outline color renders 1`] = `
   isEvaluateMode={false}
   onClick={[MockFunction]}
   outlineColor="red"
+  scale={1}
   selected={false}
   strokeWidth={5}
   width={300}
@@ -77,6 +84,7 @@ exports[`Rectangle snapshots outline width renders with default border width 1`]
     }
   }
   disabled={false}
+  evaluateText={null}
   height={200}
   hotspotColor="rgba(137, 183, 244, 0.65)"
   id="1"
@@ -84,6 +92,7 @@ exports[`Rectangle snapshots outline width renders with default border width 1`]
   isEvaluateMode={false}
   onClick={[MockFunction]}
   outlineColor="blue"
+  scale={1}
   selected={false}
   strokeWidth={5}
   width={300}
@@ -100,6 +109,7 @@ exports[`Rectangle snapshots outline width renders with given border width 1`] =
     }
   }
   disabled={false}
+  evaluateText={null}
   height={200}
   hotspotColor="rgba(137, 183, 244, 0.65)"
   id="1"
@@ -107,6 +117,7 @@ exports[`Rectangle snapshots outline width renders with given border width 1`] =
   isEvaluateMode={false}
   onClick={[MockFunction]}
   outlineColor="blue"
+  scale={1}
   selected={false}
   strokeWidth={10}
   width={300}

package/src/__tests__/{container-test.jsx → container.test.jsx}

@@ -4,9 +4,18 @@ import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import Konva from 'konva';
 
+import { shallowChild } from '@pie-lib/test-utils';
+import CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';
+
 import Container, { Container as ContainerComp } from '../hotspot/container';
 import HotspotComponent from '../hotspot/index';
 
+global.MutationObserver = class {
+  constructor(callback) {}
+  disconnect() {}
+  observe(element, initObject) {}
+};
+
 Konva.isBrowser = false;
 
 describe('HotspotComponent', () => {
@@ -61,6 +70,54 @@ describe('HotspotComponent', () => {
   });
 });
 
+describe('CorrectAnswerToggle', () => {
+  let testWrapper, component, toggle;
+  const model = {
+    mode: 'evaluate',
+    responseCorrect: false,
+  };
+  const testWrapperFn = (props) => shallowChild(HotspotComponent, {
+    model: {
+      ...model,
+      ...props
+    }
+  }, 1);
+
+  beforeEach(() => {
+    testWrapper = testWrapperFn({});
+    component = testWrapper();
+    toggle = component.find(CorrectAnswerToggle);
+  });
+
+  it('renders when the mode is evaluate and the response is incorrect', () => {
+    expect(toggle.length).toEqual(1);
+    expect(toggle.prop('show')).toEqual(true);
+  });
+
+  it('does not render outside of evaluate mode', () => {
+    const tw = testWrapperFn({ mode: 'gather' });
+    const c = tw();
+    const t = c.find(CorrectAnswerToggle);
+    expect(t.length).toEqual(0);
+  });
+
+  it('does not render if the response is correct', () => {
+    const tw = testWrapperFn({ responseCorrect: true });
+    const c = tw();
+    const t = c.find(CorrectAnswerToggle);
+    expect(t.length).toEqual(0);
+  });
+
+  it('toggles the state', () => {
+    component.setState({ showCorrect: false });
+    expect(component.state('showCorrect')).toEqual(false);
+    expect(toggle.prop('toggled')).toEqual(false);
+    component.instance().onToggle();
+    expect(component.state('showCorrect')).toEqual(true);
+    expect(component.find(CorrectAnswerToggle).prop('toggled')).toEqual(true);
+  });
+});
+
 describe('Container', () => {
   let onSelectChoice, wrapper;
 

package/src/__tests__/polygon.test.jsx

@@ -0,0 +1,224 @@
+import React from 'react';
+import _ from 'lodash';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import Konva from 'konva';
+import { Line } from 'react-konva';
+
+import { shallowChild } from '@pie-lib/test-utils';
+
+import Polygon from '../hotspot/polygon';
+import Image from '../hotspot/image';
+import { faCorrect, faWrong } from '../hotspot/icons';
+
+Konva.isBrowser = false;
+
+describe('Polygon', () => {
+  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,
+        points: [{ x: 94, y: 4 }, { x: 89, y: 4 }, { x: 36, y: 40 }]
+      },
+      opts
+    );
+
+    return shallow(<Polygon {...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 = {
+      height: 200,
+      hotspotColor: 'rgba(137, 183, 244, 0.65)',
+      id: '1',
+      isCorrect: false,
+      isEvaluateMode: true,
+      evaluateText: null,
+      disabled: true,
+      outlineColor: 'blue',
+      strokeWidth: 5,
+      selected: false,
+      points: [{ x: 94, y: 4 }, { x: 89, y: 4 }, { x: 36, y: 40 }],
+      markAsCorrect: false,
+      showCorrectEnabled: false,
+      onClick
+    };
+
+    const getComponents = (model) => {
+      const testWrapper = shallowChild(Polygon, {
+        ...defaultModel,
+        ...model
+      }, 1);
+      const polygonComponent = testWrapper();
+      const lineComponent = polygonComponent.find(Line);
+      return {
+        polygonComponent,
+        lineComponent
+      };
+    }
+
+    describe('when correctly selected', () => {
+      const { polygonComponent, lineComponent } = getComponents({
+        selected: true,
+        isCorrect: true
+      });
+
+      it('should have a blue outline', () => {
+        expect(lineComponent.prop('stroke')).toEqual('blue');
+        expect(lineComponent.prop('strokeWidth')).toEqual(defaultModel.strokeWidth);
+      });
+
+      it('should have a green checkmark icon', () => {
+        const imgComponent = polygonComponent.find(Image);
+        expect(imgComponent.length).toEqual(1);
+        expect(imgComponent.prop('src')).toEqual(faCorrect);
+      });
+    });
+
+    describe('when correctly not selected', () => {
+      const { polygonComponent, lineComponent } = getComponents({
+        selected: false,
+        isCorrect: true
+      });
+
+      it('should have no outline', () => {
+        expect(lineComponent.prop('strokeWidth')).toEqual(0);
+      });
+
+      it('should have no icon', () => {
+        const imgComponent = polygonComponent.find(Image);
+        expect(imgComponent.length).toEqual(0);
+      });
+    });
+
+    describe('when incorrectly selected', () => {
+      const { polygonComponent, lineComponent } = getComponents({
+        selected: true,
+        isCorrect: false
+      });
+
+      it('should have a red outline', () => {
+        expect(lineComponent.prop('stroke')).toEqual('red');
+        expect(lineComponent.prop('strokeWidth')).toEqual(defaultModel.strokeWidth);
+      });
+
+      it('should have a red x icon', () => {
+        const imgComponent = polygonComponent.find(Image);
+        expect(imgComponent.length).toEqual(1);
+        expect(imgComponent.prop('src')).toEqual(faWrong);
+      });
+    });
+
+    describe('when incorrectly not selected', () => {
+      const { polygonComponent, lineComponent } = getComponents({
+        selected: false,
+        isCorrect: false
+      });
+
+      it('should have no outline', () => {
+        expect(lineComponent.prop('strokeWidth')).toEqual(0);
+      });
+
+      it('should have a red x icon', () => {
+        const imgComponent = polygonComponent.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 { lineComponent } = getComponents({
+          showCorrectEnabled: true,
+          markAsCorrect: true
+        });
+        expect(lineComponent.prop('stroke')).toEqual('green');
+        expect(lineComponent.prop('strokeWidth')).toEqual(defaultModel.strokeWidth);
+      });
+
+      it('should have a green checkmark icon', () => {
+        const { polygonComponent } = getComponents({
+          showCorrectEnabled: true,
+          markAsCorrect: true
+        });
+        const imgComponent = polygonComponent.find(Image);
+        expect(imgComponent.prop('src')).toEqual(faCorrect);
+      });
+
+      it('should not be selected if the answer is incorrect', () => {
+        const { lineComponent } = getComponents({
+          showCorrectEnabled: true,
+          markAsCorrect: false,
+          selected: true,
+          isCorrect: false
+        });
+        expect(lineComponent.prop('strokeWidth')).toEqual(0);
+      });
+
+      it('should not render an icon if the answer is incorrect', () => {
+        const { polygonComponent } = getComponents({
+          showCorrectEnabled: true,
+          markAsCorrect: false,
+          selected: true,
+          isCorrect: false
+        });
+        const imgComponent = polygonComponent.find(Image);
+        expect(imgComponent.length).toEqual(0);
+      });
+    });
+  });
+});

package/src/__tests__/rectangle.test.jsx

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