Book Image

Svelte with Test-Driven Development

By : Daniel Irvine
Book Image

Svelte with Test-Driven Development

By: Daniel Irvine

Overview of this book

Svelte is a popular front-end framework used for its focus on performance and user-friendliness, and test-driven development (TDD) is a powerful approach that helps in creating automated tests before writing code. By combining them, you can create efficient, maintainable code for modern applications. Svelte with Test-Driven Development will help you learn effective automated testing practices to build and maintain Svelte applications. In the first part of the book, you’ll find a guided walkthrough on building a SvelteKit application using the TDD workflow. You’ll uncover the main concepts for writing effective unit test cases and practical advice for developing solid, maintainable test suites that can speed up application development while remaining effective as the application evolves. In the next part of the book, you’ll focus on refactoring and advanced test techniques, such as using component mocks and writing BDD-style tests with the Cucumber.js framework. In the final part of the book, you’ll explore how to test complex application and framework features, including authentication, Svelte stores, and service workers. By the end of this book, you’ll be well-equipped to build test-driven Svelte applications by employing theoretical and practical knowledge.
Table of Contents (22 chapters)
1
Part 1: Learning the TDD Cycle
8
Part 2: Refactoring Tests and Application Code
16
Part 3: Testing SvelteKit Features

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', () => ...