Software Development 101: Validate your assumptions

In my last assignment, I was asked to mentor a software development team as part of the Dojo program. I am not a big believer in Training initiatives, but because Dojo program has a different format I decided to take up the assignment. The Dojo program involves working on a real project with the team, helping them embrace good software development practices, solving team’s real problems, and finally delivering a quality software. In this post, I want to talk about a lesson that I had shared with the team — the lesson which I named it as Validate your assumptions. Continue reading “Software Development 101: Validate your assumptions”

Using Spring Boot @SpyBean

Today, a colleague asked me to help him write a REST API integration test. We use Spring’s MockMvc API to test the REST API. The application uses MongoDB with Spring Data MongoDB. The application uses both MongoTemplate and Mongo based repositories for working with MongoDB. To make tests work independent of MongoDB, we mock Spring MongoDB repository interfaces.

Continue reading “Using Spring Boot @SpyBean”

Caitie McCaffrey Talk: The Verification of a Distributed System

This is a great video that explains importance of developer testing in writing robust distributed system. She talked about unit testing, integration testing, and verification language that can be used to verify a system. Unit testing is the first thing a developer can do to make sure distributed system is correct. She shared a number of anecdotes in the talk that make this talk easy to understand.

Implementing file save functionality with Angular 4

Today, I faced a requirement where I need to implement file save functionality in an Angular 4 application. In this quick post, I will show you how to implement this functionality in Angular 4 using FileSaver.js module.

Continue reading “Implementing file save functionality with Angular 4”

Unit testing ngModel in Angular 4

Angular 4 is a good choice for building modern web applications. It comes bundled with Test utilities that makes it easy to write good quality test cases quite easily. Angular official testing guide does a good job explaining how to get started with testing Angular components. One thing that it does not cover is how to test components that use two way data binding using ngModel directive. Last week I had to write test case for a component that uses data binding so I end up learning a lot about testing such components. In this blog, I will share my learnings with you.

Continue reading “Unit testing ngModel in Angular 4”

Angular 4: Use of base-href and deploy-url build options

I use Angular 4 at work for building a single page application. Today, I faced the problem where I had to use different base paths for router and static assets. Angular makes use of the base href to tell router how to compose navigation URLs. If your application exists at the root, then you can use / as the href value as shown below.

<base href="/">

I wanted to use /users as my application base for router and /public as base for my assets.

If you build the project the Angular project for the production environment using the default values you will get the following index.html generated.

$ ng build -prod
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SampleNgApp</title>
  <base href="/">
 
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="styles.xxxx.bundle.css" rel="stylesheet"/></head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

This generated page will not work as it router will use / as base for composing navigation URLs and static assets will be looked in the current directory.

To solve my problem, I used —-base-href and —-deploy-url options as shown below.

$ ng build -prod --base-href /users --deploy-url /public
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SampleNgApp</title>
  <base href="/users">
 
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="/public/styles.xxxx.bundle.css" rel="stylesheet"/></head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

This way I solved my problem.

You can also support me and my work by following me on https://twitter.com/shekhargulati. Thank you 💖