Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | 2x 2x 2x 2x 2x 2x 2x 2x 2x 8x 18x 2x 6x 14x 10x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x | import '@testing-library/jest-dom'; import { render, screen } from '@testing-library/react'; import React from 'react'; import KaTeX from 'katex'; export default (Component, { displayMode }) => { const sumFormula = '\\sum_0^\\infty'; const integralFormula = '\\int_{-infty}^\\infty'; const invalidCommandFormula = '\\inta'; const incompleteFormula = '\\sum_{'; const renderError = (error) => <span className="error">{`${error.name}: Cannot render this formula`}</span>; const getReactKatexElement = () => screen.getByTestId('react-katex'); const expectToContainCustomError = (container, customError) => expect(container.querySelector('.error')).toContainHTML(customError); const expectToContain = (content) => expect(getReactKatexElement()).toContainHTML(content); const expectToContainFormula = (formula) => expectToContain(KaTeX.renderToString(formula, { displayMode })); describe('when passing the formula as props', () => { it('renders correctly', () => { render(<Component math={sumFormula} />); expectToContainFormula(sumFormula); }); it('updates after props are updated', () => { const { rerender } = render(<Component math={sumFormula} />); rerender(<Component math={integralFormula} />); expectToContainFormula(integralFormula, { displayMode }); }); }); describe('when passing the formula as child', () => { it('renders correctly', () => { render(<Component>{integralFormula}</Component>); expectToContainFormula(integralFormula); }); it('updates after props are updated', () => { const { rerender } = render(<Component>{integralFormula}</Component>); rerender(<Component>{sumFormula}</Component>); expectToContainFormula(sumFormula); }); }); describe('error handling', () => { it('updates when passing from invalid to valid formula', () => { const { rerender } = render(<Component math={invalidCommandFormula} renderError={renderError} />); rerender(<Component math={integralFormula} renderError={renderError} />); expectToContainFormula(integralFormula); }); it('updates when passing from valid to invalid formula', () => { const { rerender, container } = render(<Component math={integralFormula} renderError={renderError} />); rerender(<Component math={invalidCommandFormula} renderError={renderError} />); expectToContainCustomError(container, '<span class="error">ParseError: Cannot render this formula</span>'); }); describe('when using default error handler', () => { it('renders the formula with the wrong part highlighted in default color', () => { render(<Component math={invalidCommandFormula} />); expect(getReactKatexElement().innerHTML).toContain('color:#cc0000;'); }); describe('when passing custom error color', () => { it('renders the formula with the wrong part highlighted in custom color', () => { render(<Component errorColor={'blue'} math={invalidCommandFormula} />); expect(getReactKatexElement().innerHTML).toContain('color:blue;'); }); }); describe('when error is caused by an invalid prop type', () => { beforeEach(() => { // disable console.error doen by prop-types jest.spyOn(console, 'error').mockImplementation(() => null); }); it('renders error message', () => { render(<Component displayMode math={123} />); expectToContain('KaTeX can only parse string typed expression'); }); }); describe('when error is caused while parsing math expression', () => { it('renders error message', () => { render(<Component math={incompleteFormula} />); expectToContain("KaTeX parse error: Expected '}', got 'EOF' at end of input: \\sum_{"); }); }); }); describe('when using custom error handler', () => { it('renders the returned value from `renderError` prop', () => { const { container } = render(<Component math={invalidCommandFormula} renderError={renderError} />); expectToContainCustomError(container, '<span class="error">ParseError: Cannot render this formula</span>'); }); describe('when error is caused while parsing math expression', () => { it('still uses custom handler', () => { const { container } = render(<Component math={incompleteFormula} renderError={renderError} />); expectToContainCustomError(container, '<span class="error">ParseError: Cannot render this formula</span>'); }); }); }); }); }; |