Testing Angular Component using Jest

In this tutorial, we will go through the steps for testing Angular Component by using the Jest framework.

Since Angular is a widely used front-end application development framework, it is the responsibility of each developer to make sure that the components are implemented as per the requirements of the project.  

Unit Testing is one of the recommended approaches of guaranteeing the quality of the application. 

What is Unit Testing?

Unit testing is an approach of software testing where individual units of the code are tested against the test data. The purpose of unit testing is to validate that each unit of the software performs operations as per expectations. Unit testing involves the lowest cost because each test targets to a limited scope. Unit tests are fast and less time consuming. 

Understanding the Angular Testing Object Model

One of the best advantages of using Angular is that it provides the Testing Objects model. Now the question is why is this so important?  

The reason behind this is the execution of an  Angular application. The Angular application is executed using the NgModule environment configuration. This means that, all components and their dependencies e.g. standard module like FormsModule and other Angular Services,  are finally managed by NgModule; so naturally when we try to test the component, we need a similar environment to instantiate component with its dependencies. 

ASP.NET Core 3.1 Unit Testing using xUnit and Moq

In any software life-cycle, Testing is an important step for ensuring a good quality software application. Typically, in case of web applications, testing plays an important role. In the software applications, we have the following major testing types:
  1. Unit Testing is the most popular testing methodology. The unit test helps to test every small unit of the source code. Unit testing is used to mock the dependency of the code so that the individual unit of the code is tested separately without including the dependency in the test code. Typically, in a software application, the unit is a class or a method in a class. If the class has any dependency, then to unit test the code, we mock the dependency to attain loose coupling. Unit Testing can be done by a developer and the developer can test the quality of the code.
  2. Integration Testing uses an approach where tests includes individual units and all these units are tested as a group. The advantage of the integration testing is to detect and expose faults during an interaction between these integrated units of the software application. Since, the integration testing uses all units in the test, writing integration test is a costlier approach.
  3. End-to-End Testing is an approach of testing the entire system. In this approach, the testing is implemented by considering every component of the software application right from the UI to the data persistence layer. This guarantees the expected workflow of the software application. The entire application is tested for the critical functionalities such as communication with third party components, databases, networks, etc.
Considering the various testing types, we can see that the cost of the Unit Testing is very low where as End-to-End testing proves costlier, but nevertheless important.

If we consider the number of tests required for software applications, then we can say that we must write several unit tests. How many? As a thumb rule, the overall number of methods written by developers in software applications, should be the number of unit tests you write. Also, if we have conditional statements in these methods, then we have to write one unit test per conditional statement. Cumbersome, but totally worth the cost and time put into it.

This is also the reason why unit tests are the responsibility of the developer or so to say if Test-Driven-Development approach (or user stories and test cases) is understood by the developer, then the code can be bug-free. Figure 1 shows the summary of the testing methodologies.
       


Figure 1: Testing methodologies summary

In this article, we will be implementing Unit Testing of an ASP.NET Core 3.1 application. We will implement the Unit Test MVC Controller, API Controller by mocking their dependencies.

Accessing Azure Table Storage in Node.js Applications

Microsoft Azure Storage services provides features of storing NoSQL data in the Table Storage. The Azure Table Storage stores schema-less data using Key/Value pairs. Since the data store is schema-less, we can use Table Storage to store the data for those applications that are designed and targeted to flexible data capture. Although the data is stored as schema-less, it is easy to query the data using simple querying mechanism.

You can consider using Table storage where you need not to use complex joins, stored procedures for any data operations. 

Table Storage and Creating Resource Group and Storage Account


Following are some of the features of Azure Table Storage
  • Table is a collection of entities. These entities does not enforce any schema. This provides a flexibility to store data for different set of properties for entities.
  • Entity is a set of properties. Conceptually we can map an entity with a table row on relational database. The max size of entity in Table is 1 MB.
  • Property is a name/value pair. We can have max 252 user defined properties in entity and along with these there are 3 system properties present in entity. These properties are RowKey, PartitionKey and Timestamp.
  • PartitionKey, this is the key based on which the data in the Table Storage is stored in logical partition. This provides query optimization while retrieving data from table storage.
  • RowKey, is the unique identification of the entity in the table storage.        
To use Azure Storage, we need a Microsoft Azure Subscription. Please visit this link to create a free subscription. Make sure that you read all features and limits of using Azure Free Subscription. Once you have a subscription, login to the portal and you can start using its features.

