TGIMBA .NET Core Upgrade – Part 5 – Understanding Basic Angular Unit Testing In Preparation for adding TGIMBA User Interface

NOTICE: The TGIMBA git hub repository has been corrupted and I had to start over.  The link to the repository is here -> Git  Code Commit

Welcome back! This post will deal with getting the basic Tgimba angular tests running.

So, I set out to run them via the gulp task runner. But since they are client side (coming from a Node JavaScript npm test perspective), this didn’t work as I expected…or at least I have figured out how to do that yet. According to reference #1, this should be possible. All of my Node JavaScript tests run when I run the command npm test (assuming that I set up that package.json command correctly). I will revisit this because I would like to run them from within VS 2017 like the Application Programmatic Interface (API) and Data Access Layer (DAL) tests.

After some more research, I stumbled upon reference #4 which showed me how to run them from the command line. If I cd into the same directory as the website (i.e. .csproj file directory), I can run the tests using something called karma. Reading up on it (reference #7), I discovered it is a test runner.  Following these steps listed on reference’s #4 stackoverflow entry (I love this site), I was able to run the tests that came with the template:

-npm i -g karma
-npm i -g webpack
-npm install -g karma-cli
-karma start .\ClientApp\test\karma.conf.js
This command fires up chrome and runs the 2 tests in the /ClientApp directory. If you look in /test/karma.conf.js, there is a call to boot-tests.ts looking for tests:

files: [

boot-test.ts contains this line which looks for any spec.ts files in all directories (recursively I believe) one level up and runs them:

// Then we find all the tests
const context = require.context(‘../’, true, /\.spec\.ts$/);

  • This is the initial result when I ran the test command:


  • I then wanted to see if I could add a failing test and the framework caught it (automatically…much like nodemon) which was nice. The test I added had a failure and success line:


  • When run, these were the results:


Ok, now that I can run tests, I need to figure out the best way to add all my views. Normally, I would add them all to a view directory (perhaps grouped by sub-directories if needed). However, given that I am new to Angular and it seems like it practices a domain design type structure (i.e. each directory contains the Hyper Text Markup Language (HTML) view, Cascading Style Sheets (CSS) file, data adapater/controller and tests), I am not sure my first thought is best. So, I started reading. In reference #5, Adu Kukic describes some best practices. I saw his first directory structure and I said “Yes!’ that makes sense. Reading further, I discovered that doesn’t work here (or is harder for larger apps). His second structure was more in line with the sample app given with the .NET Core 2 Angular template. Reference #6 has some other suggestions (one similar to Mr. Kukic’s article), so I am going to use the feature or domain approach.

That will be the focus of the next blog post.

Stay tuned!



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s