book

Svelte with Test-Driven Development

by Daniel Irvine

June 2023

Intermediate to advanced

250 pages

4h 40m

English

Packt Publishing

Read now

Unlock full access

ContributorsAbout the authorAbout the reviewer
Who this book is forWhat this book coversTo get the most out of this bookDownload the example code filesDownload the color imagesConventions usedGet in touchShare Your ThoughtsDownload a free PDF copy of this book
Technical requirementsCreating a new SvelteKit projectInstalling and running PlaywrightRunning VitestPreparing your development environment for frequent unit testingChoosing your editorCreating a shell aliasChanging the test runner to report each test nameWatching the test failConfiguring support for Svelte component testsInstalling jsdom and testing library helpersWriting a test for the DOMWriting a first Svelte component testEnsuring the DOM is cleared after each test runRestoring mocks automaticallyOptional configurationConfiguring Prettier’s print widthReducing the tab width in the TerminalSummary
Technical requirementsUnderstanding the Red-Green-Refactor workflowThinking ahead with some up-front designThe Birthdays applicationWriting a failing testMaking it passRepeating the processRefactoring the testsCleaning up warningsAdding a third test to triangulateAdding styles to the componentSummary
Technical requirementsUsing Playwright to specify end-to-end behaviorWriting the test and watching it failUnderstanding the difference between Vitest tests and Playwright testsDeciding an approach to make the end-to-end test passTest-driving the load functionTest-driving the page componentSummary
Technical requirementsAdding a Playwright test for data inputTest-driving a SvelteKit formAdding the form component to the page componentTest-driving a SvelteKit form actionBuilding a factory for the FormData objectsBuilding a Vitest test suite for the form actionSummary
Technical requirementsAdding a Playwright test for validating form errorsDisplaying SvelteKit form errorsPassing the form data through the page componentValidating data in the form actionClearing the data store between testsSummary
Technical requirementsPlanning the path aheadAdding a Playwright test for editing form dataEvolving the repository to allow ID lookupUpdating the form action to handle editsReplacing items in the repositoryProtecting against unknown identifiersUpdating return values to include identifiersUpdating the list page with a new edit modeAdding a toggle mode to the pageSummary

Technical requirementsUsing page object models in Playwright testsExtracting an action helperExtracting a factory method for creating data objectsSummary
Technical requirementsTest-driving the pass or failure of an expectationUnderstanding matcher structureTesting a matcherWriting the toBeUnprocessableEntity matcherProviding extra information in failure messagesImplementing the negated matcherUpdating existing tests to use the matcherSummary
Technical requirementsMigrating tests with a test todo listPorting tests from the form actionDuplicating form validation behavior in the repositoryExtracting common methodsSummary
Technical requirementsCreating a service test with PlaywrightAdding an API endpoint for retrieving dataAdding an API endpoint for saving dataAdding an API endpoint for updating dataSummary
Technical requirementsUpdating the route loader to use the APIUpdating the page form action to use the APIUsing a server hook to seed sample dataSummary
Technical requirementsAvoiding component mocksAvoiding overtesting using TDDUsing hand-rolled component stubsRendering all props within a component stubChecking the ordering of component instancesDealing with complex propsDispatching component eventsUsing a component mock libraryInstalling the libraryWriting tests using the componentDouble functionSummary
Technical requirementsCreating the feature fileSetting up a Playwright world objectImplementing the step definitionsSummary
Technical requirementsTesting authentication with PlaywrightCreating an auth profile for dev and test modesWriting tests for loginUpdating existing tests to authenticate the userTesting authentication with VitestDefining a session factoryUpdating existing tests for page load functionsUpdating existing tests for form actionsSummary
Technical requirementsDesigning a store for birthdaysWriting tests for reading store valuesWriting tests for updating store valuesSummary
Technical requirementsAdding a Playwright test for offline accessImplementing the service workerSummary
Other Books You May EnjoyPackt is searching for authors like youShare Your ThoughtsDownload a free PDF copy of this book

Overview

Svelte with Test-Driven Development takes you through the process of building efficient, maintainable SvelteKit applications by fully embracing the test-driven development (TDD) workflow. You'll learn practical techniques like unit testing with Vitest, end-to-end testing with Playwright, and behavior-driven development (BDD) testing using Cucumber.js.

What this Book will help me do

Master the Red-Green-Refactor TDD workflow for SvelteKit applications.
Write effective unit tests for your Svelte components using Vitest.
Implement feature-rich end-to-end tests with Playwright and Cucumber.js.
Utilize component mocks and advanced test techniques specific to Svelte.
Gain practical knowledge in testing complex features like authentication and service workers.

Author(s)

Daniel Irvine is a seasoned software developer and TDD advocate who has honed his skills in multiple programming languages and frameworks. His experience spans various industries, where he focused on writing clean, maintainable code guided by automated tests. Daniel's book aims to share his tried-and-tested methodologies in a clear and approachable way to help developers improve their workflows and codebase quality.

Who is it for?

This book is aimed at developers working with Svelte who want to enhance their development practices using TDD. It's suitable for those new to automated testing as well as those looking to deepen their testing expertise. Familiarity with JavaScript (or TypeScript) and basic knowledge of web development concepts will help you make the most of this book.