Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: DAH-3110 make enter submit #2479

Merged
merged 7 commits into from
Jan 27, 2025
Merged

feat: DAH-3110 make enter submit #2479

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1cf2705
feat: DAH-3110 make enter submit
tallulahkay Jan 2, 2025
3de921d
fix: DAH-3110 remove unnecessary changes
tallulahkay Jan 2, 2025
4a0def8
test: DAH-3110 add tests
tallulahkay Jan 3, 2025
8ac4622
test: DAH-3110 update snapshots
tallulahkay Jan 3, 2025
c1dc386
Merge branch 'main' into DAH-3110-enter-to-submit
tallulahkay Jan 10, 2025
73ccc37
Merge branch 'main' into DAH-3110-enter-to-submit
jimlin-sfgov Jan 24, 2025
a43ee30
fix: DAH-3110 fix conflicting variable naming
tallulahkay Jan 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 28 additions & 1 deletion app/javascript/__tests__/pages/SignIn.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from "react"

import SignIn from "../../pages/sign-in"
import { renderAndLoadAsync } from "../__util__/renderUtils"
import { render, screen, waitFor } from "@testing-library/react"
import { fireEvent, render, screen, waitFor } from "@testing-library/react"
import { userEvent } from "@testing-library/user-event"
import { post } from "../../api/apiService"
import { SiteAlert } from "../../components/SiteAlert"
Expand Down Expand Up @@ -224,6 +224,33 @@ describe("<SignIn />", () => {
})
})

it("handles enter key press as submit", async () => {
const { getByTestId } = render(<SignIn assetPaths={{}} />)
;(post as jest.Mock).mockRejectedValue({
response: {
status: 422,
data: { error: "not_confirmed", email: "test@test.com" },
},
})

const emailField = getByTestId("email-field")
const passwordField = getByTestId("password-field")

fireEvent.change(emailField, { target: { value: "test@test.com" } })
fireEvent.change(passwordField, { target: { value: "test1234" } })
fireEvent.keyPress(emailField, { key: "Enter", code: "Enter" })

await waitFor(() => {
expect(post).toHaveBeenCalled()
})

fireEvent.keyPress(passwordField, { key: "Enter", code: "Enter" })

await waitFor(() => {
expect(post).toHaveBeenCalled()
})
})

it("shows the correct new account modal", async () => {
;(post as jest.Mock).mockRejectedValueOnce({
response: {
Expand Down
12 changes: 12 additions & 0 deletions app/javascript/__tests__/pages/account/__snapshots__/account-settings.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -551,6 +551,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 1`] =
aria-describedby="email-error"
aria-invalid="false"
class="input"
data-testid="email-field"
id="email"
name="email"
placeholder="example@web.com"
Expand Down Expand Up @@ -614,6 +615,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 1`] =
aria-describedby="currentPassword-error"
aria-invalid="false"
class="input"
data-testid="password-field"
id="currentPassword"
name="currentPassword"
required=""
Expand Down Expand Up @@ -697,6 +699,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 1`] =
aria-describedby="newPasswordInstructions"
aria-invalid="false"
class="input"
data-testid="password-field"
id="password"
name="password"
required=""
Expand Down Expand Up @@ -1416,6 +1419,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 1`] =
aria-describedby="email-error"
aria-invalid="false"
class="input"
data-testid="email-field"
id="email"
name="email"
placeholder="example@web.com"
Expand Down Expand Up @@ -1479,6 +1483,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 1`] =
aria-describedby="currentPassword-error"
aria-invalid="false"
class="input"
data-testid="password-field"
id="currentPassword"
name="currentPassword"
required=""
Expand Down Expand Up @@ -1562,6 +1567,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 1`] =
aria-describedby="newPasswordInstructions"
aria-invalid="false"
class="input"
data-testid="password-field"
id="password"
name="password"
required=""
Expand Down Expand Up @@ -2314,6 +2320,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 2`] =
aria-describedby="email-error"
aria-invalid="false"
class="input"
data-testid="email-field"
id="email"
name="email"
placeholder="example@web.com"
Expand Down Expand Up @@ -2377,6 +2384,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 2`] =
aria-describedby="currentPassword-error"
aria-invalid="false"
class="input"
data-testid="password-field"
id="currentPassword"
name="currentPassword"
required=""
Expand Down Expand Up @@ -2460,6 +2468,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 2`] =
aria-describedby="newPasswordInstructions"
aria-invalid="false"
class="input"
data-testid="password-field"
id="password"
name="password"
required=""
Expand Down Expand Up @@ -3155,6 +3164,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 2`] =
aria-describedby="email-error"
aria-invalid="false"
class="input"
data-testid="email-field"
id="email"
name="email"
placeholder="example@web.com"
Expand Down Expand Up @@ -3218,6 +3228,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 2`] =
aria-describedby="currentPassword-error"
aria-invalid="false"
class="input"
data-testid="password-field"
id="currentPassword"
name="currentPassword"
required=""
Expand Down Expand Up @@ -3301,6 +3312,7 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 2`] =
aria-describedby="newPasswordInstructions"
aria-invalid="false"
class="input"
data-testid="password-field"
id="password"
name="password"
required=""
Expand Down
27 changes: 26 additions & 1 deletion app/javascript/authentication/SignInForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,31 @@ const SignInFormCard = ({
requestError: string
setRequestError: Dispatch<SetStateAction<string>>
}) => {
const emailSubmitField = document.querySelector("#email")
const passwordSubmitField = document.querySelector("#password")

useEffect(() => {
if (emailSubmitField) {
emailSubmitField.addEventListener("keypress", function (event: KeyboardEvent) {
if (event.key === "Enter") {
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
const button = document.querySelector("#sign-in-button") as HTMLElement
button.click()
}
})
}

if (passwordSubmitField) {
passwordSubmitField.addEventListener("keypress", function (event: KeyboardEvent) {
if (event.key === "Enter") {
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
const button = document.querySelector("#sign-in-button") as HTMLElement
button.click()
}
})
}
}, [emailSubmitField, passwordSubmitField])

/* Form Handler */
// TODO(DAH-1575): Upgrade React-Hook-Form. Note: When you update to Version 7 of react-hook-form, "errors" becomes: "formState: { errors }""
// This is causing a linting issue with unbound-method, see open issue as of 10/21/2020:
Expand Down Expand Up @@ -89,7 +114,7 @@ const SignInFormCard = ({
passwordType="signIn"
/>
<div className="text-center mt-4">
<Button styleType={AppearanceStyleType.primary} type="submit">
<Button id="sign-in-button" styleType={AppearanceStyleType.primary} type="submit">
{t("pageTitle.signIn")}
</Button>
</div>
Expand Down
1 change: 1 addition & 0 deletions app/javascript/pages/account/components/EmailFieldset.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ const EmailFieldset = ({ register, errors, defaultEmail, onChange, note }: Email
return (
<Fieldset hasError={errors?.email} label={t("label.emailAddress")} note={note}>
<Field
dataTestId="email-field"
className="pb-4"
controlClassName="mt-1"
type="email"
Expand Down
1 change: 1 addition & 0 deletions app/javascript/pages/account/components/PasswordFieldset.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,7 @@ const PasswordField = ({ passwordVisibilityDefault = false, ...props }: Password
return (
<>
<Field
dataTestId="password-field"
{...props}
type={showPassword ? "text" : "password"}
inputProps={{ className: "input", required: true }}
Expand Down
Loading