fix(e2e): target the visible date control, not its hidden mirror

data-slot rides {...rest} onto DateField's hidden ISO input, so the
invitation spec asserted visibility on an element that can never be
visible and typed into nothing. Use the primitive's data-testid, which
lands on the overlay a person edits, and assert the mirror took the
value.
This commit is contained in:
Marc-André Bombeck committed 2026-08-06 20:58:30 +02:00
1 parent c11c462e57
commit 1d575cf1ae
2 files changed
+18 -1

No files matched your search

+10 -1
View File
@@ -203,10 +203,19 @@ test.describe("account sharing", () => {
// date mapping, and BOTH still pass with the card wired back to `null`.
// Only reading the posted body proves the value a person typed is the
// value the server receives, which is the half that was missing.
const lapse = ownerPage.locator('[data-slot="grant-invite-expires"]');
// The VISIBLE overlay, not the hidden ISO mirror: `data-slot` rides
// `{...rest}` onto `DateField`'s hidden input, so the old selector resolved
// to an element that can never be visible and typed into nothing.
const lapse = ownerPage.getByTestId("grant-invite-expires-input");
await expect(lapse).toBeVisible();
const chosenDay = isoDayFromNow(30);
await lapse.fill(chosenDay);
// The overlay commits on blur; without it the ISO text sits in local state
// and the hidden mirror still holds the old value when the form submits.
await lapse.blur();
await expect(
ownerPage.locator('input[data-slot="grant-invite-expires"]'),
).toHaveValue(chosenDay);
// The level, through the real control and onto the real wire.
//
@@ -297,7 +297,15 @@ export function GrantInviteCard() {
</Label>
<DateField
id="grant-invite-expires"
// `data-slot` rides `{...rest}` onto `DateField`'s HIDDEN mirror
// input — the one that carries the ISO value for a native submit.
// A browser test that targeted it found an invisible element and a
// `fill()` that typed into nothing. `data-testid` is the
// primitive's own affordance for the VISIBLE overlay, which is the
// control a person actually types into, so the browser test uses
// that and the slot stays where every other caller expects it.
data-slot="grant-invite-expires"
data-testid="grant-invite-expires-input"
value={expiresOn}
min={tomorrowIso(ownerTimezone)}
onChange={setExpiresOn}