Problems Unit Testing ES6 Angular Directive ControllerAs with Karma/Jasmine - angularjs

Question

I am in the process of writing some unit tests following the conventions in this blog post but I am having trouble accessing my directive's controller functions. I have a directive written with ES6 classes for the directive and the controller. I am using controllerAs to bind my controller class to my directive class. The directive I am trying to write unit tests for looks like so:
// Why is this file included? | Refer to : http://www.michaelbromley.co.uk/blog/350/exploring-es6-classes-in-angularjs-1-x#_section-directives
import directiveFactory from '../../../directivefactory.js';
// ##Directive Definition
class sideNav {
constructor() {
this.template =
`
<!-- SIDENAV -->
<!-- hamburger menu toggle visible when the sidenav menu is toggled shut -->
<span class="glyphicon glyphicon-menu-hamburger side-nav-hamburger dark-hamburger" set-class-when-at-top="fix-to-top" ng-click='vm.test(); vm.toggle();'></span>
<!-- wraps all sidenav menu content -->
<div ng-class='{ show: vm.open }' class="collapsible">
<!-- hamburger menu toggle visible when the sidenav menu is toggled open -->
<span class="glyphicon glyphicon-menu-hamburger side-nav-hamburger light-hamburger" ng-click='vm.test(); vm.toggle();'></span>
<!-- brand-image -->
<div class="side-nav-head" transclude-id="head"></div> <!-- component user content insertion point 1 -->
<!-- navigation links -->
<div class="side-nav-body" transclude-id="body"></div> <!-- component user content insertion point 2 -->
<!-- footer -->
<footer>
</footer>
</div><!-- end collapsible -->
<!-- END SIDENAV -->
`;
this.restrict = 'E';
this.scope = {};
this.bindToController = {
};
this.transclude = true;
this.controller = SideNavController;
this.controllerAs = 'vm';
}
// ###Optional Link Function
link (scope, elem, attrs, ctrl, transclude) {
transclude ((clone) => {
angular.forEach(clone, (cloneEl, value) => {
// If the cloned element has attributes...
if(cloneEl.attributes) {
// Get desired target ID...
var tId = cloneEl.attributes["transclude-to"].value;
// Then find target element with that ID...
var target = elem.find('[transclude-id="' + tId + '"]');
// Append the element to the target
target.append(cloneEl);
}
});
});
}
}
// ###Directive Controller
class SideNavController {
constructor($rootScope) {
this.$rootScope = $rootScope;
// Initiate the menu as closed
this.open = false;
// Upon instantiation setup necessary $rootScope listeners
this.listen();
}
// ####listen()
// *function*
// Setup directive listeners on the $rootScope
listen () {
// Receives an event from the ng-click within the directive template
// for the side-nav-item component
this.$rootScope.$on('navigation-complete', (event) => {
// Upon receiving event, toggle the menu to closed
this.toggle();
});
}
// ####toggle()
// *function*
// Toggle menu open or shut
toggle() {
this.open = !this.open;
}
// ####test()
// *function*
test() { // DEBUG
console.log('tester'); // DEBUG
console.log(this.visible); // DEBUG
console.log(this.open); // DEBUG
}
}
SideNavController.$inject = ['$rootScope'];
export default ['sideNav', directiveFactory(sideNav)];
I take this file and import it along with one other directive component to create a module like this:
import { default as sideNav } from './side-nav/side-nav.js';
import { default as sideNavItem } from './side-nav-item/side-nav-item.js';
let moduleName = 'sideNav';
let module = angular.module(moduleName, [])
// #### Sidebar Nav Components
.directive(...sideNav)
.directive(...sideNavItem);
export default moduleName;
In my unit test I try to mock the controller in beforeEach but no matter if I use the controller name as vm or SideNavController (the former being the controllerAs name and the latter being the actual class name—not truly sure which is the one I want) I still receive the error: Error: [ng:areq] Argument 'vm/SideNavController' is not a function, got undefined.
This is my unit test:
describe('Side Nav Directive', () => {
let elem, scope, ctrl;
// Mock our side-nav directive
beforeEach(angular.mock.module('sideNav'));
beforeEach(angular.mock.inject(($rootScope, $compile, $controller) => {
// Define the directive markup to test with
elem = angular.element(
`
<div>
<!-- side-nav directive component -->
<side-nav>
<!-- content insertion point 1 -->
<div transclude-to="head">
<img src alt="test_image">
</div>
<!-- content insertion point 2 -->
<div transclude-to="body">
Test Link
</div>
</side-nav>
</div>
`
);
scope = $rootScope.$new();
$compile(elem)(scope);
scope.$digest();
ctrl = $controller('vm', scope);
}));
it("should toggle shut when angular view navigation completes", () => {
expect(ctrl).toBeDefined(); // <----- this errors
});
});
I am truly stumped after referring to many tutorials and blog posts and could really use some insight!

Answer 1

I would actually suggest a slightly different approach to the testing. If the goal is to test the the logic in SideNavController I would consider moving that class to it's own file. That way you can import it in both the directive and the test. Structuring it that way gives you a lot easier access to it since you can test it in complete isolation from the directive itself.
Testing this by compiling markup and creating the entire directive basically turns this into an integration test and is a bit more complex to manage.
In general I find that this makes for more maintainable and useful tests - especially if the goal is to test the controller.
It would be similar to my example here: http://www.syntaxsuccess.com/viewarticle/writing-jasmine-unit-tests-in-es6

Answer 2

The solution I implemented is based on the response TGH made to my original question. I now have the controller class stored in a separate file, which creates a separation of concerns between the directive transclusion functionality and the directive controller functionality. The directive controller file looks like this:
const ROOTSCOPE = new WeakMap();
// ###Directive Controller
class SideNavController {
constructor($rootScope) {
ROOTSCOPE.set(this, $rootScope);
// Initiate the menu as closed
this.open = false;
// Upon instantiation setup necessary $rootScope listeners
this.listen();
}
// ####listen()
// *function*
// Setup directive listeners on the $rootScope
listen () {
// Receives an event from the ng-click within the directive template
// for the side-nav-item component
ROOTSCOPE.get(this).$on('navigation-complete', (event) => {
// Upon receiving event, toggle the menu to closed
this.toggle();
});
}
// ####toggle()
// *function*
// Toggle menu open or shut
toggle() {
this.open = !this.open;
}
}
SideNavController.$inject = ['$rootScope'];
export default SideNavController;
The test file imports the class from the appropriate file and mocks the controller for the test in a beforeEach block. The controller's variables and functions are all available:
// Import the controller to be tested
import SideNavController from './SideNavController.js';
describe('SideNavController', () => {
let $rootScope, vm;
beforeEach(angular.mock.inject((_$rootScope_, _$controller_) => {
$rootScope = _$rootScope_.$new();
vm = _$controller_(SideNavController, {} );
}));
it('should be initialize the open variable to false', () => {
expect(vm.open).toBeDefined();
expect(vm.open).toBeFalsy();
});
it('should listen for a navigation event and call the toggle function when the event is caught', () => {
// Create Jasmine spy to watch toggle function
spyOn(vm, 'toggle');
// Simulate navigation event propagation
$rootScope.$emit('navigation-complete');
expect(vm.toggle).toHaveBeenCalled();
});
});