From 6d51307ddf7656f6087a6d229f6945bec9a29c6f Mon Sep 17 00:00:00 2001 From: Nikhil Kulkarni <58654101+nikhilskul7@users.noreply.github.com> Date: Wed, 25 Sep 2024 05:59:33 -0400 Subject: [PATCH] [MM-57711] Convert ./components/latex_inline/latex_inline.tsx from Class Component to Function Component (#28129) * Changed the class component to functional * Updated the tests for latex_inline * Updated the snapshots and tests * Updated the tests, snapshots and changed div to span * Updated snapshots and tests * used renderWithContext instead of render in tests --------- Co-authored-by: Mattermost Build --- .../__snapshots__/latex_inline.test.tsx.snap | 215 ++++++++++++++++-- .../latex_inline/latex_inline.test.tsx | 37 ++- .../components/latex_inline/latex_inline.tsx | 101 ++++---- 3 files changed, 264 insertions(+), 89 deletions(-) diff --git a/webapp/channels/src/components/latex_inline/__snapshots__/latex_inline.test.tsx.snap b/webapp/channels/src/components/latex_inline/__snapshots__/latex_inline.test.tsx.snap index c58533f429..da71e79772 100644 --- a/webapp/channels/src/components/latex_inline/__snapshots__/latex_inline.test.tsx.snap +++ b/webapp/channels/src/components/latex_inline/__snapshots__/latex_inline.test.tsx.snap @@ -1,31 +1,198 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`components/LatexBlock error in katex 1`] = ` -e^{i\\\\pi + 1 = 0", - } - } -/> +exports[`components/LatexInline error in katex 1`] = ` +
+ + + e^{i\\pi + 1 = 0 + + +
`; -exports[`components/LatexBlock latex is disabled 1`] = ` - - $e^{i\\pi} + 1 = 0$ - +exports[`components/LatexInline latex is disabled 1`] = ` +
+ + $e^{i\\pi} + 1 = 0$ + +
`; -exports[`components/LatexBlock should match snapshot 1`] = ` -eiπ+1=0e^{i\\\\pi} + 1 = 0eiπ+1=0", - } - } -/> +exports[`components/LatexInline should match snapshot 1`] = ` +
+ + + + + + + + + e + + + + i + + + π + + + + + + + + + 1 + + + = + + + 0 + + + + e^{i\\pi} + 1 = 0 + + + + +
`; diff --git a/webapp/channels/src/components/latex_inline/latex_inline.test.tsx b/webapp/channels/src/components/latex_inline/latex_inline.test.tsx index 1224a732b2..6826e74586 100644 --- a/webapp/channels/src/components/latex_inline/latex_inline.test.tsx +++ b/webapp/channels/src/components/latex_inline/latex_inline.test.tsx @@ -1,21 +1,28 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import {shallow} from 'enzyme'; import React from 'react'; +import {act} from 'react-dom/test-utils'; import LatexInline from 'components/latex_inline/latex_inline'; -describe('components/LatexBlock', () => { +import {withIntl} from 'tests/helpers/intl-test-helper'; +import {renderWithContext} from 'tests/react_testing_utils'; + +describe('components/LatexInline', () => { const defaultProps = { content: 'e^{i\\pi} + 1 = 0', enableInlineLatex: true, }; test('should match snapshot', async () => { - const wrapper = shallow(); - await import('katex'); //manually import katex - expect(wrapper).toMatchSnapshot(); + let container; + + await act(async () => { + const result = renderWithContext(withIntl()); + container = result.container; + }); + expect(container).toMatchSnapshot(); }); test('latex is disabled', async () => { @@ -24,9 +31,13 @@ describe('components/LatexBlock', () => { enableInlineLatex: false, }; - const wrapper = shallow(); - await import('katex'); //manually import katex - expect(wrapper).toMatchSnapshot(); + let container; + + await act(async () => { + const result = renderWithContext(withIntl()); + container = result.container; + }); + expect(container).toMatchSnapshot(); }); test('error in katex', async () => { @@ -35,8 +46,12 @@ describe('components/LatexBlock', () => { enableInlineLatex: true, }; - const wrapper = shallow(); - await import('katex'); //manually import katex - expect(wrapper).toMatchSnapshot(); + let container; + + await act(async () => { + const result = renderWithContext(withIntl()); + container = result.container; + }); + expect(container).toMatchSnapshot(); }); }); diff --git a/webapp/channels/src/components/latex_inline/latex_inline.tsx b/webapp/channels/src/components/latex_inline/latex_inline.tsx index 40b51b9f6d..7ed814a49b 100644 --- a/webapp/channels/src/components/latex_inline/latex_inline.tsx +++ b/webapp/channels/src/components/latex_inline/latex_inline.tsx @@ -2,7 +2,7 @@ // See LICENSE.txt for license information. import type {KatexOptions} from 'katex'; -import React from 'react'; +import React, {useState, useEffect} from 'react'; import {FormattedMessage} from 'react-intl'; type Katex = typeof import('katex'); @@ -12,64 +12,57 @@ type Props = { enableInlineLatex: boolean; }; -type State = { - katex?: Katex; -} +const LatexInline = ({content, enableInlineLatex}: Props) => { + const [katex, setKatex] = useState(undefined); -export default class LatexInline extends React.PureComponent { - constructor(props: Props) { - super(props); - - this.state = { - katex: undefined, - }; - } - - componentDidMount(): void { - import('katex').then((katex) => { - this.setState({katex: katex.default}); + useEffect(() => { + import('katex').then((katexModule) => { + setKatex(katexModule.default); }); + }, []); + + if (!enableInlineLatex || katex === undefined) { + return ( + + {'$' + content + '$'} + + ); } - render(): React.ReactNode { - if (!this.props.enableInlineLatex || this.state.katex === undefined) { - return ( - - {'$' + this.props.content + '$'} - - ); - } + try { + const katexOptions: KatexOptions = { + throwOnError: false, + displayMode: false, + maxSize: 200, + maxExpand: 100, + fleqn: true, + }; - try { - const katexOptions: KatexOptions = { - throwOnError: false, - displayMode: false, - maxSize: 200, - maxExpand: 100, - fleqn: true, - }; + const html = katex.renderToString(content, katexOptions); - const html = this.state.katex.renderToString(this.props.content, katexOptions); - - return ( - + ); + } catch (e) { + return ( + + - ); - } catch (e) { - return ( - - - - ); - } + + ); } -} +}; + +export default React.memo(LatexInline);