Add basic tests to SynthesizedValue and SynthesizedTable

services/ui-src/src/components/fields/SynthesizedTable.test.jsx

@@ -0,0 +1,139 @@
+import React from "react";
+import { Provider } from "react-redux";
+import { screen, render } from "@testing-library/react";
+import configureMockStore from "redux-mock-store";
+import { lteMask } from "../../util/constants";
+import SynthesizedTable from "./SynthesizedTable";
+
+const mockStore = configureMockStore();
+const store = mockStore({
+  formData: [
+    {
+      contents: {
+        section: {
+          year: 2023,
+          state: "AL",
+        },
+      },
+    },
+  ],
+  global: {
+    stateName: "AL",
+  },
+  stateUser: {
+    abbr: "CMS",
+  },
+  enrollmentCounts: {
+    chipEnrollments: 0,
+  },
+  lastYearFormData: [],
+  lastYearTotals: {},
+});
+
+const defaultProps = {
+  tableTitle: "Managed Care Costs",
+  question: {
+    questions: [],
+    fieldset_info: {
+      rows: [
+        [
+          {
+            contents: "Eligible children",
+          },
+          {
+            actions: ["identity"],
+            targets: ["$..*[?(@ && @.id=='2023-05-a-03-01-a')].answer.entry"],
+          },
+          {
+            actions: ["identity"],
+            targets: ["$..*[?(@ && @.id=='2023-05-a-03-01-b')].answer.entry"],
+          },
+        ],
+      ],
+      headers: [
+        {
+          contents: "",
+        },
+        {
+          contents: "FFY 2023",
+        },
+        {
+          contents: "FFY 2024",
+        },
+      ],
+    },
+    fieldset_type: "synthesized_table",
+    type: "fieldset",
+  },
+};
+
+const SynthesizedTableComponentWithProps = (testSpecificProps) => {
+  return (
+    <Provider store={store}>
+      <SynthesizedTable {...defaultProps} {...testSpecificProps} />
+    </Provider>
+  );
+};
+
+describe("<SynthesizedTable />", () => {
+  test("should render header and labels", () => {
+    render(SynthesizedTableComponentWithProps());
+
+    expect(screen.getByText("FFY 2023")).toBeInTheDocument();
+    expect(screen.getByText("FFY 2024")).toBeInTheDocument();
+    expect(screen.getByText("Eligible children")).toBeInTheDocument();
+  });
+
+  test("should not render in print view with lessThanEleven mask prop", () => {
+    render(
+      SynthesizedTableComponentWithProps({
+        question: {
+          ...defaultProps.question,
+          fieldset_info: {
+            rows: [
+              [
+                {
+                  contents: "Eligible children",
+                  mask: lteMask,
+                },
+                {
+                  mask: lteMask,
+                  actions: ["identity"],
+                  targets: [
+                    "$..*[?(@ && @.id=='2023-05-a-03-01-a')].answer.entry",
+                  ],
+                },
+                {
+                  mask: lteMask,
+                  actions: ["identity"],
+                  targets: [
+                    "$..*[?(@ && @.id=='2023-05-a-03-01-b')].answer.entry",
+                  ],
+                },
+              ],
+            ],
+            headers: [
+              {
+                mask: lteMask,
+                contents: "",
+              },
+              {
+                mask: lteMask,
+                contents: "FFY 2023",
+              },
+              {
+                mask: lteMask,
+                contents: "FFY 2024",
+              },
+            ],
+          },
+        },
+        printView: true,
+      })
+    );
+
+    expect(screen.queryByText("FFY 2023")).not.toBeInTheDocument();
+    expect(screen.queryByText("FFY 2024")).not.toBeInTheDocument();
+    expect(screen.queryByText("Eligible children")).not.toBeInTheDocument();
+  });
+});

services/ui-src/src/components/fields/SynthesizedValue.jsx

@@ -22,7 +22,6 @@ const SynthesizedValue = ({ question, printView, ...props }) => {
     );
 
   const showValue = !(printView && question.fieldset_info.mask === lteMask);
