@pie-element/hotspot 11.2.0-beta.0 → 11.2.0-next.18

package/lib/index.js

@@ -1,214 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _client = require("react-dom/client");
-var _mathRendering = require("@pie-lib/math-rendering");
-var _renderUi = require("@pie-lib/render-ui");
-var _piePlayerEvents = require("@pie-framework/pie-player-events");
-var _hotspot = _interopRequireDefault(require("./hotspot"));
-var _sessionUpdater = require("./session-updater");
-class Hotspot extends HTMLElement {
-  constructor() {
-    super();
-    this._model = null;
-    this._session = null;
-    this._audioInitialized = false;
-    this.audioComplete = false;
-    this._root = null;
-  }
-  set model(m) {
-    this._model = m;
-    this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));
-    this._audioInitialized = false;
-    this._render();
-  }
-  isComplete() {
-    if (!this._session || !this._session.answers) {
-      return false;
-    }
-    const {
-      autoplayAudioEnabled,
-      completeAudioEnabled
-    } = this._model || {};
-    const elementContext = this;
-
-    // check audio completion if audio settings are enabled and audio actually exists
-    if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {
-      if (elementContext) {
-        const audio = elementContext.querySelector('audio');
-        const isInsidePrompt = audio && audio.closest('#preview-prompt');
-
-        // only require audio completion if audio exists and is inside the prompt
-        if (audio && isInsidePrompt) {
-          return false;
-        }
-      }
-    }
-    if (!Array.isArray(this._session.answers)) {
-      return false;
-    }
-    return this._session.answers.length > 0;
-  }
-  set session(s) {
-    if (s && !s.answers) {
-      s.answers = [];
-    }
-    this._session = s;
-    this._render();
-  }
-  get session() {
-    return this._session;
-  }
-  onSelectChoice(data) {
-    (0, _sessionUpdater.updateSessionValue)(this._session, this._model, data);
-    this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
-    this._render();
-  }
-  _createAudioInfoToast() {
-    const info = document.createElement('div');
-    info.id = 'play-audio-info';
-    Object.assign(info.style, {
-      position: 'absolute',
-      top: 0,
-      width: '100%',
-      height: '100%',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      background: 'white',
-      zIndex: '1000',
-      cursor: 'pointer'
-    });
-    const img = document.createElement('img');
-    img.src = _renderUi.EnableAudioAutoplayImage;
-    img.alt = 'Click anywhere to enable audio autoplay';
-    img.width = 500;
-    img.height = 300;
-    info.appendChild(img);
-    return info;
-  }
-  connectedCallback() {
-    this._render();
-
-    // Observation:  audio in Chrome will have the autoplay attribute,
-    // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio
-    // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox
-    const observer = new MutationObserver((mutationsList, observer) => {
-      mutationsList.forEach(mutation => {
-        if (mutation.type === 'childList') {
-          if (this._audioInitialized) return;
-          const audio = this.querySelector('audio');
-          const isInsidePrompt = audio && audio.closest('#preview-prompt');
-          if (!this._model) return;
-          if (!this._model.autoplayAudioEnabled) return;
-          if (audio && !isInsidePrompt) return;
-          if (!audio) return;
-          const info = this._createAudioInfoToast();
-          const container = this.querySelector('#main-container');
-          const enableAudio = () => {
-            if (this.querySelector('#play-audio-info')) {
-              audio.play();
-              container.removeChild(info);
-            }
-            document.removeEventListener('click', enableAudio);
-          };
-
-          // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play
-          // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked
-          setTimeout(() => {
-            if (audio.paused && !this.querySelector('#play-audio-info')) {
-              // add info message as a toast to enable audio playback
-              container.appendChild(info);
-              document.addEventListener('click', enableAudio);
-            } else {
-              document.removeEventListener('click', enableAudio);
-            }
-          }, 500);
-
-          // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering
-          const handlePlaying = () => {
-            //timestamp when auto-played audio started playing
-            (0, _sessionUpdater.updateSessionMetadata)(this._session, {
-              audioStartTime: new Date().getTime()
-            });
-            const info = this.querySelector('#play-audio-info');
-            if (info) {
-              container.removeChild(info);
-            }
-            audio.removeEventListener('playing', handlePlaying);
-          };
-          audio.addEventListener('playing', handlePlaying);
-
-          // we need to listen for the ended event to update the isComplete state
-          const handleEnded = () => {
-            //timestamp when auto-played audio completed playing
-            (0, _sessionUpdater.updateSessionMetadata)(this._session, {
-              audioEndTime: new Date().getTime()
-            });
-            let {
-              audioStartTime,
-              audioEndTime,
-              waitTime
-            } = this._session;
-            if (!waitTime && audioStartTime && audioEndTime) {
-              // waitTime is elapsed time the user waited for auto-played audio to finish
-              this._session.waitTime = audioEndTime - audioStartTime;
-            }
-            this.audioComplete = true;
-            this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
-            audio.removeEventListener('ended', handleEnded);
-          };
-          audio.addEventListener('ended', handleEnded);
-
-          // store references to remove later
-          this._audio = audio;
-          this._handlePlaying = handlePlaying;
-          this._handleEnded = handleEnded;
-          this._enableAudio = enableAudio;
-          // set to true to prevent multiple initializations
-          this._audioInitialized = true;
-          observer.disconnect();
-        }
-      });
-    });
-    observer.observe(this, {
-      childList: true,
-      subtree: true
-    });
-  }
-  _render() {
-    if (this._model && this._session) {
-      const el = /*#__PURE__*/_react.default.createElement(_hotspot.default, {
-        model: this._model,
-        session: this._session,
-        onSelectChoice: this.onSelectChoice.bind(this)
-      });
-      if (!this._root) {
-        this._root = (0, _client.createRoot)(this);
-      }
-      this._root.render(el);
-      queueMicrotask(() => {
-        (0, _mathRendering.renderMath)(this);
-      });
-    }
-  }
-  disconnectedCallback() {
-    document.removeEventListener('click', this._enableAudio);
-    if (this._audio) {
-      this._audio.removeEventListener('playing', this._handlePlaying);
-      this._audio.removeEventListener('ended', this._handleEnded);
-      this._audio = null;
-    }
-    if (this._root) {
-      this._root.unmount();
-      this._root = null;
-    }
-  }
-}
-exports.default = Hotspot;
-//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_mathRendering","_renderUi","_piePlayerEvents","_hotspot","_sessionUpdater","Hotspot","HTMLElement","constructor","_model","_session","_audioInitialized","audioComplete","_root","model","m","dispatchEvent","ModelSetEvent","tagName","toLowerCase","isComplete","_render","answers","autoplayAudioEnabled","completeAudioEnabled","elementContext","audio","querySelector","isInsidePrompt","closest","Array","isArray","length","session","s","onSelectChoice","data","updateSessionValue","SessionChangedEvent","_createAudioInfoToast","info","document","createElement","id","Object","assign","style","position","top","width","height","display","justifyContent","alignItems","background","zIndex","cursor","img","src","EnableAudioAutoplayImage","alt","appendChild","connectedCallback","observer","MutationObserver","mutationsList","forEach","mutation","type","container","enableAudio","play","removeChild","removeEventListener","setTimeout","paused","addEventListener","handlePlaying","updateSessionMetadata","audioStartTime","Date","getTime","handleEnded","audioEndTime","waitTime","_audio","_handlePlaying","_handleEnded","_enableAudio","disconnect","observe","childList","subtree","el","React","HotspotComponent","bind","createRoot","render","queueMicrotask","renderMath","disconnectedCallback","unmount","exports","default"],"sources":["../src/index.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { EnableAudioAutoplayImage } from '@pie-lib/render-ui';\nimport { SessionChangedEvent, ModelSetEvent } from '@pie-framework/pie-player-events';\n\nimport HotspotComponent from './hotspot';\nimport { updateSessionValue, updateSessionMetadata } from './session-updater';\n\nexport default class Hotspot extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._session = null;\n    this._audioInitialized = false;\n    this.audioComplete = false;\n    this._root = null;\n  }\n\n  set model(m) {\n    this._model = m;\n\n    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));\n    this._audioInitialized = false;\n    this._render();\n  }\n\n  isComplete() {\n    if (!this._session || !this._session.answers) {\n      return false;\n    }\n\n    const { autoplayAudioEnabled, completeAudioEnabled } = this._model || {};\n    const elementContext = this;\n\n    // check audio completion if audio settings are enabled and audio actually exists\n    if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {\n      if (elementContext) {\n        const audio = elementContext.querySelector('audio');\n        const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n        // only require audio completion if audio exists and is inside the prompt\n        if (audio && isInsidePrompt) {\n          return false;\n        }\n      }\n    }\n\n    if (!Array.isArray(this._session.answers)) {\n      return false;\n    }\n\n    return this._session.answers.length > 0;\n  }\n\n  set session(s) {\n    if (s && !s.answers) {\n      s.answers = [];\n    }\n\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  onSelectChoice(data) {\n    updateSessionValue(this._session, this._model, data);\n\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n    this._render();\n  }\n\n  _createAudioInfoToast() {\n    const info = document.createElement('div');\n    info.id = 'play-audio-info';\n\n    Object.assign(info.style, {\n      position: 'absolute',\n      top: 0,\n      width: '100%',\n      height: '100%',\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      background: 'white',\n      zIndex: '1000',\n      cursor: 'pointer',\n    });\n\n    const img = document.createElement('img');\n    img.src = EnableAudioAutoplayImage;\n    img.alt = 'Click anywhere to enable audio autoplay';\n    img.width = 500;\n    img.height = 300;\n\n    info.appendChild(img);\n    return info;\n  }\n\n  connectedCallback() {\n    this._render();\n\n    // Observation:  audio in Chrome will have the autoplay attribute,\n    // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio\n    // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox\n    const observer = new MutationObserver((mutationsList, observer) => {\n      mutationsList.forEach((mutation) => {\n        if (mutation.type === 'childList') {\n          if (this._audioInitialized) return;\n          const audio = this.querySelector('audio');\n          const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n          if (!this._model) return;\n          if (!this._model.autoplayAudioEnabled) return;\n          if (audio && !isInsidePrompt) return;\n          if (!audio) return;\n\n          const info = this._createAudioInfoToast();\n          const container = this.querySelector('#main-container');\n          const enableAudio = () => {\n            if (this.querySelector('#play-audio-info')) {\n              audio.play();\n              container.removeChild(info);\n            }\n\n            document.removeEventListener('click', enableAudio);\n          };\n\n          // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play\n          // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked\n          setTimeout(() => {\n            if (audio.paused && !this.querySelector('#play-audio-info')) {\n              // add info message as a toast to enable audio playback\n              container.appendChild(info);\n              document.addEventListener('click', enableAudio);\n            } else {\n              document.removeEventListener('click', enableAudio);\n            }\n          }, 500);\n\n          // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering\n          const handlePlaying = () => {\n            //timestamp when auto-played audio started playing\n            updateSessionMetadata(this._session, { audioStartTime: new Date().getTime() });\n\n            const info = this.querySelector('#play-audio-info');\n            if (info) {\n              container.removeChild(info);\n            }\n\n            audio.removeEventListener('playing', handlePlaying);\n          };\n\n          audio.addEventListener('playing', handlePlaying);\n\n          // we need to listen for the ended event to update the isComplete state\n          const handleEnded = () => {\n            //timestamp when auto-played audio completed playing\n            updateSessionMetadata(this._session, { audioEndTime: new Date().getTime() });\n\n            let { audioStartTime, audioEndTime, waitTime } = this._session;\n            if (!waitTime && audioStartTime && audioEndTime) {\n              // waitTime is elapsed time the user waited for auto-played audio to finish\n              this._session.waitTime = audioEndTime - audioStartTime;\n            }\n\n            this.audioComplete = true;\n            this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n            audio.removeEventListener('ended', handleEnded);\n          };\n\n          audio.addEventListener('ended', handleEnded);\n\n          // store references to remove later\n          this._audio = audio;\n          this._handlePlaying = handlePlaying;\n          this._handleEnded = handleEnded;\n          this._enableAudio = enableAudio;\n          // set to true to prevent multiple initializations\n          this._audioInitialized = true;\n\n          observer.disconnect();\n        }\n      });\n    });\n\n    observer.observe(this, { childList: true, subtree: true });\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      const el = React.createElement(HotspotComponent, {\n        model: this._model,\n        session: this._session,\n        onSelectChoice: this.onSelectChoice.bind(this),\n      });\n\n      if (!this._root) {\n        this._root = createRoot(this);\n      }\n      this._root.render(el);\n      queueMicrotask(() => {\n        renderMath(this);\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this._enableAudio);\n\n    if (this._audio) {\n      this._audio.removeEventListener('playing', this._handlePlaying);\n      this._audio.removeEventListener('ended', this._handleEnded);\n      this._audio = null;\n    }\n\n    if (this._root) {\n      this._root.unmount();\n      this._root = null;\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/session-updater.js

