diff --git a/test/e2e/app-dir/next-form/default/app/forms/with-file-input/page.tsx b/test/e2e/app-dir/next-form/default/app/forms/with-file-input/page.tsx new file mode 100644 index 0000000000000..68ff5b02ab4fe --- /dev/null +++ b/test/e2e/app-dir/next-form/default/app/forms/with-file-input/page.tsx @@ -0,0 +1,12 @@ +import * as React from 'react' +import Form from 'next/form' + +export default function Home() { + return ( +
+ + + +
+ ) +} diff --git a/test/e2e/app-dir/next-form/default/next-form.test.ts b/test/e2e/app-dir/next-form/default/next-form.test.ts index 3473f924a9b77..5d3dd04743864 100644 --- a/test/e2e/app-dir/next-form/default/next-form.test.ts +++ b/test/e2e/app-dir/next-form/default/next-form.test.ts @@ -202,9 +202,46 @@ describe('app dir - form', () => { ) }) - // TODO(lubieowoce): implement this - // (we don't have any methods on BrowserInterface to deal with files) - it.todo('handles file inputs, but warns about them') + it('url-encodes file inputs, but warns about them', async () => { + const session = await next.browser(`/forms/with-file-input`) + + const fileInputSelector = 'input[type="file"]' + // Fake a file to upload + await session.eval(` + const fileInput = document.querySelector(${JSON.stringify(fileInputSelector)}); + const file = new File(['hello'], 'hello.txt', { type: 'text/plain' }); + const list = new DataTransfer(); + list.items.add(file); + fileInput.files = list.files; + `) + + const searchInput = await session.elementByCss('input[name="query"]') + await searchInput.fill('my search') + + const submitButton = await session.elementByCss('[type="submit"]') + await submitButton.click() + + if (isNextDev) { + const logs = await session.log() + expect(logs).toContainEqual( + expect.objectContaining({ + source: 'warning', + message: expect.stringContaining( + `
only supports file inputs if \`action\` is a function` + ), + }) + ) + } + + const result = await session.waitForElementByCss('#search-results').text() + expect(result).toMatch(/query: "my search"/) + + const url = new URL(await session.url()) + expect([...url.searchParams.entries()]).toEqual([ + ['query', 'my search'], + ['file', 'hello.txt'], + ]) + }) }) async function trackMpaNavs(session: BrowserInterface) {