diff --git a/contributors.yml b/contributors.yml index 4f2c232fa2..9d69127829 100644 --- a/contributors.yml +++ b/contributors.yml @@ -175,6 +175,7 @@ - KostiantynPopovych - KubasuIvanSakwa - KutnerUri +- kylar13 - kylegirard - landisdesign - latin-1 diff --git a/integration/bug-report-test.ts b/integration/bug-report-test.ts index 8be63c7fc2..95c46612c2 100644 --- a/integration/bug-report-test.ts +++ b/integration/bug-report-test.ts @@ -1,12 +1,12 @@ -import { test, expect } from "@playwright/test"; +import { expect, test } from "@playwright/test"; -import { PlaywrightFixture } from "./helpers/playwright-fixture.js"; -import type { Fixture, AppFixture } from "./helpers/create-fixture.js"; +import type { AppFixture, Fixture } from "./helpers/create-fixture.js"; import { createAppFixture, createFixture, js, } from "./helpers/create-fixture.js"; +import { PlaywrightFixture } from "./helpers/playwright-fixture.js"; let fixture: Fixture; let appFixture: AppFixture; @@ -64,27 +64,39 @@ test.beforeAll(async () => { // `createFixture` will make an app and run your tests against it. //////////////////////////////////////////////////////////////////////////// files: { - "app/routes/_index.tsx": js` - import { useLoaderData, Link } from "react-router"; + "app/routes/action-redirect.tsx": js` + import { redirect, Form } from "react-router"; - export function loader() { - return "pizza"; + export function action({ request }) { + const headers = new Headers(request.headers); + return redirect("https://remix.run/", { headers }); } export default function Index() { - let data = useLoaderData(); return ( -
- {data} - Other Route -
+
+ +
) } `, + "app/routes/action-redirect-working.tsx": js` + import { redirect, Form } from "react-router"; + + export function action() { + return redirect("https://remix.run/"); + } - "app/routes/burgers.tsx": js` export default function Index() { - return
cheeseburger
; + return ( +
+ +
+ ) } `, }, @@ -103,22 +115,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("redirects to external url while preserving original request headers", 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"); + await app.waitForNetworkAfter(() => app.goto("/action-redirect")); + await app.clickElement("button"); + expect(app.page.url()).toBe("https://remix.run/"); +}); - // 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); +test("redirects to external url", async ({ page }) => { + let app = new PlaywrightFixture(appFixture, page); - // Go check out the other tests to see what else you can do. + await app.waitForNetworkAfter(() => app.goto("/action-redirect-working")); + await app.clickElement("button"); + expect(app.page.url()).toBe("https://remix.run/"); }); ////////////////////////////////////////////////////////////////////////////////