Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit d2741c3

Browse files
presleyppresleyp
committed
Spruce up tests
1 parent b3bdf83 commit d2741c3

File tree

4 files changed

+56
-42
lines changed

4 files changed

+56
-42
lines changed

‎site/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
"@storybook/addon-links": "6.4.19",
4949
"@storybook/react": "6.4.19",
5050
"@testing-library/react": "12.1.4",
51+
"@testing-library/user-event": "^13.5.0",
5152
"@types/express": "4.17.13",
5253
"@types/jest": "27.4.1",
5354
"@types/node": "14.18.12",

‎site/src/components/SignIn/SignInForm.tsx

Lines changed: 36 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,12 @@ interface BuiltInAuthFormValues {
1919
}
2020

2121
export const LANGUAGE = {
22+
emailLabel: "Email",
23+
passwordLabel: "Password",
2224
emailInvalid: "Please enter a valid email address.",
2325
emailRequired: "Please enter an email address.",
24-
authErrorMessage: "Incorrect email or password."
26+
authErrorMessage: "Incorrect email or password.",
27+
signIn: "Sign In",
2528
}
2629

2730
const validationSchema = Yup.object({
@@ -65,38 +68,38 @@ export const SignInForm: React.FC<SignInFormProps> = ({ isLoading, authErrorMess
6568
<>
6669
<Welcome />
6770
<form onSubmit={form.handleSubmit}>
68-
<TextField
69-
{...form.getFieldProps("email")}
70-
autoFocus
71-
autoComplete="email"
72-
className={styles.loginTextField}
73-
error={form.touched.email && Boolean(form.errors.email)}
74-
fullWidth
75-
helperText={form.touched.email && form.errors.email}
76-
id="email"
77-
label="Email"
78-
variant="outlined"
79-
/>
80-
<TextField
81-
{...form.getFieldProps("password")}
82-
autoComplete="current-password"
83-
className={styles.loginTextField}
84-
fullWidth
85-
id="password"
86-
label="Password"
87-
type="password"
88-
variant="outlined"
89-
/>
90-
{authErrorMessage && (
91-
<FormHelperText data-testid="sign-in-error" error>
92-
{LANGUAGE.authErrorMessage}
93-
</FormHelperText>
94-
)}
95-
<div className={styles.submitBtn}>
96-
<LoadingButton color="primary" loading={isLoading} fullWidth type="submit" variant="contained">
97-
{isLoading ? "" : "Sign In"}
98-
</LoadingButton>
99-
</div>
71+
<TextField
72+
{...form.getFieldProps("email")}
73+
autoFocus
74+
autoComplete="email"
75+
className={styles.loginTextField}
76+
error={form.touched.email && Boolean(form.errors.email)}
77+
fullWidth
78+
helperText={form.touched.email && form.errors.email}
79+
id="email"
80+
label={LANGUAGE.emailLabel}
81+
variant="outlined"
82+
/>
83+
<TextField
84+
{...form.getFieldProps("password")}
85+
autoComplete="current-password"
86+
className={styles.loginTextField}
87+
fullWidth
88+
id="password"
89+
label={LANGUAGE.passwordLabel}
90+
type="password"
91+
variant="outlined"
92+
/>
93+
{authErrorMessage && (
94+
<FormHelperText data-testid="sign-in-error" error>
95+
{LANGUAGE.authErrorMessage}
96+
</FormHelperText>
97+
)}
98+
<div className={styles.submitBtn}>
99+
<LoadingButton color="primary" loading={isLoading} fullWidth type="submit" variant="contained">
100+
{isLoading ? "" : LANGUAGE.signIn}
101+
</LoadingButton>
102+
</div>
100103
</form>
101104
</>
102105
)

‎site/src/pages/login.test.tsx

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React from "react"
2-
import { act, fireEvent, screen } from "@testing-library/react"
2+
import { act, screen } from "@testing-library/react"
3+
import userEvent from "@testing-library/user-event"
34
import { history, render } from "../test_helpers"
45
import { SignInPage } from "./login"
56
import { server } from "../test_helpers/server"
67
import { rest } from "msw"
8+
import { LANGUAGE } from "../components/SignIn/SignInForm"
79

810
describe("SignInPage", () => {
911
beforeEach(() => {
@@ -21,12 +23,12 @@ describe("SignInPage", () => {
2123
render(<SignInPage />)
2224

2325
// Then
24-
await screen.findByText("Sign In", { exact: false })
26+
await screen.findByText(LANGUAGE.signIn, { exact: false })
2527
})
2628

2729
it("shows an error message if SignIn fails", async () => {
2830
// Given
29-
const { container } = render(<SignInPage />)
31+
render(<SignInPage />)
3032
// Make login fail
3133
server.use(
3234
rest.post("/api/v2/users/login", async (req, res, ctx) => {
@@ -35,17 +37,18 @@ describe("SignInPage", () => {
3537
)
3638

3739
// When
38-
// Set username / password
39-
const [username, password] = container.querySelectorAll("input")
40-
fireEvent.change(username, { target: { value: "[email protected]" } })
41-
fireEvent.change(password, { target: { value: "password" } })
40+
// Set email / password
41+
const email = screen.getByLabelText(LANGUAGE.emailLabel)
42+
const password = screen.getByLabelText(LANGUAGE.passwordLabel)
43+
userEvent.type(email, "[email protected]")
44+
userEvent.type(password, "password")
4245
// Click sign-in
43-
const signInButton = await screen.findByText("Sign In")
46+
const signInButton = await screen.findByText(LANGUAGE.signIn)
4447
act(() => signInButton.click())
4548

4649
// Then
4750
// Finding error by test id because it comes from the backend
48-
const errorMessage = await screen.findByTestId("sign-in-error")
51+
const errorMessage = await screen.findByText(LANGUAGE.authErrorMessage)
4952
expect(errorMessage).toBeDefined()
5053
expect(history.location.pathname).toEqual("/login")
5154
})

‎site/yarn.lock

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2742,6 +2742,13 @@
27422742
"@testing-library/dom" "^8.0.0"
27432743
"@types/react-dom" "*"
27442744

2745+
"@testing-library/user-event@^13.5.0":
2746+
version "13.5.0"
2747+
resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.5.0.tgz#69d77007f1e124d55314a2b73fd204b333b13295"
2748+
integrity sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==
2749+
dependencies:
2750+
"@babel/runtime" "^7.12.5"
2751+
27452752
"@tootallnate/once@1":
27462753
version "1.1.2"
27472754
resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"

0 commit comments

Comments
 (0)