Presentation

Testing or more specifically, frontend testing is undeniably in the top 3 of the most complex topics associated with Angular development.

When one is confronted with this complexity, it is tempting to give up, but at what cost? It is totally possible to develop an application without tests but is it really faster? What happens to code maintainability a few months or sometimes just weeks later? Can we serenely refactor and deploy our apps regularly while it is getting older and complex in our hands?

This workshop presents, through practical exercises, pragmatic Angular testing techniques. You will also learn how to implement human-readable, maintainable, and above all profitable tests.

Goals

During this workshop, you will learn:

• how to implement tests for your Angular application with the Test-Driven Development approach,
• how to leverage the best of Vitest, and Playwright Component Testing,
• how to choose the type of tests that fits best depending on the context,
• how to decouple tests from code to encourage refactoring and tidying up when needed,
• how to implement maintainable and human-readable tests,
• the difference between dummies, stubs, spies, mocks, and fakes + how and when to use them,
• the difference between isolated, shallow & integration component testing,
• how to choose the right scope for your tests,
• lots of tips & tricks that will help adopting a pragmatic testing strategy.

Prerequisites

• Curiosity and good Web culture.
• Being familiar with the Angular ecosystem (e.g. know how to create a component, implement and use Inputs / Outputs).
• An experience with Angular testing will be beneficial in order to grasp more tips & tricks.
• A computer connected to the Internet 😊.

Agenda

👨🏻‍🏫 Introduction to testing

• Why test?
• The different types of tests.
• What should we expect from a test?
• The Development Time Perception Bias.
• The different types of tests: Narrow & Wide vs Unit & Integration.

👨🏻‍🏫 Vitest

• Why Vitest instead of Karma, Jest or Web Test Runner?
• Pros & cons.
• Supersonic tests with Vitest + SWC.

💻 Exercises: First Tests

• Test-Driven Development: origin & benefits.
• Progressive TDD.
• All-you-can-eat tips & tricks for precise and maintainable tests.

• Object mothers.
• Async testing.
• Debugging.

👨🏻‍🏫 Component Testing

• The different types of component tests: Integration vs Shallow vs Isolated.
• Angular Testing Library.

💻 Exercises: Component Testing

• Integration.
• Shallow.
• Isolated.
• Controlling Inputs & Outputs.
• Resilient DOM testing.

👨🏻‍🏫 Test Doubles

• Dummies vs Stubs vs Mocks vs Spies vs Fakes: which one should we use?
• Fake it till you Mock it!
• Type-safe testing.
• Contract testing fakes.

💻 Exercises: Test Doubles

👨🏻‍🏫 UI Testing with Playwright Component Testing

• Playwright Component Testing.
• Debugging with Playwright CT.
• Visual Regression Testing: Magic, Gotchas, Recommendations, and Strategies.

💻 Exercises: UI Testing with Playwright Component Testing

👨🏻‍🏫 Building your Pragmatic Testing Strategy

• What should we test and how?

🙋 Q&A

Your Teacher: Younes Jaaidi

Younes is a Software Cook born in eXtreme Programming, which made him a passionate advocate of Collective Ownership, TDD, and snacks in the office.

He trains and coaches teams like yours to cook better apps. He’s also an NX champion, an Angular GDE, and a mediocre sailor.

His favorite command is `sleep 300; git reset --hard; git clean -df`

Some previous talks:

- Fake it till you Mock it @ NgPoland 2023 : Video not publicly available yet- Apps are over, think libs with Nx (French) @ DevFest Nantes 2023 : https://youtu.be/K8wYtBGzmsI?si=ezInSvFka1x22iBU&t=96

- Apps are over, think libs with Nx (French) @ DevFest Nantes 2023 : https://youtu.be/K8wYtBGzmsI?si=ezInSvFka1x22iBU&t=96

- Cypress Component Testing - The Disappearance of Mr Button @ Ng-De 2022 : https://youtu.be/4p1LLbmIG_k

- Keep Your Tests Healthy with DOM Distancing @ Angular Global Summit 2021 : https://youtu.be/ZKBHWcjFufw

- What happens when you cancel an HTTP request? @ JavaScript Bangkok 2021 : https://youtu.be/5P9XVObbvS4?t=55

- Boost Your Time to Market by Dancing the Limbo @ AngularUp 2019 : https://youtu.be/izGz7H-8yIk

- White-Labeling & A/B Testing with Interchangeable Components @ AngularConnect 2018 : https://youtu.be/nX_HhiqmFAI

Conditions

If there are not enough attendees and the session is postponed, you will be able to choose between registering to another session or getting a full refund.