File: public/js/tinymce/src/plugins/image/src/test/js/browser/FigureResizeTest.js

asynctest(
  'browser.tinymce.plugins.image.FigureResizeTest',
  [
    'ephox.agar.api.Chain',
    'ephox.agar.api.NamedChain',
    'ephox.agar.api.Guard',
    'ephox.agar.api.Assertions',
    'ephox.agar.api.Mouse',
    'ephox.agar.api.Pipeline',
    'ephox.agar.api.UiFinder',
    'ephox.mcagar.api.TinyDom',
    'ephox.mcagar.api.Editor',
    'ephox.mcagar.api.ApiChains',
    'ephox.mcagar.api.UiChains',
    'tinymce.plugins.image.Plugin',
    'tinymce.themes.modern.Theme'
  ],
  function (Chain, NamedChain, Guard, Assertions, Mouse, Pipeline, UiFinder, TinyDom, Editor, ApiChains, UiChains, ImagePlugin, ModernTheme) {

    var success = arguments[arguments.length - 2];
    var failure = arguments[arguments.length - 1];

    ModernTheme();
    ImagePlugin();

    var cGetBody = Chain.mapper(function (editor) {
      return TinyDom.fromDom(editor.getBody());
    });

    var cGetElementSize = Chain.mapper(function (elm) {
      var elmStyle = elm.dom().style;
      return { w: elmStyle.width, h: elmStyle.height };
    });

    var cDragHandleRight = function (px) {
      return Chain.op(function (input) {
        var dom = input.editor.dom;
        var target = input.resizeSE.dom();
        var pos = dom.getPos(target);

        dom.fire(target, 'mousedown', { screenX: pos.x, screenY: pos.y });
        dom.fire(target, 'mousemove', { screenX: pos.x + px, screenY: pos.y });
        dom.fire(target, 'mouseup');
      });
    };

    Pipeline.async({}, [
      Chain.asStep({}, [
        Editor.cFromSettings({
          plugins: 'image',
          toolbar: 'image',
          indent: false,
          image_caption: true,
          height: 400,
          skin_url: '/project/src/skins/lightgray/dist/lightgray'
        }),
        UiChains.cClickOnToolbar('click image button', 'div[aria-label="Insert/edit image"]'),
        UiChains.cFillActiveDialog({
          src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
          width: 100,
          height: 100,
          caption: true
        }),
        UiChains.cSubmitDialog(),
        NamedChain.asChain([
          NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
          NamedChain.direct('editor', cGetBody, 'editorBody'),
          // click the image, but expect the handles on the figure
          NamedChain.direct('editorBody', UiFinder.cFindIn('figure > img'), 'img'),
          NamedChain.direct('img', Mouse.cTrueClick, '_'),
          NamedChain.direct(NamedChain.inputName(), ApiChains.cAssertSelection([], 0, [], 1), '_'),
          NamedChain.direct('editorBody', Chain.control(
            UiFinder.cFindIn('#mceResizeHandlese'),
            Guard.tryUntil('wait for resize handlers', 100, 40000)
          ), '_'),
          // actually drag the handle to the right
          NamedChain.direct('editorBody', UiFinder.cFindIn('#mceResizeHandlese'), 'resizeSE'),
          NamedChain.write('_', cDragHandleRight(100)),
          NamedChain.direct('img', cGetElementSize, 'imgSize'),
          NamedChain.direct('imgSize', Assertions.cAssertEq('asserting image size after resize', { w: '200px', h: '200px' }), '_'),
          NamedChain.output('editor')
        ]),
        Editor.cRemove
      ])
    ], function () {
      success();
    }, failure);
  }
);