Skip to content

Commit

Permalink
feat: support PartialProps.mode (#83)
Browse files Browse the repository at this point in the history
  • Loading branch information
@uki00a
uki00a committed Apr 4, 2024
1 parent 1ac85bc commit f6737de
Show file tree
Hide file tree
Showing 2 changed files with 401 additions and 40 deletions.
260 changes: 259 additions & 1 deletion internal/fresh/partials.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { assertStrictEquals } from "$std/assert/assert_strict_equals.ts";
import { assertEquals } from "$std/assert/assert_equals.ts";
import { assertSpyCalls, spy } from "$std/testing/mock.ts";
import {
applyResponseToDocument,
createPartialMarkerComment,
enablePartialNavigation,
extractPartialBoundaries,
Expand Down Expand Up @@ -52,7 +53,8 @@ Deno.test({
</html>`);
const boundaries = extractPartialBoundaries(document);
assertStrictEquals(boundaries[0].name, "page");
assertStrictEquals(boundaries[0].key, "0");
assertStrictEquals(boundaries[0].key, "");
assertStrictEquals(boundaries[0].replacementMode, "replace");
assertNotStrictEquals(boundaries[0].start, boundaries[0].end);
assertStrictEquals(
boundaries[0].start.parentNode,
Expand Down Expand Up @@ -268,3 +270,259 @@ Deno.test({
});
},
});

Deno.test({
name: "applyResponseToDocument",
permissions: "none",
fn: async (t) => {
await t.step("supports `replace` mode", async () => {
const doc = createDocument(`
<html>
<body>
<header id="header">
Hello
</header>
<main id="main">
<!--frsh-partial:main:0:-->
First content
<!--/frsh-partial:main:0:-->
</main>
<footer f-client-nav id="footer">
<a href="/about">About</a>
</footer>
</body>
</html>`);
const response = new Response(
`
<html>
<body>
<header id="header">
Hi
</header>
<main id="main">
<!--frsh-partial:main:0:-->
<div>
New content
</div>
<!--/frsh-partial:main:0:-->
</main>
<footer f-client-nav id="footer">
<a href="/blog">Blog</a>
</footer>
</body>
</html>
`,
{
headers: {
"content-type": "text/html",
},
},
);
await applyResponseToDocument(doc, response);
const main = doc.getElementById("main");
assertExists(main);
assertStrictEquals(main.children.length, 1);
assertStrictEquals(main.children[0].tagName, "DIV");
assertStrictEquals(
main.children[0].textContent?.trim(),
"New content",
"A partial area should be replaced",
);

const header = doc.getElementById("header");
assertExists(header);
assertStrictEquals(
header.textContent?.trim(),
"Hello",
"A non-partial area should not be updated",
);

const footer = doc.getElementById("footer");
assertExists(footer);
assertStrictEquals(
footer.textContent?.trim(),
"About",
"A non-partial area should not be updated",
);
});

await t.step("supports `append` mode", async () => {
const doc = createDocument(`
<html>
<body>
<header id="header">
Hello
</header>
<main id="main">
<!--frsh-partial:main:1:-->
<div>First content</div>
<!--/frsh-partial:main:1:-->
</main>
<footer f-client-nav id="footer">
<a href="/about">About</a>
</footer>
</body>
</html>`);
const response = new Response(
`
<html>
<body>
<header id="header">
Hi
</header>
<main id="main">
<!--frsh-partial:main:1:-->
<section>
<h2>Title</h2>
<span>New content</span>
</section>
<div>
Another new content
</div>
<!--/frsh-partial:main:1:-->
</main>
<footer f-client-nav id="footer">
<a href="/blog">Blog</a>
</footer>
</body>
</html>
`,
{
headers: {
"content-type": "text/html",
},
},
);
await applyResponseToDocument(doc, response);
const main = doc.getElementById("main");
assertExists(main);
assertStrictEquals(main.children.length, 3);
assertStrictEquals(main.children[0].tagName, "DIV");
assertStrictEquals(main.children[1].tagName, "SECTION");
assertStrictEquals(main.children[2].tagName, "DIV");
assertStrictEquals(
main.children[0].textContent?.trim(),
"First content",
);
assertStrictEquals(
main.children[1].children.length,
2,
"A new content should be appended",
);
assertStrictEquals(
main.children[1].children[0].textContent?.trim(),
"Title",
);
assertStrictEquals(
main.children[1].children[1].textContent?.trim(),
"New content",
);
assertStrictEquals(
main.children[2].textContent?.trim(),
"Another new content",
"A new content should be appended",
);

const header = doc.getElementById("header");
assertExists(header);
assertStrictEquals(
header.textContent?.trim(),
"Hello",
"A non-partial area should not be updated",
);

const footer = doc.getElementById("footer");
assertExists(footer);
assertStrictEquals(
footer.textContent?.trim(),
"About",
"A non-partial area should not be updated",
);
});

await t.step("supports `prepend` mode", async () => {
const doc = createDocument(`
<html>
<body>
<header id="header">
Hello
</header>
<main id="main">
<!--frsh-partial:main:2:-->
<div>First content</div>
<!--/frsh-partial:main:2:-->
</main>
<footer f-client-nav id="footer">
<a href="/about">About</a>
</footer>
</body>
</html>`);
const response = new Response(
`
<html>
<body>
<header id="header">
Hi
</header>
<main id="main">
<!--frsh-partial:main:2:-->
<div>
New content
</div>
<div>
Another new content
</div>
<!--/frsh-partial:main:2:-->
</main>
<footer f-client-nav id="footer">
<a href="/blog">Blog</a>
</footer>
</body>
</html>
`,
{
headers: {
"content-type": "text/html",
},
},
);
await applyResponseToDocument(doc, response);
const main = doc.getElementById("main");
assertExists(main);
assertStrictEquals(main.children.length, 3);
assertStrictEquals(main.children[0].tagName, "DIV");
assertStrictEquals(main.children[1].tagName, "DIV");
assertStrictEquals(main.children[2].tagName, "DIV");
assertStrictEquals(
main.children[0].textContent?.trim(),
"New content",
"A new content should be prepended",
);
assertStrictEquals(
main.children[1].textContent?.trim(),
"Another new content",
"A new content should be prepended",
);
assertStrictEquals(
main.children[2].textContent?.trim(),
"First content",
);

const header = doc.getElementById("header");
assertExists(header);
assertStrictEquals(
header.textContent?.trim(),
"Hello",
"A non-partial area should not be updated",
);

const footer = doc.getElementById("footer");
assertExists(footer);
assertStrictEquals(
footer.textContent?.trim(),
"About",
"A non-partial area should not be updated",
);
});
},
});
Loading

0 comments on commit f6737de

Please sign in to comment.