Skip to content
This repository was archived by the owner on Jun 14, 2018. It is now read-only.

Latest commit

 

History

History
72 lines (47 loc) · 4.12 KB

TESTING.md

File metadata and controls

72 lines (47 loc) · 4.12 KB

Testing the Library

This describes the guidelines developer should follow to run & create tests.

  • All code must have valid, passing unit tests
  • All code should have 100% test coverage or good reasons why it doesn't meet 100% coverage

Testing Overview

  • Jasmine is used as the test framework for this project.
  • Karma is used as the test runner for all Angular unit tests.
  • Protractor is used for as the test runner for all Angular end-to-end (E2E) tests.

Run all tests using the provided gulp task test:

$ gulp test

This includes two Karma reporters:

  • progress: This writes a summary of the test results & details for any failing tests.
  • coverage. This is used to create the code coverage reports with Istanbul.

To view each test that's run, use the --specs argument:

$ gulp test --specs

This will replace the progress reporter with the spec reporter and write each test & outcome to the console.

$ gulp test --watch

This will setup watcher and open Chrome for convenient debugging.

Using jQuery in tests

We are not relying on jQuery in our library, that's why all elements in directives are wrapped in jqLite object and not jQuery. jqLite has limited functionality in comparison to jQuery and we made it possible to use jQuery and jasmine-jquery library in your specs. In Karma jQuery loaded after angular.js and is accessible from your code. For easier DOM manipulation and assertions you can wrap element in jQuery object manually:

let $element = $compile('<your directive>')($scope);// <<---- $element is jqLite instance
$element = jQuery($element[0]);// <<---- $element is jQuery instance

manipulate your jQuery object:

let child = $element.find('div.child');// <<--- works with jQuery, not works with jqLite
expect(child).toHaveClass('active');// <<---- jasmine-jquery assertion

Note on using mouse events with jQuery in your specs: for handling mouse events from jQuery object we included a special fix for PhantomJS browser, because it has an issue with raising this events. If you are experiencing a problem with raising event from jQuery object, you still can use native angular's jqLite event trigger, i.e. $element.triggerHandler('click').

Test Validation

When PR's are submitted, all tests must pass before they will be reviewed. This is done automatically using CircleCI. Once a PR is submitted, CircleCI kicks in and automatically runs all tests for the specified platforms. If there are any failures, you should address them and commit changes to your PR until your tests pass.

Code Coverage

Any new or changed code should be adequately covered by unit tests. Like tests this is run automatically when a PR is submitted using Coveralls. Any PR's that lower the code coverage % with new code submission will be scrutinized before being merged. Depending on the reason for the drop in code coverage %, the PR may be rejected or the submitter may be requested to address it with more tests.

Coverage reports are also generated every time tests are run locally. To view a code coverage report, after running tests, open the code coverage report found in /coverage/lcov-report/index.html in a browser.

You can also view the code coverage reports within the CircleCI builds by inspecting the build artifacts for a particular build. Click on the Artifacts tab to find the code coverage reports generated by Istanbul when tests are run.

WallabyJS

This is simply an addition to the project... you are not required to have WallabyJS installed to test or build for this project. WallabyJS is a productivity tool and we've added support for it if you have purchased a WallabyJS license.

To use Wallaby in this project, first you must install the plugin for your editor/IDE. Then compile all project build related TypeScript: npm run build:ts. Now configure Wallaby to use the config file for this project: wallaby.config.js.

See the Wallaby.js site for more details: https://wallabyjs.com.