/**
* @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
* @fileoverview Test cases of "src/js/component/line.js"
*/
import fabric from 'fabric/dist/fabric.require';
import $ from 'jquery';
import Graphics from '../src/js/graphics';
import Shape from '../src/js/component/shape';
describe('Shape', () => {
let canvas, graphics, mockImage, fEvent, shape, shapeObj;
beforeAll(() => {
graphics = new Graphics($('<canvas>')[0]);
canvas = graphics.getCanvas();
shape = new Shape(graphics);
});
beforeEach(() => {
mockImage = new fabric.Image();
graphics.setCanvasImage('mockImage', mockImage);
fEvent = {
e: {}
};
});
afterEach(() => {
canvas.forEachObject(obj => {
canvas.remove(obj);
});
});
it('The rectagle object is created on canvas.', () => {
shape.add('rect');
[shapeObj] = canvas.getObjects();
expect(shapeObj.type).toBe('rect');
});
it('The circle object(ellipse) is created on canvas.', () => {
shape.add('circle');
[shapeObj] = canvas.getObjects();
expect(shapeObj.type).toBe('circle');
});
it('The triangle object is created on canvas.', () => {
shape.add('triangle');
[shapeObj] = canvas.getObjects();
expect(shapeObj.type).toBe('triangle');
});
it('When add() is called with no options, the default options set the rectangle object.', () => {
shape.add('rect');
[shapeObj] = canvas.getObjects();
expect(shapeObj.getWidth()).toBe(2); // strokeWidth: 1, width: 1
expect(shapeObj.getHeight()).toBe(2); // strokeWidth: 1, height: 1
});
it('When add() is called with no options, the default options set the circle object.', () => {
shape.add('circle');
[shapeObj] = canvas.getObjects();
expect(shapeObj.getWidth()).toBe(1);
expect(shapeObj.getHeight()).toBe(1);
});
it('When add() is called with no options, the default options set the triangle object.', () => {
shape.add('triangle');
[shapeObj] = canvas.getObjects();
expect(shapeObj.getWidth()).toBe(2); // strokeWidth: 1, width: 1
expect(shapeObj.getHeight()).toBe(2); // strokeWidth: 1, height: 1
});
it('When add() is called with the options, this options set the rectagle object.', () => {
const settings = {
fill: 'blue',
stroke: 'red',
strokeWidth: 10,
type: 'rect',
width: 100,
height: 100
};
shape.add('rect', settings);
[shapeObj] = canvas.getObjects();
expect(shapeObj.getFill()).toBe('blue');
expect(shapeObj.getStroke()).toBe('red');
expect(shapeObj.getStrokeWidth()).toBe(10);
expect(shapeObj.getWidth()).toBe(110); // width + storkeWidth
expect(shapeObj.getHeight()).toBe(110); // height + storkeWidth
});
it('When add() is called with the options, this options set the circle object.', () => {
const settings = {
fill: 'blue',
stroke: 'red',
strokeWidth: 3,
type: 'circle',
rx: 100,
ry: 50
};
shape.add('circle', settings);
[shapeObj] = canvas.getObjects();
expect(shapeObj.getFill()).toBe('blue');
expect(shapeObj.getStroke()).toBe('red');
expect(shapeObj.getStrokeWidth()).toBe(3);
expect(shapeObj.getWidth()).toBe(203); // rx * 2 + stokeWidth
expect(shapeObj.getHeight()).toBe(103); // ry * 2 + stokeWidth
});
it('When add() is called with the options, this options set the triangle object.', () => {
const settings = {
fill: 'blue',
stroke: 'red',
strokeWidth: 0,
type: 'triangle',
width: 100,
height: 100
};
shape.add('triangle', settings);
[shapeObj] = canvas.getObjects();
expect(shapeObj.getFill()).toBe('blue');
expect(shapeObj.getStroke()).toBe('red');
expect(shapeObj.getStrokeWidth()).toBe(0);
expect(shapeObj.getWidth()).toBe(100);
expect(shapeObj.getHeight()).toBe(100);
});
it('When change() is called, the style of the rectagle object is changed.', () => {
shape.add('rect');
[shapeObj] = canvas.getObjects();
shape.change(shapeObj, {
fill: 'blue',
stroke: 'red',
width: 10,
height: 20
});
expect(shapeObj.getFill()).toBe('blue');
expect(shapeObj.getStroke()).toBe('red');
expect(shapeObj.getWidth()).toBe(11);
expect(shapeObj.getHeight()).toBe(21);
});
it('When change() is called, the style of the circle object is changed.', () => {
shape.add('circle');
[shapeObj] = canvas.getObjects();
shape.change(shapeObj, {
fill: 'blue',
stroke: 'red',
rx: 10,
ry: 20
});
expect(shapeObj.getFill()).toBe('blue');
expect(shapeObj.getStroke()).toBe('red');
expect(shapeObj.getWidth()).toBe(21);
expect(shapeObj.getHeight()).toBe(41);
});
it('When change() is called, the style of the triangle object is changed.', () => {
shape.add('triangle');
[shapeObj] = canvas.getObjects();
shape.change(shapeObj, {
width: 10,
height: 20
});
expect(shapeObj.getFill()).toBe('#ffffff');
expect(shapeObj.getStroke()).toBe('#000000');
expect(shapeObj.getWidth()).toBe(11);
expect(shapeObj.getHeight()).toBe(21);
});
describe('_onFabricMouseMove()', () => {
beforeEach(() => {
shape.add('rect', {
left: 100,
top: 100
});
[shapeObj] = canvas.getObjects();
shape._shapeObj = shapeObj;
});
it('When the mouse direction is in 1th quadrant,' +
'the origin values of shape set to "left" and "top".', () => {
spyOn(canvas, 'getPointer').and.returnValue({
x: 200,
y: 120
});
shape._onFabricMouseMove(fEvent);
expect(shapeObj.getOriginX()).toBe('left');
expect(shapeObj.getOriginY()).toBe('top');
});
it('When the mouse direction is in 2th quadrant,' +
'the origin values of shape set to "right" and "top".', () => {
spyOn(canvas, 'getPointer').and.returnValue({
x: 80,
y: 100
});
shape._onFabricMouseMove(fEvent);
expect(shapeObj.getOriginX()).toBe('right');
expect(shapeObj.getOriginY()).toBe('top');
});
it('When the mouse direction is in 3th quadrant,' +
'the origin values of shape set to "right" and "bottom".', () => {
spyOn(canvas, 'getPointer').and.returnValue({
x: 80,
y: 80
});
shape._onFabricMouseMove(fEvent);
expect(shapeObj.getOriginX()).toBe('right');
expect(shapeObj.getOriginY()).toBe('bottom');
});
it('When the mouse direction is in 4th quadrant,' +
'the origin values of shape set to "left" and "bottom".', () => {
spyOn(canvas, 'getPointer').and.returnValue({
x: 200,
y: 80
});
shape._onFabricMouseMove(fEvent);
expect(shapeObj.getOriginX()).toBe('left');
expect(shapeObj.getOriginY()).toBe('bottom');
});
});
describe('_onFabricMouseUp()', () => {
let startPoint, expectedPoint;
beforeEach(() => {
shape.add('circle', {
left: 100,
top: 100
});
[shapeObj] = canvas.getObjects();
shape._shapeObj = shapeObj;
});
it('When the drawing shape is in 1th quadrant, "left" and "top" are the same as start point.', () => {
spyOn(canvas, 'getPointer').and.returnValue({
x: 200,
y: 120
});
startPoint = shapeObj.getPointByOrigin('left', 'top');
shape._onFabricMouseMove(fEvent);
shape._onFabricMouseUp();
expectedPoint = shapeObj.getPointByOrigin('left', 'top');
expect(expectedPoint.x).toBe(startPoint.x);
expect(expectedPoint.y).toBe(startPoint.y);
});
it('When the drawing shape is in 2th quadrant, "right" and "top" are the same as start point.', () => {
spyOn(canvas, 'getPointer').and.returnValue({
x: 80,
y: 120
});
startPoint = shapeObj.getPointByOrigin('right', 'top');
shape._onFabricMouseMove(fEvent);
shape._onFabricMouseUp();
expectedPoint = shapeObj.getPointByOrigin('right', 'top');
expect(expectedPoint.x).toBe(startPoint.x);
expect(expectedPoint.y).toBe(startPoint.y);
});
it('When the drawing shape is in 3th quadrant, "right" and "bottom" are the same as start point.', () => {
spyOn(canvas, 'getPointer').and.returnValue({
x: 80,
y: 80
});
startPoint = shapeObj.getPointByOrigin('right', 'bottom');
shape._onFabricMouseMove(fEvent);
shape._onFabricMouseUp();
expectedPoint = shapeObj.getPointByOrigin('right', 'bottom');
expect(expectedPoint.x).toBe(startPoint.x);
expect(expectedPoint.y).toBe(startPoint.y);
});
it('When the drawing shape is in 4th quadrant, "left" and "bottom" are the same as start point.', () => {
spyOn(canvas, 'getPointer').and.returnValue({
x: 120,
y: 80
});
startPoint = shapeObj.getPointByOrigin('left', 'bottom');
shape._onFabricMouseMove(fEvent);
shape._onFabricMouseUp();
expectedPoint = shapeObj.getPointByOrigin('left', 'bottom');
expect(expectedPoint.x).toBe(startPoint.x);
expect(expectedPoint.y).toBe(startPoint.y);
});
});
it('When drawing the shape with mouse and the "isRegular" option set to true, ' +
'the created rectangle shape has the same "width" and "height" values.', () => {
shape.add('rect', {
left: 0,
top: 0
});
shape._withShiftKey = true;
[shapeObj] = canvas.getObjects();
shape._shapeObj = shapeObj;
spyOn(canvas, 'getPointer').and.returnValue({
x: 200,
y: 100
});
shape._onFabricMouseMove(fEvent);
shape._onFabricMouseUp();
expect(shapeObj.getWidth()).toBe(201); // has 1 storkeWidth
expect(shapeObj.getHeight()).toBe(201); // has 1 storkeWidth
});
it('When drawing the shape with mouse and the "isRegular" option set to true, ' +
'the created rectangle shape has the same "width" and "height" values.', () => {
shape.add('rect', {
left: 0,
top: 0
});
shape._withShiftKey = true;
[shapeObj] = canvas.getObjects();
shape._shapeObj = shapeObj;
spyOn(canvas, 'getPointer').and.returnValue({
x: 100,
y: 200
});
shape._onFabricMouseMove(fEvent);
shape._onFabricMouseUp();
expect(shapeObj.getWidth()).toBe(201); // has 1 storkeWidth
expect(shapeObj.getHeight()).toBe(201); // has 1 storkeWidth
});
});
|
Download
