added test

Author: Mark

LICENSE

@@ -1,6 +1,6 @@
 The MIT License
 
-Copyright (c) 2014 Karan Batra-Daitch http://bardo.io
+Copyright (c) 2015 Devmark https://github.com/devmark/angular-slick-carousel
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -37,8 +37,7 @@ as either a `<div>` attribute or a `<slick>` element.
     </slick>
 
     <slick 
-        settings="slickConfig"
-        data="number" ng-if="numberLoaded">
+        settings="slickConfig" ng-if="numberLoaded">
     </slick>
 ```
 
@@ -61,14 +60,13 @@ $scope.slickConfig = {
     }
 };
 ```
-`data`: object for ng-repeat data, discussed [below](#data) in detail
 
 ### Method ###
 1. All the functions in the plugin are exposed through a control
 attribute.
 2. To utilize this architecture, and have two-way data-binding,
 define an empty control handle on scope:
-  ```js
+```js
     $scope.slickConfig = {
         method: {}
     }
@@ -87,18 +85,18 @@ as shown in the example.
 ```
 
 ### Slide data ###
-For change slide content, you have to set `data` attribute AND `ng-if`
+For change slide content, you have to set `ng-if` to destroy and init it
 
 - controller:
 ```js
     $scope.number = [{label: 1}, {label: 2}, {label: 3}, {label: 4}, {label: 5}, {label: 6}, {label: 7}, {label: 8}];
     $scope.numberLoaded = true;
     $scope.numberUpdate = function(){
-        $scope.numberLoaded = false; //disable slick
+        $scope.numberLoaded = false; // disable slick
 
         //number update
 
-        $scope.numberLoaded = true; //enable slick
+        $scope.numberLoaded = true; // enable slick
     };
 ```
 - html:
@@ -107,7 +105,7 @@ For change slide content, you have to set `data` attribute AND `ng-if`
         <h3>{{ i.label }}</h3>
     </script>
 
-    <slick data="number" ng-if="numberLoaded">
+    <slick ng-if="numberLoaded">
         <div ng-repeat="i in number">
             <div class="" ng-include="'tpl.html'"></div>
         </div>

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-slick-carousel",
-  "version": "3.0.11",
+  "version": "3.1.0",
   "homepage": "https://github.com/devmark/angular-slick-carousel",
   "authors": [
     "DevMark <[email protected]>"

karma.conf.js

@@ -1,74 +1,48 @@
-'use strict';
+module.exports = function (config) {
+  config.set({
 
-var path = require('path');
-var conf = require('./gulp/conf');
+    // Base path, that will be used to resolve files and exclude
+    basePath: '',
 
-var _ = require('lodash');
-var wiredep = require('wiredep');
+    // Frameworks to use
+    frameworks: ['jasmine'],
 
-function listFiles() {
-  var wiredepOptions = _.extend({}, conf.wiredep, {
-    dependencies: true,
-    devDependencies: true
-  });
-
-  return wiredep(wiredepOptions).js
-    .concat([
-      path.join(conf.paths.src, '/app/**/*.module.js'),
-      path.join(conf.paths.src, '/app/**/*.js'),
-      path.join(conf.paths.src, '/**/*.spec.js'),
-      path.join(conf.paths.src, '/**/*.mock.js'),
-      path.join(conf.paths.src, '/**/*.html')
-    ]);
-}
-
-module.exports = function(config) {
-
-  var configuration = {
-    files: listFiles(),
-
-    singleRun: true,
+    // List of files / patterns to load in the browser
+    files: [
+      'bower_components/jquery/dist/jquery.js',
+      'bower_components/angular/angular.js',
+      'bower_components/angular-mocks/angular-mocks.js',
 
-    autoWatch: false,
-
-    frameworks: ['jasmine', 'angular-filesort'],
+      'bower_components/slick-carousel/slick/slick.js',
+      'dist/angular-slick.js',
+      'test/**/*.spec.js'
+    ],
 
-    angularFilesort: {
-      whitelist: [path.join(conf.paths.src, '/**/!(*.html|*.spec|*.mock).js')]
-    },
+    // List of files to exclude
+    exclude: [],
 
-    ngHtml2JsPreprocessor: {
-      stripPrefix: 'src/',
-      moduleName: 'angularSlickCarousel'
-    },
+    // Web server port
+    port: 9876,
 
-    browsers : ['PhantomJS'],
+    // Level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
 
-    plugins : [
-      'karma-phantomjs-launcher',
-      'karma-angular-filesort',
-      'karma-jasmine',
-      'karma-ng-html2js-preprocessor'
-    ],
+    // Enable / disable watching file and executing tests whenever any file changes
+    autoWatch: true,
 
-    preprocessors: {
-      'src/**/*.html': ['ng-html2js']
-    }
-  };
+    // Start these browsers, currently available:
+    // - Chrome
+    // - ChromeCanary
+    // - Firefox
+    // - Opera
+    // - Safari (only Mac)
+    // - PhantomJS
+    // - IE (only Windows)
+    browsers: [process.env.TRAVIS ? 'Firefox' : 'Chrome'],
 
-  // This block is needed to execute Chrome on Travis
-  // If you ever plan to use Chrome and Travis, you can keep it
-  // If not, you can safely remove it
-  // https://github.com/karma-runner/karma/issues/1144#issuecomment-53633076
-  if(configuration.browsers[0] === 'Chrome' && process.env.TRAVIS) {
-    configuration.customLaunchers = {
-      'chrome-travis-ci': {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
-    };
-    configuration.browsers = ['chrome-travis-ci'];
-  }
-
-  config.set(configuration);
+    // Continuous Integration mode
+    // if true, it capture browsers, run tests and exit
+    singleRun: false
+  });
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-slick-carousel",
-  "version": "3.0.11",
+  "version": "3.1.0",
   "main": "dist/angular-slick.js",
   "repository": {
     "type": "git",
@@ -15,7 +15,7 @@
     "gulp-autoprefixer": "~2.3.1",
     "gulp-angular-templatecache": "~1.6.0",
     "del": "~1.2.0",
-    "lodash": "~3.9.3",
+    "lodash": "~3.10.1",
     "gulp-csso": "~1.0.0",
     "gulp-filter": "~2.0.2",
     "gulp-flatten": "~0.0.4",
@@ -36,14 +36,14 @@
     "gulp-sourcemaps": "~1.5.2",
     "gulp-less": "~3.0.3",
     "gulp-angular-filesort": "~1.1.1",
-    "main-bower-files": "~2.8.0",
+    "main-bower-files": "~2.9.0",
     "merge-stream": "~0.1.7",
     "jshint-stylish": "~2.0.0",
     "wiredep": "~2.2.2",
-    "karma": "~0.12.36",
+    "karma": "~0.13.10",
     "karma-jasmine": "~0.3.5",
+    "karma-chrome-launcher": "^0.2.0",
     "karma-phantomjs-launcher": "~0.2.0",
-    "karma-angular-filesort": "~0.1.0",
     "karma-ng-html2js-preprocessor": "~0.1.2",
     "concat-stream": "~1.5.0",
     "require-dir": "~0.3.0",

test/main.spec.js

@@ -1,5 +1,88 @@
 'use strict';
 
 describe('angular slick testing', function () {
+  var scope, $rootScope, $compile, $timeout, $injector;
+
+  beforeEach(module('slickCarousel'));
+
+  beforeEach(inject(function (_$rootScope_, _$compile_, _$timeout_, _$injector_) {
+    $rootScope = _$rootScope_;
+    scope = $rootScope.$new();
+    $compile = _$compile_;
+    $timeout = _$timeout_;
+    $injector = _$injector_;
+
+    scope.date = [
+      {id: 1, name: 'Mark', email: '[email protected]'},
+      {id: 2, name: 'Ken', email: '[email protected]'},
+      {id: 3, name: 'Oren', email: '[email protected]'},
+      {id: 4, name: 'Kenny', email: '[email protected]'}
+    ];
+  }));
+
+  // DSL (domain-specific language)
+  function compileTemplate(template) {
+    var el = $compile(angular.element(template))(scope);
+    scope.$digest();
+    return el;
+  }
+
+  it('should init', function () {
+    var element = compileTemplate('\
+      <slick>\
+      <div> 1 </div>\
+      <div> 2 </div>\
+      </slick>');
+    scope.$digest();
+    expect(element.hasClass('slick-initialized')).toBe(true);
+  });
+
+  it('should init if ng-if is true', function () {
+    scope.slickConfigLoaded = true;
+    var element = compileTemplate('\
+      <slick ng-if="1">\
+      <div> 1 </div>\
+      <div> 2 </div>\
+      </slick>');
+    scope.$digest();
+    expect(element.next().hasClass('slick-initialized')).toBe(true);
+  });
+
+  it('should re-init if change ng-if', function () {
+    scope.slickConfigLoaded = true;
+    var element = compileTemplate('\
+      <slick ng-if="slickConfigLoaded">\
+      <div ng-repeat="i in data">\
+        <div> i </div>\
+      </slick>');
+    scope.$digest();
+    expect(element.next().hasClass('slick-initialized')).toBe(true);
+  });
+
+  it('should re-init if config change', function () {
+    scope.isDestroy = false;
+    scope.slickConfig = {
+      autoplay: true,
+      event: {
+        destroy: function (event, slick) {
+          scope.isDestroy = true;
+        }
+      }
+    };
+    var element = compileTemplate('\
+      <slick settings="slickConfig">\
+      <div ng-repeat="i in data">\
+        <div> i </div>\
+      </slick>');
+    scope.$digest();
+
+    expect(element.hasClass('slick-initialized')).toBe(true);
+
+    scope.slickConfig.autoplay = false;
+    scope.$digest();
+    expect(scope.isDestroy).toBe(true);
+    expect(element.hasClass('slick-initialized')).toBe(true);
+
+  });
 
 });