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

Git  Code

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: [
‘../../wwwroot/dist/vendor.js’,
‘./boot-tests.ts’
],

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:

one

  • 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:

oneFive

  • When run, these were the results:

two

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!

References:

  1. http://taco.visualstudio.com/en-us/docs/unit-test-03-basic-testing/
  2. https://stackoverflow.com/questions/42674832/task-runner-configuration-missing-in-visual-studio-2017
  3. https://marketplace.visualstudio.com/items?itemName=MadsKristensen.NPMTaskRunner
  4. https://stackoverflow.com/questions/46759546/using-the-new-visual-studio-2017-angular-template-how-do-i-add-jasmine-tests
  5. https://scotch.io/tutorials/angularjs-best-practices-directory-structure
  6. https://stackoverflow.com/questions/18542353/angularjs-folder-structure
  7. https://karma-runner.github.io/2.0/index.html
Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

w

Connecting to %s