Skip to content

Commit

Permalink
[MM-57710] Convert katex class component to function component (#26967)
Browse files Browse the repository at this point in the history 
* Convert katex class component to function component

* Change formatting

* Move props to one line each

* Fix latex tests - shallow() does not work with useEffect()

* Update snapshot for src/utils/message_html_to_component.test.tsx

* Remove act() block

* Expect that length of components with matching data-testid should be 1

* Revert behaviour of katex with error to render the error
  • Loading branch information
@marlenekoh
marlenekoh committed May 24, 2024
1 parent 50ac6fc commit 3812a97
Show file tree
Hide file tree
Showing 4 changed files with 325 additions and 81 deletions.
272 changes: 257 additions & 15 deletions webapp/channels/src/components/latex_block/__snapshots__/latex_block.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,272 @@

exports[`components/LatexBlock error in katex 1`] = `
<div
className="post-body--code tex"
dangerouslySetInnerHTML={
Object {
"__html": "<span class=\\"katex-error\\" title=\\"ParseError: KaTeX parse error: Expected &#x27;}&#x27;, got &#x27;EOF&#x27; at end of input: …i\\\\pi + 1 = 0\`\`\`\\" style=\\"color:#cc0000\\">\`\`\`latex e^{i\\\\pi + 1 = 0\`\`\`</span>",
}
}
/>
class="post-body--code tex"
data-testid="latex-enabled"
>
<span
class="katex-error"
style="color:#cc0000"
title="ParseError: KaTeX parse error: Expected '}', got 'EOF' at end of input: …i\\\\pi + 1 = 0\`\`\`"
>
\`\`\`latex e^{i\\pi + 1 = 0\`\`\`
</span>
</div>
`;
exports[`components/LatexBlock latex is disabled 1`] = `
<div
className="post-body--code tex"
class="post-body--code tex"
data-testid="latex-disabled"
>
\`\`\`latex e^{i\\pi} + 1 = 0\`\`\`
</div>
`;
exports[`components/LatexBlock should match snapshot 1`] = `
<div
className="post-body--code tex"
dangerouslySetInnerHTML={
Object {
"__html": "<span class=\\"katex-display fleqn\\"><span class=\\"katex\\"><span class=\\"katex-mathml\\"><math xmlns=\\"http://www.w3.org/1998/Math/MathML\\" display=\\"block\\"><semantics><mrow><mi mathvariant=\\"normal\\">‘</mi><mi mathvariant=\\"normal\\">‘</mi><mi mathvariant=\\"normal\\">‘</mi><mi>l</mi><mi>a</mi><mi>t</mi><mi>e</mi><mi>x</mi><msup><mi>e</mi><mrow><mi>i</mi><mi>π</mi></mrow></msup><mo>+</mo><mn>1</mn><mo>=</mo><mn>0</mn><mi mathvariant=\\"normal\\">‘</mi><mi mathvariant=\\"normal\\">‘</mi><mi mathvariant=\\"normal\\">‘</mi></mrow><annotation encoding=\\"application/x-tex\\">\`\`\`latex e^{i\\\\pi} + 1 = 0\`\`\`</annotation></semantics></math></span><span class=\\"katex-html\\" aria-hidden=\\"true\\"><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:0.958em;vertical-align:-0.0833em;\\"></span><span class=\\"mord\\">‘‘‘</span><span class=\\"mord mathnormal\\" style=\\"margin-right:0.01968em;\\">l</span><span class=\\"mord mathnormal\\">a</span><span class=\\"mord mathnormal\\">t</span><span class=\\"mord mathnormal\\">e</span><span class=\\"mord mathnormal\\">x</span><span class=\\"mord\\"><span class=\\"mord mathnormal\\">e</span><span class=\\"msupsub\\"><span class=\\"vlist-t\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.8747em;\\"><span style=\\"top:-3.113em;margin-right:0.05em;\\"><span class=\\"pstrut\\" style=\\"height:2.7em;\\"></span><span class=\\"sizing reset-size6 size3 mtight\\"><span class=\\"mord mtight\\"><span class=\\"mord mathnormal mtight\\" style=\\"margin-right:0.03588em;\\">iπ</span></span></span></span></span></span></span></span></span><span class=\\"mspace\\" style=\\"margin-right:0.2222em;\\"></span><span class=\\"mbin\\">+</span><span class=\\"mspace\\" style=\\"margin-right:0.2222em;\\"></span></span><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:0.6444em;\\"></span><span class=\\"mord\\">1</span><span class=\\"mspace\\" style=\\"margin-right:0.2778em;\\"></span><span class=\\"mrel\\">=</span><span class=\\"mspace\\" style=\\"margin-right:0.2778em;\\"></span></span><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:0.6944em;\\"></span><span class=\\"mord\\">0‘‘‘</span></span></span></span></span>",
}
}
/>
class="post-body--code tex"
data-testid="latex-enabled"
>
<span
class="katex-display fleqn"
>
<span
class="katex"
>
<span
class="katex-mathml"
>
<math
display="block"
xmlns="http://www.w3.org/1998/Math/MathML"
>
<semantics>
<mrow>
<mi
mathvariant="normal"
>
‘
</mi>
<mi
mathvariant="normal"
>
‘
</mi>
<mi
mathvariant="normal"
>
‘
</mi>
<mi>
l
</mi>
<mi>
a
</mi>
<mi>
t
</mi>
<mi>
e
</mi>
<mi>
x
</mi>
<msup>
<mi>
e
</mi>
<mrow>
<mi>
i
</mi>
<mi>
π
</mi>
</mrow>
</msup>
<mo>
+
</mo>
<mn>
1
</mn>
<mo>
=
</mo>
<mn>
0
</mn>
<mi
mathvariant="normal"
>
‘
</mi>
<mi
mathvariant="normal"
>
‘
</mi>
<mi
mathvariant="normal"
>
‘
</mi>
</mrow>
<annotation
encoding="application/x-tex"
>
\`\`\`latex e^{i\\pi} + 1 = 0\`\`\`
</annotation>
</semantics>
</math>
</span>
<span
aria-hidden="true"
class="katex-html"
>
<span
class="base"
>
<span
class="strut"
style="height:0.958em;vertical-align:-0.0833em;"
/>
<span
class="mord"
>
‘‘‘
</span>
<span
class="mord mathnormal"
style="margin-right:0.01968em;"
>
l
</span>
<span
class="mord mathnormal"
>
a
</span>
<span
class="mord mathnormal"
>
t
</span>
<span
class="mord mathnormal"
>
e
</span>
<span
class="mord mathnormal"
>
x
</span>
<span
class="mord"
>
<span
class="mord mathnormal"
>
e
</span>
<span
class="msupsub"
>
<span
class="vlist-t"
>
<span
class="vlist-r"
>
<span
class="vlist"
style="height:0.8747em;"
>
<span
style="top:-3.113em;margin-right:0.05em;"
>
<span
class="pstrut"
style="height:2.7em;"
/>
<span
class="sizing reset-size6 size3 mtight"
>
<span
class="mord mtight"
>
<span
class="mord mathnormal mtight"
style="margin-right:0.03588em;"
>
iπ
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
<span
class="mspace"
style="margin-right:0.2222em;"
/>
<span
class="mbin"
>
+
</span>
<span
class="mspace"
style="margin-right:0.2222em;"
/>
</span>
<span
class="base"
>
<span
class="strut"
style="height:0.6444em;"
/>
<span
class="mord"
>
1
</span>
<span
class="mspace"
style="margin-right:0.2778em;"
/>
<span
class="mrel"
>
=
</span>
<span
class="mspace"
style="margin-right:0.2778em;"
/>
</span>
<span
class="base"
>
<span
class="strut"
style="height:0.6944em;"
/>
<span
class="mord"
>
0‘‘‘
</span>
</span>
</span>
</span>
</span>
</div>
`;
25 changes: 15 additions & 10 deletions webapp/channels/src/components/latex_block/latex_block.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,24 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import {shallow} from 'enzyme';
import {render, screen} from '@testing-library/react';
import React from 'react';

import LatexBlock from 'components/latex_block/latex_block';

import {withIntl} from 'tests/helpers/intl-test-helper';

describe('components/LatexBlock', () => {
const defaultProps = {
content: '```latex e^{i\\pi} + 1 = 0```',
enableLatex: true,
};

test('should match snapshot', async () => {
const wrapper = shallow(<LatexBlock {...defaultProps}/>);
await import('katex'); //manually import katex
expect(wrapper).toMatchSnapshot();
render(<LatexBlock {...defaultProps}/>);
const wrapper = await screen.findAllByTestId('latex-enabled');
expect(wrapper.length).toBe(1);
expect(wrapper.at(0)).toMatchSnapshot();
});

test('latex is disabled', async () => {
Expand All @@ -24,9 +27,10 @@ describe('components/LatexBlock', () => {
enableLatex: false,
};

const wrapper = shallow(<LatexBlock {...props}/>);
await import('katex'); //manually import katex
expect(wrapper).toMatchSnapshot();
render(<LatexBlock {...props}/>);
const wrapper = await screen.findAllByTestId('latex-disabled');
expect(wrapper.length).toBe(1);
expect(wrapper.at(0)).toMatchSnapshot();
});

test('error in katex', async () => {
Expand All @@ -35,8 +39,9 @@ describe('components/LatexBlock', () => {
enableLatex: true,
};

const wrapper = shallow(<LatexBlock {...props}/>);
await import('katex'); //manually import katex
expect(wrapper).toMatchSnapshot();
render(withIntl(<LatexBlock {...props}/>));
const wrapper = await screen.findAllByTestId('latex-enabled');
expect(wrapper.length).toBe(1);
expect(wrapper.at(0)).toMatchSnapshot();
});
});
Loading

0 comments on commit 3812a97

Please sign in to comment.