[MM-56921] Rendered Latex in Codeblock when rendering disabled (#27060)

* Rendered Latex in Codeblock when rendering disabled

* Fixed Lint error

* Removed render function in Latex Component

* Fix errors preventing LatexBlock unit tests from running

* Updated latex disabled test for Codeblock testing

* Fixed latex_block test lint errors

* Removed Latex disabled test Snapshot

---------

Co-authored-by: Harrison Healey <harrisonmhealey@gmail.com>
Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/code_block/code_block.tsx

@@ -61,7 +61,19 @@ const CodeBlock: React.FC<Props> = ({code, language, searchedContent}: Props) =>
     // search term highlighting and overlap them
     const [content, setContent] = useState(TextFormatting.sanitizeHtml(code));
     useEffect(() => {
-        SyntaxHighlighting.highlight(usedLanguage, code).then((content) => setContent(content));
+        let shouldSetContent = true;
+
+        SyntaxHighlighting.highlight(usedLanguage, code).then((content) => {
+            // Ensure the component is still mounted and that usedLanguage and code haven't changed to prevent two
+            // highlight calls from racing
+            if (shouldSetContent) {
+                setContent(content);
+            }
+        });
+
+        return () => {
+            shouldSetContent = false;
+        };
     }, [usedLanguage, code]);
 
     let htmlContent = content;

webapp/channels/src/components/latex_block/__snapshots__/latex_block.test.tsx.snap

@@ -15,15 +15,6 @@ exports[`components/LatexBlock error in katex 1`] = `
 </div>
 `;
 
-exports[`components/LatexBlock latex is disabled 1`] = `
-<div
-  class="post-body--code tex"
-  data-testid="latex-disabled"
->
-  \`\`\`latex e^{i\\pi} + 1 = 0\`\`\`
-</div>
-`;
-
 exports[`components/LatexBlock should match snapshot 1`] = `
 <div
   class="post-body--code tex"

webapp/channels/src/components/latex_block/latex_block.test.tsx

@@ -1,12 +1,22 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {render, screen} from '@testing-library/react';
+import {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';
+import {act, renderWithContext} from 'tests/react_testing_utils';
+
+const actImmediate = () =>
+    act(
+        () =>
+            new Promise<void>((resolve) => {
+                setImmediate(() => {
+                    resolve();
+                });
+            }),
+    );
 
 describe('components/LatexBlock', () => {
     const defaultProps = {
@@ -15,7 +25,7 @@ describe('components/LatexBlock', () => {
     };
 
     test('should match snapshot', async () => {
-        render(<LatexBlock {...defaultProps}/>);
+        renderWithContext(<LatexBlock {...defaultProps}/>);
         const wrapper = await screen.findAllByTestId('latex-enabled');
         expect(wrapper.length).toBe(1);
         expect(wrapper.at(0)).toMatchSnapshot();
@@ -27,10 +37,12 @@ describe('components/LatexBlock', () => {
             enableLatex: false,
         };
 
-        render(<LatexBlock {...props}/>);
+        const {container} = renderWithContext(<LatexBlock {...props}/>);
-        const wrapper = await screen.findAllByTestId('latex-disabled');
+
-        expect(wrapper.length).toBe(1);
+        expect(screen.getByText('LaTeX')).toBeInTheDocument();
-        expect(wrapper.at(0)).toMatchSnapshot();
+        expect(container.querySelector('.post-code__line-numbers')).toBeInTheDocument();
+
+        await actImmediate();
     });
 
     test('error in katex', async () => {
@@ -39,7 +51,7 @@ describe('components/LatexBlock', () => {
             enableLatex: true,
         };
 
-        render(withIntl(<LatexBlock {...props}/>));
+        renderWithContext(<LatexBlock {...props}/>);
         const wrapper = await screen.findAllByTestId('latex-enabled');
         expect(wrapper.length).toBe(1);
         expect(wrapper.at(0)).toMatchSnapshot();

webapp/channels/src/components/latex_block/latex_block.tsx

@@ -5,6 +5,8 @@ import type {KatexOptions} from 'katex';
 import React, {useEffect, useState} from 'react';
 import {FormattedMessage} from 'react-intl';
 
+import CodeBlock from 'components/code_block/code_block';
+
 type Katex = typeof import('katex');
 
 type Props = {
@@ -26,12 +28,10 @@ const LatexBlock = ({
 
     if (!enableLatex || katex === undefined) {
         return (
-            <div
+            <CodeBlock
-                className='post-body--code tex'
+                code={content}
-                data-testid='latex-disabled'
+                language='latex'
-            >
+            />
-                {content}
-            </div>
         );
     }