The complete guide to designing, developing, testing, and deploying enterprise applications with Angular

Angular Applications Architecture

Requirements and FAQs

Code style guide

Introduction

Start from the domain

Software architecture for Front-end

Domain, design, develop

Workspaces scenarios

Applications and Libraries

Mono repository multi project

Domain boundary with plain TypeScript

Application details with Angular

Presentational details with Angular

Domain boundary and application details

Testing big Angular solutions with ease

Narrow tests for business logic

Visual tests for the presentation layer

Wide tests for the user experience

Testing since the beginning

Configuration environment and tokens

Instrumentation measuring and logging

Security authentication and authorization

Core generic infrastructure

A library for your shared UI vocabulary

A set of basic atomic elements

Some generic composed blocks

User interface, a design system foundation

Reactive stores with Signals

API access as a commodity

Interceptors for the dirty job

Data stores, reactive access, and persistence

Features come in routes to pages

Anatomy of a Page control flow and services

Different levels of state management

Routes and pages

In this course we teach you how to design, develop, ane deploy enterprise level Angular Applications the right way. Despite the fact that Angular is an opinionated framework, specially suited to build large solutions, it requires a deep knowledge to take decisions at every step.

In almost 30 lessons we cover how to choose and use the correct tools, how to structure an application that scales and how to code some intricate solutions to common problems. It's a long course/book and comes with a complete working codebase fully tested.

It is taught by Alberto Basalo who has been working, advising, and training multinational corporations, banks, and public administrations in Angular for years.

The complete guide to design, develop, test, and deploy enterprise applications with Angular

How to design, develop and deploy big enterprise applications with Angular.

Best practices to organize your code in small reusable libraries.

Application of reactive flow patterns for better user and developer speed.

Leverage the latest Angular version features like stand-alone components.

Common functionality for any application ready to use.

We are approaching the upper layers of the app atmosphere to 

. In essence, we are faced with the same question: 

is my component doing what it is supposed to do?

 But it deserves a lesson in itself because of some peculiarities. To begin with, we have the emergence of a new language: HTML.

Also, a well-architected app should produce many small components, each with several dependencies. Do we need to isolate them all? Can we integrate some of them? And the last one, being the presentation layer responsible for the user interface, 

As you saw in this book, I am a fanatic about the 

. I love to extract as much as possible from the Angular components to specialized services, repositories, etc. Even though not all components are created equal, there are smart and dumb ones. The former are the ones that use local calling services, and the latter are responsible for the presentation.

So, most of the logic (in services and smart components) can already be tested using the narrow approach of unit tests with Jest. Easy and fast. That´s all you need to have a lot of code covered. 

But the presentation components are a different kind of beast. It is a mix of HTML, CSS, and some little TypeScript. It is not where Jest really shines. And if that were not enough, Jest does not offer visual results of the execution of components either. So, we need a different approach.

, a test runner designed for testing Angular components, but it feels like a tool from the past in terms of speed and developer experience compared with 

. Despite this, Karma has a unique feature that still makes it a good choice for testing Angular components. It is the only one to run the tests in a real browser. And that is a must for testing the presentation layer. 

Let's devise a strategy to minimize and substitute the need for Karma in our workspace by using Cypress to mount and test presentational components. At the time of writing this book, PlayWrigt does not yet have a supported feature for this kind of test.

 testing of web applications. It also evolved to support component testing in several frameworks, including Angular. Using Jest, I missed the visual feedback of the Karma tests. But Cypress offers a much better 

 of the components. As it will be the same tool used for the end-to-end tests, I chose it as my default to exercise my UI.

 offers a schematic to install Cypress in your workspace. It will add the necessary dependencies and create the configuration files. 

---
title: Visual tests for the presentation layer
isPublicLesson: false
useMdx: false
---

# Visual tests for the presentation layer.

We are approaching the upper layers of the app atmosphere to **test the presentation layer**. In essence, we are faced with the same question: _is my component doing what it is supposed to do?_ But it deserves a lesson in itself because of some peculiarities. To begin with, we have the emergence of a new language: HTML.

Also, a well-architected app should produce many small components, each with several dependencies. Do we need to isolate them all? Can we integrate some of them? And the last one, being the presentation layer responsible for the user interface, **should the tests be more visual?**

## Web code technologies need proper tools.

As you saw in this book, I am a fanatic about the **single responsibility principle**. I love to extract as much as possible from the Angular components to specialized services, repositories, etc. Even though not all components are created equal, there are smart and dumb ones. The former are the ones that use local calling services, and the latter are responsible for the presentation.

So, most of the logic (in services and smart components) can already be tested using the narrow approach of unit tests with Jest. Easy and fast. That´s all you need to have a lot of code covered. 

But the presentation components are a different kind of beast. It is a mix of HTML, CSS, and some little TypeScript. It is not where Jest really shines. And if that were not enough, Jest does not offer visual results of the execution of components either. So, we need a different approach.

The Angular team provided us with **Karma**, a test runner designed for testing Angular components, but it feels like a tool from the past in terms of speed and developer experience compared with **Jest** and **Vitest**. Despite this, Karma has a unique feature that still makes it a good choice for testing Angular components. It is the only one to run the tests in a real browser. And that is a must for testing the presentation layer. 

Let's devise a strategy to minimize and substitute the need for Karma in our workspace by using Cypress to mount and test presentational components. At the time of writing this book, PlayWrigt does not yet have a supported feature for this kind of test.

### Cypress installation and configuration.

**Cypress** is a test runner designed for _end-to-end_ testing of web applications. It also evolved to support component testing in several frameworks, including Angular. Using Jest, I missed the visual feedback of the Karma tests. But Cypress offers a much better _graphical interface to see the behavior_ of the components. As it will be the same tool used for the end-to-end tests, I chose it as my default to exercise my UI.

**Nx DevTools** offers a schematic to install Cypress in your workspace. It will add the necessary dependencies and create the configuration files. 