Maintain font size in grading view using localStorage (#7525)

Author: donny-wong

Changelog.md

@@ -7,6 +7,7 @@
 ### ✨ New features and improvements
 - Improved layout and labeling in the assignment settings form for both standard and timed assessments. (#7531)
 - Improved Assignment view for students (#7533)
+- Maintain font size in grading view (#7525)
 
 ### 🐛 Bug fixes
 

app/javascript/Components/Result/text_viewer.jsx

@@ -37,6 +37,19 @@ export class TextViewer extends React.PureComponent {
   componentDidMount() {
     this.highlight_root = this.raw_content.current.parentNode;
 
+    let textViewerFontSize = localStorage.getItem("text_viewer_font_size");
+    if (textViewerFontSize !== null) {
+      try {
+        if (isNaN(textViewerFontSize) || textViewerFontSize.trim() === "") {
+          throw new Error("Local storage item 'text_viewer_font_size' is not a number.");
+        }
+        this.setState({font_size: Number(textViewerFontSize)});
+      } catch (error) {
+        localStorage.removeItem("text_viewer_font_size");
+        console.error("An error occurred:", error.message);
+      }
+    }
+
     // 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);
@@ -178,7 +191,9 @@ export class TextViewer extends React.PureComponent {
   };
 
   change_font_size = delta => {
-    this.setState({font_size: Math.max(this.state.font_size + delta, 0.25)});
+    let font_size = Math.max(this.state.font_size + delta, 0.25);
+    this.setState({font_size: font_size});
+    localStorage.setItem("text_viewer_font_size", font_size);
   };
 
   display_annotation = annotation => {

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

@@ -2,12 +2,14 @@ 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", () => {
   const successfulFetchResp = "File content";
   const loadingCallback = jest.fn();
   const errorCallback = jest.fn();
+  const getItemMock = jest.spyOn(Storage.prototype, "getItem");
   const props = {
     annotations: [],
     focusLine: null,
@@ -21,6 +23,38 @@ describe("TextViewer", () => {
     fetchMock.resetMocks();
   });
 
+  it("should save font size to localStorage when font size change", async () => {
+    jest.spyOn(Storage.prototype, "setItem");
+
+    render(<TextViewer {...props} />);
+    userEvent.click(screen.getByText("+A"));
+
+    await waitFor(() => {
+      expect(localStorage.setItem).toHaveBeenCalledWith("text_viewer_font_size", 1.25);
+    });
+  });
+
+  it("should remove local storage text_viewer_font_size when it is not a number", async () => {
+    localStorage.setItem("text_viewer_font_size", "not a number");
+
+    render(<TextViewer {...props} />);
+
+    await waitFor(() => {
+      expect(localStorage.getItem("text_viewer_font_size")).toBeNull();
+    });
+  });
+
+  it("should render using font size from localStorage", async () => {
+    getItemMock.mockReturnValue("3");
+
+    const {container} = render(<TextViewer {...props} />);
+    const element = container.querySelector(".line-numbers");
+
+    await waitFor(() => {
+      expect(element).toHaveStyle("font-size: 3em");
+    });
+  });
+
   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"} />);