Using Mongoose Framework to Access Azure Cosmos DB MongoDB API

Cosmos DB is a globally-distributed, multi-model database service on Microsoft Azure. Cosmos DB provides database services like SQL API, MongoDB API, Cassandra, Gremlin for storing NoSQL data.

We can create a Cosmos DB account to create a database and perform Read/Write operations on these databases using various SDKs like .NET, .NET Core, Node.js, JAVA etc. If you are working on  theJavaScript stack for building isomorphic apps using Node.js and other JavaScript frameworks like Angular, Vue.js or libraries like React.js, then you will mostly prefer to use MongoDB database for storing data. 

Most of the isomorphic apps those which are using MongoDB database, uses Mongoose framework to perform CRUD operations on the MongoDB Database. On Microsoft Azure, if you are using MongoDB API database service of Cosmos DB to store data,   there is a support available for Mongoose framework. This provides a similar coding experience of using MongoDB in on-premise applications. 

In this article, we will see how to access Azure Cosmos DB for MongoDB API using Node.js, Express application. Figure 1 explains the application structure

Creating Web Applications using MERN Stack

MongoDBMongoDB is a cross-platform document-oriented database program. It is a NoSQL Database. The data is stored in JSON document format and this database can store images in Base64 encoded format. More information on MongoDB can be read from this link.


Express.js: This is a Web Application Framework for Node.js. We can use this for building REST APIs and also for building Web Applications. More information on Express.js can be read from this link.

React.js makes it painless to create modern front-end applications. This library provides an easy approach for building interactive views. 

Node.js: This is an open-source, cross-platform JavaScript runtime environment used to run JavaScript code out-of-browser. We use Node.js for server-side JavaScript execution. More information can be read from this link.

The Component is a major building block of a React.js application. Component is the object that contains data, logic and user interface (UI) for the View. We can build an application with complex Views  using React.js components. 

In JavaScript full stack applications, we can use JavaScript object model for End-to-End apps that varies  from UI to Database. We use MongoDB, Express.js, React.js and Node.js for designing such applications, which are collectively also knows as MERN apps. In this article, we will build a complete JavaScript application based on MERN a.k.a the MERN stack.   

File Upload using ASP.NET Core WEB API 3.1 and React.js Client Application

In this post we will see how to upload files (jpeg/png) to the ASP.NET Core 3.1 WEB API. We all know that WEB APIs are mainly used for Data Communication using JSON format across applications. But what if we want to use WEB APIs for accepting binary files from the client applications? 

In ASP.NET Core WEB API, the Request property of the type HttpRequest object from the ControllerBase class can be used to read the FormData posted by the client application. The following figure explains the approach of the application development


Figure 1: Uploading file from the Client Application to the ASP.NET Core WEB API

As seen in Figure 1, the WEB API project must be configured with Body Request limit to allow how much HTTP request body size will be accepted to process request. This is the FromData posted by the client application. The Static File middleware must be configured to define which folder will be used to store all uploaded files.

Parallel HTTP calls from Angular

Angular being an extensible framework is widely used for developing high responsive front end modern web applications.

These modern web applications consist of several complex workflows on the server side. To provide access of these workflows to client applications, we need REST APIs so that client applications can access these APIs over HTTP.

Client applications developed using  Front-End frameworks like Angular can make use of HttpClient object from @angular/common/http to access these REST APIs and then using Observable object from RxJs Angular, can store and manage data received from the REST APIs in the front-end application.

But what if the Angular application wants to makes call to REST APIs in Parallel? 


Using Entity Framework Core to access Stored Procedures having User Defined Table Types as Parameters

Last week while conducting a .NET Core Full Stack training, my client asked me to explain the mechanism of accessing SQL Server Stored Procedures using Entity Framework (EF) Core. They were creating an ASP.NET Core 2.2 WEB API app.

I have explained the entire process with examples and demonstrations. My attendees even requested me to show an example to access a stored procedure that accepts a User Defined Table (UDT) Type as input parameter.       

Entity Framework Core (EF Core) is an ORM for building the data access layer of modern applications.

EF Core provides Database First and Code First approaches to generate entity classes from database and generate Db Tables from entity classes respectively. The object model of EF Core provides methods to connect to a relational database and perform database transactions.

In most of the cases, we use Entity classes to perform all CRUD operations with the database. In this case, we will write all the logic for database operations in the .NET application by creating various repositories.