-
   const renderValue = () => {
     return synthesizeValue(
       question.fieldset_info,

services/ui-src/src/components/fields/SynthesizedValue.test.jsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { Provider } from "react-redux";
+import { screen, render } from "@testing-library/react";
+import configureMockStore from "redux-mock-store";
+import SynthesizedValue from "./SynthesizedValue";
+import { lteMask } from "../../util/constants";
+
+const mockStore = configureMockStore();
+const store = mockStore({
+  formData: [
+    {
+      contents: {
+        section: {
+          year: 2023,
+          state: "AL",
+        },
+      },
+    },
+  ],
+  global: {
+    stateName: "AL",
+  },
+  stateUser: {
+    abbr: "CMS",
+  },
+  enrollmentCounts: {
+    chipEnrollments: 0,
+  },
+  lastYearFormData: [],
+  lastYearTotals: {},
+});
+
+const defaultProps = {
+  question: {
+    questions: [],
+    fieldset_info: {
+      actions: ["percentage"],
+      targets: [
+        "$..*[?(@ && @.id=='2023-03-i-02-01-01-05')].answer.entry",
+        "$..*[?(@ && @.id=='2023-03-i-02-01-01-04')].answer.entry",
+      ],
+    },
+    fieldset_type: "synthesized_value",
+    type: "fieldset",
+  },
+};
+
+const SynthesizedValueComponentWithProps = (testSpecificProps) => {
+  return (
+    <Provider store={store}>
+      <SynthesizedValue {...defaultProps} {...testSpecificProps} />
+    </Provider>
+  );
+};
+
+describe("<Synthesized Value />", () => {
+  test("should render header and labels", () => {
+    render(SynthesizedValueComponentWithProps());
+
+    expect(screen.getByText("Computed:")).toBeInTheDocument();
+  });
+
+  test("should not render in print view with lessThanEleven mask prop", () => {
+    render(
+      SynthesizedValueComponentWithProps({
+        question: {
+          ...defaultProps.question,
+          fieldset_info: {
+            ...defaultProps.fieldset_info,
+            mask: lteMask,
+          },
+        },
+        printView: true,
+      })
+    );
+
+    expect(screen.queryByText("Computed:")).not.toBeInTheDocument();
+  });
+});

services/ui-src/src/serviceWorker.js

@@ -3,7 +3,7 @@
  * register() is not called by default.
  */
 
-import { MODE, BASE_URL } from "./util/constants";
+import { MODE, BASE_URL } from "./util/metaEnv";
 
 /*
  * This lets the app load faster on subsequent visits in production, and gives

services/ui-src/src/setupTests.js

@@ -34,7 +34,7 @@ Object.defineProperty(window, "matchMedia", {
 
 Object.defineProperty(window, "crypto", { value: require("node:crypto") });
 
-jest.mock("./util/constants", () => ({
+jest.mock("./util/metaEnv", () => ({
   MODE: "production",
   BASE_URL: "mdctcartsdev.cms.gov",
 }));

services/ui-src/src/store/storeIndex.js

@@ -13,7 +13,7 @@ import fiscalYearTemplate from "./fiscalYearTemplate";
 import reportStatus from "./reportStatus";
 import enrollmentCounts from "./enrollmentCounts";
 import { initAuthManager } from "../hooks/authHooks";
-import { MODE } from "../util/constants";
+import { MODE } from "../util/metaEnv";
 import { logger } from "redux-logger";
 // Consolidate reducers
 export const reducer = combineReducers({

services/ui-src/src/util/constants.js

@@ -1,4 +1 @@
-// import.meta.env is threaded through here in order to mock it out for jest
-export const { MODE, BASE_URL } = import.meta.env;
-
 export const lteMask = "lessThanEleven";

services/ui-src/src/util/metaEnv.js

@@ -0,0 +1,2 @@
+// import.meta.env is threaded through here in order to mock it out for jest
+export const { MODE, BASE_URL } = import.meta.env;