Skip to main content

Unit testing async pipes in deeply nested Angular components

Have you ever tried to use async pipes in your Angular application and wondered how to unit test them ? In this post we are going to explain how to unit test them in deeply nested smart components typically used in large scale Angular applications.

 If you are looking to learn more about async pipes and how to use them with deeply nested smart components, have a look at the post "Angular OnPush Change Detection and Component Design - Avoid Common Pitfalls"

Data service

First, lets create a data service that sets up an rxjs observable and subject that we will use in the application

Front end

Next, lets create a front end page with the ability to fire immutable visibility changed and reset events, along with the ability to show content depending on the state of the async pipe.

Unit testing

Component Host

It is necessary to wrap the component in a host component to facilitate unit testing async pipes. Click the following github issue report to discover more information "Forcing change detection when unit testing onPush Components"


Unit Tests

The following code are three unit tests in BDD style

Source code

Refer to the following github page to fork the codebase and / or check it out to execute locally https://github.com/jamesioppolo/AsyncPipesUnitTesting

Comments

Post a Comment

Popular posts from this blog

Executing multiple HTTP requests in parallel using a nonblocking RESTful API in Java

Have you ever wanted to perform multiple HTTP requests in Java in parallel and wondered how to execute them in a non blocking fashion ? In this post we are going to explain how to execute them using a nonblocking RESTful API controller using the Spring WebFlux (Netty) framework with WebClient, based on Project Reactor Nonblocking REST controller It is necessary to use the Flux<> type to signify there is a list of items in the response Spring Webflux Client In our example, the Spring Webflux client returns a single string which represents an XML value. It uses a reactive stream using the Mono<> type. Its value is mapped to an object using Jackson. The three HTTP calls are then merged using the Flux.merge statement Performance Comparison The link below compares the performance of API requests performed using the Spring Webflux framework with WebClient versus DeferredResult or CompletableFuture with Servlet and a Blocking HTTP call with servlet https:/...
1 comment
Read more

Modifying GraphQL Schema in AWS Amplify

Have you ever created a sample AWS Amplify application and wanted to extend the DynamoDB database schema ? This post explains how to add a single owner parameter to the schema definition and any pitfalls that you may experience AWS Amplify AWS Amplify provides the authentication, Graph API, serverless and CI/CD capabilities in an easy to use format. This post assumes knowledge of these AWS services and that you have created a sample react notes app from the example here   Adding Owner Column To add the owner column to the model, update the amplify/backend/api/reactamplified/schema.graphql file as follows and add the following authentication information   Execute an amplify push command and ensure that the API is deployed successfully Fix Cognito User Pool Error If you receive the following error: @auth directive with 'userPools' provider found, but the project has no Cognito User Pools authentication provider configured.  Execute the command amplify update api and upda...
Post a Comment
Read more