Testing Angular Component using Jest

Tweet

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. 

Parallel HTTP calls from Angular

Tweet

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 Custom Directive in AngularJS to create reusable JavaScript components for your ASP.NET MVC app

Tweet

In our previous three articles on Angular JS, we have seen how we could get started by building a small Twitter Client. We have explored the view model, Modules and Services in Angular JS and in our last article saw how to post data using the $resource Service.

Today we’ll see how to use a feature called Directives in Angular JS. Directives allow you to encapsulate custom behavior in an HTML element, attribute, classes and even comments. For example, the ng-app attribute that we use to define the scope of our Angular App is in fact a Directive, because there are no HTML5 attributes by that name! It’s Angular who interprets the attribute at runtime.

Apart from helping add custom attributes, directives can also be used to create the server side equivalent of ‘tag-libraries’ on the client. Those familiar with WebForms or JSP development will remember you could create server side components with custom Tags like <asp:GridView>…</asp:GridView> where the GridView rendering logic was encapsulated in a server component. Well, Directives allow you build such components, but on the client.

In fact today we’ll define a ‘Retweet’ button on our Tweet Reader that will enable us to encapsulate the function in a custom directive.

Using AngularJS Modules and Services Feature in an ASP.NET MVC application

Tweet

In our previous post, Hello AngularJS – Building a Tweet Reader we saw how to create a simple ASP.NET MVC application using AngularJS. We saw how the $scope and $http objects were injected in our app by Angular. We also saw how to do Templating and DataBinding. Today we will learn a few more constructs like the Modules and Services.

As with our demos we’ll walk with a code sample to see how the AngularJS features are used.

The Sample AngularJS Application - Recap

We’ll continue where we left off with the previous ASP.NET MVC sample where we built a Twitter reader.

The ASP.NET MVC Controller

To quickly recap, we have an ASP.NET MVC application with an MVC Controller. The controller has the Index action method. Here the LinqToTwitter framework first checks if user is Authenticated, if not, it redirects to Twitter and gets user to Authenticate.

Angular JS: Routing to a SPA mode using ASP.NET MVC

Tweet

In the beginning of the series I had mentioned that Single Page applications (SPA) were gaining popularity and that some of the ready SPA templates that come with ASP.NET MVC are rather opinionated, giving them a steep learning curve. We started with basics of Angular JS and slowly inched up learning bits of the framework. Till the third article we were mostly doing known things (data binding, templating, posting data) that other drop in libraries could do as well). The fourth article showed us how to do UI composition in form of directives and the seeds of a Single Page App were sown.

Today, we will look at routing (on the client side) and take the next step in realizing how a full blown Single Page Application framework functions.

AngularJS – Post data using the $resource Service in an ASP.NET MVC app

Tweet

Last time we looked at how we could use the $resource service to make our code more compact when making HTTP calls. Today we will see how to post data to a server using the $resource service.

We’ll continue using the code from the previous article. So you can download the zip from here or fork it from Github.

Posting Data

In our previous article we re-organized our application to use the $resource service. However we were only using the query function. As we know the resource function can also do GET, POST, PUT etc. Following is the map of actions to the HTTP verbs

{ 'get':    {method:'GET'},
  'save':   {method:'POST'},
  'query':  {method:'GET', isArray:true},
  'remove': {method:'DELETE'},
  'delete': {method:'DELETE'} };

(Source: Angular JS Documentation)

Angular JS – Making Directives self-contained in our ASP.NET MVC Twitter App

Tweet

This article is sixth in the series, I strongly recommend you go through the previous five if you are new to AngularJS:

Part 1 - Hello AngularJS – Building a Tweet Reader

Part 2 - Using AngularJS Modules and Services Feature in an ASP.NET MVC application

Part 3 - AngularJS – Post data using the $resource Service in an ASP.NET MVC app

Part 4 - Using Custom Directive in AngularJS to create reusable JavaScript components for your ASP.NET MVC app

Part 5: Angular JS: Routing to a SPA mode using ASP.NET MVC

Today we will revisit Directives in an attempt to make them more self-contained and re-usable. As with the previous articles, we start off where we left off so please download the code of Part 5 from Github and follow along.

Hello AngularJS – Building a Tweet Reader

Tweet

Single Page applications using client side JavaScript frameworks are getting popular and with the latest Web Update for Visual Studio 2012, quite a few SPA templates have been released by Microsoft and prominent Community members like John Papa. We have covered these templates in the past over here.

However these SPA templates are rather opinionated on the usage of the underlying frameworks and may not be the best starting point if we are trying to understand the framework under the hood. So today, we will look at AngularJS in a plain vanilla ASP.NET MVC app. We’ll start with an empty project and go ground up.

What is Angular JS?

Angular JS is (another) client side MVC framework in JavaScript. It was created by a group of developers at Google when they realized that their project (Feedback) had become too unwieldy and needed a cleanup. The three weeks effort at that cleanup lay seed to what we now know as AngularJS. Of course AngularJS was thrown open to community and since then had garnered a pretty vibrant community and a boat load of features.