render-math.test.js

import React from 'react';
import { render } from '@testing-library/react';
import { TeX } from 'mathjax-full/js/input/tex';
import renderMath, { fixMathElement } from '../render-math';
import { times } from 'lodash-es';

jest.mock(
  'mathjax-full/js/mathjax',
  () => ({
    mathjax: {
      document: jest.fn().mockReturnThis(),
      findMath: jest.fn().mockReturnThis(),
      compile: jest.fn().mockReturnThis(),
      getMetrics: jest.fn().mockReturnThis(),
      typeset: jest.fn().mockReturnThis(),
      updateDocument: jest.fn().mockReturnThis(),
      clear: jest.fn().mockReturnThis(),
      handlers: {
        handlesDocument: jest.fn().mockReturnThis(),
      },
      handleRetriesFor: jest.fn().mockImplementation((callback) => callback()),
    },
  }),
  {
    virtual: false,
  },
);

jest.mock('mathjax-full/js/input/mathml', () => {
  const mock = jest.fn().mockReturnThis();
  mock.setMmlFactory = jest.fn();
  return {
    MathML: () => mock,
  };
});

jest.mock('mathjax-full/js/input/tex', () => ({
  TeX: jest.fn(),
}));
jest.mock('mathjax-full/js/core/MmlTree/MmlFactory', () => {
  const instance = {
    setMmlFactory: jest.fn(),
    defaultNodes: {},
  };
  return {
    MmlFactory: () => instance,
  };
});

const mockMathInstance = {
  document: jest.fn().mockReturnThis(),
  findMath: jest.fn().mockReturnThis(),
  compile: jest.fn().mockReturnThis(),
  enrich: jest.fn().mockReturnThis(),
  addMenu: jest.fn().mockReturnThis(),
  attachSpeech: jest.fn().mockReturnThis(),
  assistiveMml: jest.fn().mockReturnThis(),
  getMetrics: jest.fn().mockReturnThis(),
  typeset: jest.fn().mockReturnThis(),
  updateDocument: jest.fn().mockReturnValue({
    math: {
      list: undefined,
    },
    clear: jest.fn().mockReturnThis(),
  }),
  clear: jest.fn().mockReturnThis(),
  handlers: {
    handlesDocument: jest.fn().mockReturnThis(),
  },
  handleRetriesFor: jest.fn().mockImplementation((callback) => callback()),
};

const mockHtml = {
  findMath: jest.fn().mockReturnValue(mockMathInstance),
};

const mockEnrichHandlerInstance = {
  create: jest.fn().mockImplementation(() => mockHtml),
};

jest.mock('mathjax-full/js/a11y/semantic-enrich', () => {
  return {
    EnrichHandler: () => mockEnrichHandlerInstance,
  };
});

jest.mock('mathjax-full/js/a11y/assistive-mml', () => {
  return {
    AssistiveMmlHandler: () => {},
  };
});

jest.mock('mathjax-full/js/ui/menu/MenuHandler', () => {
  return {
    MenuHandler: () => {},
  };
});

jest.mock('mathjax-full/js/output/chtml', () => ({
  CHTML: jest.fn(),
}));

jest.mock('mathjax-full/js/adaptors/browserAdaptor', () => ({
  browserAdaptor: jest.fn(),
}));

jest.mock('mathjax-full/js/handlers/html', () => ({
  RegisterHTMLHandler: jest.fn(),
}));

jest.mock('mathjax-full/js/core/MmlTree/SerializedMmlVisitor', () => ({
  SerializedMmlVisitor: jest.fn(),
}));

describe('render-math', () => {
  it('calls classFactory.create once', () => {
    const div = document.createElement('div');

    times(10).forEach((i) => renderMath(div));

    expect(mockEnrichHandlerInstance.create).toHaveBeenCalledTimes(1);
  });

  it('calls MathJax render', () => {
    const div = document.createElement('div');

    renderMath(div);
    expect(mockEnrichHandlerInstance.create).toHaveBeenCalledTimes(1);
    expect(mockHtml.findMath).toHaveBeenCalledWith({ elements: [div] });
  });

  it('call render math for an array of elements', () => {
    const divOne = document.createElement('div');
    const divTwo = document.createElement('div');

    renderMath([divOne, divTwo]);

    expect(mockEnrichHandlerInstance.create).toHaveBeenCalledTimes(1);
    expect(mockHtml.findMath).toHaveBeenCalledWith({
      elements: [divOne, divTwo],
    });
  });

  it('registers the abs macro in the TeX config', () => {
    const div = document.createElement('div');

    renderMath(div);

    const texConfig = TeX.mock.calls[0][0];

    expect(texConfig.macros.abs).toEqual(['\\left|#1\\right|', 1]);
  });

  it('wraps the math containing element the right way', () => {
    const { container } = render(
      <div>
        <span data-latex="">{'420\\text{ cm}=4.2\\text{ meters}'}</span>
      </div>,
    );
    const spanElem = container.querySelector('span[data-latex]');

    fixMathElement(spanElem);

    expect(spanElem.textContent).toEqual('\\(420\\text{ cm}=4.2\\text{ meters}\\)');
  });
});