karma-telemetry
Adapter for running the Chromium Telemetry performance benchmarks for Karma.
About
This plugin runs with Karma and is ideal for testing the rendering performance of components in frameworks. It reports various rendering metrics like first paint time, mean frame time, load time, etc. It can be integrated with continuous integration systems to ensure that the performance of components do not degrade over time.
Usage Example
It can be used for Topcoat components to generate graphs like these. When expensive styles with blur or gradients are added, the performance of components may suffer and this plugin could be used to catch them.
Try it out now !
- Clone this project
- Run
npm install
- Run
grunt test
(orkarma start
, if you have karma installed). - You should see browsers open and a gradient-circle scroll.
- Once the browsers close, open
test-results.xml
(or thetest-results
folder) to see the various rendering performance metrics that were recorded.
Installation
The easiest way is to keep karma-qunit
as a devDependency in your package.json
.
You can simple do it by:
npm install karma-telemetry --save-dev
Since this is a Karma framework, you would need to use the Karma testing framework.
Configuration
Following code shows the default configuration.
// karma.conf.jsmodule { config;};
In case of using Firefox on saucelabs, remember to install the firefox profile generator using npm install axemclion/firefox-profile-js
. You can look at the project's karma.conf.js for a full configuration
Writing tests
Note that Karma adds all the Javascript test files into a single HTML file for testing. It is ideal to test one component at a time and hence it may be better to dynamically generate a karma configuration for each test case. In case of grunt, look at the defination of the test task in Gruntfile.js
.
The test case should append the component to the document body sufficient number of times to allow the page to scroll. Look at test/test.js
for an example.