Build reliable Svelte applications using Cypress
Download as PPTX, PDF0 likes261 views
![Maurice De Beijer [MVP]](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1750747544)
The document discusses building reliable Svelte applications using Cypress, a front-end testing tool designed for modern web applications. It covers topics such as Test-Driven Development (TDD) and includes practical examples of testing pages, API testing, and running tests in GitHub Actions. The conclusion emphasizes Cypress's effectiveness in end-to-end testing over unit and manual testing, advocating for tests that mirror user actions.
Build reliable Svelte applications using Cypress
- 1. Build reliableSvelte applications usingCypress Maurice de Beijer @mauricedb 1
- 2. ï Maurice de Beijer ï The Problem Solver ï Microsoft MVP ï Freelance developer/instructor ï Twitter: @mauricedb ï Web: http://www.TheProblemSolver.nl ï E-mail: [email protected] 2
- 4. Topics ï What is Cypress.io? ï UsingTDD to building a SvelteKit application ï Testing pages ï API testing ï Running the Cypress tests in GitHub Actions 4
- 5. What isCypress and why should you care? 5
- 6. Cypress.io 6
- 7. What is Cypress? ï Cypress is a front end testing tool ï Built for the modern web ï Tests are easy to write ï Using simple JavaScript orTypeScript ï TimeTravel runner lets you inspect test at each step ï Click on a step to see the state of the browser ï Automatic waiting for elements ï Makes tests more resilient ï Video recording of running test ï Helps debugging failing tests on the CI server 7
- 8. What is Cypress? ï Lets you fake the network when required ï Or use the real backend as appropriate ï Automatically retry of failing tests ï Run flaky tests multiple times ï Many standard and 3rd party extensions ï Or write your own in JavaScript ï Can run in Docker containers ï Consistent cross platform behavior ï Runs inside the browser ï Not based onW3C WebDriver API 8
- 10. UnitTesting 10
- 11. Why End to End? The more your tests resemble the way your software is used, the more confidence they can give you! Kent C. Dodds 11
- 14. What is already done? 14
- 16. Dependencies 16
- 17. Header.svelte 17
- 21. Testing anAPI 21
- 23. GitHubAction 23
- 25. Conclusion ï Cypress is a great tool for End to End testing ï More reliable then relying on unit testing and manual testing ï Write tests that resemble your userâs actions ï Great approach forTest Driven Development ï Test that your APIâs return the shape you expect ï A mismatch can lead to vague errors 25