@@ -1,42 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.updateSessionMetadata = updateSessionMetadata;
-exports.updateSessionValue = updateSessionValue;
-function updateSessionValue(session, model, data) {
-  const {
-    id,
-    selected
-  } = data;
-  const {
-    multipleCorrect
-  } = model || {};
-  session.answers = session.answers || [];
-  if (!selected) {
-    session.answers = session.answers.filter(answer => answer.id !== id);
-  } else {
-    const item = {
-      id
-    };
-    if (multipleCorrect) {
-      session.answers.push(item);
-    } else {
-      session.answers = [item];
-    }
-
-    //update session metadata
-    session.selector = data.selector;
-  }
-}
-function updateSessionMetadata(session, metadata) {
-  session.audioStartTime = session.audioStartTime || metadata.audioStartTime; //timestamp when auto-played audio started playing
-  session.audioEndTime = session.audioEndTime || metadata.audioEndTime; //timestamp when auto-played audio completed playing
-
-  if (!session.waitTime && session.audioStartTime && session.audioEndTime) {
-    // waitTime is elapsed time the user waited for auto-played audio to finish
-    session.waitTime = session.audioEndTime - session.audioStartTime;
-  }
-}
-//# sourceMappingURL=session-updater.js.map

package/lib/session-updater.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"session-updater.js","names":["updateSessionValue","session","model","data","id","selected","multipleCorrect","answers","filter","answer","item","push","selector","updateSessionMetadata","metadata","audioStartTime","audioEndTime","waitTime"],"sources":["../src/session-updater.js"],"sourcesContent":["export function updateSessionValue(session, model, data) {\n  const { id, selected } = data;\n  const { multipleCorrect } = model || {};\n  session.answers = session.answers || [];\n\n  if (!selected) {\n    session.answers = session.answers.filter((answer) => answer.id !== id);\n  } else {\n    const item = { id };\n    if (multipleCorrect) {\n      session.answers.push(item);\n    } else {\n      session.answers = [item];\n    }\n\n    //update session metadata\n    session.selector = data.selector;\n  }\n}\n\nexport function updateSessionMetadata(session, metadata) {\n  session.audioStartTime = session.audioStartTime || metadata.audioStartTime; //timestamp when auto-played audio started playing\n  session.audioEndTime = session.audioEndTime || metadata.audioEndTime; //timestamp when auto-played audio completed playing\n\n  if (!session.waitTime && session.audioStartTime && session.audioEndTime) {\n    // waitTime is elapsed time the user waited for auto-played audio to finish\n    session.waitTime = session.audioEndTime - session.audioStartTime;\n  }\n}\n"],"mappings":";;;;;;;AAAO,SAASA,kBAAkBA,CAACC,OAAO,EAAEC,KAAK,EAAEC,IAAI,EAAE;EACvD,MAAM;IAAEC,EAAE;IAAEC;EAAS,CAAC,GAAGF,IAAI;EAC7B,MAAM;IAAEG;EAAgB,CAAC,GAAGJ,KAAK,IAAI,CAAC,CAAC;EACvCD,OAAO,CAACM,OAAO,GAAGN,OAAO,CAACM,OAAO,IAAI,EAAE;EAEvC,IAAI,CAACF,QAAQ,EAAE;IACbJ,OAAO,CAACM,OAAO,GAAGN,OAAO,CAACM,OAAO,CAACC,MAAM,CAAEC,MAAM,IAAKA,MAAM,CAACL,EAAE,KAAKA,EAAE,CAAC;EACxE,CAAC,MAAM;IACL,MAAMM,IAAI,GAAG;MAAEN;IAAG,CAAC;IACnB,IAAIE,eAAe,EAAE;MACnBL,OAAO,CAACM,OAAO,CAACI,IAAI,CAACD,IAAI,CAAC;IAC5B,CAAC,MAAM;MACLT,OAAO,CAACM,OAAO,GAAG,CAACG,IAAI,CAAC;IAC1B;;IAEA;IACAT,OAAO,CAACW,QAAQ,GAAGT,IAAI,CAACS,QAAQ;EAClC;AACF;AAEO,SAASC,qBAAqBA,CAACZ,OAAO,EAAEa,QAAQ,EAAE;EACvDb,OAAO,CAACc,cAAc,GAAGd,OAAO,CAACc,cAAc,IAAID,QAAQ,CAACC,cAAc,CAAC,CAAC;EAC5Ed,OAAO,CAACe,YAAY,GAAGf,OAAO,CAACe,YAAY,IAAIF,QAAQ,CAACE,YAAY,CAAC,CAAC;;EAEtE,IAAI,CAACf,OAAO,CAACgB,QAAQ,IAAIhB,OAAO,CAACc,cAAc,IAAId,OAAO,CAACe,YAAY,EAAE;IACvE;IACAf,OAAO,CAACgB,QAAQ,GAAGhB,OAAO,CAACe,YAAY,GAAGf,OAAO,CAACc,cAAc;EAClE;AACF","ignoreList":[]}

