diff --git a/src/pat/navigation/navigation.js b/src/pat/navigation/navigation.js index 3d4d1ce91..e768f7936 100644 --- a/src/pat/navigation/navigation.js +++ b/src/pat/navigation/navigation.js @@ -45,11 +45,15 @@ export default Base.extend({ this.$el.on("patterns-inject-triggered", "a", (ev) => { // Remove all set current classes this.clear_items(); - // Mark the current item this.mark_current(ev.target); }); + // Mark the navigation items after pat-inject injected into this navigation menu. + this.$el.on("patterns-injected-scanned", () => { + this.init_markings(); + }); + // Automatically and recursively load the ``.current`` item. if (this.el.classList.contains("navigation-load-current")) { // Check for current elements injected here. diff --git a/src/pat/navigation/navigation.test.js b/src/pat/navigation/navigation.test.js index 9022d0f6b..e7c031e79 100644 --- a/src/pat/navigation/navigation.test.js +++ b/src/pat/navigation/navigation.test.js @@ -3,7 +3,7 @@ import Pattern from "./navigation"; import Registry from "../../core/registry"; import utils from "../../core/utils"; -describe("Navigation pattern tests", function () { +describe("1 - Navigation pattern tests", function () { beforeEach(function () { document.body.innerHTML = `
@@ -152,7 +152,80 @@ describe("Navigation pattern tests", function () { }); }); -describe("Navigation pattern tests - Mark items based on URL", () => { +describe("2 - Navigation pattern tests - mark after navigation injection", function () { + let _window_location; + + beforeEach(() => { + _window_location = global.window.location; + delete global.window.location; + document.body.innerHTML = ""; + }); + + afterEach(() => { + global.window.location = _window_location; + document.body.innerHTML = ""; + }); + + const set_url = (url, portal_url) => { + global.window.location = { + href: url, + }; + + portal_url = portal_url || url; + + document.body.dataset.portalUrl = portal_url; + }; + + it("navigation roundtrip", async () => { + document.body.innerHTML = ` +
+
+ link a1 +
+ link a11 +
+
+
+ load navigation + + `; + + set_url("https://patternslib.com/path/to/test"); + + Registry.scan(document.body); + + const nav = document.querySelector("nav"); + const load_nav = document.querySelector(".load-nav"); + load_nav.click(); + + await utils.timeout(1); // wait for MutationObserver + + const w1 = nav.querySelector(".w1"); + const a1 = nav.querySelector(".a1"); + const w11 = nav.querySelector(".w11"); + const a11 = nav.querySelector(".a11"); + + console.log(document.body.innerHTML); + + expect(w1.classList.contains("current")).toBeFalsy(); + expect(w1.classList.contains("navigation-in-path")).toBeTruthy(); + expect(a1.classList.contains("current")).toBeFalsy(); + expect(a1.classList.contains("navigation-in-path")).toBeTruthy(); + expect(w11.classList.contains("current")).toBeTruthy(); + expect(w11.classList.contains("navigation-in-path")).toBeFalsy(); + expect(a11.classList.contains("current")).toBeTruthy(); + expect(a11.classList.contains("navigation-in-path")).toBeFalsy(); + }); +}); + +describe("3 - Navigation pattern tests - Mark items based on URL", () => { let _window_location; beforeEach(() => { @@ -304,7 +377,7 @@ describe("Navigation pattern tests - Mark items based on URL", () => { }); }); -describe("Navigation pattern tests - Mark items based based clicking without pat-inject.", () => { +describe("4 - Navigation pattern tests - Mark items based based clicking without pat-inject.", () => { beforeEach(() => { document.body.innerHTML = ""; });