aboutsummaryrefslogtreecommitdiffstats
path: root/library/cropperjs/test/specs
diff options
context:
space:
mode:
authorMario <mario@mariovavti.com>2020-01-11 10:30:12 +0000
committerMario <mario@mariovavti.com>2020-01-11 10:30:12 +0000
commitf645c6f3a57bf5f53bbb2bde362b2447f725c977 (patch)
tree9b37650aad46296c5d98a55969348ebb4ee2d097 /library/cropperjs/test/specs
parent4c1c6908165e5c4fb1b7238f66764f89faa2301a (diff)
downloadvolse-hubzilla-f645c6f3a57bf5f53bbb2bde362b2447f725c977.tar.gz
volse-hubzilla-f645c6f3a57bf5f53bbb2bde362b2447f725c977.tar.bz2
volse-hubzilla-f645c6f3a57bf5f53bbb2bde362b2447f725c977.zip
update cropperjs to the recent version
Diffstat (limited to 'library/cropperjs/test/specs')
-rw-r--r--library/cropperjs/test/specs/Cropper.spec.js11
-rw-r--r--library/cropperjs/test/specs/events/crop.spec.js30
-rw-r--r--library/cropperjs/test/specs/events/cropend.spec.js47
-rw-r--r--library/cropperjs/test/specs/events/cropmove.spec.js71
-rw-r--r--library/cropperjs/test/specs/events/cropstart.spec.js75
-rw-r--r--library/cropperjs/test/specs/events/ready.spec.js26
-rw-r--r--library/cropperjs/test/specs/events/zoom.spec.js56
-rw-r--r--library/cropperjs/test/specs/methods/clear.spec.js37
-rw-r--r--library/cropperjs/test/specs/methods/crop.spec.js50
-rw-r--r--library/cropperjs/test/specs/methods/destroy.spec.js30
-rw-r--r--library/cropperjs/test/specs/methods/disable.spec.js278
-rw-r--r--library/cropperjs/test/specs/methods/enable.spec.js16
-rw-r--r--library/cropperjs/test/specs/methods/getCanvasData.spec.js27
-rw-r--r--library/cropperjs/test/specs/methods/getContainerData.spec.js23
-rw-r--r--library/cropperjs/test/specs/methods/getCropBoxData.spec.js25
-rw-r--r--library/cropperjs/test/specs/methods/getCroppedCanvas.spec.js195
-rw-r--r--library/cropperjs/test/specs/methods/getData.spec.js91
-rw-r--r--library/cropperjs/test/specs/methods/getImageData.spec.js62
-rw-r--r--library/cropperjs/test/specs/methods/move.spec.js31
-rw-r--r--library/cropperjs/test/specs/methods/moveTo.spec.js29
-rw-r--r--library/cropperjs/test/specs/methods/noConflict.spec.js16
-rw-r--r--library/cropperjs/test/specs/methods/replace.spec.js17
-rw-r--r--library/cropperjs/test/specs/methods/reset.spec.js30
-rw-r--r--library/cropperjs/test/specs/methods/rotate.spec.js27
-rw-r--r--library/cropperjs/test/specs/methods/rotateTo.spec.js28
-rw-r--r--library/cropperjs/test/specs/methods/scale.spec.js29
-rw-r--r--library/cropperjs/test/specs/methods/scaleX.spec.js27
-rw-r--r--library/cropperjs/test/specs/methods/scaleY.spec.js27
-rw-r--r--library/cropperjs/test/specs/methods/setAspectRatio.spec.js31
-rw-r--r--library/cropperjs/test/specs/methods/setCanvasData.spec.js39
-rw-r--r--library/cropperjs/test/specs/methods/setCropBoxData.spec.js39
-rw-r--r--library/cropperjs/test/specs/methods/setData.spec.js71
-rw-r--r--library/cropperjs/test/specs/methods/setDefaults.spec.js30
-rw-r--r--library/cropperjs/test/specs/methods/setDragMode.spec.js29
-rw-r--r--library/cropperjs/test/specs/methods/zoom.spec.js31
-rw-r--r--library/cropperjs/test/specs/methods/zoomTo.spec.js33
-rw-r--r--library/cropperjs/test/specs/options/aspectRatio.spec.js24
-rw-r--r--library/cropperjs/test/specs/options/autoCrop.spec.js29
-rw-r--r--library/cropperjs/test/specs/options/autoCropArea.spec.js35
-rw-r--r--library/cropperjs/test/specs/options/background.spec.js27
-rw-r--r--library/cropperjs/test/specs/options/center.spec.js31
-rw-r--r--library/cropperjs/test/specs/options/checkCrossOrigin.spec.js49
-rw-r--r--library/cropperjs/test/specs/options/checkOrientation.spec.js45
-rw-r--r--library/cropperjs/test/specs/options/crop.spec.js28
-rw-r--r--library/cropperjs/test/specs/options/cropBoxMovable.spec.js31
-rw-r--r--library/cropperjs/test/specs/options/cropBoxResizable.spec.js31
-rw-r--r--library/cropperjs/test/specs/options/cropend.spec.js35
-rw-r--r--library/cropperjs/test/specs/options/cropmove.spec.js57
-rw-r--r--library/cropperjs/test/specs/options/cropstart.spec.js61
-rw-r--r--library/cropperjs/test/specs/options/data.spec.js40
-rw-r--r--library/cropperjs/test/specs/options/dragMode.spec.js41
-rw-r--r--library/cropperjs/test/specs/options/guides.spec.js31
-rw-r--r--library/cropperjs/test/specs/options/highlight.spec.js31
-rw-r--r--library/cropperjs/test/specs/options/initialAspectRatio.spec.js40
-rw-r--r--library/cropperjs/test/specs/options/minCanvasHeight.spec.js27
-rw-r--r--library/cropperjs/test/specs/options/minCanvasWidth.spec.js27
-rw-r--r--library/cropperjs/test/specs/options/minContainerHeight.spec.js26
-rw-r--r--library/cropperjs/test/specs/options/minContainerWidth.spec.js26
-rw-r--r--library/cropperjs/test/specs/options/minCropBoxHeight.spec.js27
-rw-r--r--library/cropperjs/test/specs/options/minCropBoxWidth.spec.js27
-rw-r--r--library/cropperjs/test/specs/options/modal.spec.js27
-rw-r--r--library/cropperjs/test/specs/options/movable.spec.js35
-rw-r--r--library/cropperjs/test/specs/options/preview.spec.js105
-rw-r--r--library/cropperjs/test/specs/options/ready.spec.js34
-rw-r--r--library/cropperjs/test/specs/options/responsive.spec.js61
-rw-r--r--library/cropperjs/test/specs/options/restore.spec.js38
-rw-r--r--library/cropperjs/test/specs/options/rotatable.spec.js28
-rw-r--r--library/cropperjs/test/specs/options/scalable.spec.js33
-rw-r--r--library/cropperjs/test/specs/options/toggleDragModeOnDblclick.spec.js40
-rw-r--r--library/cropperjs/test/specs/options/viewMode.spec.js89
-rw-r--r--library/cropperjs/test/specs/options/wheelZoomRatio.spec.js38
-rw-r--r--library/cropperjs/test/specs/options/zoom.spec.js46
-rw-r--r--library/cropperjs/test/specs/options/zoomOnTouch.spec.js176
-rw-r--r--library/cropperjs/test/specs/options/zoomOnWheel.spec.js34
-rw-r--r--library/cropperjs/test/specs/options/zoomable.spec.js35
75 files changed, 3359 insertions, 0 deletions
diff --git a/library/cropperjs/test/specs/Cropper.spec.js b/library/cropperjs/test/specs/Cropper.spec.js
new file mode 100644
index 000000000..ed20ad1fd
--- /dev/null
+++ b/library/cropperjs/test/specs/Cropper.spec.js
@@ -0,0 +1,11 @@
+describe('Cropper', () => {
+ it('should be a class (function)', () => {
+ expect(Cropper).to.be.a('function');
+ });
+
+ it('should throw error when the first argument is not an element', () => {
+ expect(() => {
+ new Cropper(document);
+ }).to.throw('The first argument is required and must be an <img> or <canvas> element.');
+ });
+});
diff --git a/library/cropperjs/test/specs/events/crop.spec.js b/library/cropperjs/test/specs/events/crop.spec.js
new file mode 100644
index 000000000..04ec1fd10
--- /dev/null
+++ b/library/cropperjs/test/specs/events/crop.spec.js
@@ -0,0 +1,30 @@
+describe('crop (event)', () => {
+ it('should trigger the `crop` event', (done) => {
+ const image = window.createImage();
+
+ image.addEventListener('crop', (event) => {
+ expect(event.type).to.equal('crop');
+ done();
+ });
+
+ new Cropper(image);
+ });
+
+ it('should have expected properties in `event.detail`', (done) => {
+ const image = window.createImage();
+
+ image.addEventListener('crop', (event) => {
+ expect(event.detail).to.be.an('object').that.has.all.keys(['x', 'y', 'width', 'height', 'rotate', 'scaleX', 'scaleY']);
+ expect(event.detail.x).to.be.a('number');
+ expect(event.detail.y).to.be.a('number');
+ expect(event.detail.width).to.be.a('number');
+ expect(event.detail.height).to.be.a('number');
+ expect(event.detail.rotate).to.be.a('number');
+ expect(event.detail.scaleX).to.be.a('number');
+ expect(event.detail.scaleY).to.be.a('number');
+ done();
+ });
+
+ new Cropper(image);
+ });
+});
diff --git a/library/cropperjs/test/specs/events/cropend.spec.js b/library/cropperjs/test/specs/events/cropend.spec.js
new file mode 100644
index 000000000..8bdbc92d7
--- /dev/null
+++ b/library/cropperjs/test/specs/events/cropend.spec.js
@@ -0,0 +1,47 @@
+describe('cropend (event)', () => {
+ const POINTER_DOWN = window.PointerEvent ? 'pointerdown' : 'mousedown';
+ const POINTER_MOVE = window.PointerEvent ? 'pointermove' : 'mousemove';
+ const POINTER_UP = window.PointerEvent ? 'pointerup' : 'mouseup';
+
+ it('should trigger the `cropend` event', (done) => {
+ const image = window.createImage();
+ let cropper;
+
+ image.addEventListener('ready', () => {
+ const { dragBox } = cropper;
+
+ dragBox.dispatchEvent(window.createEvent(POINTER_DOWN));
+ dragBox.dispatchEvent(window.createEvent(POINTER_MOVE));
+ dragBox.dispatchEvent(window.createEvent(POINTER_UP));
+ });
+
+ image.addEventListener('cropend', (event) => {
+ expect(event.type).to.equal('cropend');
+ done();
+ });
+
+ cropper = new Cropper(image);
+ });
+
+ it('should have expected properties in `event.detail`', (done) => {
+ const image = window.createImage();
+ let cropper;
+
+ image.addEventListener('ready', () => {
+ const { dragBox } = cropper;
+
+ dragBox.dispatchEvent(window.createEvent(POINTER_DOWN));
+ dragBox.dispatchEvent(window.createEvent(POINTER_MOVE));
+ dragBox.dispatchEvent(window.createEvent(POINTER_UP));
+ });
+
+ image.addEventListener('cropend', (event) => {
+ expect(event.detail).to.be.an('object').that.has.all.keys(['action', 'originalEvent']);
+ expect(event.detail.action).to.equal('crop');
+ expect(event.detail.originalEvent.type).to.equal(POINTER_UP);
+ done();
+ });
+
+ cropper = new Cropper(image);
+ });
+});
diff --git a/library/cropperjs/test/specs/events/cropmove.spec.js b/library/cropperjs/test/specs/events/cropmove.spec.js
new file mode 100644
index 000000000..1349bf3e2
--- /dev/null
+++ b/library/cropperjs/test/specs/events/cropmove.spec.js
@@ -0,0 +1,71 @@
+describe('cropmove (event)', () => {
+ const POINTER_DOWN = window.PointerEvent ? 'pointerdown' : 'mousedown';
+ const POINTER_MOVE = window.PointerEvent ? 'pointermove' : 'mousemove';
+ const POINTER_UP = window.PointerEvent ? 'pointerup' : 'mouseup';
+
+ it('should trigger the `cropmove` event', (done) => {
+ const image = window.createImage();
+ let cropper;
+
+ image.addEventListener('ready', () => {
+ const { dragBox } = cropper;
+
+ dragBox.dispatchEvent(window.createEvent(POINTER_DOWN));
+ dragBox.dispatchEvent(window.createEvent(POINTER_MOVE));
+ dragBox.dispatchEvent(window.createEvent(POINTER_UP));
+ });
+
+ image.addEventListener('cropmove', (event) => {
+ expect(event.detail.action).to.equal('crop');
+ done();
+ });
+
+ cropper = new Cropper(image);
+ });
+
+ it('should have expected properties in `event.detail`', (done) => {
+ const image = window.createImage();
+ let cropper;
+
+ image.addEventListener('ready', () => {
+ const { dragBox } = cropper;
+
+ dragBox.dispatchEvent(window.createEvent(POINTER_DOWN));
+ dragBox.dispatchEvent(window.createEvent(POINTER_MOVE));
+ dragBox.dispatchEvent(window.createEvent(POINTER_UP));
+ });
+
+ image.addEventListener('cropmove', (event) => {
+ expect(event.detail).to.be.an('object').that.has.all.keys(['action', 'originalEvent']);
+ expect(event.detail.action).to.equal('crop');
+ expect(event.detail.originalEvent.type).to.equal(POINTER_MOVE);
+ done();
+ });
+
+ cropper = new Cropper(image);
+ });
+
+ it('should not trigger the `crop` event when default prevented', (done) => {
+ const image = window.createImage();
+ let cropper;
+
+ image.addEventListener('ready', () => {
+ const { dragBox } = cropper;
+
+ image.addEventListener('crop', () => {
+ expect.fail(1, 0);
+ });
+
+ dragBox.dispatchEvent(window.createEvent(POINTER_DOWN));
+ dragBox.dispatchEvent(window.createEvent(POINTER_MOVE));
+ dragBox.dispatchEvent(window.createEvent(POINTER_UP));
+ });
+
+ image.addEventListener('cropmove', (event) => {
+ event.preventDefault();
+ done();
+ });
+
+ cropper = new Cropper(image);
+ });
+});
diff --git a/library/cropperjs/test/specs/events/cropstart.spec.js b/library/cropperjs/test/specs/events/cropstart.spec.js
new file mode 100644
index 000000000..41e21ce62
--- /dev/null
+++ b/library/cropperjs/test/specs/events/cropstart.spec.js
@@ -0,0 +1,75 @@
+describe('cropstart (event)', () => {
+ const POINTER_DOWN = window.PointerEvent ? 'pointerdown' : 'mousedown';
+ const POINTER_MOVE = window.PointerEvent ? 'pointermove' : 'mousemove';
+ const POINTER_UP = window.PointerEvent ? 'pointerup' : 'mouseup';
+
+ it('should trigger the `cropstart` event', (done) => {
+ const image = window.createImage();
+ let cropper;
+
+ image.addEventListener('ready', () => {
+ const { dragBox } = cropper;
+
+ dragBox.dispatchEvent(window.createEvent(POINTER_DOWN));
+ dragBox.dispatchEvent(window.createEvent(POINTER_MOVE));
+ dragBox.dispatchEvent(window.createEvent(POINTER_UP));
+ });
+
+ image.addEventListener('cropstart', (event) => {
+ expect(event.type).to.equal('cropstart');
+ done();
+ });
+
+ cropper = new Cropper(image);
+ });
+
+ it('should have expected properties in `event.detail`', (done) => {
+ const image = window.createImage();
+ let cropper;
+
+ image.addEventListener('ready', () => {
+ const { dragBox } = cropper;
+
+ dragBox.dispatchEvent(window.createEvent(POINTER_DOWN));
+ dragBox.dispatchEvent(window.createEvent(POINTER_MOVE));
+ dragBox.dispatchEvent(window.createEvent(POINTER_UP));
+ });
+
+ image.addEventListener('cropstart', (event) => {
+ expect(event.detail).to.be.an('object').that.has.all.keys(['action', 'originalEvent']);
+ expect(event.detail.action).to.equal('crop');
+ expect(event.detail.originalEvent.type).to.equal(POINTER_DOWN);
+ done();
+ });
+
+ cropper = new Cropper(image);
+ });
+
+ it('should not trigger the `cropmove` and `cropend` events when default prevented', (done) => {
+ const image = window.createImage();
+ let cropper;
+
+ image.addEventListener('ready', () => {
+ const { dragBox } = cropper;
+
+ dragBox.dispatchEvent(window.createEvent(POINTER_DOWN));
+ dragBox.dispatchEvent(window.createEvent(POINTER_MOVE));
+ dragBox.dispatchEvent(window.createEvent(POINTER_UP));
+ });
+
+ image.addEventListener('cropstart', (event) => {
+ event.preventDefault();
+ done();
+ });
+
+ image.addEventListener('cropmove', () => {
+ expect.fail(1, 0);
+ });
+
+ image.addEventListener('cropend', () => {
+ expect.fail(1, 0);
+ });
+
+ cropper = new Cropper(image);
+ });
+});
diff --git a/library/cropperjs/test/specs/events/ready.spec.js b/library/cropperjs/test/specs/events/ready.spec.js
new file mode 100644
index 000000000..fd88314f0
--- /dev/null
+++ b/library/cropperjs/test/specs/events/ready.spec.js
@@ -0,0 +1,26 @@
+describe('ready (event)', () => {
+ it('should trigger the `ready` event', (done) => {
+ const image = window.createImage();
+
+ image.addEventListener('ready', (event) => {
+ expect(event.type).to.equal('ready');
+ done();
+ });
+
+ new Cropper(image);
+ });
+
+ it('should trigger the `crop` event even though default prevented', (done) => {
+ const image = window.createImage();
+
+ image.addEventListener('ready', (event) => {
+ event.preventDefault();
+ });
+
+ image.addEventListener('crop', () => {
+ done();
+ });
+
+ new Cropper(image);
+ });
+});
diff --git a/library/cropperjs/test/specs/events/zoom.spec.js b/library/cropperjs/test/specs/events/zoom.spec.js
new file mode 100644
index 000000000..c827067b7
--- /dev/null
+++ b/library/cropperjs/test/specs/events/zoom.spec.js
@@ -0,0 +1,56 @@
+describe('zoom (event)', () => {
+ it('should trigger the `zoom` event', (done) => {
+ const image = window.createImage();
+ let cropper;
+
+ image.addEventListener('ready', () => {
+ cropper.zoom(0.1);
+ });
+
+ image.addEventListener('zoom', (event) => {
+ expect(event.type).to.equal('zoom');
+ done();
+ });
+
+ cropper = new Cropper(image);
+ });
+
+ it('should have correct properties in `event.detail`', (done) => {
+ const image = window.createImage();
+ let cropper;
+
+ image.addEventListener('ready', () => {
+ cropper.zoom(0.1);
+ });
+
+ image.addEventListener('zoom', (event) => {
+ expect(event.detail).to.be.an('object').that.has.all.keys(['ratio', 'oldRatio', 'originalEvent']);
+ expect(event.detail.ratio).to.be.a('number');
+ expect(event.detail.oldRatio).to.be.a('number');
+ expect(event.detail.ratio).to.be.above(0);
+ expect(event.detail.oldRatio).to.be.above(0);
+ expect(event.detail.ratio).to.be.above(event.detail.oldRatio);
+ done();
+ });
+
+ cropper = new Cropper(image);
+ });
+
+ it('should not change the canvas sizes when default prevented', (done) => {
+ const image = window.createImage();
+ let cropper;
+
+ image.addEventListener('ready', () => {
+ const canvasData = cropper.getCanvasData();
+
+ expect(cropper.zoom(0.1).getCanvasData()).to.deep.equal(canvasData);
+ done();
+ });
+
+ image.addEventListener('zoom', (event) => {
+ event.preventDefault();
+ });
+
+ cropper = new Cropper(image);
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/clear.spec.js b/library/cropperjs/test/specs/methods/clear.spec.js
new file mode 100644
index 000000000..f9ccb6f6e
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/clear.spec.js
@@ -0,0 +1,37 @@
+describe('clear (method)', () => {
+ it('should match the expected behaviors after cleared', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ expect(cropper.cropped).to.be.true;
+ cropper.clear();
+ expect(cropper.cropped).to.be.false;
+ expect(cropper.getData()).to.deep.equal({
+ x: 0,
+ y: 0,
+ width: 0,
+ height: 0,
+ rotate: 0,
+ scaleX: 1,
+ scaleY: 1,
+ });
+ expect(cropper.getCropBoxData()).to.be.an('object').that.is.empty;
+ expect(window.getComputedStyle(cropper.cropBox).display).to.equal('none');
+ done();
+ },
+ });
+ });
+
+ it('should not clear when it is disabled', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ cropper.disable().clear();
+ expect(cropper.cropped).to.be.true;
+ expect(cropper.getCropBoxData()).to.be.an('object').that.is.not.empty;
+ expect(window.getComputedStyle(cropper.cropBox).display).to.not.equal('none');
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/crop.spec.js b/library/cropperjs/test/specs/methods/crop.spec.js
new file mode 100644
index 000000000..b760e7592
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/crop.spec.js
@@ -0,0 +1,50 @@
+describe('crop (method)', () => {
+ it('should match the expected behaviors by default', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ autoCrop: false,
+
+ ready() {
+ expect(cropper.cropped).to.be.false;
+ expect(window.getComputedStyle(cropper.cropBox).display).to.equal('none');
+ cropper.crop();
+ expect(cropper.cropped).to.be.true;
+ expect(window.getComputedStyle(cropper.cropBox).display).to.not.equal('none');
+ done();
+ },
+ });
+ });
+
+ it('should trigger the `crop` event', (done) => {
+ const image = window.createImage();
+
+ image.addEventListener('crop', () => {
+ done();
+ });
+
+ const cropper = new Cropper(image, {
+ autoCrop: false,
+
+ ready() {
+ cropper.crop();
+ },
+ });
+ });
+
+ it('should not crop again when it is already cropped', (done) => {
+ const image = window.createImage();
+ let count = 0;
+ const cropper = new Cropper(image, {
+ crop() {
+ count += 1;
+
+ if (count > 1) {
+ expect.fail(1, 0);
+ } else {
+ cropper.crop();
+ done();
+ }
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/destroy.spec.js b/library/cropperjs/test/specs/methods/destroy.spec.js
new file mode 100644
index 000000000..c8df79ee8
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/destroy.spec.js
@@ -0,0 +1,30 @@
+describe('destroy (method)', () => {
+ it('should destroy before ready', () => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ expect.fail(1, 0);
+ },
+ });
+
+ expect(image.cropper).to.be.an.instanceof(Cropper);
+ expect(cropper.xhr).to.be.an.instanceof(XMLHttpRequest);
+ cropper.destroy();
+ expect(cropper.xhr).to.be.not.exist;
+ expect(image.cropper).to.be.not.exist;
+ });
+
+ it('should destroy after ready', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ expect(this.cropper).to.be.an.instanceof(Cropper);
+ expect(window.getComputedStyle(image).display).to.equal('none');
+ cropper.destroy();
+ expect(this.cropper).to.be.not.exist;
+ expect(window.getComputedStyle(image).display).to.not.equal('none');
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/disable.spec.js b/library/cropperjs/test/specs/methods/disable.spec.js
new file mode 100644
index 000000000..64deb16a3
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/disable.spec.js
@@ -0,0 +1,278 @@
+describe('disable (method)', () => {
+ it('should be disabled after call the method', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ expect(cropper.disabled).to.be.false;
+ expect(cropper.cropper.className).to.not.include('cropper-disabled');
+ cropper.disable();
+ expect(cropper.disabled).to.be.true;
+ expect(cropper.cropper.className).to.include('cropper-disabled');
+ done();
+ },
+ });
+ });
+
+ it('should disable the `crop` method', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ autoCrop: false,
+
+ ready() {
+ expect(cropper.cropped).to.be.false;
+ cropper.disable().crop();
+ expect(cropper.cropped).to.be.false;
+ done();
+ },
+ });
+ });
+
+ it('should disable the `reset` method', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const canvasData = cropper.moveTo(0).getCanvasData();
+
+ cropper.disable().reset();
+ expect(cropper.getCanvasData()).to.deep.equal(canvasData);
+ done();
+ },
+ });
+ });
+
+ it('should disable the `clear` method', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ expect(cropper.cropped).to.be.true;
+ cropper.disable().clear();
+ expect(cropper.cropped).to.be.true;
+ done();
+ },
+ });
+ });
+
+ it('should disable the `replace` method', (done) => {
+ const image = window.createImage();
+ const imageURL = image.src;
+ const cropper = new Cropper(image, {
+ ready() {
+ if (!cropper.replaced) {
+ cropper.disable().replace('/base/docs/images/picture-2.jpg');
+ expect(image.src).to.equal(imageURL);
+ done();
+ } else {
+ expect.fail(1, 0);
+ }
+ },
+ });
+ });
+
+ it('should disable the `move` method', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const canvasData = cropper.getCanvasData();
+
+ cropper.disable().move(10, 10);
+ expect(cropper.getCanvasData()).to.deep.equal(canvasData);
+ done();
+ },
+ });
+ });
+
+ it('should disable the `moveTo` method', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const canvasData = cropper.getCanvasData();
+
+ cropper.disable().moveTo(0);
+ expect(cropper.getCanvasData()).to.deep.equal(canvasData);
+ done();
+ },
+ });
+ });
+
+ it('should disable the `zoom` method', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const canvasData = cropper.getCanvasData();
+
+ cropper.disable().zoom(0.1);
+ expect(cropper.getCanvasData()).to.deep.equal(canvasData);
+ done();
+ },
+ });
+ });
+
+ it('should disable the `zoomTo` method', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const canvasData = cropper.getCanvasData();
+
+ cropper.disable().zoomTo(1);
+ expect(cropper.getCanvasData()).to.deep.equal(canvasData);
+ done();
+ },
+ });
+ });
+
+ it('should disable the `rotate` method', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const canvasData = cropper.getCanvasData();
+
+ cropper.disable().rotate(45);
+ expect(cropper.getCanvasData()).to.deep.equal(canvasData);
+ done();
+ },
+ });
+ });
+
+ it('should disable the `rotateTo` method', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const canvasData = cropper.getCanvasData();
+
+ cropper.disable().rotateTo(45);
+ expect(cropper.getCanvasData()).to.deep.equal(canvasData);
+ done();
+ },
+ });
+ });
+
+ it('should disable the `scaleX` method', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const canvasData = cropper.getCanvasData();
+
+ cropper.disable().scaleX(2);
+ expect(cropper.getCanvasData()).to.deep.equal(canvasData);
+ done();
+ },
+ });
+ });
+
+ it('should disable the `scaleY` method', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const canvasData = cropper.getCanvasData();
+
+ cropper.disable().scaleY(2);
+ expect(cropper.getCanvasData()).to.deep.equal(canvasData);
+ done();
+ },
+ });
+ });
+
+ it('should disable the `scale` method', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const canvasData = cropper.getCanvasData();
+
+ cropper.disable().scale(2);
+ expect(cropper.getCanvasData()).to.deep.equal(canvasData);
+ done();
+ },
+ });
+ });
+
+ it('should disable the `setData` method', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const data = cropper.getData();
+
+ cropper.disable().setData({
+ width: 160,
+ });
+ expect(cropper.getData()).to.deep.equal(data);
+ done();
+ },
+ });
+ });
+
+ it('should disable the `setCanvasData` method', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const canvasData = cropper.getCanvasData();
+
+ cropper.disable().setCanvasData({
+ width: 160,
+ });
+ expect(cropper.getCanvasData()).to.deep.equal(canvasData);
+ done();
+ },
+ });
+ });
+
+ it('should disable the `setCropBoxData` method', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const cropBoxData = cropper.getCropBoxData();
+
+ cropper.disable().setCropBoxData({
+ width: 160,
+ });
+ expect(cropper.getCropBoxData()).to.deep.equal(cropBoxData);
+ done();
+ },
+ });
+ });
+
+ it('should disable the `setAspectRatio` method', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ cropper.disable().setAspectRatio(0.618);
+ expect(cropper.options.aspectRatio).to.be.NaN;
+ done();
+ },
+ });
+ });
+
+ it('should disable the `setDragMode` method', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const { dragMode } = cropper.options;
+
+ cropper.disable().setDragMode('none');
+ expect(cropper.options.dragMode).to.equal(dragMode);
+ done();
+ },
+ });
+ });
+
+ it('should not disable the `enable` method', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ cropper.disable().enable();
+ expect(cropper.disabled).to.be.false;
+ done();
+ },
+ });
+ });
+
+ it('should not disable the `destroy` method', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ cropper.disable().destroy();
+ expect(image.cropper).to.be.undefined;
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/enable.spec.js b/library/cropperjs/test/specs/methods/enable.spec.js
new file mode 100644
index 000000000..9a8c16fed
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/enable.spec.js
@@ -0,0 +1,16 @@
+describe('enable (method)', () => {
+ it('should be enabled', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ cropper.disable();
+ expect(cropper.disabled).to.be.true;
+ expect(cropper.cropper.className).to.include('cropper-disabled');
+ cropper.enable();
+ expect(cropper.disabled).to.be.false;
+ expect(cropper.cropper.className).to.not.include('cropper-disabled');
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/getCanvasData.spec.js b/library/cropperjs/test/specs/methods/getCanvasData.spec.js
new file mode 100644
index 000000000..679c39269
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/getCanvasData.spec.js
@@ -0,0 +1,27 @@
+describe('getCanvasData (method)', () => {
+ it('should get an empty object when it is not ready', () => {
+ const image = window.createImage();
+ const cropper = new Cropper(image);
+ const canvasData = cropper.getCanvasData();
+
+ expect(canvasData).to.be.an('object').that.is.empty;
+ });
+
+ it('should get expect canvas data when ready', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const canvasData = cropper.getCanvasData();
+
+ expect(canvasData).to.be.an('object').that.has.all.keys(['left', 'top', 'width', 'height', 'naturalWidth', 'naturalHeight']);
+ expect(canvasData.left).to.be.a('number');
+ expect(canvasData.top).to.be.a('number');
+ expect(canvasData.width).to.be.a('number');
+ expect(canvasData.height).to.be.a('number');
+ expect(canvasData.naturalWidth).to.be.a('number');
+ expect(canvasData.naturalHeight).to.be.a('number');
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/getContainerData.spec.js b/library/cropperjs/test/specs/methods/getContainerData.spec.js
new file mode 100644
index 000000000..7ab676277
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/getContainerData.spec.js
@@ -0,0 +1,23 @@
+describe('getContainerData (method)', () => {
+ it('should get an empty object when it is not ready', () => {
+ const image = window.createImage();
+ const cropper = new Cropper(image);
+ const containerData = cropper.getContainerData();
+
+ expect(containerData).to.be.an('object').that.is.empty;
+ });
+
+ it('should get expect container data when ready', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const containerData = cropper.getContainerData();
+
+ expect(containerData).to.be.an('object').that.has.all.keys(['width', 'height']);
+ expect(containerData.width).to.be.a('number');
+ expect(containerData.height).to.be.a('number');
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/getCropBoxData.spec.js b/library/cropperjs/test/specs/methods/getCropBoxData.spec.js
new file mode 100644
index 000000000..f2760ca99
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/getCropBoxData.spec.js
@@ -0,0 +1,25 @@
+describe('getCropBoxData (method)', () => {
+ it('should get an empty object when it is not ready', () => {
+ const image = window.createImage();
+ const cropper = new Cropper(image);
+ const cropBoxData = cropper.getCropBoxData();
+
+ expect(cropBoxData).to.be.an('object').that.is.empty;
+ });
+
+ it('should get expect crop box data when ready', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const cropBoxData = cropper.getCropBoxData();
+
+ expect(cropBoxData).to.be.an('object').that.has.all.keys(['left', 'top', 'width', 'height']);
+ expect(cropBoxData.left).to.be.a('number');
+ expect(cropBoxData.top).to.be.a('number');
+ expect(cropBoxData.width).to.be.a('number');
+ expect(cropBoxData.height).to.be.a('number');
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/getCroppedCanvas.spec.js b/library/cropperjs/test/specs/methods/getCroppedCanvas.spec.js
new file mode 100644
index 000000000..16441773f
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/getCroppedCanvas.spec.js
@@ -0,0 +1,195 @@
+describe('getCroppedCanvas (method)', () => {
+ it('should get a canvas with the whole image drew when it is not cropped', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ autoCrop: false,
+
+ ready() {
+ const canvasData = cropper.getCanvasData();
+ const canvas = cropper.getCroppedCanvas();
+
+ expect(canvas).to.be.an.instanceof(HTMLCanvasElement);
+ expect(canvas.width).to.equal(canvasData.naturalWidth);
+ expect(canvas.height).to.equal(canvasData.naturalHeight);
+ done();
+ },
+ });
+ });
+
+ it('should get a canvas with the cropped area of the image drew', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const data = cropper.getData();
+ const canvas = cropper.getCroppedCanvas();
+
+ expect(canvas).to.be.an.instanceof(HTMLCanvasElement);
+ expect(canvas.width).to.equal(data.width);
+ expect(canvas.height).to.equal(data.height);
+ done();
+ },
+ });
+ });
+
+ it('should match the given width', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const width = 160;
+ const canvas = cropper.getCroppedCanvas({
+ width,
+ });
+
+ expect(canvas.width).to.equal(width);
+ done();
+ },
+ });
+ });
+
+ it('should match the given height', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const height = 90;
+ const canvas = cropper.getCroppedCanvas({
+ height,
+ });
+
+ expect(canvas.height).to.equal(height);
+ done();
+ },
+ });
+ });
+
+ it('should be contained when both width and height are given', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const width = 160;
+ const height = 90;
+ const canvas = cropper.getCroppedCanvas({
+ width,
+ height,
+ });
+
+ expect(canvas.width).to.be.most(width);
+ expect(canvas.height).to.be.most(height);
+ done();
+ },
+ });
+ });
+
+ it('should not be greater than the maximum width', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const maxWidth = 160;
+ const canvas = cropper.getCroppedCanvas({
+ maxWidth,
+ });
+
+ expect(canvas.width).to.be.most(maxWidth);
+ done();
+ },
+ });
+ });
+
+ it('should not be greater than the maximum height', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const maxHeight = 90;
+ const canvas = cropper.getCroppedCanvas({
+ maxHeight,
+ });
+
+ expect(canvas.height).to.be.most(maxHeight);
+ done();
+ },
+ });
+ });
+
+ it('should not be greater than both the maximum width and maximum height', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const maxWidth = 160;
+ const maxHeight = 90;
+ const canvas = cropper.getCroppedCanvas({
+ maxWidth,
+ maxHeight,
+ });
+
+ expect(canvas.width).to.be.most(maxWidth);
+ expect(canvas.height).to.be.most(maxHeight);
+ done();
+ },
+ });
+ });
+
+ it('should not be less than the minimum width', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const minWidth = 1600;
+ const canvas = cropper.getCroppedCanvas({
+ minWidth,
+ });
+
+ expect(canvas.width).to.be.least(minWidth);
+ done();
+ },
+ });
+ });
+
+ it('should not be less than the minimum height', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const minHeight = 900;
+ const canvas = cropper.getCroppedCanvas({
+ minHeight,
+ });
+
+ expect(canvas.height).to.be.least(minHeight);
+ done();
+ },
+ });
+ });
+
+ it('should not be less than both the minimum width and minimum height', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const minWidth = 1600;
+ const minHeight = 900;
+ const canvas = cropper.getCroppedCanvas({
+ minWidth,
+ minHeight,
+ });
+
+ expect(canvas.width).to.be.least(minWidth);
+ expect(canvas.height).to.be.least(minHeight);
+ done();
+ },
+ });
+ });
+
+ it('should match the given fill color', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const canvas = cropper.zoomTo(0.1).getCroppedCanvas({
+ fillColor: '#010101',
+ });
+ const pixelData = canvas.getContext('2d').getImageData(0, 0, 1, 1).data;
+
+ expect(pixelData[0]).to.equal(1, 'red is 1');
+ expect(pixelData[1]).to.equal(1, 'green is 1');
+ expect(pixelData[2]).to.equal(1, 'blue is 1');
+ expect(pixelData[3]).to.equal(255, 'color is opaque');
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/getData.spec.js b/library/cropperjs/test/specs/methods/getData.spec.js
new file mode 100644
index 000000000..13bcd2304
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/getData.spec.js
@@ -0,0 +1,91 @@
+describe('getData (method)', () => {
+ const initialData = {
+ x: 0,
+ y: 0,
+ width: 0,
+ height: 0,
+ rotate: 0,
+ scaleX: 1,
+ scaleY: 1,
+ };
+
+ it('should get initial data when it is not ready', () => {
+ const image = window.createImage();
+ const cropper = new Cropper(image);
+
+ expect(cropper.getData()).to.deep.equal(initialData);
+ });
+
+ it('should get initial data when it is not cropped', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ autoCrop: false,
+
+ ready() {
+ expect(cropper.cropped).to.be.false;
+ expect(cropper.getData()).to.deep.equal(initialData);
+ done();
+ },
+ });
+ });
+
+ it('should get data with expected properties', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const data = cropper.getData();
+
+ expect(data).to.be.an('object').that.has.all.keys(['x', 'y', 'width', 'height', 'rotate', 'scaleX', 'scaleY']);
+ expect(data.x).to.be.a('number');
+ expect(data.y).to.be.a('number');
+ expect(data.width).to.be.a('number');
+ expect(data.height).to.be.a('number');
+ expect(data.rotate).to.be.a('number');
+ expect(data.scaleX).to.be.a('number');
+ expect(data.scaleY).to.be.a('number');
+ done();
+ },
+ });
+ });
+
+ it('should get data with rounded property values', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const data = cropper.getData(true);
+
+ expect(data.x % 1).to.equal(0);
+ expect(data.y % 1).to.equal(0);
+ expect(data.width % 1).to.equal(0);
+ expect(data.height % 1).to.equal(0);
+ done();
+ },
+ });
+ });
+
+ it('should not exceed the natural width/height after rounded', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ viewMode: 1,
+
+ ready() {
+ const imageData = cropper.getImageData();
+ const left = 155.5;
+ const top = 155.5;
+
+ cropper.setData({
+ left,
+ top,
+ width: imageData.naturalWidth - left,
+ height: imageData.naturalHeight - top,
+ });
+
+ const roundedData = cropper.getData(true);
+
+ expect(roundedData.x + roundedData.width).to.be.at.most(imageData.naturalWidth);
+ expect(roundedData.y + roundedData.height).to.be.at.most(imageData.naturalHeight);
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/getImageData.spec.js b/library/cropperjs/test/specs/methods/getImageData.spec.js
new file mode 100644
index 000000000..c8d9ea703
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/getImageData.spec.js
@@ -0,0 +1,62 @@
+describe('getImageData (method)', () => {
+ it('should get an empty object when it is not loaded', () => {
+ const image = window.createImage();
+ const cropper = new Cropper(image);
+ const imageData = cropper.getImageData();
+
+ expect(imageData).to.be.an('object').that.is.empty;
+ });
+
+ it('should get expect image data when loaded', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const imageData = cropper.getImageData();
+
+ expect(imageData).to.have.all.keys(['left', 'top', 'width', 'height', 'rotate', 'scaleX', 'scaleY', 'naturalWidth', 'naturalHeight', 'aspectRatio']);
+ expect(imageData.left).to.be.a('number');
+ expect(imageData.top).to.be.a('number');
+ expect(imageData.width).to.be.a('number');
+ expect(imageData.height).to.be.a('number');
+ expect(imageData.rotate).to.be.a('number');
+ expect(imageData.scaleX).to.be.a('number');
+ expect(imageData.scaleY).to.be.a('number');
+ expect(imageData.naturalWidth).to.be.a('number');
+ expect(imageData.naturalHeight).to.be.a('number');
+ expect(imageData.aspectRatio).to.be.a('number');
+ done();
+ },
+ });
+ });
+
+ it('should not have the `rotate` property when it is not rotatable', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ rotatable: false,
+
+ ready() {
+ const imageData = cropper.getImageData();
+
+ expect(imageData).to.have.all.keys(['left', 'top', 'width', 'height', 'scaleX', 'scaleY', 'naturalWidth', 'naturalHeight', 'aspectRatio']);
+ expect(imageData.rotate).to.be.undefined;
+ done();
+ },
+ });
+ });
+
+ it('should not have the `scaleX` and `scaleY` properties when it is not scalable', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ scalable: false,
+
+ ready() {
+ const imageData = cropper.getImageData();
+
+ expect(imageData).to.have.all.keys(['left', 'top', 'width', 'height', 'rotate', 'naturalWidth', 'naturalHeight', 'aspectRatio']);
+ expect(imageData.scaleX).to.be.undefined;
+ expect(imageData.scaleY).to.be.undefined;
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/move.spec.js b/library/cropperjs/test/specs/methods/move.spec.js
new file mode 100644
index 000000000..8f89ba5e8
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/move.spec.js
@@ -0,0 +1,31 @@
+describe('move (method)', () => {
+ it('should move with the given offsets', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const canvasData = cropper.getCanvasData();
+ const changedCanvasData = cropper.move(1, 1).getCanvasData();
+
+ expect(changedCanvasData.left).to.equal(canvasData.left + 1);
+ expect(changedCanvasData.top).to.equal(canvasData.top + 1);
+ done();
+ },
+ });
+ });
+
+ it('should not work when it is not movable', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ movable: false,
+
+ ready() {
+ const canvasData = cropper.getCanvasData();
+ const changedCanvasData = cropper.move(1, 1).getCanvasData();
+
+ expect(changedCanvasData.left).to.equal(canvasData.left);
+ expect(changedCanvasData.top).to.equal(canvasData.top);
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/moveTo.spec.js b/library/cropperjs/test/specs/methods/moveTo.spec.js
new file mode 100644
index 000000000..42403b41c
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/moveTo.spec.js
@@ -0,0 +1,29 @@
+describe('moveTo (method)', () => {
+ it('should move to the given coordinate', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const canvasData = cropper.moveTo(100, 100).getCanvasData();
+
+ expect(canvasData.left).to.equal(100);
+ expect(canvasData.top).to.equal(100);
+ done();
+ },
+ });
+ });
+
+ it('should not work when it is not movable', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ movable: false,
+
+ ready() {
+ const canvasData = cropper.moveTo(100, 100).getCanvasData();
+
+ expect(canvasData.left).to.not.equal(100);
+ expect(canvasData.top).to.not.equal(100);
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/noConflict.spec.js b/library/cropperjs/test/specs/methods/noConflict.spec.js
new file mode 100644
index 000000000..d5c1c43d8
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/noConflict.spec.js
@@ -0,0 +1,16 @@
+describe('noConflict', () => {
+ it('should be a static method', () => {
+ expect(Cropper.noConflict).to.be.a('function');
+ });
+
+ it('should return the Cropper class itself', () => {
+ const { Cropper } = window;
+ const ImageCropper = Cropper.noConflict();
+
+ expect(ImageCropper).to.equal(Cropper);
+ expect(window.Cropper).to.be.undefined;
+
+ // Reverts it for the rest test suites
+ window.Cropper = ImageCropper;
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/replace.spec.js b/library/cropperjs/test/specs/methods/replace.spec.js
new file mode 100644
index 000000000..378cb0af8
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/replace.spec.js
@@ -0,0 +1,17 @@
+describe('replace (method)', () => {
+ it('should replace the image url with a new one', (done) => {
+ const image = window.createImage();
+ const imageURL = '/base/docs/images/picture-2.jpg';
+ const cropper = new Cropper(image, {
+ ready() {
+ cropper.options.ready = () => {
+ expect(image.src).to.include(imageURL);
+ done();
+ };
+
+ expect(image.src).to.not.include(imageURL);
+ cropper.replace(imageURL);
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/reset.spec.js b/library/cropperjs/test/specs/methods/reset.spec.js
new file mode 100644
index 000000000..e060d9794
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/reset.spec.js
@@ -0,0 +1,30 @@
+describe('reset (method)', () => {
+ it('should reset the cropper to its initial state', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const canvasData = cropper.getCanvasData();
+ const cropBoxData = cropper.getCropBoxData();
+
+ cropper.setCanvasData({
+ top: canvasData.top + 10,
+ width: canvasData.width - 10,
+ });
+
+ expect(cropper.getCanvasData()).to.not.deep.equal(canvasData);
+
+ cropper.setCropBoxData({
+ left: cropBoxData.left + 10,
+ height: cropBoxData.height - 10,
+ });
+
+ expect(cropper.getCropBoxData()).to.not.deep.equal(cropBoxData);
+
+ cropper.reset();
+ expect(cropper.getCanvasData()).to.deep.equal(canvasData);
+ expect(cropper.getCropBoxData()).to.deep.equal(cropBoxData);
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/rotate.spec.js b/library/cropperjs/test/specs/methods/rotate.spec.js
new file mode 100644
index 000000000..b4cfef511
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/rotate.spec.js
@@ -0,0 +1,27 @@
+describe('rotate (method)', () => {
+ it('should rotate with the given degree', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ expect(cropper.rotate(360).getImageData().rotate).to.equal(0);
+ expect(cropper.rotate(90).getImageData().rotate).to.equal(90);
+ expect(cropper.rotate(-180).getImageData().rotate).to.equal(-90);
+ done();
+ },
+ });
+ });
+
+ it('should not work when it is not rotatable', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ rotatable: false,
+
+ ready() {
+ expect(cropper.rotate(360).getImageData().rotate).to.be.undefined;
+ expect(cropper.rotate(90).getImageData().rotate).to.be.undefined;
+ expect(cropper.rotate(-180).getImageData().rotate).to.be.undefined;
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/rotateTo.spec.js b/library/cropperjs/test/specs/methods/rotateTo.spec.js
new file mode 100644
index 000000000..0ae59ee55
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/rotateTo.spec.js
@@ -0,0 +1,28 @@
+describe('rotateTo (method)', () => {
+ it('should rotate to the given degree', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ expect(cropper.rotateTo(360).getImageData().rotate).to.equal(0);
+ expect(cropper.rotateTo(90).getImageData().rotate).to.equal(90);
+ expect(cropper.rotateTo(0).getImageData().rotate).to.equal(0);
+ expect(cropper.rotateTo(-180).getImageData().rotate).to.equal(-180);
+ done();
+ },
+ });
+ });
+
+ it('should not work when it is not rotatable', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ rotatable: false,
+
+ ready() {
+ expect(cropper.rotateTo(360).getImageData().rotate).to.be.undefined;
+ expect(cropper.rotateTo(90).getImageData().rotate).to.be.undefined;
+ expect(cropper.rotateTo(-180).getImageData().rotate).to.be.undefined;
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/scale.spec.js b/library/cropperjs/test/specs/methods/scale.spec.js
new file mode 100644
index 000000000..9918cba3a
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/scale.spec.js
@@ -0,0 +1,29 @@
+describe('scale (method)', () => {
+ it('should scale with the given values', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const imageData = cropper.scale(-1, -1).getImageData();
+
+ expect(imageData.scaleX).to.equal(-1);
+ expect(imageData.scaleY).to.equal(-1);
+ done();
+ },
+ });
+ });
+
+ it('should not work when it is not scalable', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ scalable: false,
+
+ ready() {
+ const imageData = cropper.scale(-1, -1).getImageData();
+
+ expect(imageData.scaleX).to.be.undefined;
+ expect(imageData.scaleY).to.be.undefined;
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/scaleX.spec.js b/library/cropperjs/test/specs/methods/scaleX.spec.js
new file mode 100644
index 000000000..72ac8e28a
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/scaleX.spec.js
@@ -0,0 +1,27 @@
+describe('scaleX (method)', () => {
+ it('should be scaled in the x-axis', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const imageData = cropper.scaleX(-1).getImageData();
+
+ expect(imageData.scaleX).to.equal(-1);
+ done();
+ },
+ });
+ });
+
+ it('should not work when it is not scalable', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ scalable: false,
+
+ ready() {
+ const imageData = cropper.scaleX(-1).getImageData();
+
+ expect(imageData.scaleX).to.be.undefined;
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/scaleY.spec.js b/library/cropperjs/test/specs/methods/scaleY.spec.js
new file mode 100644
index 000000000..f983a2fbf
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/scaleY.spec.js
@@ -0,0 +1,27 @@
+describe('scaleY (method)', () => {
+ it('should be scaled in the y-axis', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const imageData = cropper.scaleY(-1).getImageData();
+
+ expect(imageData.scaleY).to.equal(-1);
+ done();
+ },
+ });
+ });
+
+ it('should not work when it is not scalable', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ scalable: false,
+
+ ready() {
+ const imageData = cropper.scaleY(-1).getImageData();
+
+ expect(imageData.scaleY).to.be.undefined;
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/setAspectRatio.spec.js b/library/cropperjs/test/specs/methods/setAspectRatio.spec.js
new file mode 100644
index 000000000..dc76ad18f
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/setAspectRatio.spec.js
@@ -0,0 +1,31 @@
+describe('setAspectRatio (method)', () => {
+ it('should change the aspect ratio to `1`', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const { options } = cropper;
+
+ expect(options.aspectRatio).to.be.NaN;
+ cropper.setAspectRatio(1);
+ expect(options.aspectRatio).to.equal(1);
+ done();
+ },
+ });
+ });
+
+ it('should change the aspect ratio to `NaN`', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ aspectRatio: 1,
+
+ ready() {
+ const { options } = cropper;
+
+ expect(options.aspectRatio).to.equal(1);
+ cropper.setAspectRatio(NaN);
+ expect(options.aspectRatio).to.be.NaN;
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/setCanvasData.spec.js b/library/cropperjs/test/specs/methods/setCanvasData.spec.js
new file mode 100644
index 000000000..316161acc
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/setCanvasData.spec.js
@@ -0,0 +1,39 @@
+describe('setCanvasData (method)', () => {
+ it('should change the positions only', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const canvasData = cropper.getCanvasData();
+ const changedCanvasData = cropper.setCanvasData({
+ left: 16,
+ top: 9,
+ }).getCanvasData();
+
+ expect(changedCanvasData.left).to.not.equal(canvasData.left);
+ expect(changedCanvasData.top).to.not.equal(canvasData.top);
+ expect(changedCanvasData.width).to.equal(canvasData.width);
+ expect(changedCanvasData.height).to.equal(canvasData.height);
+ done();
+ },
+ });
+ });
+
+ it('should change the sizes only', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const canvasData = cropper.getCanvasData();
+ const changedCanvasData = cropper.setCanvasData({
+ width: 320,
+ height: 180,
+ }).getCanvasData();
+
+ expect(changedCanvasData.left).to.equal(canvasData.left);
+ expect(changedCanvasData.top).to.equal(canvasData.top);
+ expect(changedCanvasData.width).to.not.equal(canvasData.width);
+ expect(changedCanvasData.height).to.not.equal(canvasData.height);
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/setCropBoxData.spec.js b/library/cropperjs/test/specs/methods/setCropBoxData.spec.js
new file mode 100644
index 000000000..829c83419
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/setCropBoxData.spec.js
@@ -0,0 +1,39 @@
+describe('setCropBoxData (method)', () => {
+ it('should change the positions only', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const cropBoxData = cropper.getCropBoxData();
+ const changedCropBoxData = cropper.setCropBoxData({
+ left: 16,
+ top: 9,
+ }).getCropBoxData();
+
+ expect(changedCropBoxData.left).to.not.equal(cropBoxData.left);
+ expect(changedCropBoxData.top).to.not.equal(cropBoxData.top);
+ expect(changedCropBoxData.width).to.equal(cropBoxData.width);
+ expect(changedCropBoxData.height).to.equal(cropBoxData.height);
+ done();
+ },
+ });
+ });
+
+ it('should change the sizes only', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const cropBoxData = cropper.getCropBoxData();
+ const changedCropBoxData = cropper.setCropBoxData({
+ width: 320,
+ height: 180,
+ }).getCropBoxData();
+
+ expect(changedCropBoxData.left).to.equal(cropBoxData.left);
+ expect(changedCropBoxData.top).to.equal(cropBoxData.top);
+ expect(changedCropBoxData.width).to.not.equal(cropBoxData.width);
+ expect(changedCropBoxData.height).to.not.equal(cropBoxData.height);
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/setData.spec.js b/library/cropperjs/test/specs/methods/setData.spec.js
new file mode 100644
index 000000000..418052409
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/setData.spec.js
@@ -0,0 +1,71 @@
+describe('setData (method)', () => {
+ it('should change the positions only', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const data = cropper.getData();
+ const changedData = cropper.setData({
+ x: 1,
+ y: 1,
+ }).getData();
+
+ expect(changedData.x).to.not.equal(data.x);
+ expect(changedData.y).to.not.equal(data.y);
+ expect(changedData.width).to.equal(data.width);
+ expect(changedData.height).to.equal(data.height);
+ done();
+ },
+ });
+ });
+
+ it('should change the positions only', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const data = cropper.getData();
+ const changedData = cropper.setData({
+ width: 160,
+ height: 90,
+ }).getData();
+
+ expect(changedData.x).to.equal(data.x);
+ expect(changedData.y).to.equal(data.y);
+ expect(changedData.width).to.not.equal(data.width);
+ expect(changedData.height).to.not.equal(data.height);
+ done();
+ },
+ });
+ });
+
+ it('should change the rotate degrees', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const data = cropper.getData();
+ const changedData = cropper.setData({
+ rotate: 90,
+ }).getData();
+
+ expect(changedData.rotate).to.not.equal(data.rotate);
+ done();
+ },
+ });
+ });
+
+ it('should change the scale in both x-axis and y-axis', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const data = cropper.getData();
+ const changedData = cropper.setData({
+ scaleX: -1,
+ scaleY: -1,
+ }).getData();
+
+ expect(changedData.scaleX).to.not.equal(data.scaleX);
+ expect(changedData.scaleY).to.not.equal(data.scaleY);
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/setDefaults.spec.js b/library/cropperjs/test/specs/methods/setDefaults.spec.js
new file mode 100644
index 000000000..fb894db3b
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/setDefaults.spec.js
@@ -0,0 +1,30 @@
+describe('setDefaults', () => {
+ it('should be a static method', () => {
+ expect(Cropper.setDefaults).to.be.a('function');
+ });
+
+ it('should change the global default options', (done) => {
+ Cropper.setDefaults({
+ aspectRatio: 1,
+ });
+
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ aspectRatio: 1,
+
+ crop() {
+ const cropBoxData = cropper.getCropBoxData();
+
+ expect(cropBoxData.width).to.equal(cropBoxData.height);
+ done();
+ },
+ });
+
+ expect(cropper.options.aspectRatio).to.equal(1);
+
+ // Reverts it for the rest test suites
+ Cropper.setDefaults({
+ aspectRatio: NaN,
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/setDragMode.spec.js b/library/cropperjs/test/specs/methods/setDragMode.spec.js
new file mode 100644
index 000000000..612220ec2
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/setDragMode.spec.js
@@ -0,0 +1,29 @@
+describe('setDragMode (method)', () => {
+ it('should set the drag mode to "move"', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const { dragBox } = cropper;
+
+ expect(dragBox.dataset.cropperAction).to.equal('crop');
+ cropper.setDragMode('move');
+ expect(dragBox.dataset.cropperAction).to.equal('move');
+ done();
+ },
+ });
+ });
+
+ it('should set the drag mode to "none"', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const { dragBox } = cropper;
+
+ expect(dragBox.dataset.cropperAction).to.equal('crop');
+ cropper.setDragMode('none');
+ expect(dragBox.dataset.cropperAction).to.equal('none');
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/zoom.spec.js b/library/cropperjs/test/specs/methods/zoom.spec.js
new file mode 100644
index 000000000..4989d27e6
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/zoom.spec.js
@@ -0,0 +1,31 @@
+describe('zoom (method)', () => {
+ it('should be zoomed', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const canvasData = cropper.getCanvasData();
+ const changedCanvasData = cropper.zoom(0.1).getCanvasData();
+
+ expect(changedCanvasData.width).to.be.above(canvasData.width);
+ expect(changedCanvasData.height).to.be.above(canvasData.height);
+ done();
+ },
+ });
+ });
+
+ it('should not be zoomed when it is not zoomable', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ zoomable: false,
+
+ ready() {
+ const canvasData = cropper.getCanvasData();
+ const changedCanvasData = cropper.zoom(0.1).getCanvasData();
+
+ expect(changedCanvasData.width).to.equal(canvasData.width);
+ expect(changedCanvasData.height).to.equal(canvasData.height);
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/methods/zoomTo.spec.js b/library/cropperjs/test/specs/methods/zoomTo.spec.js
new file mode 100644
index 000000000..a06730485
--- /dev/null
+++ b/library/cropperjs/test/specs/methods/zoomTo.spec.js
@@ -0,0 +1,33 @@
+describe('zoomTo (method)', () => {
+ it('should zoom to the certain ratio', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const imageData = cropper.zoomTo(1).getImageData();
+ const canvasData = cropper.getCanvasData();
+
+ expect(imageData.width).to.equal(imageData.naturalWidth);
+ expect(canvasData.width).to.equal(canvasData.naturalWidth);
+ expect(canvasData.naturalWidth).to.equal(imageData.naturalWidth);
+ done();
+ },
+ });
+ });
+
+ it('should not be zoomed when it is not zoomable', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ zoomable: false,
+
+ ready() {
+ const imageData = cropper.zoomTo(1).getImageData();
+ const canvasData = cropper.getCanvasData();
+
+ expect(imageData.width).to.not.equal(imageData.naturalWidth);
+ expect(canvasData.width).to.not.equal(canvasData.naturalWidth);
+ expect(canvasData.naturalWidth).to.equal(imageData.naturalWidth);
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/options/aspectRatio.spec.js b/library/cropperjs/test/specs/options/aspectRatio.spec.js
new file mode 100644
index 000000000..4524d2810
--- /dev/null
+++ b/library/cropperjs/test/specs/options/aspectRatio.spec.js
@@ -0,0 +1,24 @@
+describe('aspectRatio (option)', () => {
+ it('should be `NaN` by default', () => {
+ const image = window.createImage();
+ const cropper = new Cropper(image);
+
+ expect(cropper.options.aspectRatio).to.be.NaN;
+ });
+
+ it('should match the given aspect ratio', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ aspectRatio: 1,
+
+ crop() {
+ const cropBoxData = cropper.getCropBoxData();
+
+ expect(cropBoxData.width).to.equal(cropBoxData.height);
+ done();
+ },
+ });
+
+ expect(cropper.options.aspectRatio).to.equal(1);
+ });
+});
diff --git a/library/cropperjs/test/specs/options/autoCrop.spec.js b/library/cropperjs/test/specs/options/autoCrop.spec.js
new file mode 100644
index 000000000..19899e94d
--- /dev/null
+++ b/library/cropperjs/test/specs/options/autoCrop.spec.js
@@ -0,0 +1,29 @@
+describe('autoCrop (option)', () => {
+ it('should crop automatically by default', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ expect(cropper.cropped).to.be.true;
+ expect(window.getComputedStyle(cropper.cropBox).display).to.not.equal('none');
+ done();
+ },
+ });
+
+ expect(cropper.options.autoCrop).to.be.true;
+ });
+
+ it('should not crop automatically', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ autoCrop: false,
+
+ ready() {
+ expect(cropper.cropped).to.be.false;
+ expect(window.getComputedStyle(cropper.cropBox).display).to.equal('none');
+ done();
+ },
+ });
+
+ expect(cropper.options.autoCrop).to.be.false;
+ });
+});
diff --git a/library/cropperjs/test/specs/options/autoCropArea.spec.js b/library/cropperjs/test/specs/options/autoCropArea.spec.js
new file mode 100644
index 000000000..40513f4f3
--- /dev/null
+++ b/library/cropperjs/test/specs/options/autoCropArea.spec.js
@@ -0,0 +1,35 @@
+describe('autoCropArea (option)', () => {
+ it('should be 80% by default', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const canvasData = cropper.getCanvasData();
+ const cropBoxData = cropper.getCropBoxData();
+
+ expect(canvasData.width * 0.8).to.equal(cropBoxData.width);
+ expect(canvasData.height * 0.8).to.equal(cropBoxData.height);
+ done();
+ },
+ });
+
+ expect(cropper.options.autoCropArea).to.equal(0.8);
+ });
+
+ it('should be 100%', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ autoCropArea: 1,
+
+ ready() {
+ const canvasData = cropper.getCanvasData();
+ const cropBoxData = cropper.getCropBoxData();
+
+ expect(canvasData.width).to.equal(cropBoxData.width);
+ expect(canvasData.height).to.equal(cropBoxData.height);
+ done();
+ },
+ });
+
+ expect(cropper.options.autoCropArea).to.equal(1);
+ });
+});
diff --git a/library/cropperjs/test/specs/options/background.spec.js b/library/cropperjs/test/specs/options/background.spec.js
new file mode 100644
index 000000000..d1f9866e2
--- /dev/null
+++ b/library/cropperjs/test/specs/options/background.spec.js
@@ -0,0 +1,27 @@
+describe('background (option)', () => {
+ it('should show the background by default', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ expect(window.getComputedStyle(cropper.cropper).backgroundImage).to.not.equal('none');
+ done();
+ },
+ });
+
+ expect(cropper.options.background).to.be.true;
+ });
+
+ it('should not show the background', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ background: false,
+
+ ready() {
+ expect(window.getComputedStyle(cropper.cropper).backgroundImage).to.equal('none');
+ done();
+ },
+ });
+
+ expect(cropper.options.background).to.be.false;
+ });
+});
diff --git a/library/cropperjs/test/specs/options/center.spec.js b/library/cropperjs/test/specs/options/center.spec.js
new file mode 100644
index 000000000..37551435e
--- /dev/null
+++ b/library/cropperjs/test/specs/options/center.spec.js
@@ -0,0 +1,31 @@
+describe('center (option)', () => {
+ it('should show the center cross hair by default', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const center = cropper.cropper.querySelector('.cropper-center');
+
+ expect(window.getComputedStyle(center).display).to.not.equal('none');
+ done();
+ },
+ });
+
+ expect(cropper.options.center).to.be.true;
+ });
+
+ it('should hide the center cross hair', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ center: false,
+
+ ready() {
+ const center = cropper.cropper.querySelector('.cropper-center');
+
+ expect(window.getComputedStyle(center).display).to.equal('none');
+ done();
+ },
+ });
+
+ expect(cropper.options.center).to.be.false;
+ });
+});
diff --git a/library/cropperjs/test/specs/options/checkCrossOrigin.spec.js b/library/cropperjs/test/specs/options/checkCrossOrigin.spec.js
new file mode 100644
index 000000000..52d9b4682
--- /dev/null
+++ b/library/cropperjs/test/specs/options/checkCrossOrigin.spec.js
@@ -0,0 +1,49 @@
+describe('checkCrossOrigin (option)', () => {
+ const crossOriginImageURL = 'https://fengyuanchen.github.io/cropperjs/images/picture.jpg';
+
+ it('should check cross origin by default', (done) => {
+ const image = window.createImage({
+ src: crossOriginImageURL,
+ });
+ const cropper = new Cropper(image, {
+ ready() {
+ expect(cropper.image.crossOrigin).to.equal('anonymous');
+ expect(cropper.image.src).to.include('timestamp');
+ done();
+ },
+ });
+
+ expect(cropper.options.checkCrossOrigin).to.be.true;
+ });
+
+ it('should not check cross origin', (done) => {
+ const image = window.createImage({
+ src: crossOriginImageURL,
+ });
+ const cropper = new Cropper(image, {
+ checkCrossOrigin: false,
+
+ ready() {
+ expect(cropper.image.crossOrigin).to.be.null;
+ expect(cropper.image.src).to.not.include('timestamp');
+ done();
+ },
+ });
+
+ expect(cropper.options.checkCrossOrigin).to.be.false;
+ });
+
+ it('should add timestamp even though the image has the `crossOrigin` attribute', (done) => {
+ const image = window.createImage({
+ src: crossOriginImageURL,
+ crossOrigin: 'anonymous',
+ });
+ const cropper = new Cropper(image, {
+ ready() {
+ expect(cropper.image.crossOrigin).to.equal('anonymous');
+ expect(cropper.image.src).to.include('timestamp');
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/options/checkOrientation.spec.js b/library/cropperjs/test/specs/options/checkOrientation.spec.js
new file mode 100644
index 000000000..6f37e6db2
--- /dev/null
+++ b/library/cropperjs/test/specs/options/checkOrientation.spec.js
@@ -0,0 +1,45 @@
+describe('checkOrientation (option)', () => {
+ const imageURL = '/base/docs/images/picture-3.jpg';
+
+ it('should check orientation be default', (done) => {
+ const image = window.createImage({
+ src: imageURL,
+ });
+ const cropper = new Cropper(image, {
+ ready() {
+ expect(cropper.getData().rotate).to.not.equal(0);
+ done();
+ },
+ });
+
+ expect(cropper.options.checkOrientation).to.be.true;
+ });
+
+ it('should not check orientation', (done) => {
+ const image = window.createImage({
+ src: imageURL,
+ });
+ const cropper = new Cropper(image, {
+ checkOrientation: false,
+
+ ready() {
+ expect(cropper.getData().rotate).to.equal(0);
+ done();
+ },
+ });
+
+ expect(cropper.options.checkOrientation).to.be.false;
+ });
+
+ it('should not check orientation when it is not rotatable and not scalable', () => {
+ const image = window.createImage({
+ src: imageURL,
+ });
+ const cropper = new Cropper(image, {
+ rotatable: false,
+ scalable: false,
+ });
+
+ expect(cropper.options.checkOrientation).to.be.false;
+ });
+});
diff --git a/library/cropperjs/test/specs/options/crop.spec.js b/library/cropperjs/test/specs/options/crop.spec.js
new file mode 100644
index 000000000..a3e11f2d7
--- /dev/null
+++ b/library/cropperjs/test/specs/options/crop.spec.js
@@ -0,0 +1,28 @@
+describe('crop (option)', () => {
+ it('should be `null` be default', () => {
+ const image = window.createImage();
+ const cropper = new Cropper(image);
+
+ expect(cropper.options.crop).to.be.null;
+ });
+
+ it('should execute the `crop` hook function', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ crop(event) {
+ expect(event.type).to.equal('crop');
+ expect(event.detail).to.be.an('object').that.has.all.keys(['x', 'y', 'width', 'height', 'rotate', 'scaleX', 'scaleY']);
+ expect(event.detail.x).to.be.a('number');
+ expect(event.detail.y).to.be.a('number');
+ expect(event.detail.width).to.be.a('number');
+ expect(event.detail.height).to.be.a('number');
+ expect(event.detail.rotate).to.be.a('number');
+ expect(event.detail.scaleX).to.be.a('number');
+ expect(event.detail.scaleY).to.be.a('number');
+ done();
+ },
+ });
+
+ expect(cropper.options.crop).to.be.a('function');
+ });
+});
diff --git a/library/cropperjs/test/specs/options/cropBoxMovable.spec.js b/library/cropperjs/test/specs/options/cropBoxMovable.spec.js
new file mode 100644
index 000000000..8a1e52cc4
--- /dev/null
+++ b/library/cropperjs/test/specs/options/cropBoxMovable.spec.js
@@ -0,0 +1,31 @@
+describe('cropBoxMovable (option)', () => {
+ it('should by movable by default', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const face = cropper.cropper.querySelector('.cropper-face');
+
+ expect(face.dataset.cropperAction).to.equal('all');
+ done();
+ },
+ });
+
+ expect(cropper.options.cropBoxMovable).to.be.true;
+ });
+
+ it('should not be movable', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ cropBoxMovable: false,
+
+ ready() {
+ const face = cropper.cropper.querySelector('.cropper-face');
+
+ expect(face.dataset.cropperAction).to.not.equal('all');
+ done();
+ },
+ });
+
+ expect(cropper.options.cropBoxMovable).to.be.false;
+ });
+});
diff --git a/library/cropperjs/test/specs/options/cropBoxResizable.spec.js b/library/cropperjs/test/specs/options/cropBoxResizable.spec.js
new file mode 100644
index 000000000..2955a0407
--- /dev/null
+++ b/library/cropperjs/test/specs/options/cropBoxResizable.spec.js
@@ -0,0 +1,31 @@
+describe('cropBoxResizable (option)', () => {
+ it('should be resizable by default', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ Array.from(cropper.cropper.querySelectorAll('.cropper-line, .cropper-point')).forEach((handler) => {
+ expect(window.getComputedStyle(handler).display).to.not.equal('none');
+ });
+ done();
+ },
+ });
+
+ expect(cropper.options.cropBoxResizable).to.be.true;
+ });
+
+ it('should not be resizable', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ cropBoxResizable: false,
+
+ ready() {
+ Array.from(cropper.cropper.querySelectorAll('.cropper-line, .cropper-point')).forEach((handler) => {
+ expect(window.getComputedStyle(handler).display).to.equal('none');
+ });
+ done();
+ },
+ });
+
+ expect(cropper.options.cropBoxResizable).to.be.false;
+ });
+});
diff --git a/library/cropperjs/test/specs/options/cropend.spec.js b/library/cropperjs/test/specs/options/cropend.spec.js
new file mode 100644
index 000000000..c2e9f0f01
--- /dev/null
+++ b/library/cropperjs/test/specs/options/cropend.spec.js
@@ -0,0 +1,35 @@
+describe('cropend (option)', () => {
+ const POINTER_DOWN = window.PointerEvent ? 'pointerdown' : 'mousedown';
+ const POINTER_MOVE = window.PointerEvent ? 'pointermove' : 'mousemove';
+ const POINTER_UP = window.PointerEvent ? 'pointerup' : 'mouseup';
+
+ it('should be `null` be default', () => {
+ const image = window.createImage();
+ const cropper = new Cropper(image);
+
+ expect(cropper.options.cropend).to.be.null;
+ });
+
+ it('should execute the `cropend` hook function', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const { dragBox } = cropper;
+
+ dragBox.dispatchEvent(window.createEvent(POINTER_DOWN));
+ dragBox.dispatchEvent(window.createEvent(POINTER_MOVE));
+ dragBox.dispatchEvent(window.createEvent(POINTER_UP));
+ },
+
+ cropend(event) {
+ expect(event.type).to.equal('cropend');
+ expect(event.detail).to.be.an('object').that.has.all.keys(['action', 'originalEvent']);
+ expect(event.detail.action).to.equal('crop');
+ expect(event.detail.originalEvent.type).to.equal(POINTER_UP);
+ done();
+ },
+ });
+
+ expect(cropper.options.cropend).to.be.a('function');
+ });
+});
diff --git a/library/cropperjs/test/specs/options/cropmove.spec.js b/library/cropperjs/test/specs/options/cropmove.spec.js
new file mode 100644
index 000000000..d18735923
--- /dev/null
+++ b/library/cropperjs/test/specs/options/cropmove.spec.js
@@ -0,0 +1,57 @@
+describe('cropmove (option)', () => {
+ const POINTER_DOWN = window.PointerEvent ? 'pointerdown' : 'mousedown';
+ const POINTER_MOVE = window.PointerEvent ? 'pointermove' : 'mousemove';
+ const POINTER_UP = window.PointerEvent ? 'pointerup' : 'mouseup';
+
+ it('should be `null` be default', () => {
+ const image = window.createImage();
+ const cropper = new Cropper(image);
+
+ expect(cropper.options.cropmove).to.be.null;
+ });
+
+ it('should execute the `cropmove` hook function', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const { dragBox } = cropper;
+
+ dragBox.dispatchEvent(window.createEvent(POINTER_DOWN));
+ dragBox.dispatchEvent(window.createEvent(POINTER_MOVE));
+ dragBox.dispatchEvent(window.createEvent(POINTER_UP));
+ },
+
+ cropmove(event) {
+ expect(event.type).to.equal('cropmove');
+ expect(event.detail).to.be.an('object').that.has.all.keys(['action', 'originalEvent']);
+ expect(event.detail.action).to.equal('crop');
+ expect(event.detail.originalEvent.type).to.equal(POINTER_MOVE);
+ done();
+ },
+ });
+
+ expect(cropper.options.cropmove).to.be.a('function');
+ });
+
+ it('should not execute the `crop` hook function when default prevented', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const { dragBox } = cropper;
+
+ cropper.options.crop = () => {
+ expect.fail(1, 0);
+ };
+
+ dragBox.dispatchEvent(window.createEvent(POINTER_DOWN));
+ dragBox.dispatchEvent(window.createEvent(POINTER_MOVE));
+ dragBox.dispatchEvent(window.createEvent(POINTER_UP));
+ },
+
+ cropmove(event) {
+ event.preventDefault();
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/options/cropstart.spec.js b/library/cropperjs/test/specs/options/cropstart.spec.js
new file mode 100644
index 000000000..cc261afb1
--- /dev/null
+++ b/library/cropperjs/test/specs/options/cropstart.spec.js
@@ -0,0 +1,61 @@
+describe('cropstart (option)', () => {
+ const POINTER_DOWN = window.PointerEvent ? 'pointerdown' : 'mousedown';
+ const POINTER_MOVE = window.PointerEvent ? 'pointermove' : 'mousemove';
+ const POINTER_UP = window.PointerEvent ? 'pointerup' : 'mouseup';
+
+ it('should be `null` be default', () => {
+ const image = window.createImage();
+ const cropper = new Cropper(image);
+
+ expect(cropper.options.cropstart).to.be.null;
+ });
+
+ it('should execute the `cropstart` hook function', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const { dragBox } = cropper;
+
+ dragBox.dispatchEvent(window.createEvent(POINTER_DOWN));
+ dragBox.dispatchEvent(window.createEvent(POINTER_MOVE));
+ dragBox.dispatchEvent(window.createEvent(POINTER_UP));
+ },
+
+ cropstart(event) {
+ expect(event.type).to.equal('cropstart');
+ expect(event.detail).to.be.an('object').that.has.all.keys(['action', 'originalEvent']);
+ expect(event.detail.action).to.equal('crop');
+ expect(event.detail.originalEvent.type).to.equal(POINTER_DOWN);
+ done();
+ },
+ });
+
+ expect(cropper.options.cropstart).to.be.a('function');
+ });
+
+ it('should not execute the `cropmove` and `cropend` callback function when default prevented', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const { dragBox } = cropper;
+
+ dragBox.dispatchEvent(window.createEvent(POINTER_DOWN));
+ dragBox.dispatchEvent(window.createEvent(POINTER_MOVE));
+ dragBox.dispatchEvent(window.createEvent(POINTER_UP));
+ },
+
+ cropstart(event) {
+ event.preventDefault();
+ done();
+ },
+
+ cropmove() {
+ expect.fail(1, 0);
+ },
+
+ cropend() {
+ expect.fail(1, 0);
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/options/data.spec.js b/library/cropperjs/test/specs/options/data.spec.js
new file mode 100644
index 000000000..99be19adb
--- /dev/null
+++ b/library/cropperjs/test/specs/options/data.spec.js
@@ -0,0 +1,40 @@
+describe('data (option)', () => {
+ it('should be null by default', () => {
+ const image = window.createImage();
+ const cropper = new Cropper(image);
+
+ expect(cropper.options.data).to.be.null;
+ });
+
+ it('should match the given data', (done) => {
+ const image = window.createImage();
+ const initialData = {
+ x: 16,
+ y: 9,
+ width: 160,
+ height: 90,
+ // rotate: 45,
+ // scaleX: -1,
+ // scaleY: -1,
+ };
+
+ const cropper = new Cropper(image, {
+ data: initialData,
+
+ ready() {
+ const data = cropper.getData(true);
+
+ expect(data.x).to.equal(initialData.x);
+ expect(data.y).to.equal(initialData.y);
+ expect(data.width).to.equal(initialData.width);
+ expect(data.height).to.equal(initialData.height);
+ // expect(data.rotate).to.equal(initialData.rotate);
+ // expect(data.scaleX).to.equal(initialData.scaleX);
+ // expect(data.scaleY).to.equal(initialData.scaleY);
+ done();
+ },
+ });
+
+ expect(cropper.options.data).to.deep.equal(initialData);
+ });
+});
diff --git a/library/cropperjs/test/specs/options/dragMode.spec.js b/library/cropperjs/test/specs/options/dragMode.spec.js
new file mode 100644
index 000000000..fb41c8791
--- /dev/null
+++ b/library/cropperjs/test/specs/options/dragMode.spec.js
@@ -0,0 +1,41 @@
+describe('dragMode (option)', () => {
+ it('should be "crop" by default', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ expect(cropper.dragBox.dataset.cropperAction).to.equal('crop');
+ done();
+ },
+ });
+
+ expect(cropper.options.dragMode).to.equal('crop');
+ });
+
+ it('should be "move"', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ dragMode: 'move',
+
+ ready() {
+ expect(cropper.dragBox.dataset.cropperAction).to.equal('move');
+ done();
+ },
+ });
+
+ expect(cropper.options.dragMode).to.equal('move');
+ });
+
+ it('should be "none"', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ dragMode: 'none',
+
+ ready() {
+ expect(cropper.dragBox.dataset.cropperAction).to.equal('none');
+ done();
+ },
+ });
+
+ expect(cropper.options.dragMode).to.equal('none');
+ });
+});
diff --git a/library/cropperjs/test/specs/options/guides.spec.js b/library/cropperjs/test/specs/options/guides.spec.js
new file mode 100644
index 000000000..0ee8f521d
--- /dev/null
+++ b/library/cropperjs/test/specs/options/guides.spec.js
@@ -0,0 +1,31 @@
+describe('guides (option)', () => {
+ it('should show the guides by default', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ Array.from(cropper.cropper.querySelectorAll('.cropper-dashed')).forEach((dashed) => {
+ expect(window.getComputedStyle(dashed).display).to.not.equal('none');
+ });
+ done();
+ },
+ });
+
+ expect(cropper.options.guides).to.be.true;
+ });
+
+ it('should hide the guides', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ guides: false,
+
+ ready() {
+ Array.from(cropper.cropper.querySelectorAll('.cropper-dashed')).forEach((dashed) => {
+ expect(window.getComputedStyle(dashed).display).to.equal('none');
+ });
+ done();
+ },
+ });
+
+ expect(cropper.options.guides).to.be.false;
+ });
+});
diff --git a/library/cropperjs/test/specs/options/highlight.spec.js b/library/cropperjs/test/specs/options/highlight.spec.js
new file mode 100644
index 000000000..16a63c205
--- /dev/null
+++ b/library/cropperjs/test/specs/options/highlight.spec.js
@@ -0,0 +1,31 @@
+describe('highlight (option)', () => {
+ it('should show the highlight mask by default', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const face = cropper.cropper.querySelector('.cropper-face');
+
+ expect(window.getComputedStyle(face).opacity).to.not.equal('0');
+ done();
+ },
+ });
+
+ expect(cropper.options.highlight).to.be.true;
+ });
+
+ it('should not show the highlight mask', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ highlight: false,
+
+ ready() {
+ const face = cropper.cropper.querySelector('.cropper-face');
+
+ expect(window.getComputedStyle(face).opacity).to.equal('0');
+ done();
+ },
+ });
+
+ expect(cropper.options.highlight).to.be.false;
+ });
+});
diff --git a/library/cropperjs/test/specs/options/initialAspectRatio.spec.js b/library/cropperjs/test/specs/options/initialAspectRatio.spec.js
new file mode 100644
index 000000000..fc869f1e1
--- /dev/null
+++ b/library/cropperjs/test/specs/options/initialAspectRatio.spec.js
@@ -0,0 +1,40 @@
+describe('initialAspectRatio (option)', () => {
+ it('should be `NaN` by default', () => {
+ const image = window.createImage();
+ const cropper = new Cropper(image);
+
+ expect(cropper.options.initialAspectRatio).to.be.NaN;
+ });
+
+ it('should match the given aspect ratio', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ initialAspectRatio: 1,
+
+ ready() {
+ const cropBoxData = cropper.getCropBoxData();
+
+ expect(cropBoxData.width).to.equal(cropBoxData.height);
+ done();
+ },
+ });
+
+ expect(cropper.options.initialAspectRatio).to.equal(1);
+ });
+
+ it('should allow to change the aspect ratio', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ initialAspectRatio: 2,
+
+ ready() {
+ let cropBoxData = cropper.getCropBoxData();
+
+ cropBoxData.width = cropBoxData.height;
+ cropBoxData = cropper.setCropBoxData(cropBoxData).getCropBoxData();
+ expect(cropBoxData.width).to.equal(cropBoxData.height);
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/options/minCanvasHeight.spec.js b/library/cropperjs/test/specs/options/minCanvasHeight.spec.js
new file mode 100644
index 000000000..028d22e9f
--- /dev/null
+++ b/library/cropperjs/test/specs/options/minCanvasHeight.spec.js
@@ -0,0 +1,27 @@
+describe('minCanvasHeight (option)', () => {
+ it('should be `0` by default', () => {
+ const image = window.createImage();
+ const cropper = new Cropper(image);
+
+ expect(cropper.options.minCanvasHeight).to.equal(0);
+ });
+
+ it('should match the given minimum size', (done) => {
+ const image = window.createImage();
+ const minCanvasHeight = 270;
+ const cropper = new Cropper(image, {
+ minCanvasHeight,
+
+ ready() {
+ const canvasData = cropper.setCanvasData({
+ height: 180,
+ }).getCanvasData();
+
+ expect(canvasData.height).to.equal(minCanvasHeight);
+ done();
+ },
+ });
+
+ expect(cropper.options.minCanvasHeight).to.equal(minCanvasHeight);
+ });
+});
diff --git a/library/cropperjs/test/specs/options/minCanvasWidth.spec.js b/library/cropperjs/test/specs/options/minCanvasWidth.spec.js
new file mode 100644
index 000000000..0c58f2a80
--- /dev/null
+++ b/library/cropperjs/test/specs/options/minCanvasWidth.spec.js
@@ -0,0 +1,27 @@
+describe('minCanvasWidth (option)', () => {
+ it('should be `0` by default', () => {
+ const image = window.createImage();
+ const cropper = new Cropper(image);
+
+ expect(cropper.options.minCanvasWidth).to.equal(0);
+ });
+
+ it('should match the given minimum size', (done) => {
+ const image = window.createImage();
+ const minCanvasWidth = 480;
+ const cropper = new Cropper(image, {
+ minCanvasWidth,
+
+ ready() {
+ const canvasData = cropper.setCanvasData({
+ width: 320,
+ }).getCanvasData();
+
+ expect(canvasData.width).to.equal(minCanvasWidth);
+ done();
+ },
+ });
+
+ expect(cropper.options.minCanvasWidth).to.equal(minCanvasWidth);
+ });
+});
diff --git a/library/cropperjs/test/specs/options/minContainerHeight.spec.js b/library/cropperjs/test/specs/options/minContainerHeight.spec.js
new file mode 100644
index 000000000..9a71f59d3
--- /dev/null
+++ b/library/cropperjs/test/specs/options/minContainerHeight.spec.js
@@ -0,0 +1,26 @@
+describe('minContainerHeight (option)', () => {
+ it('should be `100` by default', () => {
+ const image = window.createImage();
+ const cropper = new Cropper(image);
+
+ expect(cropper.options.minContainerHeight).to.equal(100);
+ });
+
+ it('should match the given minimum size', (done) => {
+ const image = window.createImage();
+
+ image.parentElement.style.height = '90px';
+
+ const minContainerHeight = 180;
+ const cropper = new Cropper(image, {
+ minContainerHeight,
+
+ ready() {
+ expect(cropper.getContainerData().height).to.equal(minContainerHeight);
+ done();
+ },
+ });
+
+ expect(cropper.options.minContainerHeight).to.equal(minContainerHeight);
+ });
+});
diff --git a/library/cropperjs/test/specs/options/minContainerWidth.spec.js b/library/cropperjs/test/specs/options/minContainerWidth.spec.js
new file mode 100644
index 000000000..aabbb5e97
--- /dev/null
+++ b/library/cropperjs/test/specs/options/minContainerWidth.spec.js
@@ -0,0 +1,26 @@
+describe('minContainerWidth (option)', () => {
+ it('should be `200` by default', () => {
+ const image = window.createImage();
+ const cropper = new Cropper(image);
+
+ expect(cropper.options.minContainerWidth).to.equal(200);
+ });
+
+ it('should match the given minimum size', (done) => {
+ const image = window.createImage();
+
+ image.parentElement.style.width = '160px';
+
+ const minContainerWidth = 320;
+ const cropper = new Cropper(image, {
+ minContainerWidth,
+
+ ready() {
+ expect(cropper.getContainerData().width).to.equal(minContainerWidth);
+ done();
+ },
+ });
+
+ expect(cropper.options.minContainerWidth).to.equal(minContainerWidth);
+ });
+});
diff --git a/library/cropperjs/test/specs/options/minCropBoxHeight.spec.js b/library/cropperjs/test/specs/options/minCropBoxHeight.spec.js
new file mode 100644
index 000000000..a071c6e83
--- /dev/null
+++ b/library/cropperjs/test/specs/options/minCropBoxHeight.spec.js
@@ -0,0 +1,27 @@
+describe('minCropBoxHeight (option)', () => {
+ it('should be `0` by default', () => {
+ const image = window.createImage();
+ const cropper = new Cropper(image);
+
+ expect(cropper.options.minCropBoxHeight).to.equal(0);
+ });
+
+ it('should match the given minimum size', (done) => {
+ const image = window.createImage();
+ const minCropBoxHeight = 150;
+ const cropper = new Cropper(image, {
+ minCropBoxHeight,
+
+ ready() {
+ const cropBoxData = cropper.setCropBoxData({
+ height: 100,
+ }).getCropBoxData();
+
+ expect(cropBoxData.height).to.equal(minCropBoxHeight);
+ done();
+ },
+ });
+
+ expect(cropper.options.minCropBoxHeight).to.equal(minCropBoxHeight);
+ });
+});
diff --git a/library/cropperjs/test/specs/options/minCropBoxWidth.spec.js b/library/cropperjs/test/specs/options/minCropBoxWidth.spec.js
new file mode 100644
index 000000000..5a2f44faa
--- /dev/null
+++ b/library/cropperjs/test/specs/options/minCropBoxWidth.spec.js
@@ -0,0 +1,27 @@
+describe('minCropBoxWidth (option)', () => {
+ it('should be `0` by default', () => {
+ const image = window.createImage();
+ const cropper = new Cropper(image);
+
+ expect(cropper.options.minCropBoxWidth).to.equal(0);
+ });
+
+ it('should match the given minimum size', (done) => {
+ const image = window.createImage();
+ const minCropBoxWidth = 300;
+ const cropper = new Cropper(image, {
+ minCropBoxWidth,
+
+ ready() {
+ const cropBoxData = cropper.setCropBoxData({
+ width: 200,
+ }).getCropBoxData();
+
+ expect(cropBoxData.width).to.equal(minCropBoxWidth);
+ done();
+ },
+ });
+
+ expect(cropper.options.minCropBoxWidth).to.equal(minCropBoxWidth);
+ });
+});
diff --git a/library/cropperjs/test/specs/options/modal.spec.js b/library/cropperjs/test/specs/options/modal.spec.js
new file mode 100644
index 000000000..e82fbed82
--- /dev/null
+++ b/library/cropperjs/test/specs/options/modal.spec.js
@@ -0,0 +1,27 @@
+describe('modal (option)', () => {
+ it('should show the modal by default', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ expect(cropper.dragBox.className).to.include('cropper-modal');
+ done();
+ },
+ });
+
+ expect(cropper.options.modal).to.be.true;
+ });
+
+ it('should not show the modal', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ modal: false,
+
+ ready() {
+ expect(cropper.dragBox.className).to.not.include('cropper-modal');
+ done();
+ },
+ });
+
+ expect(cropper.options.modal).to.be.false;
+ });
+});
diff --git a/library/cropperjs/test/specs/options/movable.spec.js b/library/cropperjs/test/specs/options/movable.spec.js
new file mode 100644
index 000000000..2c7a06705
--- /dev/null
+++ b/library/cropperjs/test/specs/options/movable.spec.js
@@ -0,0 +1,35 @@
+describe('movable (option)', () => {
+ it('should be movable by default', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const canvasData = cropper.getCanvasData();
+ const changedCanvasData = cropper.move(10, 10).getCanvasData();
+
+ expect(changedCanvasData.left).to.equal(canvasData.left + 10);
+ expect(changedCanvasData.top).to.equal(canvasData.top + 10);
+ done();
+ },
+ });
+
+ expect(cropper.options.movable).to.be.true;
+ });
+
+ it('should not be movable', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ movable: false,
+
+ ready() {
+ const canvasData = cropper.getCanvasData();
+ const changedCanvasData = cropper.move(10, 10).getCanvasData();
+
+ expect(changedCanvasData.left).to.equal(canvasData.left);
+ expect(changedCanvasData.top).to.equal(canvasData.top);
+ done();
+ },
+ });
+
+ expect(cropper.options.movable).to.be.false;
+ });
+});
diff --git a/library/cropperjs/test/specs/options/preview.spec.js b/library/cropperjs/test/specs/options/preview.spec.js
new file mode 100644
index 000000000..2d2bc34d4
--- /dev/null
+++ b/library/cropperjs/test/specs/options/preview.spec.js
@@ -0,0 +1,105 @@
+describe('preview (option)', () => {
+ it('should be an empty string be default', () => {
+ const image = window.createImage();
+ const cropper = new Cropper(image);
+
+ expect(cropper.options.preview).to.be.a('string').that.is.empty;
+ });
+
+ it('should support element', (done) => {
+ const image = window.createImage();
+ const preview = document.createElement('div');
+
+ image.ownerDocument.body.appendChild(preview);
+
+ const cropper = new Cropper(image, {
+ preview,
+
+ ready() {
+ expect(preview.firstElementChild).to.not.be.null;
+ expect(preview.firstElementChild.src).to.equal(image.src);
+ done();
+ },
+ });
+
+ expect(cropper.options.preview).to.equal(preview);
+ });
+
+ it('should support array of elements', (done) => {
+ const image = window.createImage();
+ const previews = document.createElement('ul');
+ const preview1 = document.createElement('li');
+ const preview2 = document.createElement('li');
+ const preview = [preview1, preview2];
+
+ previews.appendChild(preview1);
+ previews.appendChild(preview2);
+ image.ownerDocument.body.appendChild(previews);
+
+ const cropper = new Cropper(image, {
+ preview,
+
+ ready() {
+ expect(preview1.firstElementChild).to.not.be.null;
+ expect(preview2.firstElementChild).to.not.be.null;
+ expect(preview1.firstElementChild.src).to.equal(image.src);
+ expect(preview2.firstElementChild.src).to.equal(image.src);
+ done();
+ },
+ });
+
+ expect(cropper.options.preview).to.equal(preview);
+ });
+
+ it('should support `NodeList` object', (done) => {
+ const image = window.createImage();
+ const previews = document.createElement('ul');
+ const preview1 = document.createElement('li');
+ const preview2 = document.createElement('li');
+
+ previews.appendChild(preview1);
+ previews.appendChild(preview2);
+ image.ownerDocument.body.appendChild(previews);
+
+ const cropper = new Cropper(image, {
+ preview: previews.children,
+
+ ready() {
+ expect(preview1.firstElementChild).to.not.be.null;
+ expect(preview2.firstElementChild).to.not.be.null;
+ expect(preview1.firstElementChild.src).to.equal(image.src);
+ expect(preview2.firstElementChild.src).to.equal(image.src);
+ done();
+ },
+ });
+
+ expect(cropper.options.preview).to.equal(previews.children);
+ });
+
+ it('should support selector', (done) => {
+ const image = window.createImage();
+ const previews = document.createElement('ul');
+ const preview1 = document.createElement('li');
+ const preview2 = document.createElement('li');
+
+ preview1.className = 'preview';
+ preview2.className = 'preview';
+ previews.appendChild(preview1);
+ previews.appendChild(preview2);
+ image.ownerDocument.body.appendChild(previews);
+
+ const cropper = new Cropper(image, {
+ preview: '.preview',
+
+ ready() {
+ expect(preview1.firstElementChild).to.not.be.null;
+ expect(preview2.firstElementChild).to.not.be.null;
+ expect(preview1.firstElementChild.src).to.equal(image.src);
+ expect(preview2.firstElementChild.src).to.equal(image.src);
+ done();
+ },
+ });
+
+ expect(cropper.options.preview).to.equal('.preview');
+ });
+});
diff --git a/library/cropperjs/test/specs/options/ready.spec.js b/library/cropperjs/test/specs/options/ready.spec.js
new file mode 100644
index 000000000..0e0f2338a
--- /dev/null
+++ b/library/cropperjs/test/specs/options/ready.spec.js
@@ -0,0 +1,34 @@
+describe('ready (option)', () => {
+ it('should be `null` be default', () => {
+ const image = window.createImage();
+ const cropper = new Cropper(image);
+
+ expect(cropper.options.ready).to.be.null;
+ });
+
+ it('should execute the `ready` hook function', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready(event) {
+ expect(event.type).to.equal('ready');
+ done();
+ },
+ });
+
+ expect(cropper.options.ready).to.be.a('function');
+ });
+
+ it('should execute the `crop` hook function even though default prevented', (done) => {
+ const image = window.createImage();
+
+ new Cropper(image, {
+ ready(event) {
+ event.preventDefault();
+ },
+
+ crop() {
+ done();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/options/responsive.spec.js b/library/cropperjs/test/specs/options/responsive.spec.js
new file mode 100644
index 000000000..8e393f0ff
--- /dev/null
+++ b/library/cropperjs/test/specs/options/responsive.spec.js
@@ -0,0 +1,61 @@
+describe('responsive (option)', () => {
+ it('should be responsive be default', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const containerData = cropper.getContainerData();
+ let newContainerWidth = containerData.width - 10;
+ let newContainerHeight = containerData.height - 10;
+
+ image.parentElement.style.width = `${newContainerWidth}px`;
+ image.parentElement.style.height = `${newContainerHeight}px`;
+ window.dispatchEvent(window.createEvent('resize'));
+
+ let newContainerData = cropper.getContainerData();
+
+ expect(newContainerData.width).to.equal(newContainerWidth);
+ expect(newContainerData.height).to.equal(newContainerHeight);
+
+ newContainerWidth = containerData.width + 10;
+ newContainerHeight = containerData.height + 10;
+
+ image.parentElement.style.width = `${newContainerWidth}px`;
+ image.parentElement.style.height = `${newContainerHeight}px`;
+ window.dispatchEvent(window.createEvent('resize'));
+
+ newContainerData = cropper.getContainerData();
+
+ expect(newContainerData.width).to.equal(newContainerWidth);
+ expect(newContainerData.height).to.equal(newContainerHeight);
+ done();
+ },
+ });
+
+ expect(cropper.options.responsive).to.be.true;
+ });
+
+ it('should not be responsive', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ responsive: false,
+
+ ready() {
+ const containerData = cropper.getContainerData();
+ const newContainerWidth = containerData.width - 10;
+ const newContainerHeight = containerData.height - 10;
+
+ image.parentElement.style.width = `${newContainerWidth}px`;
+ image.parentElement.style.height = `${newContainerHeight}px`;
+ window.dispatchEvent(window.createEvent('resize'));
+
+ const newContainerData = cropper.getContainerData();
+
+ expect(newContainerData.width).to.equal(containerData.width);
+ expect(newContainerData.height).to.equal(containerData.height);
+ done();
+ },
+ });
+
+ expect(cropper.options.responsive).to.be.false;
+ });
+});
diff --git a/library/cropperjs/test/specs/options/restore.spec.js b/library/cropperjs/test/specs/options/restore.spec.js
new file mode 100644
index 000000000..3a011edc8
--- /dev/null
+++ b/library/cropperjs/test/specs/options/restore.spec.js
@@ -0,0 +1,38 @@
+describe('restore (option)', () => {
+ it('should restore the cropped area after resize the window be default', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const data = cropper.zoomTo(1).getData(true);
+ const containerData = cropper.getContainerData();
+
+ image.parentElement.style.width = `${containerData.width - 10}px`;
+ image.parentElement.style.height = `${containerData.height - 10}px`;
+ window.dispatchEvent(window.createEvent('resize'));
+ expect(cropper.getData(true)).to.deep.equal(data);
+ done();
+ },
+ });
+
+ expect(cropper.options.restore).to.be.true;
+ });
+
+ it('should not be restore', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ restore: false,
+
+ ready() {
+ const data = cropper.zoomTo(1).getData(true);
+ const containerData = cropper.getContainerData();
+
+ image.parentElement.style.width = `${containerData.width / 2}px`;
+ window.dispatchEvent(window.createEvent('resize'));
+ expect(cropper.getData(true)).to.not.deep.equal(data);
+ done();
+ },
+ });
+
+ expect(cropper.options.restore).to.be.false;
+ });
+});
diff --git a/library/cropperjs/test/specs/options/rotatable.spec.js b/library/cropperjs/test/specs/options/rotatable.spec.js
new file mode 100644
index 000000000..01a9ad09a
--- /dev/null
+++ b/library/cropperjs/test/specs/options/rotatable.spec.js
@@ -0,0 +1,28 @@
+describe('rotatable (option)', () => {
+ it('should be rotatable by default', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+
+ ready() {
+ expect(cropper.rotate(90).getImageData().rotate).to.equal(90);
+ done();
+ },
+ });
+
+ expect(cropper.options.rotatable).to.be.true;
+ });
+
+ it('should not be rotatable', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ rotatable: false,
+
+ ready() {
+ expect(cropper.rotate(90).getImageData().rotate).to.be.undefined;
+ done();
+ },
+ });
+
+ expect(cropper.options.rotatable).to.be.false;
+ });
+});
diff --git a/library/cropperjs/test/specs/options/scalable.spec.js b/library/cropperjs/test/specs/options/scalable.spec.js
new file mode 100644
index 000000000..3b6f1df4f
--- /dev/null
+++ b/library/cropperjs/test/specs/options/scalable.spec.js
@@ -0,0 +1,33 @@
+describe('scalable (option)', () => {
+ it('should be scalable by default', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const imageData = cropper.scale(-1, -1).getImageData();
+
+ expect(imageData.scaleX).to.equal(-1);
+ expect(imageData.scaleY).to.equal(-1);
+ done();
+ },
+ });
+
+ expect(cropper.options.scalable).to.be.true;
+ });
+
+ it('should not be scalable', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ scalable: false,
+
+ ready() {
+ const imageData = cropper.scale(-1, -1).getImageData();
+
+ expect(imageData.scaleX).to.be.undefined;
+ expect(imageData.scaleY).to.be.undefined;
+ done();
+ },
+ });
+
+ expect(cropper.options.scalable).to.be.false;
+ });
+});
diff --git a/library/cropperjs/test/specs/options/toggleDragModeOnDblclick.spec.js b/library/cropperjs/test/specs/options/toggleDragModeOnDblclick.spec.js
new file mode 100644
index 000000000..b67617f1d
--- /dev/null
+++ b/library/cropperjs/test/specs/options/toggleDragModeOnDblclick.spec.js
@@ -0,0 +1,40 @@
+describe('toggleDragModeOnDblclick (option)', () => {
+ it('should toggle drag mode on double click', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+
+ ready() {
+ const { dragBox } = cropper;
+
+ expect(dragBox.className).include('cropper-crop');
+ expect(dragBox.dataset.cropperAction).to.equal('crop');
+ dragBox.dispatchEvent(window.createEvent('dblclick'));
+ expect(dragBox.className).include('cropper-move');
+ expect(dragBox.dataset.cropperAction).to.equal('move');
+ done();
+ },
+ });
+
+ expect(cropper.options.toggleDragModeOnDblclick).to.be.true;
+ });
+
+ it('should not toggle drag mode on double click', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ toggleDragModeOnDblclick: false,
+
+ ready() {
+ const { dragBox } = cropper;
+
+ expect(dragBox.className).include('cropper-crop');
+ expect(dragBox.dataset.cropperAction).to.equal('crop');
+ dragBox.dispatchEvent(window.createEvent('dblclick'));
+ expect(dragBox.className).include('cropper-crop');
+ expect(dragBox.dataset.cropperAction).to.equal('crop');
+ done();
+ },
+ });
+
+ expect(cropper.options.toggleDragModeOnDblclick).to.be.false;
+ });
+});
diff --git a/library/cropperjs/test/specs/options/viewMode.spec.js b/library/cropperjs/test/specs/options/viewMode.spec.js
new file mode 100644
index 000000000..7dde93d83
--- /dev/null
+++ b/library/cropperjs/test/specs/options/viewMode.spec.js
@@ -0,0 +1,89 @@
+describe('viewMode (option)', () => {
+ it('should not have any restrictions by default', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const canvasData = {
+ left: 100,
+ top: 100,
+ width: 160,
+ height: 90,
+ };
+ const changedCanvasData = cropper.setCanvasData(canvasData).getCanvasData();
+
+ expect(changedCanvasData.left).to.equal(canvasData.left);
+ expect(changedCanvasData.top).to.equal(canvasData.top);
+ expect(changedCanvasData.width).to.equal(canvasData.width);
+ expect(changedCanvasData.height).to.equal(canvasData.height);
+ done();
+ },
+ });
+
+ expect(cropper.options.viewMode).to.equal(0);
+ });
+
+ it('should restrict the crop box to not exceed the size of the canvas', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ viewMode: 1,
+
+ ready() {
+ let canvasData = cropper.zoom(-0.5).getCanvasData();
+ let cropBoxData = cropper.getCropBoxData();
+
+ expect(canvasData.width).to.be.least(cropBoxData.width);
+ expect(canvasData.height).to.be.least(cropBoxData.height);
+
+ canvasData = cropper.clear().moveTo(-160, -90).getCanvasData();
+ cropBoxData = cropper.crop().setCropBoxData({
+ width: canvasData.naturalWidth,
+ height: canvasData.naturalHeight,
+ }).getCropBoxData();
+
+ expect(canvasData.width).to.be.above(cropBoxData.width);
+ expect(canvasData.height).to.be.above(cropBoxData.height);
+ done();
+ },
+ });
+
+ expect(cropper.options.viewMode).to.equal(1);
+ });
+
+ it('should restrict the minimum canvas size to fit within the container.', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ viewMode: 2,
+
+ ready() {
+ const canvasData = cropper.zoom(-0.5).getCanvasData();
+ const containerData = cropper.getContainerData();
+
+ expect(canvasData.width >= containerData.width
+ || canvasData.height >= containerData.height).to.be.true;
+ done();
+ },
+ });
+
+ expect(cropper.options.viewMode).to.equal(2);
+ });
+
+ it('should restrict the minimum canvas size to full fit the container.', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ viewMode: 3,
+
+ ready() {
+ const canvasData = cropper.zoom(-0.5).getCanvasData();
+ const containerData = cropper.getContainerData();
+
+ expect(canvasData.left).to.be.most(0);
+ expect(canvasData.top).to.be.most(0);
+ expect(canvasData.width).to.be.least(containerData.width);
+ expect(canvasData.height).to.be.least(containerData.height);
+ done();
+ },
+ });
+
+ expect(cropper.options.viewMode).to.equal(3);
+ });
+});
diff --git a/library/cropperjs/test/specs/options/wheelZoomRatio.spec.js b/library/cropperjs/test/specs/options/wheelZoomRatio.spec.js
new file mode 100644
index 000000000..7d128358d
--- /dev/null
+++ b/library/cropperjs/test/specs/options/wheelZoomRatio.spec.js
@@ -0,0 +1,38 @@
+describe('wheelZoomRatio (option)', () => {
+ it('should be `0.1` by default', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const canvasData = cropper.getCanvasData();
+ const wheelEvent = window.createEvent('wheel');
+
+ wheelEvent.deltaY = -1;
+ cropper.cropper.dispatchEvent(wheelEvent);
+ expect(canvasData.width * 1.1).to.equal(cropper.getCanvasData().width);
+ done();
+ },
+ });
+
+ expect(cropper.options.wheelZoomRatio).to.equal(0.1);
+ });
+
+ it('should match the given zoom ratio', (done) => {
+ const image = window.createImage();
+ const wheelZoomRatio = 0.2;
+ const cropper = new Cropper(image, {
+ wheelZoomRatio,
+
+ ready() {
+ const canvasData = cropper.getCanvasData();
+ const wheelEvent = window.createEvent('wheel');
+
+ wheelEvent.deltaY = -1;
+ cropper.cropper.dispatchEvent(wheelEvent);
+ expect(canvasData.width * (1 + wheelZoomRatio)).to.equal(cropper.getCanvasData().width);
+ done();
+ },
+ });
+
+ expect(cropper.options.wheelZoomRatio).to.equal(wheelZoomRatio);
+ });
+});
diff --git a/library/cropperjs/test/specs/options/zoom.spec.js b/library/cropperjs/test/specs/options/zoom.spec.js
new file mode 100644
index 000000000..3d11f3a2f
--- /dev/null
+++ b/library/cropperjs/test/specs/options/zoom.spec.js
@@ -0,0 +1,46 @@
+describe('zoom (option)', () => {
+ it('should be `null` be default', () => {
+ const image = window.createImage();
+ const cropper = new Cropper(image);
+
+ expect(cropper.options.zoom).to.be.null;
+ });
+
+ it('should execute the `zoom` hook function', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ cropper.zoom(0.1);
+ },
+
+ zoom(event) {
+ expect(event.type).to.equal('zoom');
+ expect(event.detail).to.be.an('object').that.has.all.keys(['ratio', 'oldRatio', 'originalEvent']);
+ expect(event.detail.ratio).to.be.a('number');
+ expect(event.detail.oldRatio).to.be.a('number');
+ expect(event.detail.ratio).to.be.above(0);
+ expect(event.detail.oldRatio).to.be.above(0);
+ expect(event.detail.ratio).to.be.above(event.detail.oldRatio);
+ done();
+ },
+ });
+
+ expect(cropper.options.zoom).to.be.a('function');
+ });
+
+ it('should not change the canvas sizes when default prevented', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const canvasData = cropper.getCanvasData();
+
+ expect(cropper.zoom(0.1).getCanvasData()).to.deep.equal(canvasData);
+ done();
+ },
+
+ zoom(event) {
+ event.preventDefault();
+ },
+ });
+ });
+});
diff --git a/library/cropperjs/test/specs/options/zoomOnTouch.spec.js b/library/cropperjs/test/specs/options/zoomOnTouch.spec.js
new file mode 100644
index 000000000..feb56b079
--- /dev/null
+++ b/library/cropperjs/test/specs/options/zoomOnTouch.spec.js
@@ -0,0 +1,176 @@
+describe('zoomOnTouch (option)', () => {
+ it('should zoom on touch by default', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ if (window.PointerEvent) {
+ const pointerDownEvent1 = window.createEvent('pointerdown');
+ const pointerDownEvent2 = window.createEvent('pointerdown');
+ const pointerMoveEvent1 = window.createEvent('pointermove');
+ const pointerMoveEvent2 = window.createEvent('pointermove');
+
+ pointerDownEvent1.pointerId = 1;
+ pointerDownEvent1.pageX = 100;
+ pointerDownEvent1.pageY = 100;
+ pointerDownEvent2.pointerId = 2;
+ pointerDownEvent2.pageX = 200;
+ pointerDownEvent2.pageY = 200;
+ pointerMoveEvent1.pointerId = 1;
+ pointerMoveEvent1.pageX = 125;
+ pointerMoveEvent1.pageY = 125;
+ pointerMoveEvent2.pointerId = 2;
+ pointerMoveEvent2.pageX = 175;
+ pointerMoveEvent2.pageY = 175;
+ cropper.cropper.dispatchEvent(pointerDownEvent1);
+ cropper.cropper.dispatchEvent(pointerDownEvent2);
+ cropper.cropper.dispatchEvent(pointerMoveEvent1);
+ cropper.cropper.dispatchEvent(pointerMoveEvent2);
+ } else {
+ const touchStartEvent1 = window.createEvent('touchstart');
+ const touchStartEvent2 = window.createEvent('touchstart');
+ const touchMoveEvent1 = window.createEvent('touchmove');
+ const touchMoveEvent2 = window.createEvent('touchmove');
+
+ touchStartEvent1.changedTouches = {
+ 0: {
+ identifier: 1,
+ pageX: 100,
+ pageY: 100,
+ },
+ length: 1,
+ };
+ touchStartEvent2.changedTouches = {
+ 0: {
+ identifier: 2,
+ pageX: 200,
+ pageY: 200,
+ },
+ length: 1,
+ };
+ touchMoveEvent1.changedTouches = {
+ 0: {
+ identifier: 1,
+ pageX: 125,
+ pageY: 125,
+ },
+ length: 1,
+ };
+ touchMoveEvent2.changedTouches = {
+ 0: {
+ identifier: 2,
+ pageX: 175,
+ pageY: 175,
+ },
+ length: 1,
+ };
+ cropper.cropper.dispatchEvent(touchStartEvent1);
+ cropper.cropper.dispatchEvent(touchStartEvent2);
+ cropper.cropper.dispatchEvent(touchMoveEvent1);
+ cropper.cropper.dispatchEvent(touchMoveEvent2);
+ }
+ },
+
+ zoom() {
+ done();
+ },
+ });
+
+ expect(cropper.options.zoomOnTouch).to.be.true;
+ });
+
+ it('should not zoom on touch', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ zoomOnTouch: false,
+
+ ready() {
+ if (window.PointerEvent) {
+ cropper.cropper.dispatchEvent(new PointerEvent('pointerdown', {
+ pointerId: 1,
+ pageX: 100,
+ pageY: 100,
+ }));
+ cropper.cropper.dispatchEvent(new PointerEvent('pointerdown', {
+ pointerId: 2,
+ pageX: 200,
+ pageY: 200,
+ }));
+ cropper.cropper.dispatchEvent(new PointerEvent('pointermove', {
+ pointerId: 1,
+ pageX: 125,
+ pageY: 125,
+ }));
+ cropper.cropper.dispatchEvent(new PointerEvent('pointermove', {
+ pointerId: 2,
+ pageX: 175,
+ pageY: 175,
+ }));
+ cropper.cropper.dispatchEvent(new PointerEvent('pointerup', {
+ pointerId: 1,
+ pageX: 125,
+ pageY: 125,
+ }));
+ cropper.cropper.dispatchEvent(new PointerEvent('pointerup', {
+ pointerId: 2,
+ pageX: 175,
+ pageY: 175,
+ }));
+ } else {
+ cropper.cropper.dispatchEvent(new TouchEvent('touchstart', {
+ changedTouches: {
+ 0: {
+ identifier: 1,
+ pageX: 100,
+ pageY: 100,
+ },
+ 1: {
+ identifier: 2,
+ pageX: 200,
+ pageY: 200,
+ },
+ length: 2,
+ },
+ }));
+ cropper.cropper.dispatchEvent(new TouchEvent('touchmove', {
+ changedTouches: {
+ 0: {
+ identifier: 1,
+ pageX: 125,
+ pageY: 125,
+ },
+ 1: {
+ identifier: 2,
+ pageX: 175,
+ pageY: 175,
+ },
+ length: 2,
+ },
+ }));
+ cropper.cropper.dispatchEvent(new TouchEvent('touchend', {
+ changedTouches: {
+ 0: {
+ identifier: 1,
+ pageX: 125,
+ pageY: 125,
+ },
+ 1: {
+ identifier: 2,
+ pageX: 175,
+ pageY: 175,
+ },
+ length: 2,
+ },
+ }));
+ }
+
+ done();
+ },
+
+ zoom() {
+ expect.fail(1, 0);
+ },
+ });
+
+ expect(cropper.options.zoomOnTouch).to.be.false;
+ });
+});
diff --git a/library/cropperjs/test/specs/options/zoomOnWheel.spec.js b/library/cropperjs/test/specs/options/zoomOnWheel.spec.js
new file mode 100644
index 000000000..90e25e6a3
--- /dev/null
+++ b/library/cropperjs/test/specs/options/zoomOnWheel.spec.js
@@ -0,0 +1,34 @@
+describe('zoomOnWheel (option)', () => {
+ it('should zoom on wheel by default', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ cropper.cropper.dispatchEvent(window.createEvent('wheel'));
+ },
+
+ zoom() {
+ done();
+ },
+ });
+
+ expect(cropper.options.zoomOnWheel).to.be.true;
+ });
+
+ it('should not zoom on wheel', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ zoomOnWheel: false,
+
+ ready() {
+ cropper.cropper.dispatchEvent(window.createEvent('wheel'));
+ done();
+ },
+
+ zoom() {
+ expect.fail(1, 0);
+ },
+ });
+
+ expect(cropper.options.zoomOnWheel).to.be.false;
+ });
+});
diff --git a/library/cropperjs/test/specs/options/zoomable.spec.js b/library/cropperjs/test/specs/options/zoomable.spec.js
new file mode 100644
index 000000000..d0fbec5ec
--- /dev/null
+++ b/library/cropperjs/test/specs/options/zoomable.spec.js
@@ -0,0 +1,35 @@
+describe('zoomable (option)', () => {
+ it('should be zoomable by default', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ ready() {
+ const canvasData = cropper.getCanvasData();
+ const changedCanvasData = cropper.zoom(0.1).getCanvasData();
+
+ expect(changedCanvasData.width).to.be.above(canvasData.width);
+ expect(changedCanvasData.height).to.be.above(canvasData.height);
+ done();
+ },
+ });
+
+ expect(cropper.options.zoomable).to.be.true;
+ });
+
+ it('should not be zoomable', (done) => {
+ const image = window.createImage();
+ const cropper = new Cropper(image, {
+ zoomable: false,
+
+ ready() {
+ const canvasData = cropper.getCanvasData();
+ const changedCanvasData = cropper.zoom(0.1).getCanvasData();
+
+ expect(changedCanvasData.width).to.equal(canvasData.width);
+ expect(changedCanvasData.height).to.equal(canvasData.height);
+ done();
+ },
+ });
+
+ expect(cropper.options.zoomable).to.be.false;
+ });
+});