[MM-57710] Convert katex class component to function component

[marlenekoh]

Summary

Migrates ./components/latex_block/latex_block.tsx from Class Component to Function Component

Ticket Link

Fixes #26678

Screenshots

Release Note

NONE

[mm-cloud-bot]

@marlenekoh: Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

I understand the commands that are listed here

[mattermost-build]

Hello @marlenekoh,

Thanks for your pull request! A Core Committer will review your pull request soon. For code contributions, you can learn more about the review process here.

[larkox]

Great work! Just one minor thing.

[unified-ci-app]

Enterprise tests are not yet completed. You need to wait until Enterprise CI/docker-image status check is successful, before triggering E2E tests.

[marlenekoh]

@larkox thanks for the review! Made the changes.

[larkox]

Great work. Thanks!

[hmhealey]

Thanks for the PR, @marlenekoh!

The code looks good to me, but it looks like the unit tests for this component are broken now. Could you take a look at fixing those? You can run just the test for that one component by running npm test -w channels -- components/latex_block in the webapp folder.

It looks like one of the snapshots is broken because of the component's display name changed, so that one just needs to be updated with -u, but the others seem to be failing because it's not loading Katex any more. I'm not sure if that's because useEffect isn't setting the state correctly or if the way that we're waiting for the async import to happen doesn't work with the functional component though

[marlenekoh]

Alright, I will take a look!

[marlenekoh]

@hmhealey the tests for latex component should pass now, please take a look 🙏

• I had to change the code from shallow() to render() in the latex tests because the useEffect() hook was not running for shallow()
• set katex options: throwOnError: true so that it can be caught in the except block
• also added data-testid to make explicit which <div> block was being returned from the component
• using await screen.findAllByTestId() in the tests to remove this error

   Unexpected console logsWarning: An update to %s inside a test was not wrapped in act(...).
  
   When testing, code that causes React state updates should be wrapped into act(...):
  
   act(() => {
     /* fire events that update state */
   });
   /* assert on the output */
  
   This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act%s,LatexBlock,
  

• also updated the snapshot for message_html_to_component.test.tsx.

qn: do we want to render the error message or handle the katex.ParseError instead?
https://katex.org/docs/api#handling-errors

[hmhealey]

Thanks for all the details on what you changed. That makes sense that we'd have to switch to Testing Library for this since Enzyme doesn't even officially support React 17. We really need to get rid of Enzyme one of these days.

As for throwOnError, I didn't realize that that's been false for years at this point since it still seems to render errors like it did originally. I see you reverted that though which is also totally fine. It's definitely something we'll want to look into at some point, but it's not at all a priority.

Overall, this looks good to me!

[yasserfaraazkhan]

/e2e-tests

[unified-ci-app]

E2E test triggered successfully for PR #26967. The corresponding commit's status check will be available shortly.

[github-actions]

E2E test run is starting for commit af9813a586788ae5eb285e9ec006d3715fd49a43.
You can check its progress by either:

• Looking at the corresponding commit status, which will be available in a few moments: E2E Tests/test.
• Looking at the E2E test's Workflow Run, with Run ID 9218762727.
• Looking at the E2E test's Cycle on the Automation Dashboard.

[yasserfaraazkhan]

[mm-cloud-bot]

Test server destroyed