EREGCSC-2520 -- Update navigation header to link to subject page (#1184)

* chore: remove orphaned template * feat: remove about and resources header links; add Find by Subject * test: update header link tests * fix: correctly spell subjectsUrl prop * test: verify subjects header link on error and about pages
Enterprise-CMCS · Feb 28, 2024 · 53b5e02 · 53b5e02
1 parent f5c6094
commit 53b5e02
Show file tree

Hide file tree

Showing 19 changed files with 104 additions and 120 deletions.
diff --git a/solution/backend/regulations/templates/regulations/partials/header.html b/solution/backend/regulations/templates/regulations/partials/header.html
@@ -9,9 +9,8 @@
         ></jump-to>
         <header-links
             slot="links"
-            about-url="{% url 'about' %}"
-            resources-url="{% url 'resources' %}"
             statutes-url="{% url 'statutes' %}"
+            subjects-url="{% url 'subjects' %}"
         ></header-links>
         <header-search
             slot="search"

diff --git a/solution/backend/regulations/templates/regulations/policy_repository_search.html b/solution/backend/regulations/templates/regulations/policy_repository_search.html
diff --git a/solution/backend/regulations/templates/regulations/resources.html b/solution/backend/regulations/templates/regulations/resources.html
@@ -22,9 +22,9 @@
     data-about-url="{% url 'about' %}"
     data-custom-url="{{ CUSTOM_URL }}"
     data-home-url="{% url 'homepage' %}"
-    data-resources-url="{% url 'resources' %}"
     data-search-url="{% url 'search' %}"
     data-host="{{ host }}"
     data-statutes-url="{% url 'statutes' %}"
+    data-subjects-url="{% url 'subjects' %}"
 ></div>
 {% endblock %}
diff --git a/solution/backend/regulations/templates/regulations/search.html b/solution/backend/regulations/templates/regulations/search.html
@@ -24,9 +24,9 @@
     data-about-url="{% url 'about' %}"
     data-custom-url="{{ CUSTOM_URL }}"
     data-home-url="{% url 'homepage' %}"
-    data-resources-url="{% url 'resources' %}"
     data-search-url="{% url 'search' %}"
     data-host="{{ host }}"
     data-statutes-url="{% url 'statutes' %}"
+    data-subjects-url="{% url 'subjects' %}"
 ></div>
 {% endblock %}
diff --git a/solution/backend/regulations/templates/regulations/statute.html b/solution/backend/regulations/templates/regulations/statute.html
@@ -25,8 +25,8 @@
     data-about-url="{% url 'about' %}"
     data-custom-url="{{ CUSTOM_URL }}"
     data-home-url="{% url 'homepage' %}"
-    data-resources-url="{% url 'resources' %}"
     data-search-url="{% url 'search' %}"
+    data-subjects-url="{% url 'subjects' %}"
     data-host="{{ host }}"
 ></div>
 {% endblock %}
diff --git a/solution/backend/regulations/templates/regulations/subjects.html b/solution/backend/regulations/templates/regulations/subjects.html
@@ -25,9 +25,9 @@
     data-custom-login-url="{% url 'custom_login' %}"
     data-custom-url="{{ CUSTOM_URL }}"
     data-home-url="{% url 'homepage' %}"
-    data-resources-url="{% url 'resources' %}"
     data-search-url="{% url 'search' %}"
     data-statutes-url="{% url 'statutes' %}"
+    data-subjects-url="{% url 'subjects' %}"
     data-host="{{ host }}"
     data-is-authenticated="{{ is_authenticated }}"
     data-has-editable-job-code="{{ has_editable_job_code }}"

diff --git a/solution/ui/e2e/cypress/e2e/about-page.spec.cy.js b/solution/ui/e2e/cypress/e2e/about-page.spec.cy.js
@@ -11,4 +11,15 @@ describe("About page", { scrollBehavior: "center" }, () => {
         cy.visit("/about/");
         cy.checkLinkRel();
     });
+
+    it("goes to the Subjects page using header link", () => {
+        cy.viewport("macbook-15");
+        cy.visit("/about/");
+        cy.clickHeaderLink({
+            page: "subjects",
+            label: "Find by Subject",
+            screen: "wide",
+        });
+        cy.url().should("include", "/subjects");
+    });
 });
diff --git a/solution/ui/e2e/cypress/e2e/error-page.cy.js b/solution/ui/e2e/cypress/e2e/error-page.cy.js
@@ -65,6 +65,17 @@ describe("Error page", { scrollBehavior: "center" }, () => {
         });
     });
 
