core-graphics/lib/editor-state/tests/shapes.spec.js

A core library for creating shape-based graphic editors

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

// import { getInitialEditorState } from '../editor-state';


var _tap = require('tap');

var _editorStateReducer2 = require('../editor-state-reducer');

var _editorStateReducer3 = _interopRequireDefault(_editorStateReducer2);

var _editorEvents = require('../editor-events');

var _historyEvent = require('../../history/history-event');

var _historyReducer = require('../../history/history-reducer');

var _editorAction = require('../../editor-state/editor-action');

var _modes = require('../../declarations/modes');

var _testHistorySpec = require('./test-history.spec.js');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var INITIAL_STATE = _testHistorySpec.ALICE_BOB_EVE_LINES_EDITOR_STATE;

(0, _tap.test)('shapes : adding', function (t) {
  var ev = (0, _editorEvents.addShape)(_testHistorySpec.ALICE_LINE);

  var addedShape = (0, _editorStateReducer3.default)(_testHistorySpec.EMPTY_ALICE_STATE, ev);

  var editorActionsQueue = addedShape.editorActionsQueue;

  t.equal(editorActionsQueue.length, 1);

  var action = editorActionsQueue[0];
  t.assert((0, _editorAction.isPushHistoryEventAction)(action));

  var event = action.payload.ev;
  t.assert((0, _historyEvent.isShapeAddEvent)(event));

  var shapeData = event.payload;
  t.deepEqual(Object.assign({}, shapeData, { id: _testHistorySpec.ALICE_LINE_ID }), _testHistorySpec.ALICE_LINE);

  t.end();
});

(0, _tap.test)('shapes : adding with selectWhenAdded', function (t) {
  var ev = (0, _editorEvents.addShape)(_testHistorySpec.ALICE_LINE, { selectWhenAdded: true });

  var addedShape = (0, _editorStateReducer3.default)(_testHistorySpec.EMPTY_ALICE_STATE, ev);

  var editorActionsQueue = addedShape.editorActionsQueue;

  t.equal(editorActionsQueue.length, 1);

  var action = editorActionsQueue[0];
  t.assert((0, _editorAction.isPushHistoryEventAction)(action));

  var event = action.payload.ev;
  t.assert((0, _historyEvent.isShapeAddEvent)(event));

  var shapeData = event.payload;
  t.deepEqual(Object.assign({}, shapeData, { id: _testHistorySpec.ALICE_LINE_ID }), _testHistorySpec.ALICE_LINE);

  var id = shapeData.id;

  t.deepEqual(addedShape.mode, (0, _modes.modeSelected)([id]));

  t.end();
});

(0, _tap.test)('shapes : removing single', function (t) {
  var shapeId = _testHistorySpec.ALICE_LINE_ID;
  var evs = [(0, _editorEvents.setMode)((0, _modes.modeSelect)()), (0, _editorEvents.removeShapes)([shapeId])];
  var expectedQueue = [(0, _editorAction.pushHistoryEventAction)((0, _historyEvent.shapeRemoveEvent)(shapeId))];

  // initial state has the shape
  t.assert(INITIAL_STATE.scene.shapesOrder.indexOf(shapeId) >= -1);

  var removedShapeState = evs.reduce(_editorStateReducer3.default, INITIAL_STATE);

  var editorActionsQueue = removedShapeState.editorActionsQueue;

  t.deepEqual(editorActionsQueue, expectedQueue);
  t.end();
});

(0, _tap.test)('shapes : removing many', function (t) {
  var shapes = [_testHistorySpec.ALICE_LINE.id, _testHistorySpec.BOB_LINE.id];
  var evs = [(0, _editorEvents.setMode)((0, _modes.modeSelect)()), (0, _editorEvents.removeShapes)(shapes)];
  var expectedQueue = [(0, _editorAction.pushHistoryEventAction)((0, _historyEvent.historyEventsGroup)([(0, _historyEvent.shapeRemoveEvent)(_testHistorySpec.ALICE_LINE.id), (0, _historyEvent.shapeRemoveEvent)(_testHistorySpec.BOB_LINE.id)]))];

  var removedShapeState = evs.reduce(_editorStateReducer3.default, INITIAL_STATE);

  var editorActionsQueue = removedShapeState.editorActionsQueue;

  t.deepEqual(editorActionsQueue, expectedQueue);
  t.end();
});

