What is the idiomatic way to test an AngularJS directive?

What is the idiomatic way to perform in-memory integration testing of a directive?

For example, say I have a directive that contains a button that when clicked changes color, would the following be idiomatic for a DOM integration test?

colored-button-directive-spec.js

var ColoredButtonDirective = require('../colored-button-directive');

describe('colored button', function() {

    var $compile, $rootScope;

    beforeEach(inject(function($templateCache, $rootScope, $injector) {
      // Should configuration of the module be located in the beforeEach?   
      angular.module('test', [])
            .directive('coloredButton', ColoredButtonDirective);
        $templateCache.put('./colored-button.html');            
        $compile = $injector.get('$compile'); // Can I have $compile injected instead?
    }));

    it('should turn red when clicked', function() {
        //arrange
        var dom, button;
        dom = $compile(angular.element('<my-directive></my-directive>'))($rootScope); // Must I inject a scope to the invocation of the link function?
        button = angular.element(dom.querySelector('button')); // Is there a better way of getting the button inside the rendered DOM?

        //act
        button.click();

        //assert
        expect(button.css('background-color')).toBe('red');
    });

});

colored-button.html

<button ng-click='onClick'>My button</button>

colored-button-directive.js

return function ColoredButtonDirective() {
    return {
        scope: {
            onClick: function($event) {
                $event.currentTarget.css('background-color', 'red');
            }
        },
        restrict: 'E',
        template: require('./colored-button.html'),
        replace: true,
    };
};