Test Driven Development (TDD) with Angular 5, Jasmine and Karma using @angular/cli

In my previous posts, I’ve talked about unit testing AngularJS controllers. The idea was just to unit test the code we have already written. But that’s not the ideal way we should write new functional code, isn’t it?

It should be other way round. Ideally, the development of the code/component should be test driven. What does that really mean is, ideally, we should start writing the unit test case first, let the test fail, write the code as per test case’s expectations and then let the test pass.

There is much content available online for the people who know AngularJS and want to learn Angular 2+, one of the good example is a toptal blog post I came across: Get Your Angular 2 On: Upgrading from 1.5 . However, not a quite good posts available to learn TDD approach for this technology. This post talk about how to do so. Keep in mind that there is a slight paradigm shift needed for TDD so its okay if you think you are not able to digest the steps at the very first attempt, after 2 – 3 try, I’m sure you are going to start liking this. So let’s jump in! 🙂

Below are the steps to follow while doing TDD (reference: wikipedia)

  1. Add a test
  2. Run all tests and see if the new test fails
  3. Write the code
  4. Run tests
  5. Refactor code

We are going to follow the same for Angular using amazing command line utilities provided by @angular/cli.

We are going to develop an angular 5 component which does addition/subtraction/multiplication. We will be having two properties for two operands and three methods to perform the operations respectively. For each operation, we will go through three basic different scenarios which fits most of the day to day code we write.

Prerequisites: You must be having below tools installed on your machine.

  1. NodeJS
  2. npm
  3. @angular/cli: version 1.7
  4. VSCode (not mandatory,  but the best if you use this)
  5. Basic understanding of Unit Testing in Angular with Jasmine would help.

So what are we waiting for? Let’s start!!!

Create new Angular application to begin. From your command prompt, type below command for that.

ng new ng5-tdd

