Merge pull request #682 from patrickhanl/issue663

Make you are here points on marginal tax rate charts a point instead of a line
PolicyEngine · Aug 10, 2023 · 3c02158 · 3c02158
2 parents 9c96f7e + f2bd9a6
commit 3c02158
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 26 deletions.
diff --git a/src/__tests__/MarginalTaxRates.test.js b/src/__tests__/MarginalTaxRates.test.js
@@ -0,0 +1,73 @@
+import { render, screen } from "@testing-library/react";
+import MarginalTaxRates from "pages/household/output/MarginalTaxRates";
+import { useSearchParams } from "react-router-dom";
+
+jest.mock("react-plotly.js", () => jest.fn());
+jest.mock("../api/variables.js", () => ({
+  getValueFromHousehold: jest.fn(),
+  getPlotlyAxisFormat: jest.fn(),
+}));
+jest.mock("react-router-dom", () => {
+  const originalModule = jest.requireActual("react-router-dom");
+  return {
+    __esModule: true,
+    ...originalModule,
+    useSearchParams: jest.fn(),
+  };
+});
+
+const householdInput = {
+  people: {
+    you: {
+      employment_income: {
+        2023: {},
+      },
+    },
+  },
+};
+
+const metadata = {
+  countryId: "us",
+};
+
+const policy = {
+  baseline: {
+    data: {},
+  },
+  reform: {
+    data: {},
+  },
+};
+
+describe("Test Render Output", () => {
+  test("Should render description", () => {
+    useSearchParams.mockImplementation(() => {
+      const get = (param) => {
+        if (param === "focus") {
+          return "householdOutput.mtr";
+        } else if (param === "reform") {
+          return "13870";
+        } else if (param === "baseline") {
+          return "13867";
+        } else if (param === "household") {
+          return "33253";
+        }
+      };
+      return [{ get }];
+    });
+    render(
+      <MarginalTaxRates
+        householdInput={householdInput}
+        metadata={metadata}
+        policy={policy}
+      />,
+    );
+    expect(
+      screen.getByText(
+        "This chart shows how your net income changes under different earnings. It is based on your household's current situation.",
+      ),
+    ).toBeTruthy();
+  });
+});
+
+//TODO: Either render plots here or in own test files for validation
diff --git a/src/pages/household/output/MarginalTaxRates.jsx b/src/pages/household/output/MarginalTaxRates.jsx
@@ -19,8 +19,14 @@ import useMobile from "layout/Responsive";
 import Screenshottable from "layout/Screenshottable";
 
 export default function MarginalTaxRates(props) {
-  const { householdInput, householdBaseline, metadata, policyLabel, policy } =
-    props;
+  const {
+    householdInput,
+    householdBaseline,
+    householdReform,
+    metadata,
+    policyLabel,
+    policy,
+  } = props;
   const [baselineMtr, setBaselineMtr] = useState(null);
   const [searchParams] = useSearchParams();
   const householdId = searchParams.get("household");
@@ -144,12 +150,13 @@ export default function MarginalTaxRates(props) {
                 },
               },
               {
-                x: [currentEarnings, currentEarnings],
-                y: [0, currentMtr],
-                type: "line",
+                x: [currentEarnings],
+                y: [currentMtr],
+                type: "scatter",
                 name: "Your current MTR",
+                mode: "markers",
                 line: {
-                  color: style.colors.DARK_GRAY,
+                  color: style.colors.BLUE,
                 },
               },
             ]}
@@ -213,15 +220,13 @@ export default function MarginalTaxRates(props) {
       metadata,
     );
 
-    let currEarningsIdx;
-    let reformMtrValue;
-
-    try {
-      currEarningsIdx = earningsArray.indexOf(currentEarnings);
-      reformMtrValue = reformMtrArray[currEarningsIdx];
-    } catch (e) {
-      return <ErrorPane />;
-    }
+    const reformMtrValue = getValueFromHousehold(
+      "marginal_tax_rate",
+      "2023",
+      "you",
+      householdReform,
+      metadata,
+    );
 
     if (Math.abs(currentMtr - reformMtrValue) > 0.001) {
       title = `${policyLabel} ${
@@ -234,7 +239,7 @@ export default function MarginalTaxRates(props) {
     } else {
       title = `${policyLabel} doesn't change your marginal tax rate`;
     }
-    // Add the main line, then add a 'you are here' line
+    // Add the main line, then add a 'you are here' points
     let data;
     if (showDelta) {
       data = [
@@ -251,13 +256,13 @@ export default function MarginalTaxRates(props) {
           },
         },
         {
-          x: [currentEarnings, currentEarnings],
-          y: [0, reformMtrValue - currentMtr],
-          type: "line",
+          x: [currentEarnings],
+          y: [reformMtrValue - currentMtr],
+          type: "scatter",
           name: "Your current MTR difference",
+          mode: "markers",
           line: {
-            color: style.colors.MEDIUM_DARK_GRAY,
-            shape: "hv",
+            color: style.colors.BLUE,
           },
         },
       ];
@@ -284,13 +289,23 @@ export default function MarginalTaxRates(props) {
           },
         },
         {
-          x: [currentEarnings, currentEarnings],
-          y: [0, currentMtr],
-          type: "line",
+          x: [currentEarnings],
+          y: [currentMtr],
+          type: "scatter",
           name: "Your current MTR",
+          mode: "markers",
           line: {
-            color: style.colors.DARK_GRAY,
-            shape: "hv",
+            color: style.colors.GRAY,
+          },
+        },
+        {
+          x: [currentEarnings],
+          y: [reformMtrValue],
+          type: "scatter",
+          name: "Your reform MTR",
+          mode: "markers",
+          line: {
+            color: style.colors.BLUE,
           },
         },
       ];