package/src/__tests__/container.test.jsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Konva from 'konva';
-
-
-import Container from '../hotspot/container';
-import HotspotComponent from '../hotspot/index';
-
-global.MutationObserver = class {
-  constructor(callback) {}
-  disconnect() {}
-  observe(element, initObject) {}
-};
-
-Konva.isBrowser = false;
-
-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 }),
-  };
-});
-
-describe('CorrectAnswerToggle', () => {
-  const model = {
-    mode: 'evaluate',
-    responseCorrect: false,
-  };
-
-  const createComponent = (props) => {
-    return render(
-      <HotspotComponent
-        model={{
-          ...model,
-          ...props,
-        }}
-      />
-    );
-  };
-
-  it('does not render outside of evaluate mode', () => {
-    const { container } = createComponent({ mode: 'gather' });
-    const toggle = container.querySelector('[data-testid="correct-answer-toggle"]');
-    expect(toggle).toBeNull();
-  });
-
-  it('does not render if the response is correct', () => {
-    const { container } = createComponent({ responseCorrect: true });
-    const toggle = container.querySelector('[data-testid="correct-answer-toggle"]');
-    expect(toggle).toBeNull();
-  });
-});

package/src/__tests__/index.test.js

@@ -1,123 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';
-import HotspotComponent from '../hotspot';
-import Hotspot from '../index';
-
-jest.mock('@pie-lib/math-rendering', () => ({ renderMath: jest.fn() }));
-
-jest.mock('../index', () => {
-  class MockHTMLElement {
-    constructor() {
-      this._root = null;
-      this._model = null;
-      this._session = null;
-      this._audioInitialized = false;
-      this.audioComplete = false;
-      this.dispatchEvent = jest.fn();
-    }
-  }
-
-  return {
-    __esModule: true,
-    default: class Hotspot extends MockHTMLElement {
-      constructor() {
-        super();
-      }
-
-      set model(m) {
-        this._model = m;
-        this.dispatchEvent(new (require('@pie-framework/pie-player-events').ModelSetEvent)(this.tagName.toLowerCase(), this.isComplete(), !!this._model));
-      }
-
-      set session(s) {
-        this._session = s;
-      }
-
-      isComplete() {
-        if (!this._session || !this._session.answers) {
-          return false;
-        }
-        if (!Array.isArray(this._session.answers)) {
-          return false;
-        }
-        return this._session.answers.length > 0;
-      }
-
-      onSelectChoice({ id, selected }) {
-        const { SessionChangedEvent } = require('@pie-framework/pie-player-events');
-        const answers = this._session.answers || [];
-
-        if (selected) {
-          if (!answers.find(a => a.id === id)) {
-            this._session.answers = [...answers, { id }];
-          }
-        } else {
-          this._session.answers = answers.filter(a => a.id !== id);
-        }
-
-        const isComplete = this.isComplete();
-        this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), isComplete));
-      }
-    },
-  };
-});
-
-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 }),
-  };
-});
-
-describe('hotspot', () => {
-
-  describe('events', () => {
-    describe('model', () => {
-      it('dispatches model set event', () => {
-        const el = new Hotspot();
-        el.tagName = 'hotspot-el';
-        el.model = {};
-        expect(el.dispatchEvent).toBeCalledWith(new ModelSetEvent('hotspot-el', false, true));
-      });
-    });
-
-    describe('onSelectChoice', () => {
-      it('dispatches session changed event - add answer', () => {
-        const el = new Hotspot();
-        el.tagName = 'hotspot-el';
-        el.session = { answers: [] };
-        el.onSelectChoice({ id: '1', selected: true });
-        expect(el.dispatchEvent).toBeCalledWith(new SessionChangedEvent('hotspot-el', true));
-      });
-
-      it('dispatches session changed event - remove answer', () => {
-        const el = new Hotspot();
-        el.tagName = 'hotspot-el';
-        el.session = { answers: [{ id: '1' }] };
-        el.onSelectChoice({ id: '1', selected: false });
-        expect(el.dispatchEvent).toBeCalledWith(new SessionChangedEvent('hotspot-el', false));
-      });
-
-      it('dispatches session changed event - add/remove answer', () => {
-        const el = new Hotspot();
-        el.tagName = 'hotspot-el';
-        el.session = { answers: [{ id: '1' }] };
-        el.onSelectChoice({ id: '2', selected: true });
-        expect(el.dispatchEvent).toBeCalledWith(new SessionChangedEvent('hotspot-el', true));
-
-        el.onSelectChoice({ id: '1', selected: false });
-        expect(el.dispatchEvent).toBeCalledWith(new SessionChangedEvent('hotspot-el', true));
-
-        el.onSelectChoice({ id: '2', selected: false });
-        expect(el.dispatchEvent).toBeCalledWith(new SessionChangedEvent('hotspot-el', false));
-      });
-    });
-  });
-});

package/src/__tests__/session-updater.test.jsx

@@ -1,69 +0,0 @@
-import { updateSessionValue } from '../session-updater';
-
-const modelCopy = {
-  shapes: {
-    rectangles: [
-      {
-        id: '1',
-        correct: true,
-      },
-      {
-        id: '2',
-      },
-      {
-        id: '3',
-      },
-    ],
-    polygons: [
-      {
-        id: '4',
-        correct: true,
-      },
-      {
-        id: '5',
-      },
-    ],
-  },
-  configure: {},
-  multipleCorrect: true,
-};
-
-const sessionCopy = {
-  answers: [
-    {
-      id: '1',
-    },
-    {
-      id: '2',
-    },
-  ],
-};
-
-describe('session-updater', () => {
-  beforeEach(() => {});
-
-  describe('updateSessionValue', () => {
-    const assert = (session, model, data, expected) => {
-      return () => {
-        updateSessionValue(session, model, data);
-        expect(session.answers).toEqual(expected);
-      };
-    };
-
-    describe('deselect', () => {
-      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 single choice mode',
-        assert(sessionCopy, { ...modelCopy, multipleCorrect: false }, { id: '1', selected: true }, [{ id: '1' }]),
-      );
-    });
-  });
-});