From de301c44de49b587c7ebf7e846e1a0b903b5c0d5 Mon Sep 17 00:00:00 2001 From: Evgeniy Negometyanov Date: Tue, 24 Nov 2015 18:52:31 +0200 Subject: [PATCH] focal-poin.js unit-tests, gulp file updated, package.json updated --- README.rst | 14 ++---- .../tests/frontend/fixtures/focal-point.html | 4 +- .../frontend/unit/jquery.simulate.min.js | 12 +++++ filer/tests/frontend/unit/test.focal-point.js | 47 +++++++++++++++++-- gulpfile.js | 41 ++++++++-------- package.json | 1 + 6 files changed, 85 insertions(+), 34 deletions(-) create mode 100644 filer/tests/frontend/unit/jquery.simulate.min.js diff --git a/README.rst b/README.rst index 6afecc027..122c4b2ba 100644 --- a/README.rst +++ b/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 diff --git a/filer/tests/frontend/fixtures/focal-point.html b/filer/tests/frontend/fixtures/focal-point.html index 8d46ccaf9..0f45f406b 100644 --- a/filer/tests/frontend/fixtures/focal-point.html +++ b/filer/tests/frontend/fixtures/focal-point.html @@ -1,5 +1,5 @@
- - + +
diff --git a/filer/tests/frontend/unit/jquery.simulate.min.js b/filer/tests/frontend/unit/jquery.simulate.min.js new file mode 100644 index 000000000..7f1bdcb10 --- /dev/null +++ b/filer/tests/frontend/unit/jquery.simulate.min.js @@ -0,0 +1,12 @@ + /*! + * jQuery Simulate v@VERSION - simulate browser mouse and keyboard events + * https://github.com/jquery/jquery-simulate + * + * Copyright jQuery Foundation and other contributors + * Released under the MIT license. + * http://jquery.org/license + * + * Date: @DATE + */ + +!function(e,t){function n(t){var n,o=e(t.ownerDocument);return t=e(t),n=t.offset(),{x:n.left+t.outerWidth()/2-o.scrollLeft(),y:n.top+t.outerHeight()/2-o.scrollTop()}}function o(t){var n,o=e(t.ownerDocument);return t=e(t),n=t.offset(),{x:n.left-o.scrollLeft(),y:n.top-o.scrollTop()}}var c=/^key/,i=/^(?:mouse|contextmenu)|click/;e.fn.simulate=function(t,n){return this.each(function(){new e.simulate(this,t,n)})},e.simulate=function(t,n,o){var c=e.camelCase("simulate-"+n);this.target=t,this.options=o,this[c]?this[c]():this.simulateEvent(t,n,o)},e.extend(e.simulate,{keyCode:{BACKSPACE:8,COMMA:188,DELETE:46,DOWN:40,END:35,ENTER:13,ESCAPE:27,HOME:36,LEFT:37,NUMPAD_ADD:107,NUMPAD_DECIMAL:110,NUMPAD_DIVIDE:111,NUMPAD_ENTER:108,NUMPAD_MULTIPLY:106,NUMPAD_SUBTRACT:109,PAGE_DOWN:34,PAGE_UP:33,PERIOD:190,RIGHT:39,SPACE:32,TAB:9,UP:38},buttonCode:{LEFT:0,MIDDLE:1,RIGHT:2}}),e.extend(e.simulate.prototype,{simulateEvent:function(e,t,n){var o=this.createEvent(t,n);this.dispatchEvent(e,t,o,n)},createEvent:function(e,t){return c.test(e)?this.keyEvent(e,t):i.test(e)?this.mouseEvent(e,t):void 0},mouseEvent:function(n,o){var c,i,r,u;return o=e.extend({bubbles:!0,cancelable:"mousemove"!==n,view:window,detail:0,screenX:0,screenY:0,clientX:1,clientY:1,ctrlKey:!1,altKey:!1,shiftKey:!1,metaKey:!1,button:0,relatedTarget:t},o),document.createEvent?(c=document.createEvent("MouseEvents"),c.initMouseEvent(n,o.bubbles,o.cancelable,o.view,o.detail,o.screenX,o.screenY,o.clientX,o.clientY,o.ctrlKey,o.altKey,o.shiftKey,o.metaKey,o.button,o.relatedTarget||document.body.parentNode),0===c.pageX&&0===c.pageY&&Object.defineProperty&&(i=c.relatedTarget.ownerDocument||document,r=i.documentElement,u=i.body,Object.defineProperty(c,"pageX",{get:function(){return o.clientX+(r&&r.scrollLeft||u&&u.scrollLeft||0)-(r&&r.clientLeft||u&&u.clientLeft||0)}}),Object.defineProperty(c,"pageY",{get:function(){return o.clientY+(r&&r.scrollTop||u&&u.scrollTop||0)-(r&&r.clientTop||u&&u.clientTop||0)}}))):document.createEventObject&&(c=document.createEventObject(),e.extend(c,o),c.button={0:1,1:4,2:2}[c.button]||(-1===c.button?0:c.button)),c},keyEvent:function(n,o){var c;if(o=e.extend({bubbles:!0,cancelable:!0,view:window,ctrlKey:!1,altKey:!1,shiftKey:!1,metaKey:!1,keyCode:0,charCode:t},o),document.createEvent)try{c=document.createEvent("KeyEvents"),c.initKeyEvent(n,o.bubbles,o.cancelable,o.view,o.ctrlKey,o.altKey,o.shiftKey,o.metaKey,o.keyCode,o.charCode)}catch(i){c=document.createEvent("Events"),c.initEvent(n,o.bubbles,o.cancelable),e.extend(c,{view:o.view,ctrlKey:o.ctrlKey,altKey:o.altKey,shiftKey:o.shiftKey,metaKey:o.metaKey,keyCode:o.keyCode,charCode:o.charCode})}else document.createEventObject&&(c=document.createEventObject(),e.extend(c,o));return(/msie [\w.]+/.exec(navigator.userAgent.toLowerCase())||"[object Opera]"==={}.toString.call(window.opera))&&(c.keyCode=o.charCode>0?o.charCode:o.keyCode,c.charCode=t),c},dispatchEvent:function(e,t,n){e[t]?e[t]():e.dispatchEvent?e.dispatchEvent(n):e.fireEvent&&e.fireEvent("on"+t,n)},simulateFocus:function(){function t(){o=!0}var n,o=!1,c=e(this.target);c.bind("focus",t),c[0].focus(),o||(n=e.Event("focusin"),n.preventDefault(),c.trigger(n),c.triggerHandler("focus")),c.unbind("focus",t)},simulateBlur:function(){function t(){o=!0}var n,o=!1,c=e(this.target);c.bind("blur",t),c[0].blur(),setTimeout(function(){c[0].ownerDocument.activeElement===c[0]&&c[0].ownerDocument.body.focus(),o||(n=e.Event("focusout"),n.preventDefault(),c.trigger(n),c.triggerHandler("blur")),c.unbind("blur",t)},1)}}),e.extend(e.simulate.prototype,{simulateDrag:function(){var c=0,i=this.target,r=i.ownerDocument,u=this.options,a="corner"===u.handle?o(i):n(i),l=Math.floor(a.x),s=Math.floor(a.y),d={clientX:l,clientY:s},v=u.dx||(u.x!==t?u.x-l:0),E=u.dy||(u.y!==t?u.y-s:0),m=u.moves||3;for(this.simulateEvent(i,"mousedown",d);m>c;c++)l+=v/m,s+=E/m,d={clientX:Math.round(l),clientY:Math.round(s)},this.simulateEvent(r,"mousemove",d);e.contains(r,i)?(this.simulateEvent(i,"mouseup",d),this.simulateEvent(i,"click",d)):this.simulateEvent(r,"mouseup",d)}})}(jQuery); diff --git a/filer/tests/frontend/unit/test.focal-point.js b/filer/tests/frontend/unit/test.focal-point.js index b2b6c08c2..4bc049af8 100644 --- a/filer/tests/frontend/unit/test.focal-point.js +++ b/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'); }); }); diff --git a/gulpfile.js b/gulpfile.js index 758e0d7d9..1eb9d5c23 100755 --- a/gulpfile.js +++ b/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,10 +59,6 @@ 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')) @@ -67,24 +66,28 @@ gulp.task('jshint', function () { .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']); diff --git a/package.json b/package.json index 2a3c67afd..ef80279d6 100644 --- a/package.json +++ b/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.*",