How To Level Up Your Angular Unit Testing Game (2/3)

How To Level Up Your Angular Unit Testing Game (2/3)

<em>This is the second post in the series about Angular unit testing. If you are unfamiliar with using Angular CLI, please read the first post in the series.</em>

This is the second post in the series about Angular unit testing. If you are unfamiliar with using Angular CLI, please read the first post in the series.

In the previous post, we learned how to pass parameters into Angular CLI to run unit tests. In this post, we'll dive into Karma configuration and make the test runner more snazzy by configuring it for our unique needs. It's time to level up your testing game and get pumped up to unit test!

Follow Along

We're using Angular CLI to test the application and using code from a previous post I wrote.

You can clone the tutorial-angular-httpclient and run tests too. All the level ups discussed in the posts are found in "test-configuration" branch.

Karma Configuration

In your Angular app, find $/src/karma.config.js. This is the config file Karma uses to run tests. Let's start editing it!

Reporters

Out of the box, Angular CLI enables 'progress' and 'kjhtml' reporters. In v7 and v5, you can configure reporters via commandline but sadly, that option was removed in v6. We can still make changes via the config file for v6 though!

If you are using Angular v5 or v7, pass in a comma separated list of reporters using the reporters flag.

To change karma.config.js, in the reporters array, remove 'progress' and replace it with 'dots'. Now when you run tests, the output to the console uses the dot reporter instead of the progress reporter.

Add A New Reporter

But our test output could be way better. It's nothing to write home about yet. Let's try adding a reporter.

Add the 'karma-spec-reporter' npm package

npm install karma-spec-reporter --save-dev

Require the reporter in karma.conf.js by adding the require statement to the plugins array

plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma'),
      require('karma-spec-reporter')
    ],

Add to the reporters array

reporters: ['kjhtml', 'spec']

Now when you run tests, you'll see an output like this

There's all sorts of reporters available for Karma. If you want unit test output available in your CI environment, you can add a reporter for JUnit output and configure Jenkins to consume JUnit reports as an example. If you need some more flair in your life, add the nyan cat progress reporter.

Code Coverage

Now that you know how to run tests and set it up to get the output format you like, it's time to measure coverage.

Keep in mind test coverage metrics can't determine if an application is working as intended or if the tests you have are "good" by testing the important things.

Angular CLI automatically adds and configures Istanbul as a coverage reporter. In karma.conf.js there's a section for coverageIstanbulReporter and it's already set up to generate reports. Prior to v7 of Angular, it only had 'html' and 'lcov' enabled out of the box. Add 'text-summary' to the array if it's not already there.

Run test with the coverage flag enabled. In v6, use --code-coverage.

ng test --watch false --browsers ChromeHeadless --codeCoverage

Now you have nice output in the console for coverage summary.

Running coverage with 'html' report creates a visual overview of coverage in html format. You can view coverage results for the entire app broken down per file.

And step into coverage report for a single file and see the number of times each line of code was executed.

Add native report formats such as 'text', 'json', 'Cobertura', 'TeamCity', or use the 'lcov' report as part of your CI process so you can show test coverage trend lines per build.

Maintaining Thresholds

If you want to ensure a certain level of coverage, you can configure coverageIstanbulReporter object in karma.conf.js to add thresholds.

To the thresholds object, fill in keys for statements, lines, branches, and functions.

coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../coverage'),
      reports: ['html', 'lcovonly', 'text-summary'],
      fixWebpackSourcePaths: true,
      thresholds: {
            statements: 80,
            lines: 80,
            branches: 80,
            functions
      }
    },

Now when you run tests with code coverage, your tests will complete with failure if your project doesn't meet the thresholds of coverage.

Setting Up angular.json For Defaults

Sure, we can create npm scripts to wrap all the parameters we send in while running unit tests, but there's cases where we always want a certain configuration set. An example might be code coverage. Despite watch or browsers configurations, we always want to run coverage. We can set that up in angular.json.

In $/angular.json file, find the configuration for "test". It has an "options" property. Add a new property for "codeCoverage" and set the value to true.

You can set more properties than just coverage. All parameters that you pass in to Angular CLI can be configured. Check out the schema for angular.json for more details.


By :  Alisa


angular game-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

ludo game development.ludo game development company.ludo king game app development

We are here to bridge your dreams to reality by offering you the best ludo game development. Our Ludo game software development is the best option to choose if you want to launch a game like ludo king in a short time.

Rummy Game Software Development

Rummy Game Software Development- Mobiweb Technologies is India's leading Rummy Game Software provider company having expertise in providing Rummy website and app development solutions.

Card Game Development

Card Game Development Solutions-Mobiweb is an expert Card Game App and Software development company having expertise in design and development of all type of card games.

Rummy Game Development

Rummy Game Software Development- Mobiweb Technologies is India's leading Rummy Game Software provider company having expertise in providing Rummy website and app development solutions.

Card Game App Development

Card Game Development Solutions-Mobiweb is an expert Card Game App and Software development company having expertise in design and development of all type of card games.