ITB 2023 Build Vue Apps Using tdd (Test-Driven Development).pptx

Learn alongside how to use Test Driven Development (TDD) and Vue.js to avoid production issues. Integrate Vue 3, Pinia Store, composition API and TDD in order to tackle the most common bugs and create solid vue components. This presentation is for the beginner or intermediate user.

1. Session LED BY Jaime Ramirez and Alejandro Herrera Build Vue apps using Test - Driven Development

2. Jaime Ramirez SPEAKER AT ITB2023 System Engineer Born in El Salvador ColdFusion and JavaScript Developer Currently working for Ortus Solutions since 2019

3. Alejandro Herrera SPEAKER AT ITB2023 Born in El Salvador ColdFusion and JavaScript Developer Currently working for Ortus Solutions since 20 22

4. Content Build Vue app using TDD 1 Introduction to TDD Benefits and importance of TDD 2 TDD Scenarios and Environment 3 TDD Basic Structure 4 Expectation and Assertions 5 Example 6

5. Test Driven Development Build Vue app using TDD How Test-Driven Development (TDD) can help you create better Vue apps B enefits of using TDD B asics of TDD and how it applies to Vue Best practices for implementing TDD in your workflow Welcome! In this presentation, we will explore:

6. WHAT IS TDD? Thanks to our sponsors

7. What is TDD? Build Vue app using TDD Write code that is more: Robust Efficient Easier to maintain Have better software products Also known as Red-Green-Refactor , is a software development approach that emphasizes writing automated tests for software before writing the code itself. This approach helps developers ensure that their code has the requirements and behaves as expected. By adopting TDD, developers can:

8. Benefits and Importance Build Vue app using TDD Vestibulum congue tempus Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Vestibulum congue tempus Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Vestibulum congue tempus Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Vestibulum congue tempus Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Ipsum dolor sit amet elit, sed do eiusmod tempor. Faster development time Provides an excellent description of the en goal. Automatic, up-to-date documentation Provides information in form of tests, keeping functionalities Up-to-date and accurate. More maintainable code Helps to pay attention to the structure of the code, resulting in cleaner, easier-to-maintain and easier-to-read code. Greater confidence in your code Tests help ensure that the code works as intended, providing developers with greater confidence in their code. The tests also make it easier to know whether any changes made to the code broke any existing functionality.

9. SCENARIOS AND ENVIRONMENT Thanks to our sponsors

10. Scenarios and Environment Build Vue app using TDD In Vue, TDD can be used to test components, directives, and other parts of your application. By testing each part of your app in isolation, you can catch bugs early and ensure that your components are working as expected. WORKFLOW REFACTOR FOR QUALITY WRITE A FAILING TEST MAKE THE TEST PASS SCENARIOS ENVIRONMENT Pinia Vue Vite Vitest

11. STRUCTURE Thanks to our sponsors

12. Test Alias: It test defines a set of related expectations. It receives the test name and a function that holds the expectations to test. Basic Structure Build Vue app using TDD Describe When you use test in the top level of file are part of the implicit suite. Using describe you can define a new related suite with nested tests and benchmarks.

13. Basic Structure Build Vue app using TDD

14. EXPECTATIONS Thanks to our sponsors

15. Expectations Build Vue app using TDD expect() Is used for writing tests. The expect function takes a value as an argument and returns an object that can be used to make sure if the behaviors of the component is working as we spect.

16. ASSERTIONS Thanks to our sponsors

17. Assertions Build Vue app using TDD Assertions are used to make specific comparisons and tests in a more readable and intuitive way: Assertions are used to test if a particular value or function behaves as expected.

18. Expectations and Assertions Build Vue app using TDD

19. CASE STUDY Thanks to our sponsors

20. Create test Set Up Project Case Study Build Vue app using TDD Build

21. THANK YOU Thanks to our sponsors