Extremely Popular
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462import { assert, assertEquals, assertStringIncludes, delay, Page, puppeteer,} from "./deps.ts";import { startFreshServer } from "./test_utils.ts";
Deno.test({ name: "island tests", async fn(t) { await withPage(async (page, address) => { async function counterTest(counterId: string, originalValue: number) { const pElem = await page.waitForSelector(`#${counterId} > p`);
let value = await pElem?.evaluate((el) => el.textContent); assert(value === `${originalValue}`, `${counterId} first value`);
const buttonPlus = await page.$(`#b-${counterId}`); await buttonPlus?.click();
await delay(100);
value = await pElem?.evaluate((el) => el.textContent); assert(value === `${originalValue + 1}`, `${counterId} click`); }
await page.goto(`${address}/islands`, { waitUntil: "networkidle2", });
await t.step("Ensure 4 islands on 1 page are revived", async () => { await counterTest("counter1", 3); await counterTest("counter2", 10); await counterTest("folder-counter", 3); await counterTest("kebab-case-file-counter", 5); });
await t.step("Ensure an island revive an img 'hash' path", async () => { // Ensure src path has __frsh_c= const pElem = await page.waitForSelector(`#img-in-island`); const srcString = (await pElem?.getProperty("src"))?.toString()!; assertStringIncludes(srcString, "image.png?__frsh_c=");
// Ensure src path is the same as server rendered const resp = await fetch(new Request(`${address}/islands`)); const body = await resp.text();
const imgFilePath = body.match(/img id="img-in-island" src="(.*?)"/) ?.[1]!; assertStringIncludes(srcString, imgFilePath); }); }); },
sanitizeOps: false, sanitizeResources: false,});
function withPage(fn: (page: Page, address: string) => Promise<void>) { return withPageName("./tests/fixture/main.ts", fn);}
async function withPageName( name: string, fn: (page: Page, address: string) => Promise<void>,) { const { lines, serverProcess, address } = await startFreshServer({ args: ["run", "-A", name], });
try { await delay(100); const browser = await puppeteer.launch({ args: ["--no-sandbox"] });
try { const page = await browser.newPage(); await fn(page, address); } finally { await browser.close(); } } finally { await lines.cancel();
serverProcess.kill("SIGTERM");
// Wait until the process exits await serverProcess.status; }}
Deno.test({ name: "island tests with </script>",
async fn(t) { await withPage(async (page, address) => { page.on("dialog", () => { assert(false, "There is XSS"); });
await page.goto(`${address}/evil`, { waitUntil: "networkidle2", });
await t.step("prevent XSS on Island", async () => { const bodyElem = await page.waitForSelector(`body`); const value = await bodyElem?.evaluate((el) => el.getInnerHTML());
assertStringIncludes( value, `{"message":"\\u003c/script\\u003e\\u003cscript\\u003ealert('test')\\u003c/script\\u003e"}`, `XSS is not escaped`, ); }); }); },
sanitizeOps: false, sanitizeResources: false,});
Deno.test({ name: "island with fragment as root",
async fn(_t) { await withPage(async (page, address) => { await page.goto(`${address}/islands/root_fragment`, { waitUntil: "networkidle2", });
const clickableSelector = "#root-fragment-click-me";
await page.waitForSelector(clickableSelector);
const contentBeforeClick = await getIslandParentTextContent(); assert(contentBeforeClick === "HelloWorld");
await page.click(clickableSelector); await delay(100);
const contentAfterClick = await getIslandParentTextContent(); assert(contentAfterClick === "HelloWorldI'm rendered now");
async function getIslandParentTextContent() { return await page.$eval( "#island-parent", (el: Element) => el.textContent, ); } }); },
sanitizeOps: false, sanitizeResources: false,});
Deno.test({ name: "island with fragment as root and conditional child first",
async fn(_t) { await withPage(async (page, address) => { await page.goto( `${address}/islands/root_fragment_conditional_first`, { waitUntil: "networkidle2", }, );
const clickableSelector = "#root-fragment-conditional-first-click-me"; await page.waitForSelector(clickableSelector);
const contentBeforeClick = await getIslandParentTextContent(page); assert(contentBeforeClick === "HelloWorld");
await page.click(clickableSelector); await delay(100);
const contentAfterClick = await getIslandParentTextContent(page); assert(contentAfterClick === "I'm rendered on topHelloWorld"); }); },
sanitizeOps: false, sanitizeResources: false,});
async function getIslandParentTextContent(page: Page) { return await page.$eval("#island-parent", (el: Element) => el.textContent);}
Deno.test({ name: "island that returns `null`",
async fn(_t) { await withPage(async (page, address) => { await page.goto(`${address}/islands/returning_null`, { waitUntil: "networkidle2", });
await page.waitForSelector(".added-by-use-effect"); }); },
sanitizeOps: false, sanitizeResources: false,});
Deno.test({ name: "island using `npm:` specifiers",
async fn(_t) { await withPageName("./tests/fixture_npm/main.ts", async (page, address) => { await page.setJavaScriptEnabled(false); await page.goto(address, { waitUntil: "networkidle2" }); assert(await page.waitForSelector("#server-true"));
await page.setJavaScriptEnabled(true); await page.reload({ waitUntil: "networkidle2" }); assert(await page.waitForSelector("#browser-true")); }); },
sanitizeOps: false, sanitizeResources: false,});
Deno.test({ name: "works with older preact-render-to-string v5",
async fn(_t) { await withPageName( "./tests/fixture_preact_rts_v5/main.ts", async (page, address) => { await page.goto(address, { waitUntil: "networkidle2", }); await page.waitForSelector("#foo");
await delay(100); const text = await page.$eval("#foo", (el) => el.textContent); assertEquals(text, "it works"); }, ); },
sanitizeOps: false, sanitizeResources: false,});
Deno.test({ name: "pass single JSX child to island",
async fn(_t) { await withPageName( "./tests/fixture_island_nesting/main.ts", async (page, address) => { await page.goto(`${address}/island_jsx_child`, { waitUntil: "networkidle2", }); await page.waitForSelector(".island");
await delay(100); const text = await page.$eval(".island", (el) => el.textContent); assertEquals(text, "it works"); }, ); },
sanitizeOps: false, sanitizeResources: false,});
Deno.test({ name: "pass multiple JSX children to island",
async fn(_t) { await withPageName( "./tests/fixture_island_nesting/main.ts", async (page, address) => { await page.goto(`${address}/island_jsx_children`, { waitUntil: "networkidle2", }); await page.waitForSelector(".island");
await delay(100); const text = await page.$eval(".island", (el) => el.textContent); assertEquals(text, "it works"); }, ); },
sanitizeOps: false, sanitizeResources: false,});
Deno.test({ name: "pass multiple text JSX children to island",
async fn(_t) { await withPageName( "./tests/fixture_island_nesting/main.ts", async (page, address) => { await page.goto(`${address}/island_jsx_text`, { waitUntil: "networkidle2", }); await page.waitForSelector(".island");
await delay(100); const text = await page.$eval(".island", (el) => el.textContent); assertEquals(text, "it works"); }, ); },
sanitizeOps: false, sanitizeResources: false,});
Deno.test({ name: "render island in island",
async fn(_t) { await withPageName( "./tests/fixture_island_nesting/main.ts", async (page, address) => { await page.goto(`${address}/island_in_island`, { waitUntil: "networkidle2", }); await page.waitForSelector(".island");
await delay(100); const text = await page.$eval( ".island .island p", (el) => el.textContent, ); assertEquals(text, "it works"); }, ); },
sanitizeOps: false, sanitizeResources: false,});
Deno.test({ name: "render island inside island definition",
async fn(_t) { await withPageName( "./tests/fixture_island_nesting/main.ts", async (page, address) => { await page.goto(`${address}/island_in_island_definition`, { waitUntil: "networkidle2", }); await page.waitForSelector(".island");
await delay(100); const text = await page.$eval( ".island .island p", (el) => el.textContent, ); assertEquals(text, "it works");
// Check that there is no duplicated content which could happen // when islands aren't initialized correctly const pageText = await page.$eval("#page", (el) => el.textContent); assertEquals(pageText, "it works"); }, ); },
sanitizeOps: false, sanitizeResources: false,});
Deno.test({ name: "render island with JSX children that render another island with JSX children",
async fn(_t) { await withPageName( "./tests/fixture_island_nesting/main.ts", async (page, address) => { await page.goto(`${address}/island_jsx_island_jsx`, { waitUntil: "networkidle2", }); await page.waitForSelector(".island");
await delay(100); const text = await page.$eval( ".island .server .island .server p", (el) => el.textContent, ); assertEquals(text, "it works"); }, ); },
sanitizeOps: false, sanitizeResources: false,});
Deno.test({ name: "render sibling islands",
async fn(_t) { await withPageName( "./tests/fixture_island_nesting/main.ts", async (page, address) => { await page.goto(`${address}/island_siblings`, { waitUntil: "networkidle2", }); await page.waitForSelector(".island");
await delay(100); const text = await page.$eval( ".island .a", (el) => el.textContent, ); assertEquals(text, "it works");
const text2 = await page.$eval( ".island + .island .b", (el) => el.textContent, ); assertEquals(text2, "it works"); }, ); },
sanitizeOps: false, sanitizeResources: false,});
Deno.test({ name: "serialize inner island props",
async fn(_t) { await withPageName( "./tests/fixture_island_nesting/main.ts", async (page, address) => { await page.goto(`${address}/island_nested_props`, { waitUntil: "networkidle2", }); await page.waitForSelector(".island");
await delay(100); const text = await page.$eval( ".island .island p", (el) => el.textContent, ); assertEquals(text, "it works"); }, ); },
sanitizeOps: false, sanitizeResources: false,});