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 control testing costs and adopt a pragmatic and profitable testing strategy,
• how to implement tests for your Angular application with the Test-Driven Development approach,
• tow 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,
• how to implement type-safe tests,
• the difference between fakes, stubs, spies, and mocks + how and when to use them,
• the difference between isolated, shallow & integration component testing,
• how to choose the right scope for your tests,
• when and how to use Playwright Component Testing,
• lots of tips & tricks that will help you adopting a pragmatic testing strategy.

Where

Online

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.
  

Jest

• Pros & cons.
• Setup Jest.
  

Test-Driven Development

• Test-Driven Development: origin & benefits.
• Progressive TDD.
• 🧑🏻‍💻 Exercise: Testing an Angular service with the Progressive TDD approach.
• 🧑🏻‍💻 Exercise: Debugging with Jest.
• Tips & tricks.
  

Timeboxed TDD & TCR

• Refactor vs. Restructure: back to definitions.
• Timeboxed TDD.
• Limbo.
• TCR : Test && Commit || Revert.
  

Test Doubles

• Mocks vs Spies vs Stubs vs Fakes.
• Classicists vs Mockists.
• Choosing the right approach to override Angular's dependency injection.
• Type-Safe testing.
• 🧑🏻‍💻 Exercise: Simulate the behavior of a dependency with Fakes, Mocks, Spies & Stubs.
  

Component Testing

• Testing a component.
• The different types of component tests: Integration vs. Shallow vs. Isolated.
• Interacting with the DOM.
• 🧑🏻‍💻 Exercise: Component shallow testing.
• 🧑🏻‍💻 Exercise: Component integration testing.
• 🧑🏻‍💻 Exercise: Testing Inputs & Outputs based communication.
• 🧑🏻‍💻 Exercise: Interacting with forms.
  

Angular CDK Test Harness

• The story behind Angular CDK Test Harness.
• When and how to use it.
• 🧑🏻‍💻 Exercise: Using a test harness.
• 🧑🏻‍💻 Exercise: Implementing a test harness.
  

Playwright Component Testing

• Overcome the limits of Isolated Testing with Playwright Component Testing.
• 🧑🏻‍💻 Exercise: Isolate and test a component with Playwright.
  

Visual Regression Testing

• Testing the presentation.
• Detecting visual regressions with Playwright Component Testing.
  

Defining a Testing Strategy

• What should be tested and how?

Your Coach: Younes Jaaidi

Younes is a Google Developer Expert for Angular & Web Technologies.

He is a trainer, eXtreme Programming coach & tech advisor who loves the challenge of boosting teams’ efficiency and helping everyone enjoy every part of their job. His experience convinced him that the key to making quality products is collective ownership, passion, and knowledge sharing.

In his spare time, you will find him contributing to open-source software, writing articles or speaking at meetups or conferences... and sometimes sailing.

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

Some previous talks:

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

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

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

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

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

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