Successfully reported this slideshow.
Your SlideShare is downloading. ×

Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 33 Ad

Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress

Download to read offline

Tired of having users email you that your Svelte application is broken? Turns out that building reliable applications is hard and requires a lot of testing. You can write unit tests but quite often these all pass and the application is still broken. Why? Because they test parts of the application in isolation. But for a reliable application we need more. We need to make sure that all parts, including the backend API’s, work together as intended.

Cypress is a great tool to achieve this. It will test you complete web application in the browser and use it like a real world user would. In this session Maurice will show you how to use Cypress during development and on the CI server with Svelte. He will share tips and tricks to make your tests more resilient and more like how an actual end user would behave.

Tired of having users email you that your Svelte application is broken? Turns out that building reliable applications is hard and requires a lot of testing. You can write unit tests but quite often these all pass and the application is still broken. Why? Because they test parts of the application in isolation. But for a reliable application we need more. We need to make sure that all parts, including the backend API’s, work together as intended.

Cypress is a great tool to achieve this. It will test you complete web application in the browser and use it like a real world user would. In this session Maurice will show you how to use Cypress during development and on the CI server with Svelte. He will share tips and tricks to make your tests more resilient and more like how an actual end user would behave.

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Similar to Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress (20)

Advertisement

More from Maurice De Beijer [MVP] (20)

Recently uploaded (20)

Advertisement

Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress

  1. 1. Build reliableSvelte applications usingCypress Maurice de Beijer @mauricedb 1
  2. 2.  Maurice de Beijer  The Problem Solver  Microsoft MVP  Freelance developer/instructor  Twitter: @mauricedb  Web: http://www.TheProblemSolver.nl  E-mail: maurice.de.beijer@gmail.com 2
  3. 3. Cypress.io Course 3
  4. 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. 5. What isCypress and why should you care? 5
  6. 6. Cypress.io 6
  7. 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. 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
  9. 9. Testing Triangle 🗣 End 2 End Integration UnitTesting 9
  10. 10. UnitTesting 10
  11. 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
  12. 12. What isSvelte andSvelteKit? 12
  13. 13. svelte.dev 13
  14. 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. 15. SvelteKit 15
  16. 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
  17. 17. npm init svelte 17
  18. 18. MovieCard.svelte 18
  19. 19. What we are building 19
  20. 20. How we are testing 20
  21. 21. Cypress Dashboard 21
  22. 22. Cypress andTDD 22
  23. 23. Testing the navigation 23
  24. 24. Testing anAPI 24
  25. 25. Intercepting an AJAX request 25
  26. 26. GitHubAction 26
  27. 27. CypressTesting Library 27
  28. 28. 28
  29. 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
  30. 30. Cypress Testing Library 30
  31. 31. Code/Slides  http://theproblemsolver.nl/Presentations  https://github.com/mauricedb/surati-tech-talk-2022 31
  32. 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
  33. 33. Maurice de Beijer @mauricedb maurice.de.beijer @gmail.com 33

×