From f22c996195085bd018cf9bfb7a79c2233c75156d Mon Sep 17 00:00:00 2001 From: Brown Date: Thu, 12 Jun 2025 11:51:42 -0700 Subject: [PATCH 1/3] Add to contributors --- contributors.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/contributors.yml b/contributors.yml index a603914de0..fc4f471cb2 100644 --- a/contributors.yml +++ b/contributors.yml @@ -255,6 +255,7 @@ - namoscato - ned-park - nenene3 +- ngbrown - nichtsam - nikeee - nilubisan From 0617758756abc19c9f2442e123afa7fdce0dd561 Mon Sep 17 00:00:00 2001 From: Brown Date: Thu, 12 Jun 2025 10:12:42 -0700 Subject: [PATCH 2/3] Add href() test for period in page url --- packages/react-router/__tests__/href-test.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react-router/__tests__/href-test.ts b/packages/react-router/__tests__/href-test.ts index 42043626d9..89b9e1a16b 100644 --- a/packages/react-router/__tests__/href-test.ts +++ b/packages/react-router/__tests__/href-test.ts @@ -26,4 +26,8 @@ describe("href", () => { `Path '/a/:b' requires param 'b' but it was not provided` ); }); + + it("works with periods", () => { + expect(href("/a/:b.zip", { b: "hello" })).toBe("/a/hello.zip"); + }) }); From 42c7017f6b858d3e50a374adc61ddbb232ab4ac3 Mon Sep 17 00:00:00 2001 From: Brown Date: Thu, 12 Jun 2025 11:36:02 -0700 Subject: [PATCH 3/3] Update bug-report-test.ts to demonstrate href() problem --- integration/bug-report-test.ts | 71 +++++++++++++++++++++++----------- 1 file changed, 48 insertions(+), 23 deletions(-) diff --git a/integration/bug-report-test.ts b/integration/bug-report-test.ts index 8be63c7fc2..909393c66d 100644 --- a/integration/bug-report-test.ts +++ b/integration/bug-report-test.ts @@ -64,27 +64,52 @@ test.beforeAll(async () => { // `createFixture` will make an app and run your tests against it. //////////////////////////////////////////////////////////////////////////// files: { + "app/routes.ts": js` + import { type RouteConfig } from "@react-router/dev/routes"; + import { flatRoutes } from "@react-router/fs-routes"; + + export default flatRoutes() satisfies RouteConfig; + `, + "app/routes/_index.tsx": js` - import { useLoaderData, Link } from "react-router"; + import { href } from "react-router"; + import type { Route } from "./+types/_index"; export function loader() { - return "pizza"; + return { id: "a123" }; } - export default function Index() { - let data = useLoaderData(); + export default function Home({ loaderData }: Route.ComponentProps) { return (
- {data} - Other Route +
- ) + ); } `, - "app/routes/burgers.tsx": js` - export default function Index() { - return
cheeseburger
; + "app/routes/text.$id[.txt].ts": js` + import type { Route } from "./+types/text.$id[.txt]"; + + export async function loader({ params }: Route.LoaderArgs) { + const text = "The text file content for id: " + params.id; + return new Response(text, { + status: 200, + headers: { + "Content-Type": "text/plain", + }, + }); } `, }, @@ -103,22 +128,22 @@ test.afterAll(() => { // add a good description for what you expect React Router to do 👇🏽 //////////////////////////////////////////////////////////////////////////////// -test("[description of what you expect it to do]", async ({ page }) => { +test("link from template string is correct", async ({ page }) => { let app = new PlaywrightFixture(appFixture, page); - // You can test any request your app might get using `fixture`. - let response = await fixture.requestDocument("/"); - expect(await response.text()).toMatch("pizza"); - - // If you need to test interactivity use the `app` await app.goto("/"); - await app.clickLink("/burgers"); - await page.waitForSelector("text=cheeseburger"); - - // If you're not sure what's going on, you can "poke" the app, it'll - // automatically open up in your browser for 20 seconds, so be quick! - // await app.poke(20); + await app.clickElement("a#with-template-string"); + await page.waitForURL("**/text/**"); + let content = await page.content(); + await expect(content).toContain("The text file content for id:"); +}); - // Go check out the other tests to see what else you can do. +test("link from href is correct", async ({ page }) => { + let app = new PlaywrightFixture(appFixture, page); + await app.goto("/"); + await app.clickElement("a#with-href"); + await page.waitForURL("**/text/**"); + let content = await page.content(); + await expect(content).toContain("The text file content for id:"); }); ////////////////////////////////////////////////////////////////////////////////