This command will take awhile and create the basic application structure for you. Once this is done, open it using VSCode and start VSCode command prompt with Ctrl+`.

Create a new component as per below code snippet.

D:\ng5-tdd>ng g c calculator 
                           //g - generate, c - component
 create src/app/calculator/calculator.component.html (29 bytes)
 create src/app/calculator/calculator.component.spec.ts (656 bytes)
 create src/app/calculator/calculator.component.ts (285 bytes)
 create src/app/calculator/calculator.component.css (0 bytes)
 update src/app/app.module.ts (414 bytes)

Many files has got created. Now open calculator.component.spec.ts. Keep in mind that we are doing TDD here! 🙂

Now, let’s add below test case in this file.

After pasting the code your editor should have started screaming by now. 🙂 Yeah. It must. As we haven’t added the code yet. So go ahead and copy-paste-save below code in your calculator.component.ts.

Here, as you see, we have added the necessary properties and method for the addition operation. This was just a simple scenario – straight forward. In real life, the story is not that simple, isn’t it?

Usually, such functionalities (in our case, business logic) is either stays in Services, or it stays at sever.

So let’s go ahead and create a service to do some action.

D:\ng5-tdd>ng g service calculator/math
 create src/app/calculator/math.service.spec.ts (362 bytes)
 create src/app/calculator/math.service.ts (110 bytes)

Again, you must be getting errors, so go ahead and update the component code to make this test pass.

Here we have injected MathService as a dependency. You should have noticed that in the test case, 5 * 7 doesn’t equal to 500. But still we made the test pass. Why? The reason is, the component is simply assigning the return value to the result property. So in the test, we just need to make sure that the value returned by the service is getting assigned at the appropriate place. That’s it!

Now many times service gives asynchronous result. We are going to test that scenario next. Make changes as per below files suggest.

So after updating the files, you’ll see that all of your tests pass and you have done async programming with TDD.

Conclusion

TDD is a slight paradigm shift to start with. However, you’ll be used to it once you start doing it. And in the agile software development, it is the ideal way a developer should do the implementation.

dexter TDD

How do you like this post? Any thoughts, something you liked the most or anything you want to see improved? Feel free to share your thoughts in the comments below! I’ll be glad to know! See ya next time. Till then, happy TDDing 🙂

Advertisements

Top Live Online Utilities Every Software Developer Should Know

https://tio.run

TIO is a family of online interpreters for an ever-growing list of practical and recreational programming languages.

To use TIO, simply go to the site, pick a programming language, and start typing. Once you click the run button, your code is sent to a TIO arena, executed in a sandboxed environment, and the results are sent back to your browser. You can share your code by generating a client-side permalink that encodes code and input directly in the URL.

  • TIO hosts 96 practical and 172 recreational programming languages, for a total of 268 languages.
  • TIO listens: languages and features are added by request all the time. If you have a request or want to report a bug, use any of the contact options in the contact options listed below.
  • The TIO web app is free of charge, ad-free, and doesn’t use tracking cookies or third-party analytic scripts.
  • The software that powers TIO is open source (MIT) and can be found on tryitonline.github.io.
  • TIO works great on mobile devices.

http://plnkr.co

Plunker is an online community for creating, collaborating on and sharing your web development ideas.

  • Speed: Despite its complexity, the Plunker editor is designed to load in under 2 seconds.
  • Ease of use: Plunker’s features should just work and not require additional explanation.
  • Collaboration: From real-time collaboration to forking and commenting, Plunker seeks to encourage users to work together on their code.
  • Real-time code collaboration
  • Fully-featured, customizable syntax editor
  • Live previewing of code changes
  • As-you-type code linting
  • Forking, commenting and sharing of Plunks
  • Fully open-source on GitHub under the MIT license

https://jsbin.com

JS Bin is a tool for experimenting with web languages. In particular HTML, CSS and JavaScript, but JS Bin also supports other languages too (like Markdown, Jade and Sass).

JS Bin is ultimately a code sharing site. Along with the code, the complete output of the code is also shared with other developers, colleagues and/or students. As you type into one of the editor “panels”, you and anyone watching your bin will see the output being generated in real-time in the output panel.

https://codepen.io

CodePen is a place to write and share front-end code. Write HTML, CSS, and JavaScript and get a real-time preview. You can use CodePen to:

  • Show off the amazing things you build.
  • Learn new things by tinkering.
  • Build reduced test cases to report bugs and get help on tricky problems.
  • Try out new technologies for the first time.
  • Build components to later use elsewhere.

The possibilities are endless. Everything you do is saved on CodePen, so the more you use it the more useful it becomes.

http://jsfiddle.net

This is also one of the same kind of tool as same as JSBin.

Want to see the Google-search-popularity trends of these utilities??

Below chart shows you that. Click here if you want to see and analyse the Google trends!
jsfiddle-codepen-jsbin-popularity-comparision

http://sqlfiddle.com

A tool for easy online testing and sharing of database problems and their solutions.

If you do not know SQL or basic database concepts, this site is not going to be very useful to you. However, if you are a database developer, there are a few different use-cases of SQL Fiddle intended for you:

  • You want help with a tricky query, and you’d like to post a question to a Q/A site like StackOverflow.
  • You want to compare and contrast SQL statements in different database back-ends.
  • You do not have a particular database platform readily available, but you would like to see what a given query would look like in that environment.

https://dotnetfiddle.net

It has been developed by group .Net developers who are sick and tired of starting Visual Studio, creating new project and running it, just to test simple code or try out samples from other developers.

This tool was inspired by http://jsfiddle.net, which is just awesome.

Apart from the language and web technologies related tool, we also have some dedicated tools to create, test and share regular expression!

http://refiddle.com

– supports javascript, ruby, .Net

https://regex101.com

– supports php, javascript, python, golang

https://codebeautify.org

CodeBeautify is an online code beautifier which allows you to beautify your source code

Provides many utilities like JSON/XML/HTML/SQL formatter, validator, editor, minifier, etc…… and what not, just go there and explore!!! I have just told you the tip of the iceberg!

Dex_dexter_174x252_(1)Credits for the details go to the amazing creators of the tool themselves!! – I am just a person sharing the lights of this awesome utilities.

Have you recently come across any such online tool not mentioned over here? Do mention in the comments below! 🙂

Simplify your life with batch scripts

There are many ways your can simplify your regular day to day activities using windows/dos commands or shell scripts if you are using Linux. Here is the way you can start thinking about how you can do it!

Delete temporary files from your machine

Many times you want to delete the temporary files from your machine. So need to first of all go to the temporary files’ folder – ‘C:\Users\<UserName>\AppData\Local\Temp‘ (or just run –> %temp% –> enter; if you know it 🙂 ), select all files and then delete it.

Well, how about creating a batch script once, and just execute it whenever you want to do so, isn’t it a great idea?

Copy the below commands as a TempDelete.bat file, save it on your desktop (or wherever you you feel life saving it), and just double click on it whenever you want to clear your %temp% folder!

cd %temp%
del /s /q .
rmdir /s /q .

The first line opens up the DOS command prompt temporary files’ folder, the second command deletes all the files not in use currently and the third command removes all the child folders.

Just FYI, /q disables Yes/No prompting and /s optilon deletes the file(s) from all sub-directories.

Getting latest files from TFS version control system

If you are a developer, multiple people are working within your team and are doing code check-ins extensively, you must have to keep the local version of the code in sync with the version control system, right?

The people doing this regularly would be able to easily co-relate. If you are using Visual Studio, you need to reach to your project subfolder (and to reach at that folder too, you need to do multiple clicks, wait for folder to get updated with the child folders and files) and then right click, ‘get latest files’.

Well, there is a better way. Just create a batch file once, reach to the folder in the command prompt and get latest files using TF.exe command. When you are using Visaul Studio TFS GUI, the same commands are getting executed behind the scenes.

cd C:\path\to\mapped\folder\api
"<PathToIde>\TF.exe" get $/project/code/api/Main/ /recursive
cd C:\path\to\mapped\folder\web
"<PathToIde>\TF.exe" get $/project/code/web/Main/ /recursive

Copy the above commands and save it as a .bat file, update the <PathToIde> depending on the Visual Studio version you have installed and your OS.

For Windows 7-64 bit, Visual Studio version 10, its

%ProgramFiles(x86)%\Microsoft Visual Studio 10.0\Common7\IDE\TF.exe

Find out where TF.exe is located on your machine and update it.

The good thing is, if you are having a conflict between the source control version and the local version, this command also provides you a GUI to solve it!

resolove conflict - visual studio
Isn’t this great?!

 

Now just call this batch file from your command prompt, and get the latest version of files from all the project in single batch script. You’ll never know how much time and efforts you are saving by doing this unless you do this once or twice.

dexter happyAfter all, laziness is a blessing to motivate you for an innovative idea!!!

Do comment below what other things you have simplified after getting motivation from your laziness 🙂