Svelte with Test-Driven Development: Advance your skills and write effective automated tests with Vitest, Playwright, and Cucumber.js

Description

Build robust and performant applications by developing SvelteKit applications using automated testing and TDD techniques, including unit and end-to-end testing, custom matchers, component mocking, and authentication Purchase of the print or Kindle book includes a free PDF eBook Key FeaturesUnderstand and master the test-driven development (TDD) workflowExplore the principles of unit testing with Vitest and end-to-end testing using Playwright and Cucumber.jsLeverage practical examples of unit tests covering a range of SvelteKit framework featuresBook Description 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. What you will learnCreate clear and concise Vitest unit tests helping the implementation of Svelte componentsUse Playwright and Cucumber.js to develop end-to-end tests that simulate user interactions and test the functionality of your applicationLeverage component mocks to isolate and test individual componentsWrite unit tests for a range of Svelte framework featuresExplore effective refactoring techniques to keep your Svelte application code and test suites cleanBuild high-quality Svelte applications that are well-tested, performant, and resilient to changesWho this book is for This book is an essential guide for Svelte developers seeking to enhance their development process by learning the TDD workflow and its application. Whether you are an experienced developer or new to automated testing, this book helps you gain a practical approach to improving your workflow. The examples are written in JavaScript, making them accessible to all developers, including TypeScript developers. Table of ContentsSetting up for TestingIntroducing the Red-Green-Refactor WorkflowLoading Data into a RouteSaving Form DataValidating Form DataEditing Form DataTidying up Test SuitesCreating Matchers to Simplify TestsExtracting Logic Out of the FrameworkTest-Driving API EndpointsReplacing Behavior with a Side-By-Side ImplementationUsing Component Mocks to Clarify TestsAdding Cucumber TestsTesting AuthenticationTest-Driving Svelte StoresTest-Driving Service Workers Cover Title Page Copyright and Credits Contributors Table of Contents Preface Part 1: Learning the TDD Cycle Chapter 1: Setting up for Testing Technical requirements Creating a new SvelteKit project Installing and running Playwright Running Vitest Preparing your development environment for frequent unit testing Choosing your editor Creating a shell alias Changing the test runner to report each test name Watching the test fail Configuring support for Svelte component tests Installing jsdom and testing library helpers Writing a test for the DOM Writing a first Svelte component test Ensuring the DOM is cleared after each test run Restoring mocks automatically Optional configuration Configuring Prettier’s print width Reducing the tab width in the Terminal Summary Chapter 2: Introducing the Red-Green-Refactor Workflow Technical requirements Understanding the Red-Green-Refactor workflow Thinking ahead with some up-front design The Birthdays application Writing a failing test Making it pass Repeating the process Refactoring the tests Cleaning up warnings Adding a third test to triangulate Adding styles to the component Summary Chapter 3: Loading Data into a Route Technical requirements Using Playwright to specify end-to-end behavior Writing the test and watching it fail Understanding the difference between Vitest tests and Playwright tests Deciding an approach to make the end-to-end test pass Test-driving the load function Test-driving the page component Summary Chapter 4: Saving Form Data Technical requirements Adding a Playwright test for data input Test-driving a SvelteKit form Adding the form component to the page component Test-driving a SvelteKit form action Building a factory for the FormData objects Building a Vitest test suite for the form action Summary Chapter 5: Validating Form Data Technical requirements Adding a Playwright test for validating form errors Displaying SvelteKit form errors Passing the form data through the page component Validating data in the form action Clearing the data store between tests Summary Chapter 6: Editing Form Data Technical requirements Planning the path ahead Adding a Playwright test for editing form data Evolving the repository to allow ID lookup Updating the form action to handle edits Replacing items in the repository Protecting against unknown identifiers Updating return values to include identifiers Updating the list page with a new edit mode Adding a toggle mode to the page Summary Part 2: Refactoring Tests and Application Code Chapter 7: Tidying up Test Suites Technical requirements Using page object models in Playwright tests Extracting an action helper Extracting a factory method for creating data objects Summary Chapter 8: Creating Matchers to Simplify Tests Technical requirements Test-driving the pass or failure of an expectation Understanding matcher structure Testing a matcher Writing the toBeUnprocessableEntity matcher Providing extra information in failure messages Implementing the negated matcher Updating existing tests to use the matcher Summary Chapter 9: Extracting Logic Out of the Framework Technical requirements Migrating tests with a test todo list Porting tests from the form action Duplicating form validation behavior in the repository Extracting common methods Summary Chapter 10: Test-Driving API Endpoints Technical requirements Creating a service test with Playwright Adding an API endpoint for retrieving data Adding an API endpoint for saving data Adding an API endpoint for updating data Summary Chapter 11: Replacing Behavior with a Side-By-Side Implementation Technical requirements Updating the route loader to use the API Updating the page form action to use the API Using a server hook to seed sample data Summary Chapter 12: Using Component Mocks to Clarify Tests Technical requirements Avoiding component mocks Avoiding overtesting using TDD Using hand-rolled component stubs Rendering all props within a component stub Checking the ordering of component instances Dealing with complex props Dispatching component events Using a component mock library Installing the library Writing tests using the componentDouble function Summary Chapter 13: Adding Cucumber Tests Technical requirements Creating the feature file Setting up a Playwright world object Implementing the step definitions Summary Part 3: Testing SvelteKit Features Chapter 14: Testing Authentication Technical requirements Testing authentication with Playwright Creating an auth profile for dev and test modes Writing tests for login Updating existing tests to authenticate the user Testing authentication with Vitest Defining a session factory Updating existing tests for page load functions Updating existing tests for form actions Summary Chapter 15: Test-Driving Svelte Stores Technical requirements Designing a store for birthdays Writing tests for reading store values Writing tests for updating store values Summary Chapter 16: Test-Driving Service Workers Technical requirements Adding a Playwright test for offline access Implementing the service worker Summary Index Other Books You May Enjoy