diff --git a/contributors.yml b/contributors.yml index 962c00847e..48a7fd3d03 100644 --- a/contributors.yml +++ b/contributors.yml @@ -46,6 +46,7 @@ - bavardage - bbrowning918 - BDomzalski +- benquarmby - bhbs - bilalk711 - bobziroll diff --git a/integration/bug-report-test.ts b/integration/bug-report-test.ts index 8be63c7fc2..f9539ba4bb 100644 --- a/integration/bug-report-test.ts +++ b/integration/bug-report-test.ts @@ -1,127 +1,16 @@ -import { test, expect } from "@playwright/test"; - -import { PlaywrightFixture } from "./helpers/playwright-fixture.js"; -import type { Fixture, AppFixture } from "./helpers/create-fixture.js"; -import { - createAppFixture, - createFixture, - js, -} from "./helpers/create-fixture.js"; - -let fixture: Fixture; -let appFixture: AppFixture; - -//////////////////////////////////////////////////////////////////////////////// -// 👋 Hola! I'm here to help you write a great bug report pull request. -// -// You don't need to fix the bug, this is just to report one. -// -// The pull request you are submitting is supposed to fail when created, to let -// the team see the erroneous behavior, and understand what's going wrong. -// -// If you happen to have a fix as well, it will have to be applied in a subsequent -// commit to this pull request, and your now-succeeding test will have to be moved -// to the appropriate file. -// -// First, make sure to install dependencies and build React Router. From the root of -// the project, run this: -// -// ``` -// pnpm install && pnpm build -// ``` -// -// If you have never installed playwright on your system before, you may also need -// to install a browser engine: -// -// ``` -// pnpm exec playwright install chromium -// ``` -// -// Now try running this test: -// -// ``` -// pnpm test:integration bug-report --project chromium -// ``` -// -// You can add `--watch` to the end to have it re-run on file changes: -// -// ``` -// pnpm test:integration bug-report --project chromium --watch -// ``` -//////////////////////////////////////////////////////////////////////////////// - -test.beforeEach(async ({ context }) => { - await context.route(/\.data$/, async (route) => { - await new Promise((resolve) => setTimeout(resolve, 50)); - route.continue(); - }); -}); - -test.beforeAll(async () => { - fixture = await createFixture({ - //////////////////////////////////////////////////////////////////////////// - // 💿 Next, add files to this object, just like files in a real app, - // `createFixture` will make an app and run your tests against it. - //////////////////////////////////////////////////////////////////////////// - files: { - "app/routes/_index.tsx": js` - import { useLoaderData, Link } from "react-router"; - - export function loader() { - return "pizza"; - } - - export default function Index() { - let data = useLoaderData(); - return ( -
- {data} - Other Route -
- ) - } - `, - - "app/routes/burgers.tsx": js` - export default function Index() { - return
cheeseburger
; - } - `, - }, +import { expect, test } from "@playwright/test"; +import { matchPath } from "react-router"; + +test("matchPath should consistently decode path parameters", function () { + const result = matchPath( + "/department/:departmentId/ticket/:ticketId/comment/:commentId/reaction/:reactionId", + "/department/1a%2F2b/ticket/3c%3F4d/comment/5e%3A6f/reaction/7g%2C8h" + ); + + expect(result?.params).toMatchObject({ + departmentId: "1a/2b", + ticketId: "3c?4d", + commentId: "5e:6f", + reactionId: "7g,8h", }); - - // This creates an interactive app using playwright. - appFixture = await createAppFixture(fixture); -}); - -test.afterAll(() => { - appFixture.close(); -}); - -//////////////////////////////////////////////////////////////////////////////// -// 💿 Almost done, now write your failing test case(s) down here Make sure to -// add a good description for what you expect React Router to do 👇🏽 -//////////////////////////////////////////////////////////////////////////////// - -test("[description of what you expect it to do]", 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); - - // Go check out the other tests to see what else you can do. }); - -//////////////////////////////////////////////////////////////////////////////// -// 💿 Finally, push your changes to your fork of React Router -// and open a pull request! -////////////////////////////////////////////////////////////////////////////////