[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 <build@mattermost.com>

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`] = `
+exports[`components/LatexInline error in katex 1`] = `
-<span
+<div>
-  className="post-body--code inline-tex"
+  <span
-  dangerouslySetInnerHTML={
+    class="post-body--code inline-tex"
-    Object {
+    data-testid="latex-enabled"
-      "__html": "<span class=\\"katex-error\\" title=\\"ParseError: KaTeX parse error: Expected &#x27;}&#x27;, got &#x27;EOF&#x27; at end of input: e^{i\\\\pi + 1 = 0\\" style=\\"color:#cc0000\\">e^{i\\\\pi + 1 = 0</span>",
+  >
-    }
+    <span
-  }
+      class="katex-error"
-/>
+      style="color:#cc0000"
+      title="ParseError: KaTeX parse error: Expected '}', got 'EOF' at end of input: e^{i\\\\pi + 1 = 0"
+    >
+      e^{i\\pi + 1 = 0
+    </span>
+  </span>
+</div>
 `;
 
-exports[`components/LatexBlock latex is disabled 1`] = `
+exports[`components/LatexInline latex is disabled 1`] = `
-<span
+<div>
-  className="post-body--code inline-tex"
+  <span
->
+    class="post-body--code inline-tex"
-  $e^{i\\pi} + 1 = 0$
+    data-testid="latex-disabled"
-</span>
+  >
+    $e^{i\\pi} + 1 = 0$
+  </span>
+</div>
 `;
 
-exports[`components/LatexBlock should match snapshot 1`] = `
+exports[`components/LatexInline should match snapshot 1`] = `
-<span
+<div>
-  className="post-body--code inline-tex"
+  <span
-  dangerouslySetInnerHTML={
+    class="post-body--code inline-tex"
-    Object {
+    data-testid="latex-enabled"
-      "__html": "<span class=\\"katex\\"><span class=\\"katex-mathml\\"><math xmlns=\\"http://www.w3.org/1998/Math/MathML\\"><semantics><mrow><msup><mi>e</mi><mrow><mi>i</mi><mi>π</mi></mrow></msup><mo>+</mo><mn>1</mn><mo>=</mo><mn>0</mn></mrow><annotation encoding=\\"application/x-tex\\">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.908em;vertical-align:-0.0833em;\\"></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.8247em;\\"><span style=\\"top:-3.063em;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.6444em;\\"></span><span class=\\"mord\\">0</span></span></span></span>",
+  >
-    }
+    <span
-  }
+      class="katex"
-/>
+    >
+      <span
+        class="katex-mathml"
+      >
+        <math
+          xmlns="http://www.w3.org/1998/Math/MathML"
+        >
+          <semantics>
+            <mrow>
+              <msup>
+                <mi>
+                  e
+                </mi>
+                <mrow>
+                  <mi>
+                    i
+                  </mi>
+                  <mi>
+                    π
+                  </mi>
+                </mrow>
+              </msup>
+              <mo>
+                +
+              </mo>
+              <mn>
+                1
+              </mn>
+              <mo>
+                =
+              </mo>
+              <mn>
+                0
+              </mn>
+            </mrow>
+            <annotation
+              encoding="application/x-tex"
+            >
+              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.908em;vertical-align:-0.0833em;"
+          />
+          <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.8247em;"
+                  >
+                    <span
+                      style="top:-3.063em;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.6444em;"
+          />
+          <span
+            class="mord"
+          >
+            0
+          </span>
+        </span>
+      </span>
+    </span>
+  </span>
+</div>
 `;

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(<LatexInline {...defaultProps}/>);
+        let container;
-        await import('katex'); //manually import katex
+
-        expect(wrapper).toMatchSnapshot();
+        await act(async () => {
+            const result = renderWithContext(withIntl(<LatexInline {...defaultProps}/>));
+            container = result.container;
+        });
+        expect(container).toMatchSnapshot();
     });
 
     test('latex is disabled', async () => {
@@ -24,9 +31,13 @@ describe('components/LatexBlock', () => {
             enableInlineLatex: false,
         };
 
-        const wrapper = shallow(<LatexInline {...props}/>);
+        let container;
-        await import('katex'); //manually import katex
+
-        expect(wrapper).toMatchSnapshot();
+        await act(async () => {
+            const result = renderWithContext(withIntl(<LatexInline {...props}/>));
+            container = result.container;
+        });
+        expect(container).toMatchSnapshot();
     });
 
     test('error in katex', async () => {
@@ -35,8 +46,12 @@ describe('components/LatexBlock', () => {
             enableInlineLatex: true,
         };
 
-        const wrapper = shallow(<LatexInline {...props}/>);
+        let container;
-        await import('katex'); //manually import katex
+
-        expect(wrapper).toMatchSnapshot();
+        await act(async () => {
+            const result = renderWithContext(withIntl(<LatexInline {...props}/>));
+            container = result.container;
+        });
+        expect(container).toMatchSnapshot();
     });
 });

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 = {
+const LatexInline = ({content, enableInlineLatex}: Props) => {
-    katex?: Katex;
+    const [katex, setKatex] = useState<Katex | undefined>(undefined);
-}
 
-export default class LatexInline extends React.PureComponent<Props, State> {
+    useEffect(() => {
-    constructor(props: Props) {
+        import('katex').then((katexModule) => {
-        super(props);
+            setKatex(katexModule.default);
-
-        this.state = {
-            katex: undefined,
-        };
-    }
-
-    componentDidMount(): void {
-        import('katex').then((katex) => {
-            this.setState({katex: katex.default});
         });
+    }, []);
+
+    if (!enableInlineLatex || katex === undefined) {
+        return (
+            <span
+                className='post-body--code inline-tex'
+                data-testid='latex-disabled'
+            >
+                {'$' + content + '$'}
+            </span>
+        );
     }
 
-    render(): React.ReactNode {
+    try {
-        if (!this.props.enableInlineLatex || this.state.katex === undefined) {
+        const katexOptions: KatexOptions = {
-            return (
+            throwOnError: false,
-                <span
+            displayMode: false,
-                    className='post-body--code inline-tex'
+            maxSize: 200,
-                >
+            maxExpand: 100,
-                    {'$' + this.props.content + '$'}
+            fleqn: true,
-                </span>
+        };
-            );
-        }
 
-        try {
+        const html = katex.renderToString(content, katexOptions);
-            const katexOptions: KatexOptions = {
-                throwOnError: false,
-                displayMode: false,
-                maxSize: 200,
-                maxExpand: 100,
-                fleqn: true,
-            };
 
-            const html = this.state.katex.renderToString(this.props.content, katexOptions);
+        return (
-
+            <span
-            return (
+                className='post-body--code inline-tex'
-                <span
+                data-testid='latex-enabled'
-                    className='post-body--code inline-tex'
+                dangerouslySetInnerHTML={{__html: html}}
-                    dangerouslySetInnerHTML={{__html: html}}
+            />
+        );
+    } catch (e) {
+        return (
+            <span
+                className='post-body--code inline-tex'
+                data-testid='latex-error'
+            >
+                <FormattedMessage
+                    id='katex.error'
+                    defaultMessage='Could not compile your Latex code. Please review the syntax and try again.'
                 />
-            );
+            </span>
-        } catch (e) {
+        );
-            return (
-                <span
-                    className='post-body--code inline-tex'
-                >
-                    <FormattedMessage
-                        id='katex.error'
-                        defaultMessage="Couldn't compile your Latex code. Please review the syntax and try again."
-                    />
-                </span>
-            );
-        }
     }
-}
+};
+
+export default React.memo(LatexInline);