What is the recommended approach for conducting in-memory integration testing of a directive?
For instance, if there is a directive with a button that changes color when clicked, would the following method be considered standard practice for a DOM integration test?
test-colour-button-directive.js
var ColourButtonDirective = require('../colour-button-directive');
describe('coloured button', function() {
var $compile, $rootScope;
beforeEach(inject(function($templateCache, $rootScope, $injector) {
// Is it appropriate to configure the module in the beforeEach block?
angular.module('test', [])
.directive('colourButton', ColourButtonDirective);
$templateCache.put('./colour-button.html');
$compile = $injector.get('$compile'); // Can $compile be injected directly?
}));
it('should change to red when clicked', function() {
//prepare
var dom, button;
dom = $compile(angular.element('<colour-button></colour-button>'))($rootScope); // Do I need to provide a scope to the link function invocation?
button = angular.element(dom.querySelector('button')); // Is there a more efficient way to access the button within the rendered DOM?
//execute
button.click();
//validate
expect(button.css('background-color')).toBe('red');
});
});
colour-button.html
<button ng-click='onClick'>My button</button>
colour-button-directive.js
return function ColourButtonDirective() {
return {
scope: {
onClick: function($event) {
$event.currentTarget.css('background-color', 'red');
}
},
restrict: 'E',
template: require('./colour-button.html'),
replace: true,
};
};