-
Notifications
You must be signed in to change notification settings - Fork 435
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Expand
Turbo.setFormMode guards (#658)
Follow-up to #655 Follow-up to #419 This commit splits out a `form_mode_tests.ts` module separate from `form_submission_tests.ts`, along with a `form_mode.html` fixture file. Next, add test fixtures and test coverage for more thorough coverage of form mode, namely scenarios that submit a form without a submitter (for example, typing into an `<input type="text">` and pressing <kbd>enter</kbd>. Next, the `Turbo.setFormMode()` should be particular about its argument's value. This commit introduces a `FormMode = "on" | "off" | "optin"` type. Finally, rename `submitterIsNavigatable` to `submissionIsNavigatable`, and pass the `HTMLFormElement` and optional `HTMLElement` as a pair of arguments.
- Loading branch information
1 parent
97ce0d7
commit d2443b6
Showing
6 changed files
with
137 additions
and
52 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Form</title> | ||
| <script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script> | ||
| <script src="/src/tests/fixtures/test.js"></script> | ||
| <script> | ||
| const params = new URLSearchParams(window.location.search) | ||
|
|
||
| if (params.has("formMode")) { | ||
| window.Turbo.setFormMode(params.get("formMode")) | ||
| } | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <h1>Form Mode</h1> | ||
|
|
||
| <form id="form" action="/__turbo/redirect" method="post"> | ||
| <input type="hidden" name="path" value="/src/tests/fixtures/form.html"> | ||
| <input type="hidden" name="greeting" value="Hello from a form"> | ||
| <button>submit #form</button> | ||
| </form> | ||
|
|
||
| <form id="form-without-submitter" action="/__turbo/redirect" method="post"> | ||
| <input type="hidden" name="path" value="/src/tests/fixtures/form.html"> | ||
| <input type="text" name="greeting" value="Hello from a form"> | ||
| </form> | ||
|
|
||
| <form id="turbo-enabled-form" action="/__turbo/redirect" method="post" data-turbo="true"> | ||
| <input type="hidden" name="path" value="/src/tests/fixtures/form.html"> | ||
| <input type="hidden" name="greeting" value="Hello from a form[data-turbo=true]"> | ||
| <button>submit #turbo-enabled-form</button> | ||
| </form> | ||
|
|
||
| <form id="turbo-enabled-form-without-submitter" action="/__turbo/redirect" method="post" data-turbo="true"> | ||
| <input type="hidden" name="path" value="/src/tests/fixtures/form.html"> | ||
| <input type="text" name="greeting" value="Hello from a form[data-turbo=true]"> | ||
| </form> | ||
|
|
||
| <button form="form">Submit #form</button> | ||
| <button form="turbo-enabled-form">Submit #turbo-enabled-form</button> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import { Page, test } from "@playwright/test" | ||
| import { getFromLocalStorage, setLocalStorageFromEvent } from "../helpers/page" | ||
| import { assert } from "chai" | ||
|
|
||
| test("test form submission with form mode off", async ({ page }) => { | ||
| await gotoPageWithFormMode(page, "off") | ||
| await page.click("#turbo-enabled-form button") | ||
|
|
||
| assert.notOk(await formSubmitStarted(page)) | ||
| }) | ||
|
|
||
| test("test form submission without submitter with form mode off", async ({ page }) => { | ||
| await gotoPageWithFormMode(page, "off") | ||
| await page.press("#turbo-enabled-form-without-submitter [type=text]", "Enter") | ||
|
|
||
| assert.notOk(await formSubmitStarted(page)) | ||
| }) | ||
|
|
||
| test("test form submission with form mode off from submitter outside form", async ({ page }) => { | ||
| await gotoPageWithFormMode(page, "off") | ||
| await page.click("button[form=turbo-enabled-form]") | ||
|
|
||
| assert.notOk(await formSubmitStarted(page)) | ||
| }) | ||
|
|
||
| test("test form submission with form mode optin and form not enabled", async ({ page }) => { | ||
| await gotoPageWithFormMode(page, "optin") | ||
| await page.click("#form button") | ||
|
|
||
| assert.notOk(await formSubmitStarted(page)) | ||
| }) | ||
|
|
||
| test("test form submission without submitter with form mode optin and form not enabled", async ({ page }) => { | ||
| await gotoPageWithFormMode(page, "optin") | ||
| await page.press("#form-without-submitter [type=text]", "Enter") | ||
|
|
||
| assert.notOk(await formSubmitStarted(page)) | ||
| }) | ||
|
|
||
| test("test form submission with form mode optin and form not enabled from submitter outside form", async ({ page }) => { | ||
| await gotoPageWithFormMode(page, "optin") | ||
| await page.click("button[form=form]") | ||
|
|
||
| assert.notOk(await formSubmitStarted(page)) | ||
| }) | ||
|
|
||
| test("test form submission with form mode optin and form enabled", async ({ page }) => { | ||
| await gotoPageWithFormMode(page, "optin") | ||
| await page.click("#turbo-enabled-form button") | ||
|
|
||
| assert.ok(await formSubmitStarted(page)) | ||
| }) | ||
|
|
||
| test("test form submission without submitter with form mode optin and form enabled", async ({ page }) => { | ||
| await gotoPageWithFormMode(page, "optin") | ||
| await page.press("#turbo-enabled-form-without-submitter [type=text]", "Enter") | ||
|
|
||
| assert.ok(await formSubmitStarted(page)) | ||
| }) | ||
|
|
||
| test("test form submission with form mode optin and form enabled from submitter outside form", async ({ page }) => { | ||
| await gotoPageWithFormMode(page, "optin") | ||
| await page.click("button[form=turbo-enabled-form]") | ||
|
|
||
| assert.ok(await formSubmitStarted(page)) | ||
| }) | ||
|
|
||
| async function gotoPageWithFormMode(page: Page, formMode: "on" | "off" | "optin") { | ||
| await page.goto(`/src/tests/fixtures/form_mode.html?formMode=${formMode}`) | ||
| await setLocalStorageFromEvent(page, "turbo:submit-start", "formSubmitStarted", "true") | ||
| } | ||
|
|
||
| function formSubmitStarted(page: Page) { | ||
| return getFromLocalStorage(page, "formSubmitStarted") | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters