Updating the list page with a new edit mode

In this section, you’ll update the page so that it can toggle into an edit mode for a given birthday. That relies on having a hidden form field for the id value.

Testing hidden fields

Testing Library doesn’t give us an easy way to query the hidden input fields because it generally concerns itself with what is visible to the user, and our id field is purposefully designed to be an internal system detail.

Fortunately, we can fall back to the standard Document Object Model (DOM) Form API to figure this out.

The nature of writing unit tests for frameworks such as SvelteKit means that sometimes you’re checking for internal details like this.

Let’s start with a new test in a new nested describe block:

1. In the src/routes/birthdays/BirthdayForm.test.js file, and within the BirthdayForm root in the describe block, add this new nested describe block and test:

   describe('id field', () => ...