Welcome back! This post will deal with getting the basic Tgimba angular tests running.
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:
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.