Create your Angular App and test it with Jest and Cypress

Sometimes it's difficult to find a great combination of packages to start a new app. Initialization and configuration can be a pain if we don't know a set of tools that makes our life easier. In this workshop we will show you how to create a small Angular app that is tested with Jest and Cypress, to set a good point of start for your future applications.

Objectives of this workshop:

Angular:

- Easy initialization of an Angular workspace with NX
- Create components & services with Angular CLI
- Perform an HTTP request with HTTPClient service
- Component communication via service

Unit testing with Jest:

- Unit testing components & services
- Mocking services
- Snapshot Testing

E2E with Cypress:

- Creation of E2E and integration tests for the app
- Mocking HTTP requests in Cypress

This is the repo used for our workshop:

https://github.com/malaga-front-end/nrwl-angular-jest-cypress-quickstart

Transcript

1. 1 The Workshop | Public Create your Angular App with Unit tests and E2E Install them before workshop starts! Node.js https://nodejs.org/en/download/ Angular CLI npm install –g @angular/cli Nx npm install –g @nrwl/nx Init workspace npm init nx-workspace myapp Repo https://github.com/malaga-front-end/nrwl-angular- jest-cypress-quickstart
2. Create your Angular App with Unit Tests and E2E
3. 3 The Workshop | Public Miguel Ángel Muñoz Diego Romero Who are we? @ma_munoz_dev Miguel Ángel Muñoz Alonso mamunoz-dev Diego Romero Parrilla diegorp
4. What you’ll learn Key takeaways from this session 4 The Workshop | Public
5. What you’ll learn NX: Initialise Angular workspace Overview of project structure 5 The Workshop | Public
6. What you’ll learn Components with Angular CLI Services with Angular CLI Interaction between components 6 The Workshop | Public
7. What you’ll learn The FE Test Pyramid What tests should I do? e2e snapshot unit tests 7 The Workshop | Public
8. What you’ll learn Unit testing services Unit testing components Mocking services Snapshot testing 8 The Workshop | Public
9. What you’ll learn Create your first E2E test Mocking HTTP requests 9 The Workshop | Public
10. Angular CLI & Nx Devtools to automate your development 10 The Workshop | Public
11. 11 The Workshop | Public
12. 12 The Workshop | Public
13. 13 The Workshop | Public What do we need from each one? • Initialise Angular Workspace • Jest • Cypress • Generate our components • Generate our services
14. 14 The Workshop | Public Angular CLI Installing Angular CLI & Nx npm install –g @nrwl/nx npm install –g @angular/cli Nx
15. Developing our app Let’s get to work! 15 The Workshop | Public
16. The front-end test pyramid How should I organise my tests? 16 The Workshop | Public
17. 17 The Workshop | Public Front-end test pyramid https://www.freecodecamp.org/news/the-front-end-test-pyramid-rethink-your-testing-3b343c2bca51/ e2e snapsh ot unit tests
18. 18 The Workshop | Public Front-end test pyramid https://www.freecodecamp.org/news/the-front-end-test-pyramid-rethink-your-testing-3b343c2bca51/ e2e snapsh ot unit tests Multiple for each component
19. 19 The Workshop | Public Front-end test pyramid https://www.freecodecamp.org/news/the-front-end-test-pyramid-rethink-your-testing-3b343c2bca51/ e2e snapsh ot unit tests Multiple for each component One or two per component
20. 20 The Workshop | Public Front-end test pyramid https://www.freecodecamp.org/news/the-front-end-test-pyramid-rethink-your-testing-3b343c2bca51/ e2e snapsh ot unit tests Multiple for each component One or two per component One or two for component communication
21. Unit & snapshot testing with Jest Check if these components and services work! 21 The Workshop | Public
22. 22 The Workshop | Public
23. 23 The Workshop | Public vs.
24. E2E testing with Cypress Check if everything works together! 24 The Workshop | Public
25. 25 The Workshop | Public
26. 26 The Workshop | Public vs.
27. 27 The Workshop | Public https://github.com/malaga-front-end/nrwl- angular-jest-cypress-quickstart Practice in our repo!
28. Q&A Thank you!