Skip to content

fix inject with non-existing sources, add tests for title insertion #1228

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 20, 2025
Merged

fix inject with non-existing sources, add tests for title insertion #1228

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9030ba5
fix(pat-inject): Fix a problem with injections without a target which…
thet Jan 20, 2025
fcd87d4
maint(pat-inject): Test automatic title insertion in history record m…
thet Jan 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 22 additions & 17 deletions src/pat/inject/inject.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const inject = {
// if the injection shall add a history entry and HTML5 pushState
// is missing, then don't initialize the injection.
log.warn("HTML5 pushState is missing, aborting");
return;
return $el;
}
$el.data("pat-inject", cfgs);

Expand Down Expand Up @@ -350,6 +350,7 @@ const inject = {
return false;
}
cfg.$target = this.createTarget(cfg.target);
cfg.$created_target = cfg.$target;
}
return true;
},
Expand Down Expand Up @@ -453,7 +454,7 @@ const inject = {
return $target;
},

_performInjection(target, $el, $source, cfg, trigger, title) {
_performInjection(target, $el, $source, cfg, trigger, $title) {
/* Called after the XHR has succeeded and we have a new $source
* element to inject.
*/
Expand Down Expand Up @@ -484,13 +485,13 @@ const inject = {
// Now the injection actually happens.
if (this._inject(trigger, source_nodes, target, cfg)) {
// Update history
this._update_history(cfg, trigger, title);
this._update_history(cfg, trigger, $title);
// Post-injection
this._afterInjection($el, $(source_nodes), cfg);
this._afterInjection($el, cfg.$created_target || $(source_nodes), cfg);
}
},

_update_history(cfg, trigger, title) {
_update_history(cfg, trigger, $title) {
// History support. if subform is submitted, append form params
if (cfg.history !== "record" || !history?.pushState) {
return;
Expand All @@ -502,10 +503,10 @@ const inject = {
}
history.pushState({ url: url }, "", url);
// Also inject title element if we have one
if (title) {
if ($title.length) {
const title_el = document.querySelector("title");
if (title_el) {
this._inject(trigger, title, title_el, {
this._inject(trigger, $title, title_el, {
action: "element",
});
}
Expand Down Expand Up @@ -584,14 +585,14 @@ const inject = {
]);
/* pick the title source for dedicated handling later
Title - if present - is always appended at the end. */
let title;
let $title;
if (
sources$ &&
sources$[sources$.length - 1] &&
sources$[sources$.length - 1][0] &&
sources$[sources$.length - 1][0].nodeName === "TITLE"
) {
title = sources$[sources$.length - 1];
$title = sources$[sources$.length - 1];
}
cfgs.forEach((cfg, idx1) => {
const perform_inject = () => {
Expand All @@ -603,7 +604,7 @@ const inject = {
sources$[idx1],
cfg,
ev.target,
title
$title
);
}
}
Expand Down Expand Up @@ -674,8 +675,8 @@ const inject = {

// clean up
for (const cfg of cfgs) {
if ("$injected" in cfg) {
cfg.$injected.remove();
if ("$created_target" in cfg) {
cfg.$created_target.remove();
}
cfg.$target.removeClass(cfg.loadingClass);
$el.removeClass(cfg.executingClass);
Expand Down Expand Up @@ -779,14 +780,14 @@ const inject = {
}
},

_inject(trigger, source, target, cfg) {
_inject(trigger, source_nodes, target, cfg) {
if (cfg.source === "none") {
// Special case. Clear the target after ajax call.
target.replaceWith("");
return true;
}
if (source.length === 0) {
log.warn("Aborting injection, source not found:", source);
if (source_nodes.length === 0) {
log.warn("Aborting injection, source not found:", source_nodes);
$(trigger).trigger("pat-inject-missingSource", {
url: cfg.url,
selector: cfg.source,
Expand Down Expand Up @@ -816,7 +817,7 @@ const inject = {
}[cfg.action];

// Inject the content HERE!
target[method](...source);
target[method](...source_nodes);

return true;
},
Expand Down Expand Up @@ -966,8 +967,11 @@ const inject = {
let clean_html = html
.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "")
.replace(/<head\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/head>/gi, "")
.replace(/<html([^>]*?)>/gi, "")
.replace(/<\/html([^>]*?)>/gi, "")
.replace(/<body([^>]*?)>/gi, '<div id="__original_body">')
.replace(/<\/body([^>]*?)>/gi, "</div>");

if (title && title.length == 2) {
clean_html = title[0] + clean_html;
}
Expand Down Expand Up @@ -1108,7 +1112,8 @@ const inject = {
sources(cfgs, data) {
const sources = cfgs.map((cfg) => cfg.source);
sources.push("title");
return this._sourcesFromHtml(data, cfgs[0].url, sources);
const result = this._sourcesFromHtml(data, cfgs[0].url, sources);
return result;
},
},
},
Expand Down
183 changes: 181 additions & 2 deletions src/pat/inject/inject.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1557,12 +1557,191 @@ describe("pat-inject", function () {

expect(catched).toBe(true);
expect(pattern.execute).toHaveBeenCalled();

});

});
});
});

describe("9.3 - inject with not existing target element", function () {
let spy_ajax;

beforeEach(function () {
spy_ajax = jest.spyOn($, "ajax").mockImplementation(() => deferred);
});

afterEach(function () {
spy_ajax.mockRestore();
});

it("9.3.1 - Create non-existing target", async function () {
// Test a real-world scenario with modals where the target
// element does not exist and the source is implicitly defined
// via the href attribue.
// NOTE: pat-modal does the injecton part on it's own, so you
// normally use the `pat-modal` class and do not specify a
// target.
// For examples, see the pat-modal pattern.

document.body.innerHTML = `
<a class="pat-inject"
href="test.html#document-content"
data-pat-inject="target: #pat-modal">link</a>
`;

answer(`
<html>
<body>
<div id="document-content">
<dialog>
<h1>hello</h1>
</dialog>
</div>
</body>
</html>
`);

const inject = document.querySelector(".pat-inject");

pattern.init($(inject));
await utils.timeout(1); // wait a tick for async to settle.

inject.click();

await utils.timeout(1); // wait a tick for async to settle.

console.log(document.body.innerHTML);
const modal = document.querySelector("#pat-modal");
expect(modal).toBeTruthy();
expect(modal.innerHTML.replace(/\s/g, "")).toBe(
"<dialog><h1>hello</h1></dialog>"
);
});

it("9.3.2 - Does not create non-existing target without a target specifier", async function () {
document.body.innerHTML = `
<a class="pat-inject"
href="test.html#document-content">link</a>
`;

answer(`
<html>
<body>
<div id="document-content">
<dialog>
<h1>hello</h1>
</dialog>
</div>
</body>
</html>
`);

const inject = document.querySelector(".pat-inject");

pattern.init($(inject));
await utils.timeout(1); // wait a tick for async to settle.

inject.click();

await utils.timeout(1); // wait a tick for async to settle.

console.log(document.body.innerHTML);
const modal = document.querySelector("#pat-modal");
expect(modal).toBeFalsy();
});
});

describe("9.4 - injecton of the title element.", function () {
let spy_ajax;

beforeEach(function () {
spy_ajax = jest.spyOn($, "ajax").mockImplementation(() => deferred);
});

afterEach(function () {
spy_ajax.mockRestore();
});

it("9.4.1 - Injects a title element with history:record", async function () {
document.head.innerHTML = `
<title>test</title>
`;
document.body.innerHTML = `
<a class="pat-inject"
href="test.html"
data-pat-inject="
source: body;
target: body;
history: record;
">link</a>
`;

answer(`
<html>
<head>
<title>hello</title>
</head>
<body>
OK
</body>
</html>
`);

const inject = document.querySelector(".pat-inject");

pattern.init($(inject));
await utils.timeout(1); // wait a tick for async to settle.

inject.click();

await utils.timeout(1); // wait a tick for async to settle.

expect(document.body.textContent.trim()).toBe("OK");

const title = document.head.querySelector("title");
expect(title).toBeTruthy();
expect(title.textContent.trim()).toBe("hello");
});

it("9.4.2 - Does not inject a title element without history:record", async function () {
document.head.innerHTML = `
<title>test</title>
`;
document.body.innerHTML = `
<a class="pat-inject"
href="test.html"
data-pat-inject="
source: body;
target: body;
">link</a>
`;

answer(`
<html>
<head>
<title>hello</title>
</head>
<body>
OK
</body>
</html>
`);

const inject = document.querySelector(".pat-inject");

pattern.init($(inject));
await utils.timeout(1); // wait a tick for async to settle.

inject.click();

await utils.timeout(1); // wait a tick for async to settle.

expect(document.body.textContent.trim()).toBe("OK");

const title = document.head.querySelector("title");
expect(title).toBeTruthy();
expect(title.textContent.trim()).toBe("test"); // Old title
});
});
});

describe("10 - Error handling", () => {
Expand Down
Loading