fix: made sure math is rendered on mount and on updates [PIE-718]

packages/hotspot/src/hotspot/__tests__/index.test.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { renderMath } from '@pie-lib/math-rendering';
+import HotspotComponent from '../index';
+
+jest.mock('@pie-lib/math-rendering', () => ({
+  renderMath: jest.fn(),
+}));
+
+jest.mock('../container', () => (props) => <div data-testid="container" {...props} />);
+
+describe('HotspotComponent', () => {
+  const defaultModel = {
+    disabled: false,
+    imageUrl: 'http://example.com/image.png',
+    prompt: 'prompt',
+    mode: 'gather',
+    multipleCorrect: false,
+    shapes: { rectangles: [], polygons: [], circles: [] },
+    dimensions: { width: 800, height: 600 },
+    strokeWidth: 5,
+  };
+
+  const getWrapper = (props) =>
+    render(
+      <HotspotComponent
+        onSelectChoice={jest.fn()}
+        session={{ answers: [] }}
+        model={defaultModel}
+        {...props}
+      />,
+    );
+
+  beforeEach(() => {
+    renderMath.mockClear();
+  });
+
+  describe('math rendering', () => {
+    it('calls renderMath on mount', () => {
+      getWrapper();
+      expect(renderMath).toHaveBeenCalled();
+    });
+
+    it('passes the rendered dom node to renderMath on mount', () => {
+      getWrapper();
+      expect(renderMath).toHaveBeenCalledWith(expect.any(HTMLElement));
+    });
+
+    it('calls renderMath again on update', () => {
+      const { rerender } = getWrapper();
+      renderMath.mockClear();
+
+      rerender(
+        <HotspotComponent
+          onSelectChoice={jest.fn()}
+          session={{ answers: [] }}
+          model={{ ...defaultModel, prompt: 'updated prompt' }}
+        />,
+      );
+
+      expect(renderMath).toHaveBeenCalled();
+    });
+  });
+});

packages/hotspot/src/hotspot/index.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';
 import { color, Collapsible, hasText, PreviewPrompt, UiLayout, hasMedia } from '@pie-lib/render-ui';
+import { renderMath } from '@pie-lib/math-rendering';
 import { styled } from '@mui/material/styles';
 
 import Container from './container';
@@ -54,6 +56,18 @@ class HotspotComponent extends React.Component {
     if (target) {
       this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });
     }
+
+    // eslint-disable-next-line react/no-find-dom-node
+    const domNode = ReactDOM.findDOMNode(this);
+
+    renderMath(domNode);
+  }
+
+  componentDidUpdate() {
+    // eslint-disable-next-line react/no-find-dom-node
+    const domNode = ReactDOM.findDOMNode(this);
+
+    renderMath(domNode);
   }
 
   componentWillUnmount() {

packages/select-text/src/__tests__/main.test.jsx

@@ -1,5 +1,6 @@
 import { render } from '@testing-library/react';
 import React from 'react';
+import { renderMath } from '@pie-lib/math-rendering';
 import { Main } from '../main';
 
 jest.mock('@pie-lib/text-select', () => ({
@@ -8,6 +9,10 @@ jest.mock('@pie-lib/text-select', () => ({
   Legend: (props) => <div data-testid="legend" {...props} />,
 }));
 
+jest.mock('@pie-lib/math-rendering', () => ({
+  renderMath: jest.fn(),
+}));
+
 describe('main', () => {
   const getWrapper = (props) => {
     return render(
@@ -48,6 +53,43 @@ describe('main', () => {
     return instance;
   };
 
+  beforeEach(() => {
+    renderMath.mockClear();
+  });
+
+  describe('math rendering', () => {
+    it('calls renderMath on mount', () => {
+      getWrapper();
+      expect(renderMath).toHaveBeenCalled();
+    });
+
+    it('passes the rendered dom node to renderMath on mount', () => {
+      getWrapper();
+      expect(renderMath).toHaveBeenCalledWith(expect.any(HTMLElement));
+    });
+
+    it('calls renderMath again on update', () => {
+      const { rerender } = getWrapper();
+      renderMath.mockClear();
+
+      rerender(
+        <Main
+          onSelectionChange={jest.fn()}
+          model={{
+            text: 'bar',
+            tokens: [{ start: 0, end: 1, text: 'b' }],
+          }}
+          session={{
+            selectedTokens: [{ start: 0, end: 1, text: 'b' }],
+          }}
+          classes={{}}
+        />,
+      );
+
+      expect(renderMath).toHaveBeenCalled();
+    });
+  });
+
   describe('logic', () => {
     it('shows correct answer', () => {
       const correctTokens = [{ start: 0, end: 1, text: 'f', correct: true, oldStart: 0, oldEnd: 1 }];

packages/select-text/src/main.jsx

@@ -1,8 +1,10 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { TextSelect, Legend } from '@pie-lib/text-select';
 import CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';
 import { color, Feedback, Collapsible, hasText, hasMedia, PreviewPrompt, UiLayout } from '@pie-lib/render-ui';
+import { renderMath } from '@pie-lib/math-rendering';
 import { styled } from '@mui/material/styles';
 import generateModel from './utils';
 
@@ -57,6 +59,20 @@ export class Main extends React.Component {
     });
   }
 
+  componentDidMount() {
+    // eslint-disable-next-line react/no-find-dom-node
+    const domNode = ReactDOM.findDOMNode(this);
+
+    renderMath(domNode);
+  }
+
+  componentDidUpdate() {
+    // eslint-disable-next-line react/no-find-dom-node
+    const domNode = ReactDOM.findDOMNode(this);
+
+    renderMath(domNode);
+  }
+
   toggleShowCorrect = () => {
     this.setState({ showCorrectAnswer: !this.state.showCorrectAnswer });
   };