Unit Testing Slideshow Changes

[ericjames]

It seems like you cannot really unit test the slideshow changes, is that because jQuery runs the actual slideshow (changing the .slick-slide classes, css, and such?).

describe('My Slick directive:', function() {
    var $compile,
        $timeout,
        elem,
        scope,
        directive;

    // Load the template
    beforeEach(module('myApp', 'slickCarousel'));

    beforeEach(inject(function(_$rootScope_, _$compile_, _$timeout_) {
        var html = '<mydir><slick settings="{autoplaySpeed:9000}"><div ng-repeat="message in messages">{{message.text}}</div></slick></mydir>';

        directive = angular.element(html);

        $rootScope = _$rootScope_;
        scope = $rootScope.$new();
        $compile = _$compile_;
        $timeout = _$timeout_; // Timeout flush required to initialize Slick library

        scope.block = {
            messages: [{
                text: 'First message'
            }, {
                text: 'Second message'
            }]
        };
    }));

    it('Shows slideshow with two slides', function() {
        elem = $compile(directive)(scope);
        scope.$digest();
        $timeout.flush();

        expect(elem.find('.slick-current').text()).toContain('First message');

        $timeout.flush(9000);

        expect(elem.find('.slick-current').text()).toContain('Second message');

    });

});