diff options
Diffstat (limited to 'library/cropperjs/test/specs/methods')
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(); + }, + }); + }); +}); |