fix: email validation #123
Annotations
5 errors
|
test
Process completed with exit code 1.
|
|
src/app/subscribe/page.test.tsx > NewsletterSignupPage > should show success state with correct link to newsletter:
src/app/subscribe/page.test.tsx#L402
TestingLibraryElementError: Unable to find an element with the text: 🪩 Success! You're in!. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, script, style
<body>
<div>
<div
class="flex min-h-screen items-center justify-center p-4"
>
<div
class="text-card-foreground rounded-lg border shadow-sm w-full max-w-md bg-white"
>
<div
class="flex flex-col space-y-1.5 p-6 pb-4 text-left"
>
<header
class="flex flex-col gap-1 text-left"
>
<h1
class="mb-1 text-3xl font-bold text-balance text-pink-600"
data-testid="newsletter-title"
>
Join
<span
class="text-pink-600"
>
<number-flow-react
class="tabular-nums"
data="[object Object]"
>
<template
shadowroot="open"
shadowrootmode="open"
/>
<span
style="font-kerning: none; display: inline-block; line-height: var(--number-flow-char-height, 1em) !important; padding: var(--number-flow-mask-height, 0.25em) 0;"
>
1234
</span>
</number-flow-react>
</span>
devs & founders building better.
</h1>
<p
class="text-muted-foreground mb-2 text-lg"
data-testid="newsletter-description"
>
One sharp idea each week to help you ship smarter and faster.
</p>
</header>
</div>
<div
class="p-6 pt-0"
>
<form
class="space-y-4"
novalidate=""
>
<fieldset
class="flex flex-col gap-2"
>
<div>
<label
class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sr-only"
for="firstName"
>
First Name
</label>
<input
class="border-input bg-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
data-testid="first-name-input"
id="firstName"
name="firstName"
placeholder="First Name"
type="text"
/>
</div>
<div>
<label
class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sr-only"
for="email"
>
Email Address
</label>
<input
class="border-input bg-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
data-testid="email-input"
id="email"
name="email"
placeholder="you@example.com"
type="email"
/>
</div>
</fieldset>
<button
class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([cla
|
|
src/app/subscribe/page.test.tsx > NewsletterSignupPage > should show success state after successful submission:
src/app/subscribe/page.test.tsx#L323
TestingLibraryElementError: Unable to find an element with the text: 🪩 Success! You're in!. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, script, style
<body>
<div>
<div
class="flex min-h-screen items-center justify-center p-4"
>
<div
class="text-card-foreground rounded-lg border shadow-sm w-full max-w-md bg-white"
>
<div
class="flex flex-col space-y-1.5 p-6 pb-4 text-left"
>
<header
class="flex flex-col gap-1 text-left"
>
<h1
class="mb-1 text-3xl font-bold text-balance text-pink-600"
data-testid="newsletter-title"
>
Join
<span
class="text-pink-600"
>
<number-flow-react
class="tabular-nums"
data="[object Object]"
>
<template
shadowroot="open"
shadowrootmode="open"
/>
<span
style="font-kerning: none; display: inline-block; line-height: var(--number-flow-char-height, 1em) !important; padding: var(--number-flow-mask-height, 0.25em) 0;"
>
1234
</span>
</number-flow-react>
</span>
devs & founders building better.
</h1>
<p
class="text-muted-foreground mb-2 text-lg"
data-testid="newsletter-description"
>
One sharp idea each week to help you ship smarter and faster.
</p>
</header>
</div>
<div
class="p-6 pt-0"
>
<form
class="space-y-4"
novalidate=""
>
<fieldset
class="flex flex-col gap-2"
>
<div>
<label
class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sr-only"
for="firstName"
>
First Name
</label>
<input
class="border-input bg-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
data-testid="first-name-input"
id="firstName"
name="firstName"
placeholder="First Name"
type="text"
/>
</div>
<div>
<label
class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sr-only"
for="email"
>
Email Address
</label>
<input
class="border-input bg-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
data-testid="email-input"
id="email"
name="email"
placeholder="you@example.com"
type="email"
/>
</div>
</fieldset>
<button
class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([cla
|
|
Unhandled error:
src/app/subscribe/page.tsx#L82
TypeError: addSubscriberMutation.mutate is not a function
❯ onSubmit src/app/subscribe/page.tsx:82:27
❯ node_modules/.pnpm/react-hook-form@7.62.0_react@19.1.1/node_modules/react-hook-form/src/logic/createFormControl.ts:1260:17
This error originated in "src/app/subscribe/page.test.tsx" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.
The latest test that might've caused the error is "should show success state with correct link to newsletter". It might mean one of the following:
- The error was thrown, while Vitest was running this test.
- If the error occurred after the test had been completed, this was the last documented test before it was thrown.
|
|
Unhandled error:
src/app/subscribe/page.tsx#L82
TypeError: addSubscriberMutation.mutate is not a function
❯ onSubmit src/app/subscribe/page.tsx:82:27
❯ node_modules/.pnpm/react-hook-form@7.62.0_react@19.1.1/node_modules/react-hook-form/src/logic/createFormControl.ts:1260:17
This error originated in "src/app/subscribe/page.test.tsx" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.
The latest test that might've caused the error is "should show success state after successful submission". It might mean one of the following:
- The error was thrown, while Vitest was running this test.
- If the error occurred after the test had been completed, this was the last documented test before it was thrown.
|