diff options
Diffstat (limited to 'library/cropperjs/test/specs/options')
39 files changed, 1645 insertions, 0 deletions
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; + }); +}); |