File size: 3,377 Bytes
b456468
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
import { fabric } from 'fabric';
import Graphics from '@/graphics';
import Text from '@/component/text';

describe('Text', () => {
  let canvas, graphics, mockImage, text;

  beforeAll(() => {
    graphics = new Graphics(document.createElement('canvas'));
    canvas = graphics.getCanvas();
    text = new Text(graphics);
  });

  beforeEach(() => {
    mockImage = new fabric.Image();
    graphics.setCanvasImage('mockImage', mockImage);
  });

  afterEach(() => {
    canvas.forEachObject((obj) => {
      canvas.remove(obj);
    });
  });

  describe('add()', () => {
    let activeObj;

    beforeEach(() => {
      text.add('', {});
      activeObj = canvas.getActiveObject();
    });

    it('should make the blank text object when text parameter is empty string', () => {
      const newText = activeObj.text;

      expect(newText).toBe('');
    });

    it('should make the text object set default option when parameter has not "styles" property', () => {
      const newTextStyle = activeObj.fontWeight;

      expect(newTextStyle).toBe('normal');
    });

    it('should create the text object on center of canvas when parameter has not "position" property', () => {
      const { x, y } = mockImage.getCenterPoint();

      expect(activeObj).toMatchObject({ left: x, top: y });
    });

    it('should be true when adding text', async () => {
      const info = await text.add('default', {});
      const newText = graphics.getObject(info.id);

      expect(newText.selectionStart).toBe(0);
      expect(newText.selectionEnd).toBe(7);
      expect(newText.isEditing).toBe(true);
    });
  });

  it('should maintain consistent left and top positions after entering and exiting drawing mode', () => {
    const left = 10;
    const top = 20;
    const newText = new fabric.IText('testString', {
      left,
      top,
      width: 30,
      height: 50,
      angle: 40,
      originX: 'center',
      originY: 'center',
    });
    text.useItext = true;
    canvas.add(newText);

    text.start();
    text.end();

    expect(newText).toMatchSnapshot();
  });

  it('should change contents in the text object as input', () => {
    text.add('text123', {});

    const activeObj = canvas.getActiveObject();

    text.change(activeObj, 'abc');

    expect(activeObj.text).toBe('abc');

    text.change(activeObj, 'def');

    expect(activeObj.text).toBe('def');
  });

  describe('setStyle()', () => {
    beforeEach(() => {
      text.add('new text', { styles: { fontWeight: 'bold' } });
    });

    it('should unlock style when a selected style already apply on the activated text object', () => {
      const activeObj = canvas.getActiveObject();

      text.setStyle(activeObj, { fontWeight: 'bold' });

      expect(activeObj.fontWeight).not.toBe('bold');
    });

    it('should apply style when the activated text object has not a selected style', () => {
      const activeObj = canvas.getActiveObject();

      text.setStyle(activeObj, { fontStyle: 'italic' });

      expect(activeObj.fontStyle).toBe('italic');
    });
  });

  it('should change size of selected text object', () => {
    const obj = new fabric.Text('test');
    const scale = 10;
    const { fontSize } = obj;

    text.start({});
    canvas.add(obj);
    obj.scaleY = scale;
    canvas.fire('object:scaling', { target: obj });

    expect(obj.fontSize).toBe(fontSize * scale);
  });
});