core-graphics/lib/editor-state/tests/context-menu.spec.js

A core library for creating shape-based graphic editors

'use strict';

var _tap = require('tap');

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

var _editorStateReducer2 = _interopRequireDefault(_editorStateReducer);

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

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

var _declarations = require('../../declarations');

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

(0, _tap.test)('context menu: opening on a single shape', function (t) {
  var mx = 10,
      my = 10;
  var shapeId = _testHistorySpec.ALICE_LINE.id;

  var evs = [(0, _editorEvents.canvasMouseMove)({ x: mx, y: my }), (0, _editorEvents.canvasShapeMouseDown)({ id: shapeId, button: _editorEvents.ButtonType.Right })];
  var expectedContextMenuState = {
    open: true, x: mx, y: my,
    target: { type: _declarations.ContextMenuTargetType.Shapes, payload: { ids: [shapeId] } }
  };
  var expectedMode = (0, _declarations.modeSelected)([shapeId]);

  var _evs$reduce = evs.reduce(_editorStateReducer2.default, _testHistorySpec.ALICE_BOB_LINES_EDITOR_STATE);

  var contextMenu = _evs$reduce.contextMenu;
  var mode = _evs$reduce.mode;


  t.deepEqual(contextMenu, expectedContextMenuState);
  t.deepEqual(mode, expectedMode);
  t.end();
});

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


(0, _tap.test)('context menu: disabled in moving viewport mode', function (t) {
  var mx = 10,
      my = 10;
  var shapeId = _testHistorySpec.ALICE_LINE.id;

  var evs = [(0, _editorEvents.setMode)((0, _declarations.modeMovingViewport)()), (0, _editorEvents.canvasMouseMove)({ x: mx, y: my }), (0, _editorEvents.canvasShapeMouseDown)({ id: shapeId, button: _editorEvents.ButtonType.Right })];
  var expectedMode = (0, _declarations.modeMovingViewport)();

  var _evs$reduce2 = evs.reduce(_editorStateReducer2.default, _testHistorySpec.ALICE_BOB_LINES_EDITOR_STATE);

  var contextMenu = _evs$reduce2.contextMenu;
  var mode = _evs$reduce2.mode;


  t.deepEqual(mode, expectedMode);
  t.equal(contextMenu.open, false);
  t.end();
});

(0, _tap.test)('context menu: gets closed when setting moving viewport mode', function (t) {
  var mx = 10,
      my = 10;
  var shapeId = _testHistorySpec.ALICE_LINE.id;

  var evs = [(0, _editorEvents.canvasMouseMove)({ x: mx, y: my }), (0, _editorEvents.canvasShapeMouseDown)({ id: shapeId, button: _editorEvents.ButtonType.Right }), (0, _editorEvents.setMode)((0, _declarations.modeMovingViewport)())];
  var expectedMode = (0, _declarations.modeMovingViewport)();

  var _evs$reduce3 = evs.reduce(_editorStateReducer2.default, _testHistorySpec.ALICE_BOB_LINES_EDITOR_STATE);

  var contextMenu = _evs$reduce3.contextMenu;
  var mode = _evs$reduce3.mode;


  t.deepEqual(mode, expectedMode);
  t.equal(contextMenu.open, false);
  t.end();
});

(0, _tap.test)('context menu: opening on many selected shapes', function (t) {
  var mx = 10,
      my = 10;
  var shapesIds = [_testHistorySpec.ALICE_LINE_ID, _testHistorySpec.BOB_LINE_ID];

  var evs = [(0, _editorEvents.setMode)((0, _declarations.modeSelected)(shapesIds)), (0, _editorEvents.canvasMouseMove)({ x: mx, y: my }), (0, _editorEvents.canvasShapeMouseDown)({ id: _testHistorySpec.ALICE_LINE_ID, button: _editorEvents.ButtonType.Right })];
  var expectedContextMenuState = {
    open: true, x: mx, y: my,
    target: { type: _declarations.ContextMenuTargetType.Shapes, payload: { ids: shapesIds } }
  };
  var expectedMode = (0, _declarations.modeSelected)(shapesIds);

  var _evs$reduce4 = evs.reduce(_editorStateReducer2.default, _testHistorySpec.ALICE_BOB_LINES_EDITOR_STATE);

  var contextMenu = _evs$reduce4.contextMenu;
  var mode = _evs$reduce4.mode;


  t.deepEqual(contextMenu, expectedContextMenuState);
  t.deepEqual(mode, expectedMode);
  t.end();
});

(0, _tap.test)('context menu: setting', function (t) {
  var mx = 10,
      my = 10;
  var shapeId = _testHistorySpec.ALICE_LINE.id;

  var evs = [(0, _editorEvents.canvasMouseMove)({ x: mx, y: my }), (0, _editorEvents.canvasShapeMouseDown)({ id: shapeId, button: _editorEvents.ButtonType.Right }), (0, _editorEvents.canvasShapeMouseUp)({ id: shapeId, button: _editorEvents.ButtonType.Right }), (0, _editorEvents.setContextMenu)({ open: false })];
  var expectedMode = (0, _declarations.modeSelected)([shapeId]);

  var _evs$reduce5 = evs.reduce(_editorStateReducer2.default, _testHistorySpec.ALICE_BOB_LINES_EDITOR_STATE);

  var contextMenu = _evs$reduce5.contextMenu;
  var mode = _evs$reduce5.mode;


  t.deepEqual(contextMenu.open, false);
  t.deepEqual(mode, expectedMode);
  t.end();
});

(0, _tap.test)('context menu: closing on background mouse down', function (t) {
  var mx = 10,
      my = 10;
  var shapeId = _testHistorySpec.ALICE_LINE.id;

  var evs = [(0, _editorEvents.canvasMouseMove)({ x: mx, y: my }), (0, _editorEvents.canvasShapeMouseDown)({ id: shapeId, button: _editorEvents.ButtonType.Right }), (0, _editorEvents.canvasShapeMouseUp)({ id: shapeId, button: _editorEvents.ButtonType.Right }), (0, _editorEvents.canvasBackgroundMouseDown)(_editorEvents.ButtonType.Left)];

  var _evs$reduce6 = evs.reduce(_editorStateReducer2.default, _testHistorySpec.ALICE_BOB_LINES_EDITOR_STATE);

  var contextMenu = _evs$reduce6.contextMenu;


  t.equal(contextMenu.open, false);
  t.end();
});

(0, _tap.test)('context menu: closing on shape mouse down event', function (t) {
  var mx = 10,
      my = 10;
  var shapeId = _testHistorySpec.ALICE_LINE.id;

  var evs = [(0, _editorEvents.canvasMouseMove)({ x: mx, y: my }), (0, _editorEvents.canvasShapeMouseDown)({ id: shapeId, button: _editorEvents.ButtonType.Right }), (0, _editorEvents.canvasShapeMouseUp)({ id: shapeId, button: _editorEvents.ButtonType.Right }), (0, _editorEvents.canvasShapeMouseDown)({ id: shapeId, button: _editorEvents.ButtonType.Left })];

  var _evs$reduce7 = evs.reduce(_editorStateReducer2.default, _testHistorySpec.ALICE_BOB_LINES_EDITOR_STATE);

  var contextMenu = _evs$reduce7.contextMenu;


  t.equal(contextMenu.open, false);
  t.end();
});