EREGCSC-2041 -- Adjust SSA.gov Title 16 links (#910)

* chore: formatting

* feat: if title 16, SSA link uses 16b as title number

* test: unit test for updated ssaGovUrl method

* feat: pull in act titles from API endpoint

* feat: cast title to string for component logic

* test: add acts api response as fixture

* test: add update StatuteSelector unit tests

* test: add unit test coverage for new utility methods

* chore: add JSDoc for new utility methods

* chore: remove unused import

* chore: add back in necessary containing element

* test: delete duplicate unit test suite

* test: intercept v3/acts api call in cypress test

solution/ui/e2e/cypress/e2e/statutes.spec.cy.js

@@ -7,6 +7,10 @@ describe("Statute Table", () => {
         cy.intercept(`**/v3/statutes**`, {
             fixture: "statutes.json",
         }).as("statutes");
+
+        cy.intercept(`**/v3/acts`, {
+            fixture: "acts.json",
+        }).as("acts");
     });
 
     it("goes to statutes page from homepage and has SSA Title 19 selected by default", () => {

solution/ui/e2e/cypress/fixtures/acts.json

@@ -0,0 +1,27 @@
+[
+  {
+    "act": "Social Security Act",
+    "title": 11,
+    "title_roman": "XI"
+  },
+  {
+    "act": "Social Security Act",
+    "title": 16,
+    "title_roman": "XVI"
+  },
+  {
+    "act": "Social Security Act",
+    "title": 18,
+    "title_roman": "XVIII"
+  },
+  {
+    "act": "Social Security Act",
+    "title": 19,
+    "title_roman": "XIX"
+  },
+  {
+    "act": "Social Security Act",
+    "title": 21,
+    "title_roman": "XXI"
+  }
+]

solution/ui/regulations/alias.js

@@ -8,7 +8,7 @@ export default {
     eregsComponentLib: r("../regulations/eregs-component-lib"),
     legacy: r("../../regulations"),
     sharedComponents: r(
-        "../eregs-component-lib/src/components/shared-components"
+        "../regulations/eregs-component-lib/src/components/shared-components"
     ),
     utilities: r("./utilities"),
     vite: r("../regulations/eregs-vite/src"),

solution/ui/regulations/eregs-component-lib/src/components/shared-components/Statutes/StatuteSelector.test.js

@@ -2,13 +2,26 @@ import flushPromises from "flush-promises";
 import { render, screen } from "@testing-library/vue";
 import { describe, it, expect } from "vitest";
 
+import actsFixture from "cypress/fixtures/acts.json";
+
+import { ACT_TYPES } from "sharedComponents/Statutes/utils/enums.js";
+import { shapeTitlesResponse } from "utilities/utils";
+
 import StatuteSelector from "./StatuteSelector.vue";
 
+const SHAPED_TITLES = shapeTitlesResponse({
+    actsResults: actsFixture,
+    actTypes: ACT_TYPES,
+});
+
 describe("Statute Table Selector", () => {
     describe("SSA table type", () => {
         it(`Creates a snapshot of the Statute Selector with default props`, async () => {
             const wrapper = render(StatuteSelector, {
-                stubs: { "RouterLink": true },
+                props: {
+                    titles: SHAPED_TITLES,
+                },
+                stubs: { RouterLink: true },
             });
 
             await flushPromises();
@@ -34,9 +47,10 @@ describe("Statute Table Selector", () => {
 
         it(`Creates a snapshot of the Statute Selector with a loading prop`, async () => {
             const wrapper = render(StatuteSelector, {
-                stubs: { "RouterLink": true },
+                stubs: { RouterLink: true },
                 props: {
                     loading: true,
+                    titles: SHAPED_TITLES,
                 },
             });
 
@@ -57,10 +71,11 @@ describe("Statute Table Selector", () => {
 
         it(`Creates a snapshot of the Statute Selector when act and title props passed in to component`, async () => {
             const wrapper = render(StatuteSelector, {
-                stubs: { "RouterLink": true },
+                stubs: { RouterLink: true },
                 props: {
                     selectedAct: "ssa",
                     selectedTitle: "21",
+                    titles: SHAPED_TITLES,
                 },
             });
 

solution/ui/regulations/eregs-component-lib/src/components/shared-components/Statutes/StatuteSelector.vue

@@ -1,6 +1,4 @@
 <script setup>
-import { titleSelectorList } from "./schemas/listSchemas";
-
 const props = defineProps({
     loading: {
         type: Boolean,
@@ -17,6 +15,11 @@ const props = defineProps({
         required: false,
         default: "19",
     },
+    titles: {
+        type: Object,
+        required: false,
+        default: () => {},
+    },
 });
 
 const isActActive = ({ act }) => act === props.selectedAct;
@@ -27,7 +30,7 @@ const isTitleActive = ({ act, title }) =>
 <template>
     <ul class="acts__list">
         <li
-            v-for="(value, key, i) in titleSelectorList"
+            v-for="(value, key, i) in titles"
             :key="`${key}-${i}`"
             class="acts-list__item"
         >

solution/ui/regulations/eregs-component-lib/src/components/shared-components/Statutes/__snapshots__/StatuteSelector.test.js.snap

@@ -31,6 +31,19 @@ exports[`Statute Table Selector > SSA table type > Creates a snapshot of the Sta
                 </routerlink-stub>
               </h4>
             </li>
+            <li
+              class="titles-list__item"
+            >
+              <h4>
+                <routerlink-stub
+                  class="titles-list__link"
+                  data-testid="ssa-XVI-16"
+                  to="[object Object]"
+                >
+                   Title XVI 
+                </routerlink-stub>
+              </h4>
+            </li>
             <li
               class="titles-list__item"
             >
@@ -103,6 +116,19 @@ exports[`Statute Table Selector > SSA table type > Creates a snapshot of the Sta
               </routerlink-stub>
             </h4>
           </li>
+          <li
+            class="titles-list__item"
+          >
+            <h4>
+              <routerlink-stub
+                class="titles-list__link"
+                data-testid="ssa-XVI-16"
+                to="[object Object]"
+              >
+                 Title XVI 
+              </routerlink-stub>
+            </h4>
+          </li>
           <li
             class="titles-list__item"
           >
@@ -234,6 +260,19 @@ exports[`Statute Table Selector > SSA table type > Creates a snapshot of the Sta
                 </routerlink-stub>
               </h4>
             </li>
+            <li
+              class="titles-list__item"
+            >
+              <h4>
+                <routerlink-stub
+                  class="titles-list__link titles-list__link--loading"
+                  data-testid="ssa-XVI-16"
+                  to="[object Object]"
+                >
+                   Title XVI 
+                </routerlink-stub>
+              </h4>
+            </li>
             <li
               class="titles-list__item"
             >
@@ -306,6 +345,19 @@ exports[`Statute Table Selector > SSA table type > Creates a snapshot of the Sta
               </routerlink-stub>
             </h4>
           </li>
+          <li
+            class="titles-list__item"
+          >
+            <h4>
+              <routerlink-stub
+                class="titles-list__link titles-list__link--loading"
+                data-testid="ssa-XVI-16"
+                to="[object Object]"
+              >
+                 Title XVI 
+              </routerlink-stub>
+            </h4>
+          </li>
           <li
             class="titles-list__item"
           >
@@ -437,6 +489,19 @@ exports[`Statute Table Selector > SSA table type > Creates a snapshot of the Sta
                 </routerlink-stub>
               </h4>
             </li>
+            <li
+              class="titles-list__item"
+            >
+              <h4>
+                <routerlink-stub
+                  class="titles-list__link"
+                  data-testid="ssa-XVI-16"
+                  to="[object Object]"
+                >
+                   Title XVI 
+                </routerlink-stub>
+              </h4>
+            </li>
             <li
               class="titles-list__item"
             >
@@ -509,6 +574,19 @@ exports[`Statute Table Selector > SSA table type > Creates a snapshot of the Sta
               </routerlink-stub>
             </h4>
           </li>
+          <li
+            class="titles-list__item"
+          >
+            <h4>
+              <routerlink-stub
+                class="titles-list__link"
+                data-testid="ssa-XVI-16"
+                to="[object Object]"
+              >
+                 Title XVI 
+              </routerlink-stub>
+            </h4>
+          </li>
           <li
             class="titles-list__item"
           >

solution/ui/regulations/eregs-component-lib/src/components/shared-components/Statutes/utils/urlMethods.js

@@ -1,11 +1,16 @@
-// SSA
+/* eslint-disable camelcase */
+/* eslint-disable eqeqeq */
+
+// SSA table URL methods
+
 /**
  * @param {number} title - CFR title (ex: 42)
  * @param {string} usc - USC section
  *
  * @returns {string} url - url to the House.gov page for the USC section
  */
-const houseGovUrl = ({ title, usc }) =>`https://uscode.house.gov/view.xhtml?hl=false&edition=prelim&req=granuleid%3AUSC-prelim-title${title}-section${usc}`;
+const houseGovUrl = ({ title, usc }) =>
+    `https://uscode.house.gov/view.xhtml?hl=false&edition=prelim&req=granuleid%3AUSC-prelim-title${title}-section${usc}`;
 
 /**
  * @param {string} souce_url - URL containing COMPS number
@@ -28,14 +33,19 @@ const statuteCompilationUrl = ({ source_url }) => {
  *
  * @returns {string} url - url to the SSA.gov page for the SSA section
  */
-const ssaGovUrl = ({ statute_title, section }) => `https://www.ssa.gov/OP_Home/ssact/title${statute_title}/${section}.htm`;
+const ssaGovUrl = ({ statute_title, section }) => {
+    const title = statute_title == "16" ? "16b" : statute_title;
+
+    return `https://www.ssa.gov/OP_Home/ssact/title${title}/${section}.htm`;
+};
 
 /**
  * @param {number} title - CFR title (ex: 42)
  * @param {string} usc - USC section
  *
  * @returns {string} url - url to GovInfo.gov PDF page for USC Code
  */
-const usCodeUrl = ({ title, usc }) => `https://www.govinfo.gov/link/uscode/${title}/${usc}`;
+const usCodeUrl = ({ title, usc }) =>
+    `https://www.govinfo.gov/link/uscode/${title}/${usc}`;
 
 export { houseGovUrl, usCodeUrl, statuteCompilationUrl, ssaGovUrl };

solution/ui/regulations/eregs-component-lib/src/components/shared-components/Statutes/utils/urlMethods.test.js

@@ -1,14 +1,14 @@
+import { describe, it, expect } from "vitest";
+
+import statutesFixture from "cypress/fixtures/statutes.json";
+
 import {
     houseGovUrl,
     usCodeUrl,
     statuteCompilationUrl,
     ssaGovUrl,
 } from "./urlMethods";
 
-import statutesFixture from "cypress/fixtures/statutes.json";
-
-import { describe, it, expect } from "vitest";
-
 describe("Statute Table URL methods", () => {
     describe("houseGovUrl", () => {
         it("returns expected URL string", async () => {
@@ -44,6 +44,24 @@ describe("Statute Table URL methods", () => {
                 "https://www.ssa.gov/OP_Home/ssact/title11/1101.htm"
             );
         });
+
+        it("uses 16b for Title 16 URLs", async () => {
+            const section1601 = {
+                section: "1601",
+                title: 42,
+                usc: "1381",
+                act: "Social Security Act",
+                name: "Purpose; appropriations.",
+                statute_title: 16,
+                statute_title_roman: "XVI",
+                source_url:
+                    "https://www.govinfo.gov/content/pkg/COMPS-8766/uslm/COMPS-8766.xml",
+            };
+            const computedUrl = ssaGovUrl(section1601);
+            expect(computedUrl).toEqual(
+                "https://www.ssa.gov/OP_Home/ssact/title16b/1601.htm"
+            );
+        });
     });
 
     describe("usCodeUrl", () => {