Unit Testing React Contexts

When unit testing a React application, you'll want to test every aspect of it. This will include testing each of your contexts.

Keep in mind that creating a context often involves subscribing to something (like a service) and, it is being consumed (such as by components). Understanding that a context is similar to an environment in which a group of components exists is key. Therefore, our tests will need to mimic both behaviors—stubbing a service and consuming our context. Below, I'll demonstrate just how to do that.

Read more

Angular: Adding Application Insights (Service)

Application Insights is Microsoft's flavor of what's known as an Application Performance Monitor, or APM for short. An APM is a tool that provides insights to developers and operations (DevOps) teams into how well an application and its underlying infrastructure is performing. In general, an APM is much different than something like Google Analytics. For all intents and purposes, Google Analytics is geared more towards capturing, converting, and retaining site visitors--essentially it's a marketing tool. Application Insights, on the other hand, is a functional operations tool designed for developers and site reliability engineers.

In the previous posts, we explored two ways to add Google Analytics to an application: bundling an external JavaScript file and as a service. Those same approaches can be utilized for adding Application Insights to your Angular application. However, given the nature of Application Insights, we're going to go a little bit further into development on this post. We're going to build in some tracing that provides some better insights into how the user is interacting with our application.

All source code for this post can be found in my demo GitHub repository. You may it useful for easy reference. Additionally, this post assumes you understand how to use the Angular CLI.

Read more

Grafana on Azure App Service (PaaS)

Grafana is an open-source platform that provides real-time insights into operations. It has been extremely useful in customer environments where they were needing a solution that could be displayed on a centralized monitor (typically in something like a Network Operations Center).

While Grafana provides a hosted service, it can also be deployed to Linux, macOS, and Windows machines. Additionally, Grafana provides two different Docker images - Alpine (preferred) and Ubuntu.

Grafana's documentation only covers VM-based or container-based deployments, and the container-based deployments still assumed you were deploying to some type of underlying managed hardware. Deploying VMs in a cloud environment and ensuring high-availability requires additional infrastructure, configuration, and maintenance.  Instead, I wanted to leverage Azure's Web Apps for Containers so that I could have a complete PaaS solution that scaled as needed.

Read more

Angular: Adding Google Analytics (Service)

As stated in the previous post, Google Analytics is a fantastic resource when attempting to capture basic behavior from your Angular application's users. To leverage Google Analytics, you'll need to add the tracking script to your application's source. The previous post demonstrated how to add Google Analytics to your Angular application by bundling an external JavaScript file with your production build. The second approach for adding Google Analytics is to inject the required scripts as a service. The following post will focus on this second approach.

All source code for this post can be found in my demo GitHub repository. You may find it useful for easy reference. Additionally, this post assumes you understand how to use the Angular CLI.

Read more

Angular: Adding Google Analytics (External Script)

Google Analytics is a fantastic resource when attempting to capture basic visitor behavior in your Angular application. To utilize Google Analytics, you will need to add the tracking script to your application's source. Angular provides a few different mechanisms to accomplish this. The first approach it to save the tracking script to an external JavaScript file and include the file into your bundle for production releases. This approach is what the following blog post attempts to demonstrate.

Read more

Azure DevOps Pipelines with Git-flow Tagging

Working with a customer right now and trying to accomplish a number of tasks. First, is getting them accustomed to an enterprise branching strategy.  The second, is helping them become familiar with Azure DevOps and configuring some build and deployment pipelines.  The customer has their own versioning strategy - different across multiple projects - and they communicate with the business stakeholders features and resolved bugs in each release.  Using a "one-size-fits-all" versioning configuration doesn't work, and Azure DevOps only allows for a few custom placeholders in the Build Number.  Luckily, Git-flow allows you to tag merges with custom versions so I simply had to configure Azure DevOps to use the latest tag on the master branch for the build number.

Read more

Using Sinon+Rewire for Unit Testing with Private Methods

How many times have you tried to follow good programming practices by creating well-defined, single-purposed methods and only exposing the necessary public methods outside of your library and become frustrated with attempting to write unit tests for your code? You then begin to question your decisions about which method(s) should be `public` and which methods should be `private`. Additionally, you start to wonder if 100% code coverage is truly necessary. I mean, 75% of code coverage isn't really that bad, is it? It's better than 10%, right?

If you scour the web for suggestions, there's a number of less-than-optimal solutions for this problem. First, I'd like to cover some of these solutions and why they are less than ideal. Second, I'll provide some production code that contains a private method along with how to successfully achieve 100% coverage with unit tests. The examples provided are in Node.js.

Read more

nslookup Against Azure DNS Returns "No Response from Server"

When attempting to use nslookup to query DNS zones hosted in Azure, you may receive the error message No response from server. This reason for this is because the request defaults to Azure DNS over IPv6 while your local network only supports IPv4.

Let's look at an example.

Read more

Adding Font Awesome to ASP.NET Core Angular 2 Applications in Visual Studio 2017

If you're using Visual Studio 2017's SPA templates for Angular, no doubt you've wanted to add third-party libraries such as Font Awesome.  You could reference these dependencies in the index.html, but it would be better for performance if they were included in the webpack bundle.  If you've never worked with webpack before, this could initially be a little confusing.  But, don't worry as it's actually pretty simple.

Read more

Angular2+ SafeUrl Pipe

Instead of adding a function to the JavaScript of each of your components to properly display HTML links, use an Angular2 pipe.

Create a pipe service called safe-url.pipe.ts and add the following:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

  name: 'safeUrl'
export class SafeUrlPipe implements PipeTransform {
  constructor(private domSanitizer: DomSanitizer) {}
  transform(url) {
    return this.domSanitizer.bypassSecurityTrustResourceUrl(url);

Next, inject the pipe service in your app.module.ts:

import { SafeUrlPipe } from './pipes/safe-url.pipe'; //make sure your safe-url.pipe.ts file path is matching.

And, in your Angular module declarations section:

@NgModule({ declarations: [SafeUrlPipe],...});

Now, to use in your view:

    <span>Skype: <a [href]="'sip:<johndoe@contoso.com>' | safeUrl">johndoe@contoso.com</a></span>