update cropperjs to the recent version

29 files changed, 1398 insertions, 0 deletions

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();
+      },
+    });
+  });
+});