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

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

Accessing User AWS Cognito Authentication Parameters in a React Application

Have you ever been interested in adding user authentication information to a React application using AWS Cognito ? This post demostrates how to display this information using the AWS Cognito service bundled with AWS Amplify  AWS Cognito and Amplify AWS Amplify  provides the ability to build a full stack web application using JWT authentication with OAuth  using an AWS Cognito User Pool. Once you have created a basic application using AWS amplify, enter the following code to retrieve authentication information Available Parameters The Cognito Auth API returns a number of parameters, that can be used for display in a React application, or even used as a key in a Dynamo database Cognito User Pool A summary of the user pool can be seen by clicking on the user pool from the link below. Ensure you set the right region to see the correct application. The console shows the number of users, and provides the ability to import / create users manually, add users to group, reset ...
Post a Comment
Read more