Helper for easier directive compiling
Small function to ease testing Angular 1.x directives.
Usually you would have to set up directive compiler, give it a template, manage its attributes, parent or isolate scopes. This helper abstracts these things so you can focus on tests.
Installing
- install through
npm
$ npm install ng-directive-compiler-helper --save-dev
- include in test runner:
if using karma as test runner, make sure the following is in karma.conf.js
:
files: 'node_modules/ng-directive-compiler-helper/lib/ng-directive-compiler-helper.js'
Quick reference
After including this package you will be able to use a global createCompiler
function. It requires directive template, $rootScope
and $compile
services:
compile = createCompiler(templateString, $rootScope, $compile)
compile
is now a function which can be used in two ways:
- using callbackFn which is called after directive is compiled. callbackFn is passed with scope and element arguments
* `compile(callbackFn)`;
* `compile(parentScopeObject, callbackFn)`;
* `compile(parentScopeObject, elementAttributesObject, callbackFn)`;
most simple usage:
```js
compile((scope, element) => {
expect(scope).toBeDefined();
expect(element).toBeDefined();
});
```
- using returned object which contains
scope
andelement
properties:
* `let compiled = compile()`;
* `let compiled = compile(parrentScopeObject)`;
* `let compiled = compile(parrentScopeObject, elementAttributesObject)`;
most simple usage:
```js
expect(compile().scope).toBeDefined();
expect(compile().element).toBeDefined();
```
More usage examples:
- setup compiler first using
createCompiler
:
let myDirectiveTemplate = '<my-directive></my-directive>';let compile; ;
- use created compiler in tests:
;
// adjust parent scope;
// adjust directive element attributes;
- working with isolate scope directives:
;
- working with drivers
// 1. define driverlet driver = e; // e - reference to element, passed if no other arguments given, parentchildren; { return this$children; } // this.$ - also reference to element; // 2. hook driver when creating compiler (as last argument)let compile = ; // 3. use in tests;
testing like this should be cool because:
- driver can be reused for multiple tests, drying up the test suite
- no need to repeat selectors everywhere
- other more complicated logic can be reused (e.g. do some component setup for assertions)
Few notes about drivers
-
if driver method is called without arguments, it automatically gets element reference (but ONLY if there are no arguments given):
Note: the following examples assume you have
let compile = createCompiler
setup with driver.let driver =e; -
if driver method is called with arguments, element reference is available through
this.$
:let driver ={return this$;};;
More examples
i use this helper thing to test one of mine angular projects, you can check here: argshook/orodarius
Contributing
Please provide tests for pull requests.
Testing with karma:
- single run
npm run test
- watch tests
npm run test:watch