+    it("error-page - goes to the Subjects page using header link", () => {
+        cy.viewport("macbook-15");
+        cy.visit("/about/");
+        cy.clickHeaderLink({
+            page: "subjects",
+            label: "Find by Subject",
+            screen: "wide",
+        });
+        cy.url().should("include", "/subjects");
+    });
+
     it("allows a user to go back to the homepage by clicking the top left link", () => {
         cy.viewport("macbook-15");
         cy.request({ url: "/404", failOnStatusCode: false })

diff --git a/solution/ui/e2e/cypress/e2e/resources.spec.cy.js b/solution/ui/e2e/cypress/e2e/resources.spec.cy.js
@@ -10,24 +10,14 @@ describe("Resources page", () => {
             });
         });
 
-        it("goes to resources page from homepage", () => {
-            cy.viewport("macbook-15");
-            cy.visit("/");
-            cy.clickHeaderLink({ page: "Resources", screen: "wide" });
-            cy.url().should("include", "/resources");
-        });
-
-        it("resources link nested in a dropdown menu on narrow screen widths", () => {
-            cy.viewport("iphone-x");
-            cy.visit("/");
-            cy.clickHeaderLink({ page: "Resources", screen: "narrow" });
-            cy.url().should("include", "/resources");
-        });
-
         it("goes to another SPA page from the resources page", () => {
             cy.viewport("macbook-15");
             cy.visit("/resources");
-            cy.clickHeaderLink({ page: "Statutes", screen: "wide" });
+            cy.clickHeaderLink({
+                page: "statutes",
+                label: "Statutes",
+                screen: "wide",
+            });
             cy.url().should("include", "/statutes");
         });
     });
