123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
// @ts-check
import { getFreePort } from "free_port/mod.ts";import puppeteer from "puppeteer";import { createElement as h } from "react";import { act, create } from "react-test-renderer";import { assert, assertStrictEquals } from "std/testing/asserts.ts";
import ReactHookTest from "./test/ReactHookTest.mjs";import serveProjectFiles from "./test/serveProjectFiles.mjs";import testPuppeteerPage from "./test/testPuppeteerPage.mjs";import NavigateContext from "./NavigateContext.mjs";import readImportMapFile from "./readImportMapFile.mjs";import serve from "./serve.mjs";import useOnClickRouteLink from "./useOnClickRouteLink.mjs";
Deno.test("`useOnClickRouteLink` memoization.", () => {  /** @type {Array<unknown>} */  const results = [];
  /** @type {any} */  const navigate1 = () => {};
  /** @type {import("react-test-renderer").ReactTestRenderer | undefined} */  let testRenderer;
  act(() => {    testRenderer = create(      h(        NavigateContext.Provider,        { value: navigate1 },        h(ReactHookTest, { hook: useOnClickRouteLink, results }),      ),    );  });
  const tr =    /** @type {import("react-test-renderer").ReactTestRenderer} */    (testRenderer);
  assertStrictEquals(results.length, 1);  assertStrictEquals(typeof results[0], "function");
  act(() => {    tr.update(      h(        NavigateContext.Provider,        { value: navigate1 },        h(ReactHookTest, { hook: useOnClickRouteLink, results }),      ),    );  });
  assertStrictEquals(results.length, 2);  assertStrictEquals(results[0], results[1]);
  /** @type {any} */  const navigate2 = () => {};
  act(() => {    tr.update(      h(        NavigateContext.Provider,        { value: navigate2 },        h(ReactHookTest, { hook: useOnClickRouteLink, results }),      ),    );  });
  assertStrictEquals(results.length, 3);  assertStrictEquals(typeof results[2], "function");  assert(results[2] !== results[1]);});
Deno.test("`useOnClickRouteLink` in a DOM environment.", async () => {  const abortController = new AbortController();  const projectFileServer = await serveProjectFiles(abortController.signal);
  try {    const projectFilesOriginUrl = new URL(      `http://localhost:${projectFileServer.port}`,    );    const clientImportMap = await readImportMapFile(      new URL("importMap.json", import.meta.url),    );
    if (!clientImportMap.imports) {      throw new TypeError("Import map field `imports` missing.");    }
    clientImportMap.imports["ruck/"] = projectFilesOriginUrl.href;
    const ruckAppPort = await getFreePort(3000);    const { close } = await serve({      clientImportMap,      publicDir: new URL(        "test/fixtures/useOnClickRouteLink/ruck-project/public/",        import.meta.url,      ),      port: ruckAppPort,      signal: abortController.signal,    });
    try {      const browser = await puppeteer.launch();      const browserUserAgent = await browser.userAgent();
      try {        await testPuppeteerPage(          browser,          projectFilesOriginUrl,          async (page) => {            const urlPageA = `http://localhost:${ruckAppPort}/`;            const urlPageB = `http://localhost:${ruckAppPort}/b`;
            await page.goto(urlPageA);
            // Check the Ruck app is ready at page A.            assert(await page.$("#page-a"));
            // Test holding the alt key when clicking the link prevents a            // client side navigation…
            await page.keyboard.down("Alt");            await page.click('a[href="/b"]');            await page.keyboard.up("Alt");
            assertStrictEquals(page.url(), urlPageA);
            // Test holding the control key when clicking the link prevents a            // client side navigation…
            await page.keyboard.down("Control");            await page.click('a[href="/b"]');            await page.keyboard.up("Control");
            assertStrictEquals(page.url(), urlPageA);
            // Test holding a meta key when clicking the link prevents a client            // side navigation…
            await page.keyboard.down("Meta");            await page.click('a[href="/b"]');            await page.keyboard.up("Meta");
            if (browserUserAgent.includes("Macintosh")) {              // macOS Chrome opens a link clicked while the meta (command) key              // is pressed in a new tab, so the current page URL should not              // have changed.              assertStrictEquals(page.url(), urlPageA);            } else {              // Linux Chrome opens a link clicked while a meta (command) key is              // pressed in the current tab, so the current page URL should have              // changed.              assertStrictEquals(page.url(), urlPageB);
              // Manually go to page A to prepare the next test.              await page.goto(urlPageA);            }
            // Test holding the shift key when clicking the link prevents a            // client side navigation…
            await page.keyboard.down("Shift");            await page.click('a[href="/b"]');            await page.keyboard.up("Shift");
            assertStrictEquals(page.url(), urlPageA);
            // Test a main mouse button click on the link causes a client side            // navigation…
            const [response1] = await Promise.all([              page.waitForNavigation(),              page.click('a[href="/b"]'),            ]);
            // Check it was a client side navigation and not a native page load.            assert(response1 === null);
            assert(await page.$("#page-b"));
            // Manually go to page A to prepare the next test.            await page.goto(urlPageA);
            // Test pressing enter key on the focused link causes a client side            // navigation…
            await page.focus('a[href="/b"]');
            const [response2] = await Promise.all([              page.waitForNavigation(),              page.keyboard.press("Enter"),            ]);
            // Check it was a client side navigation and not a native page load.            assert(response2 === null);
            assert(await page.$("#page-b"));
            // Test `event.preventDefault()` before the event handler runs            // prevents a navigation…
            await page.click('a[href="/a"]');
            assertStrictEquals(page.url(), urlPageB);          },        );      } finally {        await browser.close();      }    } finally {      abortController.abort();      await close;    }  } finally {    abortController.abort();    await projectFileServer.close;  }});