(0, _tap.test)('shapes : removing single non-existent doesn\'t generate history event', function (t) {
  var shapeId = 'some-shape-id';
  var evs = [(0, _editorEvents.setMode)((0, _modes.modeSelect)()), (0, _editorEvents.removeShapes)([shapeId])];
  var expectedQueue = [];

  var removedShapeState = evs.reduce(_editorStateReducer3.default, INITIAL_STATE);

  var editorActionsQueue = removedShapeState.editorActionsQueue;

  t.deepEqual(editorActionsQueue, expectedQueue);
  t.end();
});

(0, _tap.test)('shapes : removing many non-existent doesn\'t generate history event', function (t) {
  var shapes = [_testHistorySpec.ALICE_LINE.id, _testHistorySpec.BOB_LINE.id, 'some-id'];
  var evs = [(0, _editorEvents.setMode)((0, _modes.modeSelect)()), (0, _editorEvents.removeShapes)(shapes)];
  var expectedQueue = [(0, _editorAction.pushHistoryEventAction)((0, _historyEvent.historyEventsGroup)([(0, _historyEvent.shapeRemoveEvent)(_testHistorySpec.ALICE_LINE.id), (0, _historyEvent.shapeRemoveEvent)(_testHistorySpec.BOB_LINE.id)]))];

  var removedShapeState = evs.reduce(_editorStateReducer3.default, INITIAL_STATE);

  var editorActionsQueue = removedShapeState.editorActionsQueue;

  t.deepEqual(editorActionsQueue, expectedQueue);
  t.end();
});

// moving shapes
(0, _tap.test)('shapes : moving selected', function (t) {
  var _expectedShapesData;

  var shapes = [_testHistorySpec.ALICE_LINE.id, _testHistorySpec.BOB_LINE.id];
  var dx = 8,
      dy = -8;
  var evs = [(0, _editorEvents.setMode)((0, _modes.modeSelected)(shapes)), (0, _editorEvents.moveSelectedShapes)(dx, dy)];

  var expectedShapesData = (_expectedShapesData = {}, _defineProperty(_expectedShapesData, _testHistorySpec.ALICE_LINE.id, _extends({}, _testHistorySpec.ALICE_LINE, { keyPoints: _testHistorySpec.ALICE_LINE.keyPoints.map(function (_ref) {
      var x = _ref.x;
      var y = _ref.y;
      return { x: x + dx, y: y + dy };
    }) })), _defineProperty(_expectedShapesData, _testHistorySpec.BOB_LINE.id, _extends({}, _testHistorySpec.BOB_LINE, { keyPoints: _testHistorySpec.BOB_LINE.keyPoints.map(function (_ref2) {
      var x = _ref2.x;
      var y = _ref2.y;
      return { x: x + dx, y: y + dy };
    }) })), _expectedShapesData);

  var expectedQueue = [(0, _editorAction.pushHistoryEventAction)((0, _historyEvent.historyEventsGroup)(shapes.map(function (shapeId) {
    return (0, _historyEvent.shapeUpdateEvent)(shapeId, expectedShapesData[shapeId]);
  })))];

  var movedShapesState = evs.reduce(_editorStateReducer3.default, INITIAL_STATE);

  t.deepEqual(movedShapesState.editorActionsQueue, expectedQueue);
  t.end();
});

// test single-event shapes order change
var testSingleShapesOrderEvent = function testSingleShapesOrderEvent(_ref3) {
  var initialState = _ref3.initialState;
  var expectedOrder = _ref3.expectedOrder;
  var ev = _ref3.ev;
  var t = _ref3.t;

  var _editorStateReducer = (0, _editorStateReducer3.default)(initialState, ev);

  var editorActionsQueue = _editorStateReducer.editorActionsQueue;


  t.assert(editorActionsQueue.length === 1);
  var editorAction = editorActionsQueue[0];

  t.assert((0, _editorAction.isPushHistoryEventAction)(editorAction));
  var historyEvent = editorAction.payload.ev;

  var gotScene = (0, _historyReducer.reducer)(INITIAL_STATE.scene, historyEvent);

  t.deepEqual(gotScene.shapesOrder, expectedOrder);
};

// shapesOrder: [ aliceLine, bobLine, eveLine ]
var initialState = _testHistorySpec.ALICE_BOB_EVE_LINES_EDITOR_STATE;

