I am in the process of writing some unit tests 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://ift.tt/1UPvjdf
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 page-header 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">
<a href="#">Test Link</a>
</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
//spyOn(vm, 'toggle');
//let innerToggle = elem.find('.dark-hamburger');
//innerToggle.eq(0).click();
//scope.$emit('navigation-complete');
//expect(ctrl.toggle).toHaveBeenCalled();
//let menu = elem.find('.collapsible')
//expect(angular.element(menu).hasClass('show')).toBeFalsy();
});
});
I am truly stumped after referring to many tutorials and blog posts and could really use some insight!
Aucun commentaire:
Enregistrer un commentaire