@@ -82,10 +72,10 @@ describe("Resources page", () => {
         it("does not filter locations on the search", () => {
             cy.viewport("macbook-15");
             cy.visit("/resources");
-            cy.wait("@resources").then( (interception) => {
-              expect(interception.request.url).to.not.contain( 'location=')
+            cy.wait("@resources").then((interception) => {
+                expect(interception.request.url).to.not.contain("location=");
             });
-        })
+        });
 
         it("renders correctly", () => {
             cy.viewport("macbook-15");
@@ -156,7 +146,10 @@ describe("Resources page", () => {
             cy.viewport("macbook-15");
             cy.visit("/resources");
             cy.injectAxe();
-            cy.get("button#select-resource-categories").should("not.have.attr", "disabled");
+            cy.get("button#select-resource-categories").should(
+                "not.have.attr",
+                "disabled"
+            );
             cy.get("#select-resource-categories").click({
                 force: true,
             });

diff --git a/solution/ui/e2e/cypress/e2e/statutes.spec.cy.js b/solution/ui/e2e/cypress/e2e/statutes.spec.cy.js
@@ -16,7 +16,11 @@ describe("Statute Table", () => {
     it("goes to statutes page from homepage and has SSA Title 19 selected by default", () => {
         cy.viewport("macbook-15");
         cy.visit("/");
-        cy.clickHeaderLink({ page: "Statutes", screen: "wide" });
+        cy.clickHeaderLink({
+            page: "statutes",
+            label: "Statutes",
+            screen: "wide",
+        });
         cy.url().should("include", "/statutes/");
 
         cy.get("h1").contains("Statute Reference");
@@ -55,7 +59,11 @@ describe("Statute Table", () => {
     it("statutes link nested in a dropdown menu on mobile screen widths", () => {
         cy.viewport("iphone-x");
         cy.visit("/");
-        cy.clickHeaderLink({ page: "Statutes", screen: "narrow" });
+        cy.clickHeaderLink({
+            page: "statutes",
+            label: "Statutes",
+            screen: "narrow",
+        });
         cy.url().should("include", "/statutes/");
     });
 
@@ -73,7 +81,11 @@ describe("Statute Table", () => {
     it("goes to another SPA page from the statutes page", () => {
         cy.viewport("macbook-15");
         cy.visit("/statutes");
-        cy.clickHeaderLink({ page: "Resources", screen: "wide" });
-        cy.url().should("include", "/resources");
+        cy.clickHeaderLink({
+            page: "subjects",
+            label: "Find by Subject",
+            screen: "wide",
+        });
+        cy.url().should("include", "/subjects");
     });
 });
diff --git a/solution/ui/e2e/cypress/e2e/subjects.spec.cy.js b/solution/ui/e2e/cypress/e2e/subjects.spec.cy.js
@@ -595,16 +595,16 @@ describe("Find by Subjects", () => {
         });
     });
 
-    it("goes to another SPA page from the policy repository page", () => {
+    it("goes to another SPA page from the subjects page", () => {
         cy.viewport("macbook-15");
         cy.eregsLogin({
             username,
             password,
             landingPage: "/subjects/",
         });
         cy.visit("/subjects");
-        cy.clickHeaderLink({ page: "Resources", screen: "wide" });
-        cy.url().should("include", "/resources");
+        cy.clickHeaderLink({ page: "statutes", label: "Statutes", screen: "wide" });
+        cy.url().should("include", "/statutes");
     });
 
     it("should have the correct labels for public and internal documents", () => {

diff --git a/solution/ui/e2e/cypress/support/common-commands/header.js b/solution/ui/e2e/cypress/support/common-commands/header.js
@@ -46,7 +46,11 @@ export const goHome = () => {
     cy.url().should("eq", Cypress.config().baseUrl + "/");
 };
 
-export const clickHeaderLink = ({ page = "Resources", screen = "wide" }) => {
+export const clickHeaderLink = ({
+    page = "statutes",
+    label = "Statutes",
+    screen = "wide",
+}) => {
     const listLocation =
         screen === "wide"
             ? "header .header--links .links--container"
@@ -68,15 +72,15 @@ export const clickHeaderLink = ({ page = "Resources", screen = "wide" }) => {
             `${listLocation} > ul.links__list li a[data-testid=${page.toLowerCase()}]`
         )
             .should("be.visible")
-            .should("have.text", page)
+            .should("have.text", label)
             .click({ force: true });
 
         // styled as selected
         cy.get(
             `${listLocation} > ul.links__list li a[data-testid=${page.toLowerCase()}]`
         )
             .should("be.visible")
-            .should("have.text", page)
+            .should("have.text", label)
             .should("have.attr", "class")
             .and("match", /active/);
     } else {
@@ -90,9 +94,11 @@ export const clickHeaderLink = ({ page = "Resources", screen = "wide" }) => {
 
         cy.get(".more--dropdown-menu").should("be.visible");
 
-        cy.get(`${listLocation} > ul.links__list li a[data-testid=${page.toLowerCase()}]`)
+        cy.get(
+            `${listLocation} > ul.links__list li a[data-testid=${page.toLowerCase()}]`
+        )
             .should("be.visible")
-            .should("have.text", page)
+            .should("have.text", label)
             .click({ force: true });
     }
 };
diff --git a/solution/ui/regulations/eregs-vite/src/App.vue b/solution/ui/regulations/eregs-vite/src/App.vue
@@ -25,15 +25,15 @@ export default {
             type: String,
             default: "",
         },
-        resourcesUrl: {
+        searchUrl: {
             type: String,
             default: "",
         },
-        searchUrl: {
+        statutesUrl: {
             type: String,
             default: "",
         },
-        statutesUrl: {
+        subjectsUrl: {
             type: String,
             default: "",
         },
@@ -61,9 +61,9 @@ export default {
             :custom-login-url="customLoginUrl"
             :custom-url="customUrl"
             :home-url="homeUrl"
-            :resources-url="resourcesUrl"
             :search-url="searchUrl"
             :statutes-url="statutesUrl"
+            :subjects-url="subjectsUrl"
             :host="host"
             :is-authenticated="isAuthenticated === 'True'"
             :has-editable-job-code="hasEditableJobCode === 'True'"

diff --git a/solution/ui/regulations/eregs-vite/src/components/header/HeaderLinks.vue b/solution/ui/regulations/eregs-vite/src/components/header/HeaderLinks.vue
@@ -5,15 +5,11 @@ import HeaderChevronUp from "../svgs/header-chevron-up.vue";
 import HeaderChevronDown from "../svgs/header-chevron-down.vue";
 
 const props = defineProps({
-    aboutUrl: {
+    statutesUrl: {
         type: String,
         required: true,
     },
-    resourcesUrl: {
-        type: String,
-        required: true,
-    },
-    statutesUrl: {
+    subjectsUrl: {
         type: String,
         required: true,
     },
@@ -27,16 +23,10 @@ const links = [
         href: props.statutesUrl,
     },
     {
-        name: "resources",
-        label: "Resources",
-        active: window.location.pathname.includes("resources"),
-        href: props.resourcesUrl,
-    },
-    {
-        name: "about",
-        label: "About",
-        active: window.location.pathname.includes("about"),
-        href: props.aboutUrl,
+        name: "subjects",
+        label: "Find by Subject",
+        active: window.location.pathname.includes("subjects"),
+        href: props.subjectsUrl,
     },
 ];
 

diff --git a/solution/ui/regulations/eregs-vite/src/router/index.js b/solution/ui/regulations/eregs-vite/src/router/index.js
@@ -1,10 +1,10 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
 import CacheExplorer from "../views/CacheExplorer.vue";
-import Subjects from "../views/Subjects.vue";
 import Resources from "../views/Resources.vue";
 import Search from "../views/Search.vue";
 import Statutes from "../views/Statutes.vue";
+import Subjects from "../views/Subjects.vue";
 
 Vue.use(VueRouter);
 
@@ -14,11 +14,6 @@ const routes = [
         name: "cache",
         component: CacheExplorer,
     },
-    {
-        path: "/subjects",
-        name: "subjects",
-        component: Subjects,
-    },
     {
         path: "/resources",
         name: "resources",
@@ -34,6 +29,11 @@ const routes = [
         name: "statutes",
         component: Statutes,
     },
+    {
+        path: "/subjects",
+        name: "subjects",
+        component: Subjects,
+    },
 ];
 
 const router = ({ customUrl = "", host = "" }) =>