fix(LEMS-2617): Require $ to display TeX in axis labels

.changeset/heavy-eels-agree.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Require \$ to display TeX in axis labels

packages/perseus/src/widgets/interactive-graphs/backgrounds/axis-labels.tsx

@@ -5,6 +5,7 @@ import {getDependencies} from "../../../dependencies";
 import {pointToPixel} from "../graphs/use-transform";
 import {MAX, X, Y} from "../math";
 import useGraphConfig from "../reducer/use-graph-config";
+import {replaceOutsideTeX} from "../utils";
 
 import type {GraphDimensions} from "../types";
 
@@ -42,7 +43,7 @@ export default function AxisLabels() {
                     transform: "translate(7px, -50%)",
                 }}
             >
-                <TeX>{xAxisLabelText}</TeX>
+                <TeX>{replaceOutsideTeX(xAxisLabelText)}</TeX>
             </span>
             <span
                 style={{
@@ -53,7 +54,7 @@ export default function AxisLabels() {
                     transform: "translate(-50%, 0px)",
                 }}
             >
-                <TeX>{yAxisLabelText}</TeX>
+                <TeX>{replaceOutsideTeX(yAxisLabelText)}</TeX>
             </span>
         </>
     );

packages/perseus/src/widgets/interactive-graphs/mafs-graph.test.tsx

@@ -132,6 +132,28 @@ describe("MafsGraph", () => {
         expect(line.getAttribute("y2")).toBe(-expectedY2 + "");
     });
 
+    it("renders TeX in axis Labels", () => {
+        const basePropsWithTexLabels = {
+            ...getBaseMafsGraphProps(),
+            labels: ["$1/2$", "$3/4$"],
+        };
+
+        render(<MafsGraph {...basePropsWithTexLabels} />);
+        expect(screen.getByText("1/2")).toBeInTheDocument();
+        expect(screen.getByText("3/4")).toBeInTheDocument();
+    });
+
+    it("renders plain text in axis Labels", () => {
+        const basePropsWithTexLabels = {
+            ...getBaseMafsGraphProps(),
+            labels: ["4/5", "5/6"],
+        };
+
+        render(<MafsGraph {...basePropsWithTexLabels} />);
+        expect(screen.getByText("\\text{4/5}")).toBeInTheDocument();
+        expect(screen.getByText("\\text{5/6}")).toBeInTheDocument();
+    });
+
     it("renders ARIA labels for each point (segment)", () => {
         const state: InteractiveGraphState = {
             type: "segment",