Add failing multipart/form-data test

Author: alexanderson1993

integration/bug-report-test.ts

@@ -11,45 +11,6 @@ import {
 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));
@@ -59,34 +20,38 @@ test.beforeEach(async ({ context }) => {
 
 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";
+        import { Form } from "react-router";
 
-        export function loader() {
-          return "pizza";
+        export function action({request}) {
+          return { message: "Hey" + request.headers.get('content-type') };
         }
 
-        export default function Index() {
-          let data = useLoaderData();
+        export default function Index({actionData}) {
           return (
-            <div>
-              {data}
-              <Link to="/burgers">Other Route</Link>
-            </div>
+            <Form method="POST">
+              <button
+                id="form-urlencoded"
+                type="submit"
+                formEncType="application/x-www-form-urlencoded"
+                className="px-2 py-1 rounded bg-blue-500 text-white"
+              >
+                Go form urlencoded
+              </button>
+              <button
+                id="multipart"
+                type="submit"
+                formEncType="multipart/form-data"
+                className="px-2 py-1 rounded bg-blue-500 text-white"
+              >
+                Go multipart
+              </button>
+              {actionData?.message}
+            </Form>
           )
         }
       `,
-
-      "app/routes/burgers.tsx": js`
-        export default function Index() {
-          return <div>cheeseburger</div>;
-        }
-      `,
     },
   });
 
@@ -98,30 +63,15 @@ 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 }) => {
+test("[handle multipart/form-data actions]", 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);
+  // This works correctly
+  await app.clickElement("#form-urlencoded");
+  await page.waitForSelector("text=application/x-www-form-urlencoded");
 
-  // Go check out the other tests to see what else you can do.
+  // This should also work, but it fails
+  await app.clickElement("#multipart");
+  await page.waitForSelector("text=multipart/form-data");
 });
-
-////////////////////////////////////////////////////////////////////////////////
-// 💿 Finally, push your changes to your fork of React Router
-// and open a pull request!
-////////////////////////////////////////////////////////////////////////////////