samedi 11 juillet 2015

Unit Testing ES6 Angular Directives with Karma/Jasmine

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