improved code to check localstorage in componentDidMount, and added Jest test regarding saving font size to localStorage

Author: Donny Wong

app/javascript/Components/Result/text_viewer.jsx

@@ -37,6 +37,10 @@ export class TextViewer extends React.PureComponent {
   componentDidMount() {
     this.highlight_root = this.raw_content.current.parentNode;
 
+    if (localStorage.getItem("text_viewer_font_size") != null) {
+      this.setState({font_size: Number(localStorage.getItem("text_viewer_font_size"))});
+    }
+
     // Fetch content from a URL if it is passed as a prop. The URL should point to plaintext data.
     if (this.props.url) {
       this.props.setLoadingCallback(true);
@@ -106,10 +110,6 @@ export class TextViewer extends React.PureComponent {
     if (content && (content !== prevContent || this.props.annotations !== prevProps.annotations)) {
       this.ready_annotations();
       this.setState({copy_success: false});
-
-      if (localStorage.getItem("text_viewer_font_size") != null) {
-        this.setState({font_size: Number(localStorage.getItem("text_viewer_font_size"))});
-      }
     } else if (this.props.focusLine !== prevProps.focusLine) {
       this.scrollToLine(this.props.focusLine);
     }

app/javascript/Components/__tests__/text_viewer.test.jsx

@@ -2,6 +2,8 @@ import React from "react";
 import {render, screen, waitFor} from "@testing-library/react";
 import {TextViewer} from "../Result/text_viewer";
 import fetchMock from "jest-fetch-mock";
+import userEvent from "@testing-library/user-event";
+
 import {BinaryViewer} from "../Result/binary_viewer";
 
 describe("TextViewer", () => {
@@ -21,6 +23,17 @@ describe("TextViewer", () => {
     fetchMock.resetMocks();
   });
 
+  it("should save font size to localStorage when font size change", async () => {
+    jest.spyOn(Storage.prototype, "getItem");
+
+    render(<TextViewer {...props} />);
+    userEvent.click(screen.getByText("+A"));
+
+    await waitFor(() => {
+      expect(localStorage.getItem("text_viewer_font_size")).toBe("1.25");
+    });
+  });
+
   it("should render its text content when the content ends with a new line", () => {
     render(<TextViewer {...props} content={"def f(n: int) -> int:\n    return n + 1\n"} />);