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

Optional configuration

In this section, we’ll look at configuring Prettier and setting up more appropriate tab widths on the Terminal. These settings mirror the print settings that are used in this book.

Configuring Prettier’s print width

Due to the constraint of the physical pages in this book, I have set the printWidth setting of Prettier to 54 characters, and all code samples are formatted with that setting.

I also think the default value, 100, is too high. I like short columns of text as I find them easier to share and read in all sorts of environments – such as on mobile devices, where it’s much easier to scroll vertically than it is horizontally.

Also, having extra vertical space comes in handy when you are pairing with other developers and you want to refer to particular line numbers (assuming you have line numbers turned on).

In .prettierrc, you can set the print width with the following addition:

{
  "printWidth": 54,
  ...
}

You might be more comfortable with something in the 60 to 80 range.

Reducing the tab width in the Terminal

The Svelte community has a preference for tabs over spaces because tabs are better for screen readers. Unfortunately, a lot of Terminals and shell programs are set up for a default tab width of eight characters, which is way too many for my liking.

Although every Terminal is different, the one solid piece of advice I have is to set git config to use less as its pager, with tab stops at positions 1, 3, 5, and 7:

git config --global core.pager 'less -x1,3,5,7'

This makes git diff and git show much more bearable, and these are two commands I use extremely frequently.