Error: Snapshot `Form > zod validation works > with error 1` mismatched - Expected + Received @@ -3,11 +3,11 @@ <div class=""> <!--v-if--> <!--v-if--> </div> <div class=""> - <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off" value="[email protected]"> + <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="[email protected]"> <!--v-if--> <!--v-if--> </div> <!--v-if--> </div> @@ -16,13 +16,13 @@ <div class=""> <!--v-if--> <!--v-if--> </div> <div class=""> - <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" value="short"> + <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" aria-describedby="v-1-error" aria-invalid="true" value="short"> <!--v-if--> <!--v-if--> </div> - <p class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p> + <p id="v-1-error" class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p> </div> </div> </form>" ❯ test/components/Form.spec.ts:126:28

Error: Snapshot `Form > yup validation works > with error 1` mismatched - Expected + Received @@ -3,11 +3,11 @@ <div class=""> <!--v-if--> <!--v-if--> </div> <div class=""> - <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off" value="[email protected]"> + <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="[email protected]"> <!--v-if--> <!--v-if--> </div> <!--v-if--> </div> @@ -16,13 +16,13 @@ <div class=""> <!--v-if--> <!--v-if--> </div> <div class=""> - <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" value="short"> + <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" aria-describedby="v-1-error" aria-invalid="true" value="short"> <!--v-if--> <!--v-if--> </div> - <p class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p> + <p id="v-1-error" class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p> </div> </div> </form>" ❯ test/components/Form.spec.ts:126:28

Error: Snapshot `Form > joi validation works > with error 1` mismatched - Expected + Received @@ -3,11 +3,11 @@ <div class=""> <!--v-if--> <!--v-if--> </div> <div class=""> - <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off" value="[email protected]"> + <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="[email protected]"> <!--v-if--> <!--v-if--> </div> <!--v-if--> </div> @@ -16,13 +16,13 @@ <div class=""> <!--v-if--> <!--v-if--> </div> <div class=""> - <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" value="short"> + <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" aria-describedby="v-1-error" aria-invalid="true" value="short"> <!--v-if--> <!--v-if--> </div> - <p class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p> + <p id="v-1-error" class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p> </div> </div> </form>" ❯ test/components/Form.spec.ts:126:28

Error: Snapshot `Form > valibot validation works > with error 1` mismatched - Expected + Received @@ -3,11 +3,11 @@ <div class=""> <!--v-if--> <!--v-if--> </div> <div class=""> - <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off" value="[email protected]"> + <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="[email protected]"> <!--v-if--> <!--v-if--> </div> <!--v-if--> </div> @@ -16,13 +16,13 @@ <div class=""> <!--v-if--> <!--v-if--> </div> <div class=""> - <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" value="short"> + <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" aria-describedby="v-1-error" aria-invalid="true" value="short"> <!--v-if--> <!--v-if--> </div> - <p class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p> + <p id="v-1-error" class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p> </div> </div> </form>" ❯ test/components/Form.spec.ts:126:28

Error: Snapshot `Form > valibot safeParser validation works > with error 1` mismatched - Expected + Received @@ -3,11 +3,11 @@ <div class=""> <!--v-if--> <!--v-if--> </div> <div class=""> - <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off" value="[email protected]"> + <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="[email protected]"> <!--v-if--> <!--v-if--> </div> <!--v-if--> </div> @@ -16,13 +16,13 @@ <div class=""> <!--v-if--> <!--v-if--> </div> <div class=""> - <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" value="short"> + <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" aria-describedby="v-1-error" aria-invalid="true" value="short"> <!--v-if--> <!--v-if--> </div> - <p class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p> + <p id="v-1-error" class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p> </div> </div> </form>" ❯ test/components/Form.spec.ts:126:28

Error: Snapshot `Form > superstruct validation works > with error 1` mismatched - Expected + Received @@ -3,11 +3,11 @@ <div class=""> <!--v-if--> <!--v-if--> </div> <div class=""> - <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off" value="[email protected]"> + <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="[email protected]"> <!--v-if--> <!--v-if--> </div> <!--v-if--> </div> @@ -16,13 +16,13 @@ <div class=""> <!--v-if--> <!--v-if--> </div> <div class=""> - <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" value="short"> + <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" aria-describedby="v-1-error" aria-invalid="true" value="short"> <!--v-if--> <!--v-if--> </div> - <p class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p> + <p id="v-1-error" class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p> </div> </div> </form>" ❯ test/components/Form.spec.ts:126:28

Error: Snapshot `Form > custom validation works > with error 1` mismatched - Expected + Received @@ -3,11 +3,11 @@ <div class=""> <!--v-if--> <!--v-if--> </div> <div class=""> - <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off" value="[email protected]"> + <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="[email protected]"> <!--v-if--> <!--v-if--> </div> <!--v-if--> </div> @@ -16,13 +16,13 @@ <div class=""> <!--v-if--> <!--v-if--> </div> <div class=""> - <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" value="short"> + <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" aria-describedby="v-1-error" aria-invalid="true" value="short"> <!--v-if--> <!--v-if--> </div> - <p class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p> + <p id="v-1-error" class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p> </div> </div> </form>" ❯ test/components/Form.spec.ts:126:28

Error: Snapshot `FormField > renders with label and description correctly 1` mismatched - Expected + Received "<div class="text-sm"> <div class=""> <div class="flex content-center items-center justify-between"><label for="v-0" class="block font-medium text-[var(--ui-text)]">Username</label> <!--v-if--> </div> - <p class="text-[var(--ui-text-muted)]">Enter your username</p> + <p id="v-0-description" class="text-[var(--ui-text-muted)]">Enter your username</p> </div> <div class="mt-1 relative"> <!--v-if--> </div> </div>" ❯ test/components/FormField.spec.ts:85:18

Error: Snapshot `FormField > renders with error correctly 1` mismatched - Expected + Received @@ -2,8 +2,8 @@ <div class=""> <!--v-if--> <!--v-if--> </div> <div class=""> - <p class="mt-2 text-[var(--ui-error)]">Username is already taken</p> + <p id="v-0-error" class="mt-2 text-[var(--ui-error)]">Username is already taken</p> </div> </div>" ❯ test/components/FormField.spec.ts:85:18

Error: Snapshot `FormField > renders with size xs correctly 1` mismatched - Expected + Received "<div class="text-xs"> <div class=""> <div class="flex content-center items-center justify-between"><label for="v-0" class="block font-medium text-[var(--ui-text)]">Username</label> <!--v-if--> </div> - <p class="text-[var(--ui-text-muted)]">Enter your username</p> + <p id="v-0-description" class="text-[var(--ui-text-muted)]">Enter your username</p> </div> <div class="mt-1 relative"> <!--v-if--> </div> </div>" ❯ test/components/FormField.spec.ts:85:18