aboutsummaryrefslogtreecommitdiffstats
path: root/library/cropperjs/test/specs/options/viewMode.spec.js
blob: 7dde93d8319e5aa602850ae5b148a18606ec0be8 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
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);
  });
});