1

I'm writing some jasmine tests for an angular directive that shows a spinner. My directive looks like:

define([
    "app",
    "spin"
], function(
    app,
    Spinner
    ){
    'use strict';

    return app
        .directive('processing', function() {

            return {
                restrict:'E',
                transclude: false,
                scope: {
                    show: '=show',
                    message: '=message'
                },

                templateUrl: 'directives/spin/processing.html',
                link: function(scope, element, attrs) {
                    var spinner = new Spinner({
                        lines: 17, // The number of lines to draw
                        length: 40, // The length of each line
                        width: 10, // The line thickness
                        radius: 60, // The radius of the inner circle
                        corners: 1, // Corner roundness (0..1)
                        rotate: 0, // The rotation offset
                        direction: 1, // 1: clockwise, -1: counterclockwise
                        color: '#000', // #rgb or #rrggbb or array of colors
                        speed: 1, // Rounds per second
                        trail: 60, // Afterglow percentage
                        shadow: true, // Whether to render a shadow
                        hwaccel: false, // Whether to use hardware acceleration
                        className: 'spinner', // The CSS class to assign to the spinner
                        zIndex: 2e9, // The z-index (defaults to 2000000000)
                        top: 'auto', // Top position relative to parent in px
                        left: 'auto' // Left position relative to parent in px
                    }).spin();
                    var loadingContainer = element[0].querySelectorAll('.processing-spinner-container')[0];
                    loadingContainer.appendChild(spinner.el);

                }
            };


        });
});

and my template looks like this: <div><div ng-show="show" class="processing-spinner-container"></div></div>

Now, when I want to make a jasmine unit test, testing ng-show, I have something like this

           it('should be there when ngShow is true', inject(function($rootScope, $compile) {
                $scope = $rootScope.$new();
                $scope.show = true;
                var element = $compile('<processing>\</processing>')($scope);
                $scope.$apply();
                var spinnerContainer = element[0].querySelector('.processing-spinner-container');
                expect(spinnerContainer.classList.contains('ng-hide')).toBe(false);
            }));

however, this test fails. It still has the ng-hide class even though I've set the $scope.show to true.

1
  • 1
    Did you run the digest? $scope.digest();
    – SoEzPz
    Jan 14, 2015 at 20:12

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.