focal-poin.js unit-tests, gulp file updated, package.json updated

README.rst

@@ -79,7 +79,7 @@ To started development fron-end part of ``django-filer`` simply install all the
 
 ``npm install``
 
-To compile and watch scss and run jshint and jscs watchers:
+To compile and watch scss, run javascript unit-tests, jshint and jscs watchers:
 
 ``gulp``
 
@@ -103,22 +103,18 @@ To run javascript linting:
 
 ``gulp jshint``
 
-To run javascript linter watcher:
-
-``gulp jshint:watch``
-
 To run javascript code style analysis:
 
 ``gulp jscs``
 
-To run javascript code style analysis watcher:
-
-``gulp jscs:watch``
-
 To fix javascript code style errors:
 
 ``gulp jscs:fix``
 
+To run javascript unit-tests:
+
+``gulp tests:unit``
+
 
 .. _Django: http://djangoproject.com
 .. _django-polymorphic: https://github.com/chrisglass/django_polymorphic

filer/tests/frontend/fixtures/focal-point.html

@@ -1,5 +1,5 @@
 <div class="js-focal-point" id="container">
-    <img src="image.url" data-ratio="4.638095" width="210" height="266" class="js-focal-point-image" id="image">
-    <div class="js-focal-point-circle hidden" id="circle"></div>
+    <img src="#" data-ratio="2" width="100" height="200" class="js-focal-point-image" id="image">
+    <div class="js-focal-point-circle hidden" id="circle" style="position: absolute;"></div>
     <input type="hidden" class="js-focal-point-location" id="location">
 </div>

filer/tests/frontend/unit/test.focal-point.js

@@ -2,7 +2,7 @@
 // #FOCAL POINT TEST#
 
 'use strict';
-/* globals fixture, describe, it, expect, beforeEach, afterEach, Cl */
+/* globals fixture, describe, it, expect, beforeEach, afterEach, Cl, spyOn */
 
 describe('Cl.FocalPoint', function () {
     var focalPoint;
@@ -34,8 +34,47 @@ describe('Cl.FocalPoint', function () {
         location = null;
     });
 
-    it('tests something', function () {
-        // Tests will go here soon
-        expect(true).toBeTruthy();
+    it('shows circle on image load', function () {
+        image.trigger('load');
+        expect(circle).not.toHaveClass('hidden');
+
+        expect(location.val()).toBe('');
+    });
+
+    it('sets the location value to center and updates location value according to the ratio', function () {
+        var updateLocationValueStub = spyOn(Cl.FocalPointConstructor.prototype, '_updateLocationValue').and.callThrough();
+
+        image.trigger('load');
+
+        circle.simulate('drag', {
+            moves: 1,
+            dx: 1,
+            dy: 1
+        });
+
+        expect(updateLocationValueStub).toHaveBeenCalled();
+        expect(updateLocationValueStub.calls.count()).toBe(2);
+        expect(updateLocationValueStub).toHaveBeenCalledWith(51, 101);
+
+        expect(location.val()).toBe('102,202');
+    });
+
+    it('updates location value according to the ratio and latest position', function () {
+        var updateLocationValueStub = spyOn(Cl.FocalPointConstructor.prototype, '_updateLocationValue').and.callThrough();
+
+        image.trigger('load');
+
+        circle.simulate('drag', {
+            moves: 2,
+            dx: -20,
+            dy: -30
+        });
+
+        expect(updateLocationValueStub).toHaveBeenCalled();
+        expect(updateLocationValueStub.calls.count()).toBe(3);
+        expect(updateLocationValueStub).toHaveBeenCalledWith(40, 85);
+        expect(updateLocationValueStub).toHaveBeenCalledWith(30, 70);
+
+        expect(location.val()).toBe('60,140');
     });
 });

gulpfile.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var gulp = require('gulp');
+var gulpsync = require('gulp-sync')(gulp);
 var sass = require('gulp-sass');
 var autoprefixer = require('gulp-autoprefixer');
 var sourcemaps = require('gulp-sourcemaps');
@@ -21,8 +22,10 @@ var PROJECT_PATTERNS = {
     'sass': PROJECT_PATH.sass + '**/*.scss',
     'lint': [
         PROJECT_PATH.js + '**/*.js',
-        PROJECT_ROOT + '/gulpfile.js',
-        '!' + PROJECT_PATH.js + '**/*.min.js'
+        '!' + PROJECT_PATH.js + '**/*.min.js',
+        PROJECT_PATH.tests + 'unit/**/*.js',
+        '!' + PROJECT_PATH.tests + 'unit/**/*.min.js',
+        PROJECT_ROOT + '/gulpfile.js'
     ]
 };
 
@@ -56,35 +59,35 @@ gulp.task('jscs:fix', function () {
         .pipe(gulp.dest(PROJECT_PATH.js));
 });
 
-gulp.task('jscs:watch', function () {
-    gulp.watch(PROJECT_PATTERNS.lint, ['jscs']);
-});
-
 gulp.task('jshint', function () {
     return gulp.src(PROJECT_PATTERNS.lint)
         .pipe(jshint('.jshintrc'))
         .pipe(jshint.reporter(stylish))
         .pipe(jshint.reporter('fail'));
 });
 
-gulp.task('jshint:watch', function () {
-    gulp.watch(PROJECT_PATTERNS.lint, ['jshint']);
-});
-
-gulp.task('js', ['jshint', 'jscs']);
-
-gulp.task('js:watch', function () {
-    gulp.watch(PROJECT_PATTERNS.lint, ['js']);
-});
-
+// #############################################################################
+// JS UNIT-TESTS
 gulp.task('tests:unit', function (done) {
     new Server({
         configFile: PROJECT_PATH.tests + '/karma.conf.js',
         singleRun: true
     }, done).start();
 });
+gulp.task('tests:watch', function () {
+    gulp.watch(PROJECT_PATTERNS.lint, ['tests:unit']);
+});
 
+// #############################################################################
+// TASKS
+gulp.task('js', gulpsync.sync(['jshint', 'jscs', 'tests:unit']));
+gulp.task('js:watch', function () {
+    gulp.watch(PROJECT_PATTERNS.lint, ['js']);
+});
 gulp.task('watch', ['sass:watch', 'js:watch']);
-gulp.task('lint', ['js']);
-gulp.task('ci', ['js', 'tests:unit']);
-gulp.task('default', ['js', 'sass', 'js:watch', 'sass:watch']);
+gulp.task('lint', ['jscs', 'jshint']);
+gulp.task('lint:watch', function () {
+    gulp.watch(PROJECT_PATTERNS.lint, ['lint']);
+});
+gulp.task('ci', ['js']);
+gulp.task('default', ['sass', 'sass:watch', 'js', 'js:watch']);

package.json

@@ -8,6 +8,7 @@
     "gulp-jshint": "1.12.*",
     "gulp-sass": "2.1.*",
     "gulp-sourcemaps": "1.6.*",
+    "gulp-sync": "0.1.*",
     "jasmine": "2.3.*",
     "jshint-stylish": "2.0.*",
     "karma": "0.13.*",