Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Download as PPTX, PDF0 likes131 views
![Maurice De Beijer [MVP], profile picture](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1750747544)
The document provides an overview of using Cypress for testing Svelte applications, highlighting its advantages such as easy test writing, automatic waiting for elements, and support for TDD. It introduces Svelte and SvelteKit as modern frameworks for building user interfaces, emphasizing their reactive nature and high-performance capabilities. The conclusion underscores the effectiveness of Cypress for end-to-end testing, advocating for its use over unit testing and manual testing.
Surati Tech Talks 2022 / 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? What is Svelte and SvelteKit? 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
- 13. svelte.dev 13
- 14. Svelte A new approach to building user interfaces The most loved web framework according to Stack Overflow Svelte is a component framework Just like React,Vue or Angular A Svelte application is reactive Only the parts of the application that use reactive state are updated Compiles your components into JavaScript No Svelte runtime library 14
- 15. SvelteKit 15
- 16. SvelteKit SvelteKit is an application framework powered by Svelte Just like Next.js for React or Nuxt.js forVue Designed for building extremely high-performance web apps Server side rendering at runtime Prerendering at build time Prefetching pages File based routing HTTP API endpoints Error handling Sessions Very fast builds when developing UsingVite/ESBuild 16
- 24. Testing anAPI 24
- 26. GitHubAction 26
- 28. 28
- 29. Cypress Testing Library Test your UI components in a more user-centric way Users don’t use CSS queries Allows better queries within Cypress Queries are often bases on accessibility SvelteTesting Library is also usable with Jest Using the same query functions 29
- 32. 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 32