Setting Up Your Angular CLI App to Generate Code Coverage Reports Any Time Tests Are Run in a Workspace with Multiple Projects

-
I currently do development in an Angular CLI application that contains multiple library projects, and recently enabled code coverage reports to be generated automatically every time unit tests were run. This consisted of 4 steps:

  1. Turn on code coverage for each project.
  2. Exclude the libraries from coverage in projects that utilized them (each library has its own coverage).
  3. Set the output directory for each project's code coverage report to a sub-directory of the code coverage directory to avoid overwriting files for each report generated.
  4. Make additions to ignore the code coverage directory from source control.
Here's each of these steps in detail.

Step 1: Turn on code coverage for each project
In angular.json, go to the architect/test/options node for each project and add a property called codeCoverage if it's not already there. Set the value to true, as shown below:

"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/product-lib/src/test.ts",
"tsConfig": "projects/product-lib/tsconfig.spec.json",
"karmaConfig": "projects/product-lib/karma.conf.js",
"codeCoverage": true

Step 2: Exclude utilized libraries from coverage
If you have a project that is utilizing library projects also contained within the workspace, you'll want to exclude them from the code coverage analysis of the projects that make use of them (but make sure they have their own code coverage report). Not only will this prevent extra, unnecessary analysis, it will also most likely prevent a "RangeError: Maximum call stack size exceeded" error from Karma. You can exclude any library projects using the codeCoverageExclude property. Below is an example where I exclude all of the library projects from my main app's code coverage:

"codeCoverage": true,
"codeCoverageExclude": [
"dist/org-angular-core/**/*",
"dist/attestation-lib/**/*",
"dist/product-lib/**/*",
"dist/profile-lib/**/*",
"dist/program-lib/**/*"
]

Step 3: Set the output directory for each project's code coverage report to a sub-directory of the code coverage directory
By default, all code coverage reports are generated in the coverage directory at the root of your workspace. By changing the settings in karma.conf.js, you can specify a different location. I chose to generate each report in a sub-directory of the coverage directory. In the example below, profile-lib is the name of the sub-directory I'll be placing the profile-lib library's code coverage reports into:

coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../../coverage/profile-lib'),
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true
}

Step 4: Tell source control to ignore your coverage folder(s)
By placing the individual projects' code coverage reports into sub-directories of the main coverage directory, you can easily tell source control to ignore all of them. Here's how I did it in our .gitignore file:

# Code coverage report folder
coverage/

Easy.

I hope this helps someone!





Comments

Post a Comment

Popular Posts

Resolving the "n timer(s) still in the queue" Error In Angular Unit Tests

-
A few months ago one of the developers I work with ran into the below error in an Angular unit test: 1 timer(s) still in the queue The fix was to specify a particular amount of time in the tick() call as shown below: it( 'should set accountConfirmationDetails when getAccountConfirmationDetails is called' , fakeAsync(() => {          // Arrange          let  spyGetAccountConfirmationDetails = spyOn(accountService,  'getAccountConfirmationDetails' )         .and         .returnValue(Promise.resolve(AccountMockData.mockAccountConfirmationDetails));                    // Act         fixture.detectChanges();         tick(15000);          // Assert         expect(spyGetPaymentConfirmationDetails).toHaveBeenCalled();           expect(comp.zone).toBe(42);           expect(comp.hasValidProfile).toBeTruthy(); })); Hoping this helps someone!
Read more

Silent Renew and the "login_required" Error When Using oidc-client

-
I recently implemented the Silent Renew functionality of oidc-client in an Angular application I work on, and was getting reports that the users' tokens were still expiring. This made no sense to me as I'd verified the code was working during development, but yesterday I found the problem and am hoping it will save someone some time. The error we were getting back was "Error from signinSilent: login_required". This indicates that the user's session is no longer active on IdentityServer and they must re-authenticate -- which, of course, is what we're trying to prevent by using Silent Renew. In our case, the problem wasn't with the Silent Renew functionality, but rather the user's session was expired. The reason why  it was expired was because, for some reason, we were setting the session length to 15 minutes instead of the default 10 hours . What was occurring was that Silent Renew was attempting to renew a token after 55 minutes (60 minutes expirat
Read more

How to Get Norton Security Suite Firewall to Allow Remote Desktop Connections in Windows

-
Image
I ran into an issue recently with RDP connections being blocked by the firewall in Norton Security Suite. I checked the traffic rules under Settings > Firewall > Traffic Rules  and found that it was enabled by default (and couldn't be edited): But during further research, I found  this page  on Norton's support site which discusses the different trust levels of networks and mentions that, for the Public trust level, "This setting also blocks remote desktop connections by default.". I checked my network's trust level, and sure enough, it was set to Public (I'm not sure how/why). (Sidebar: Notice in the screenshot above that allowing Remote Desktop for Public Networks is defaulted to Allow , though that rule is not active). Here's what my network trust level looks like now after changing the setting to Private (accessible under Settings > Firewall > General Settings > Network Trust ): After changing the network trust level t
Read more

Fixing the "Please add a @Pipe/@Directive/@Component annotation" Error In An Angular App After Upgrading to webpack 4

-
I'm currently in the process of upgrading an Angular application which does not  use the Angular CLI from webpack 2 to webpack 4. The incremental upgrade from webpack 2 to 3 was easy, but once I made the jump from 3 to 4, I encountered a lot of problems. I went through them one by one, but the one that had me stumped was the following: Unhandled Promise rejection: Unexpected value 'MakePositivePipe' declared by the module 'SharedModule'. Please add a @Pipe/@Directive/@Component annotation. ; Zone: <root> ; Task: null ; Value: Error: Unexpected value 'MakePositivePipe' declared by the module 'SharedModule'. Please add a @Pipe/@Directive/@Component annotation. The code was transpiling/compiling fine, but this error was occurring when I'd navigate to a page containing this pipe. This code has worked fine under webpack 2 and 3. I made sure that the pipe was being set up as a declaration , which it was. What finally  corrected the issue for me w
Read more

How to Determine if a Column Exists in a DataReader

-
I recently had to work on something which required me to query a database, open the results in a DataReader, and check for the existence of a particular column. While the DataReader doesn't have a method to do this, with just a few steps I was able to accomplish this task. Here's how. First, the DataReader has a method named GetSchemaTable() , which returns a DataTable consisting of information regarding the data contained in the DataReader. The first column in this DataTable is named ColumnName , and its value is (obviously) the name of the column. Knowing this, we can loop through the rows in the DataTable, checking the ColumnName column for a value that equals the name of the column we're looking for. To this end, I wrote a static method in one of my classes which takes the DataReader and the name of the column being sought: (C#) public static bool HasColumn(DbDataReader Reader, string ColumnName) {    foreach (DataRow row in Reader.GetSchemaTable().Rows)    {       
Read more