(0, _tap.test)('shapes : sending one backward', function (t) {
  var ev = (0, _editorEvents.sendShapesBackward)([_testHistorySpec.BOB_LINE_ID]);
  var expectedOrder = [_testHistorySpec.BOB_LINE_ID, _testHistorySpec.ALICE_LINE_ID, _testHistorySpec.EVE_LINE_ID];

  testSingleShapesOrderEvent({ initialState: initialState, expectedOrder: expectedOrder, ev: ev, t: t });

  t.end();
});

(0, _tap.test)('shapes : sending many backward', function (t) {
  var ev = (0, _editorEvents.sendShapesBackward)([_testHistorySpec.BOB_LINE_ID, _testHistorySpec.EVE_LINE_ID]);
  var expectedOrder = [_testHistorySpec.BOB_LINE_ID, _testHistorySpec.EVE_LINE_ID, _testHistorySpec.ALICE_LINE_ID];

  testSingleShapesOrderEvent({ initialState: initialState, expectedOrder: expectedOrder, ev: ev, t: t });

  t.end();
});

(0, _tap.test)('shapes : sending one forward', function (t) {
  var ev = (0, _editorEvents.sendShapesForward)([_testHistorySpec.BOB_LINE_ID]);
  var expectedOrder = [_testHistorySpec.ALICE_LINE_ID, _testHistorySpec.EVE_LINE_ID, _testHistorySpec.BOB_LINE_ID];

  testSingleShapesOrderEvent({ initialState: initialState, expectedOrder: expectedOrder, ev: ev, t: t });

  t.end();
});

(0, _tap.test)('shapes : sending many forward', function (t) {
  var ev = (0, _editorEvents.sendShapesForward)([_testHistorySpec.ALICE_LINE_ID, _testHistorySpec.BOB_LINE_ID]);
  var expectedOrder = [_testHistorySpec.EVE_LINE_ID, _testHistorySpec.ALICE_LINE_ID, _testHistorySpec.BOB_LINE_ID];

  testSingleShapesOrderEvent({ initialState: initialState, expectedOrder: expectedOrder, ev: ev, t: t });

  t.end();
});

(0, _tap.test)('shapes : sending one to back', function (t) {
  var ev = (0, _editorEvents.sendShapesToBack)([_testHistorySpec.EVE_LINE_ID]);
  var expectedOrder = [_testHistorySpec.EVE_LINE_ID, _testHistorySpec.ALICE_LINE_ID, _testHistorySpec.BOB_LINE_ID];

  testSingleShapesOrderEvent({ initialState: initialState, expectedOrder: expectedOrder, ev: ev, t: t });

  t.end();
});

(0, _tap.test)('shapes : sending many to back', function (t) {
  var ev = (0, _editorEvents.sendShapesToBack)([_testHistorySpec.BOB_LINE_ID, _testHistorySpec.EVE_LINE_ID]);
  var expectedOrder = [_testHistorySpec.BOB_LINE_ID, _testHistorySpec.EVE_LINE_ID, _testHistorySpec.ALICE_LINE_ID];

  testSingleShapesOrderEvent({ initialState: initialState, expectedOrder: expectedOrder, ev: ev, t: t });

  t.end();
});

(0, _tap.test)('shapes : sending one to front', function (t) {
  var ev = (0, _editorEvents.sendShapesToFront)([_testHistorySpec.BOB_LINE_ID]);
  var expectedOrder = [_testHistorySpec.ALICE_LINE_ID, _testHistorySpec.EVE_LINE_ID, _testHistorySpec.BOB_LINE_ID];

  testSingleShapesOrderEvent({ initialState: initialState, expectedOrder: expectedOrder, ev: ev, t: t });

  t.end();
});

(0, _tap.test)('shapes : sending many to front', function (t) {
  var ev = (0, _editorEvents.sendShapesToFront)([_testHistorySpec.ALICE_LINE_ID, _testHistorySpec.EVE_LINE_ID]);
  var expectedOrder = [_testHistorySpec.BOB_LINE_ID, _testHistorySpec.ALICE_LINE_ID, _testHistorySpec.EVE_LINE_ID];

  testSingleShapesOrderEvent({ initialState: initialState, expectedOrder: expectedOrder, ev: ev, t: t });

  t.end();
});