TypeScript mcagar.TinyLoader類代碼示例

UnitTest.asynctest('OxideBlockedDialogTest', (success, failure) => {

  Theme();
  const testDialogApi = Cell({} as any);

  TinyLoader.setup(
    (editor, onSuccess, onFailure) => {
      Pipeline.async({ }, Logger.ts(
        'Check structure of font format',
        [
          Mouse.sClickOn(Body.body(), '.tox-toolbar button'),
          UiFinder.sWaitForVisible('Waiting for dialog', Body.body(), '[role="dialog"]'),
          Mouse.sClickOn(Body.body(), 'button:contains("Make Busy")'),
          Waiter.sTryUntil(
            'Waiting for busy structure to match expected',
            Chain.asStep(Body.body(), [
              UiFinder.cFindIn('[role="dialog"]'),
              Assertions.cAssertStructure(
                'Checking dialog structure to see where "busy" is',
                ApproxStructure.build((s, str, arr) => {
                  return s.element('div', {
                    classes: [ arr.has('tox-dialog') ],
                    children: [
                      s.element('div', {
                        classes: [ arr.has('tox-dialog__header') ]
                      }),
                      s.element('div', {
                        classes: [ arr.has('tox-dialog__content-js') ]
                      }),
                      s.element('div', {
                        classes: [ arr.has('tox-dialog__footer') ]
                      }),
                      s.element('div', {
                        classes: [ arr.has('tox-dialog__busy-spinner') ],
                        children: [
                          s.element('div', {
                            classes: [ arr.has('tox-spinner') ],
                            children: [
                              // The three loading dots
                              s.element('div', { }),
                              s.element('div', { }),
                              s.element('div', { })
                            ]
                          })
                        ]
                      })
                    ]
                  });
                })
              )
            ]),
            100,
            3000
          ),
          Step.sync(() => {
            testDialogApi.get().unblock();
          }),
          Waiter.sTryUntil(
            'Waiting for busy structure to go away',
            Chain.asStep(Body.body(), [
              UiFinder.cFindIn('[role="dialog"]'),
              Assertions.cAssertStructure(
                'Checking dialog structure to see where "busy" is',
                ApproxStructure.build((s, str, arr) => {
                  return s.element('div', {
                    classes: [ arr.has('tox-dialog') ],
                    children: [
                      s.element('div', {
                        classes: [ arr.has('tox-dialog__header') ]
                      }),
                      s.element('div', {
                        classes: [ arr.has('tox-dialog__content-js') ]
                      }),
                      s.element('div', {
                        classes: [ arr.has('tox-dialog__footer') ]
                      })
                    ]
                  });
                })
              )
            ]),
            100,
            3000
          )
        ]
      ), onSuccess, onFailure);
    },
    {
      theme: 'silver',
      menubar: true,
      toolbar: 'dialog-button',
      base_url: '/project/tinymce/js/tinymce',
      setup: (ed: Editor) => {
        ed.ui.registry.addButton('dialog-button', {
          type: 'button',
          text: 'Launch Dialog',
          onAction: () => {
            testDialogApi.set(ed.windowManager.open({
              title: 'Testing Blocking',
              body: {
//.........這裏部分代碼省略.........

//.........這裏部分代碼省略.........
    const evt = { keyCode: 37 };

    dom.fire(target, 'keydown', evt);
    dom.fire(target, 'keypress', evt);
    dom.fire(target, 'keyup', evt);
  };

  suite.test('Wrap single root text node in P', function (editor) {
    editor.focus();
    editor.getBody().innerHTML = 'abcd';
    LegacyUnit.setSelection(editor, 'body', 2);
    pressArrowKey(editor);
    LegacyUnit.equal(HtmlUtils.cleanHtml(editor.getBody().innerHTML), '<p>abcd</p>');
    LegacyUnit.equal(editor.selection.getNode().nodeName, 'P');
  });

  suite.test('Wrap single root text node in P with attrs', function (editor) {
    editor.settings.forced_root_block_attrs = { class: 'class1' };
    editor.getBody().innerHTML = 'abcd';
    LegacyUnit.setSelection(editor, 'body', 2);
    pressArrowKey(editor);
    LegacyUnit.equal(editor.getContent(), '<p class="class1">abcd</p>');
    LegacyUnit.equal(editor.selection.getNode().nodeName, 'P');
    delete editor.settings.forced_root_block_attrs;
  });

  suite.test('Wrap single root text node in P but not table sibling', function (editor) {
    editor.getBody().innerHTML = 'abcd<table><tr><td>x</td></tr></table>';
    LegacyUnit.setSelection(editor, 'body', 2);
    pressArrowKey(editor);
    LegacyUnit.equal(HtmlUtils.cleanHtml(editor.getBody().innerHTML), '<p>abcd</p><table><tbody><tr><td>x</td></tr></tbody></table>');
    LegacyUnit.equal(editor.selection.getNode().nodeName, 'P');
  });

  suite.test('Textnodes with only whitespace should not be wrapped new paragraph', (editor) => {
    editor.getBody().innerHTML = '<p>a</p>      <p>b</p>\n<p>c</p>&nbsp;<p>d</p>      x<p>e</p>';
    LegacyUnit.setSelection(editor, 'p', 0);
    pressArrowKey(editor);
    LegacyUnit.equal(HtmlUtils.cleanHtml(editor.getContent()), '<p>a</p><p>b</p><p>c</p><p>d</p><p>x</p><p>e</p>');
  });

  suite.test('Do not wrap whitespace textnodes between inline elements', (editor) => {
    editor.getBody().innerHTML = 'a <strong>b</strong> <strong>c</strong>';
    LegacyUnit.setSelection(editor, 'strong', 0);
    pressArrowKey(editor);
    LegacyUnit.equal(HtmlUtils.cleanHtml(editor.getContent()), '<p>a <strong>b</strong> <strong>c</strong></p>');
  });

  suite.test('Wrap root em in P but not table sibling', function (editor) {
    editor.getBody().innerHTML = '<em>abcd</em><table><tr><td>x</td></tr></table>';
    LegacyUnit.setSelection(editor, 'em', 2);
    pressArrowKey(editor);
    LegacyUnit.equal(HtmlUtils.cleanHtml(editor.getBody().innerHTML), '<p><em>abcd</em></p><table><tbody><tr><td>x</td></tr></tbody></table>');
    LegacyUnit.equal(editor.selection.getNode().nodeName, 'EM');
  });

  suite.test('Wrap single root text node in DIV', function (editor) {
    editor.settings.forced_root_block = 'div';
    editor.getBody().innerHTML = 'abcd';
    LegacyUnit.setSelection(editor, 'body', 2);
    pressArrowKey(editor);
    LegacyUnit.equal(HtmlUtils.cleanHtml(editor.getBody().innerHTML), '<div>abcd</div>');
    LegacyUnit.equal(editor.selection.getNode().nodeName, 'DIV');
    delete editor.settings.forced_root_block;
  });

  suite.test('Remove empty root text nodes', function (editor) {
    const body = editor.getBody();

    editor.settings.forced_root_block = 'div';
    editor.getBody().innerHTML = 'abcd<div>abcd</div>';
    body.insertBefore(editor.getDoc().createTextNode(''), body.firstChild);
    body.appendChild(editor.getDoc().createTextNode(''));

    const rng = editor.dom.createRng();
    rng.setStart(editor.getBody().childNodes[1], 1);
    rng.setEnd(editor.getBody().childNodes[1], 1);
    editor.selection.setRng(rng);

    pressArrowKey(editor);
    LegacyUnit.equal(HtmlUtils.cleanHtml(body.innerHTML), '<div>abcd</div><div>abcd</div>');
    LegacyUnit.equal(editor.selection.getNode().nodeName, 'DIV');
    LegacyUnit.equal(body.childNodes.length, 2);
  });

  suite.test('Wrap single root text node in P but not table sibling', function (editor) {
    editor.getBody().innerHTML = '<span data-mce-type="bookmark">a</span>';
    LegacyUnit.setSelection(editor, 'body', 0);
    pressArrowKey(editor);
    LegacyUnit.equal(HtmlUtils.cleanHtml(editor.getBody().innerHTML), '<span data-mce-type="bookmark">a</span>');
  });

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    Pipeline.async({}, suite.toSteps(editor), onSuccess, onFailure);
  }, {
    entities: 'raw',
    indent: false,
    skin_url: '/project/js/tinymce/skins/lightgray'
  }, success, failure);
});

//.........這裏部分代碼省略.........

    editor.getBody().innerHTML = '<img src="' + testBlobDataUri + '" data-mce-bogus="1">';

    editor.settings.images_upload_handler = function (data, success) {
      uploadCount++;
      success('url');
    };

    editor.uploadImages(uploadDone);
  });

  suite.asyncTest('Don\'t upload filtered image', function (editor, done) {
    let uploadCount = 0;

    const uploadDone = function () {
      done();
      LegacyUnit.equal(uploadCount, 0, 'Should not upload.');
    };

    editor.getBody().innerHTML = (
      '<img src="' + testBlobDataUri + '" data-skip="1">'
    );

    editor.settings.images_dataimg_filter = function (img) {
      return !img.hasAttribute('data-skip');
    };

    editor.settings.images_upload_handler = function (data, success) {
      uploadCount++;
      success('url');
    };

    editor.uploadImages(uploadDone);
  });

  suite.asyncTest('Don\'t upload api filtered image', function (editor, done) {
    let uploadCount = 0, filterCount = 0;

    const uploadDone = function () {
      LegacyUnit.equal(uploadCount, 0, 'Should not upload.');
      LegacyUnit.equal(filterCount, 1, 'Should have filtered one item.');
      done();
    };

    editor.getBody().innerHTML = (
      '<img src="' + testBlobDataUri + '" data-skip="1">'
    );

    editor.settings.images_dataimg_filter = Fun.constant(true);
    editor.editorUpload.addFilter((img) => {
      filterCount++;
      return !img.hasAttribute('data-skip');
    });

    editor.settings.images_upload_handler = function (data, success) {
      uploadCount++;
      success('url');
    };

    editor.uploadImages(uploadDone);
  });

  suite.test('Retain blobs not in blob cache', function (editor) {
    editor.getBody().innerHTML = '<img src="blob:http%3A//host/f8d1e462-8646-485f-87c5-f9bcee5873c6">';
    LegacyUnit.equal('<p><img src="blob:http%3A//host/f8d1e462-8646-485f-87c5-f9bcee5873c6" /></p>', editor.getContent());
  });

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    let canvas, context;

    canvas = document.createElement('canvas');
    canvas.width = 320;
    canvas.height = 200;

    context = canvas.getContext('2d');
    context.fillStyle = '#ff0000';
    context.fillRect(0, 0, 160, 100);
    context.fillStyle = '#00ff00';
    context.fillRect(160, 0, 160, 100);
    context.fillStyle = '#0000ff';
    context.fillRect(0, 100, 160, 100);
    context.fillStyle = '#ff00ff';
    context.fillRect(160, 100, 160, 100);

    testBlobDataUri = canvas.toDataURL();

    Conversions.uriToBlob(testBlobDataUri).then(function () {
      const steps = appendTeardown(editor, suite.toSteps(editor));
      Pipeline.async({}, steps, onSuccess, onFailure);
    });
  }, {
    selector: 'textarea',
    add_unload_trigger: false,
    disable_nodechange: true,
    automatic_uploads: false,
    entities: 'raw',
    indent: false,
    base_url: '/project/tinymce/js/tinymce'
  }, success, failure);
});

UnitTest.asynctest('browser.tinymce.plugins.wordcount.PluginTest', function () {
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];

  Plugin();
  Theme();

  const sReset = function (tinyApis) {
    return GeneralSteps.sequence([
      tinyApis.sSetContent(''),
      sWaitForWordcount(0)
    ]);
  };

  const sAssertWordcount = function (num) {
    return Step.sync(function () {
      const countEl = DOMUtils.DOM.select('.mce-wordcount')[0];
      const value = countEl ? countEl.innerText : '';
      Assertions.assertEq('wordcount', num + ' WORDS', value.toUpperCase());
    });
  };

  const sWaitForWordcount = function (num) {
    return Waiter.sTryUntil('wordcount did not change', sAssertWordcount(num), 100, 3000);
  };

  const sFakeTyping = function (editor, str) {
    return Step.sync(function () {
      editor.getBody().innerHTML = '<p>' + str + '</p>';
      Keyboard.keystroke(Keys.space(), {}, TinyDom.fromDom(editor.getBody()));
    });
  };

  const sTestSetContent = function (tinyApis) {
    return GeneralSteps.sequence([
      sReset(tinyApis),
      tinyApis.sSetContent('<p>hello world</p>'),
      sWaitForWordcount(2)
    ]);
  };

  const sTestKeystroke = function (editor, tinyApis) {
    return GeneralSteps.sequence([
      sReset(tinyApis),
      sFakeTyping(editor, 'a b c'),
      sAssertWordcount(0),
      sWaitForWordcount(3)
    ]);
  };

  const sExecCommand = function (editor, command) {
    return Step.sync(function () {
      editor.execCommand(command);
    });
  };

  const sTestUndoRedo = function (editor, tinyApis) {
    return GeneralSteps.sequence([
      sReset(tinyApis),
      tinyApis.sSetContent('<p>a b c</p>'),
      sWaitForWordcount(3),
      sExecCommand(editor, 'undo'),
      sWaitForWordcount(0),
      sExecCommand(editor, 'redo'),
      sWaitForWordcount(3),
      tinyApis.sSetRawContent('<p>hello world</p>'),
      sExecCommand(editor, 'mceAddUndoLevel'),
      sWaitForWordcount(2)
    ]);
  };

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    const tinyApis = TinyApis(editor);

    Pipeline.async({}, [
      sTestSetContent(tinyApis),
      sTestKeystroke(editor, tinyApis),
      sTestUndoRedo(editor, tinyApis)
    ], onSuccess, onFailure);
  }, {
    plugins: 'wordcount',
    skin_url: '/project/js/tinymce/skins/lightgray'
  }, success, failure);
});

//.........這裏部分代碼省略.........

    LegacyUnit.equal(trimBr(HtmlUtils.normalizeHtml($toc[0].innerHTML)),
      '<h3 contenteditable="true">Table of Contents</h3>' +
      '<ul>' +
      '<li>' +
      '<a href="#h1">H1</a>' +
      '</li>' +
      '<li>' +
      '<a href="#h2">H1</a>' +
      '</li>' +
      '<li>' +
      '<a href="#h3">H1</a>' +
      '<ul>' +
      '<li><a href="#h4">H2</a></li>' +
      '</ul>' +
      '</li>' +
      '</ul>',
      'no surprises in ToC structure'
    );
  });

  suite.test('mceUpdateToc', function (editor) {
    editor.getBody().innerHTML =
      '<h1 id="h1">H1</h1>' +
      '<p>This is some text.</p><br />' +
      '<h2 id="h2">H2</h2>' +
      '<p>This is some text.</p><hr />' +
      '<h1 id="h3">H1</h1>' +
      '<p>This is some text.</p>' +
      '<h3 id="h4">H3</h3>' +
      '<p>This is some text.</p>'
      ;

    LegacyUnit.setSelection(editor, 'h1', 0);
    editor.execCommand('mceInsertToc');

    // add one more heading
    editor.$().append('<h1 id="h5">H1</h1><p>This is some text.</p>');

    LegacyUnit.setSelection(editor, 'li', 0);
    editor.execCommand('mceUpdateToc');

    LegacyUnit.equal(editor.$('.tst-toc > ul a[href="#h5"]').length, 1,
      'ToC has been successfully updated');
  });

  suite.test('Misc.', function (editor) {
    let contents, $toc;

    editor.getBody().innerHTML =
      '<h2 id="h1">H2</h2>' +
      '<p>This is some text.</p><br />' +
      '<h2 id="h2">H2</h2>' +
      '<p>This is some text.</p>' +
      '<h3 id="h4">H3</h3>' +
      '<p>This is some text.</p>'
      ;

    LegacyUnit.setSelection(editor, 'h2', 0);
    editor.execCommand('mceInsertToc');

    contents = editor.getContent();
    LegacyUnit.equal(/contenteditable/i.test(contents), false, 'cE stripped for getContent()');

    editor.setContent(contents);

    $toc = editor.$('.tst-toc');
    LegacyUnit.deepEqual($toc.attr('contentEditable'), 'false', 'cE added back after setContent()');
    LegacyUnit.deepEqual($toc.find(':first-child').attr('contentEditable'), 'true',
      'cE added back to title after setContent()');

    stripAttribs($toc, ['data-mce-href', 'data-mce-selected']);

    LegacyUnit.equal(trimBr(HtmlUtils.normalizeHtml($toc[0].innerHTML)),
      '<h3 contenteditable="true">Table of Contents</h3>' +
      '<ul>' +
      '<li>' +
      '<a href="#h1">H2</a>' +
      '</li>' +
      '<li>' +
      '<a href="#h2">H2</a>' +
      '</li>' +
      '</ul>',
      'the largest available header becomes first ToC level'
    );
  });

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    Pipeline.async({}, suite.toSteps(editor), onSuccess, onFailure);
  }, {
    plugins: 'toc',
    toolbar: 'toc',
    add_unload_trigger: false,
    indent: false,
    toc_class: 'tst-toc',
    toc_depth: 2,
    toc_header: 'h3',
    skin_url: '/project/js/tinymce/skins/lightgray'
  }, success, failure);
});

UnitTest.asynctest('browser.tinymce.plugins.charmap.CharMapPluginTest', function () {
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];
  const suite = LegacyUnit.createSuite();

  Plugin();
  Theme();

  suite.test('Replace characters by array', function (editor) {
    editor.settings.charmap = [
      [65, 'Latin A'],
      [66, 'Latin B']
    ];

    LegacyUnit.deepEqual(editor.plugins.charmap.getCharMap(), [
      [65, 'Latin A'],
      [66, 'Latin B']
    ]);
  });

  suite.test('Replace characters by function', function (editor) {
    editor.settings.charmap = function () {
      return [
        [65, 'Latin A fun'],
        [66, 'Latin B fun']
      ];
    };

    LegacyUnit.deepEqual(editor.plugins.charmap.getCharMap(), [
      [65, 'Latin A fun'],
      [66, 'Latin B fun']
    ]);
  });

  suite.test('Append characters by array', function (editor) {
    editor.settings.charmap = [
      [67, 'Latin C']
    ];

    editor.settings.charmap_append = [
      [65, 'Latin A'],
      [66, 'Latin B']
    ];

    LegacyUnit.deepEqual(editor.plugins.charmap.getCharMap(), [
      [67, 'Latin C'],
      [65, 'Latin A'],
      [66, 'Latin B']
    ]);
  });

  suite.test('Append characters by function', function (editor) {
    editor.settings.charmap = [
      [67, 'Latin C']
    ];

    editor.settings.charmap_append = function () {
      return [
        [65, 'Latin A fun'],
        [66, 'Latin B fun']
      ];
    };

    LegacyUnit.deepEqual(editor.plugins.charmap.getCharMap(), [
      [67, 'Latin C'],
      [65, 'Latin A fun'],
      [66, 'Latin B fun']
    ]);
  });

  suite.test('Insert character', function (editor) {
    let lastEvt;

    editor.on('insertCustomChar', function (e) {
      lastEvt = e;
    });

    editor.plugins.charmap.insertChar('A');
    LegacyUnit.equal(lastEvt.chr, 'A');
  });

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    Pipeline.async({}, suite.toSteps(editor), onSuccess, onFailure);
  }, {
    plugins: 'charmap',
    indent: false,
    skin_url: '/project/js/tinymce/skins/lightgray'
  }, success, failure);
});

//.........這裏部分代碼省略.........
    rng.setStart(editor.dom.select('p')[0].firstChild, 0);
    rng.setEnd(editor.dom.select('p')[0].firstChild, 0);
    editor.selection.setRng(rng);
    editor.execCommand('mceInsertContent', false, insertedContent);

    LegacyUnit.equal(editor.getContent(), insertedContent + startingContent);
  });

  suite.test('mceInsertContent - text with space before at start of block', function (editor) {
    editor.getBody().innerHTML = '<p>a</p>';
    LegacyUnit.setSelection(editor, 'p', 0);
    editor.execCommand('mceInsertContent', false, ' b');
    LegacyUnit.equal(editor.getContent(), '<p>\u00a0ba</p>');
  });

  suite.test('mceInsertContent - text with space after at end of block', function (editor) {
    editor.getBody().innerHTML = '<p>a</p>';
    LegacyUnit.setSelection(editor, 'p', 1);
    editor.execCommand('mceInsertContent', false, 'b ');
    LegacyUnit.equal(editor.getContent(), '<p>ab\u00a0</p>');
  });

  suite.test('mceInsertContent - text with space before/after at middle of block', function (editor) {
    editor.getBody().innerHTML = '<p>ac</p>';
    LegacyUnit.setSelection(editor, 'p', 1);
    editor.execCommand('mceInsertContent', false, ' b ');
    LegacyUnit.equal(editor.getContent(), '<p>a b c</p>');
  });

  suite.test('mceInsertContent - inline element with space before/after at middle of block', function (editor) {
    editor.getBody().innerHTML = '<p>ac</p>';
    LegacyUnit.setSelection(editor, 'p', 1);
    editor.execCommand('mceInsertContent', false, ' <em>b</em> ');
    LegacyUnit.equal(editor.getContent(), '<p>a <em>b</em> c</p>');
  });

  suite.test('mceInsertContent - block element with space before/after at middle of block', function (editor) {
    editor.getBody().innerHTML = '<p>ac</p>';
    LegacyUnit.setSelection(editor, 'p', 1);
    editor.execCommand('mceInsertContent', false, ' <p>b</p> ');
    LegacyUnit.equal(editor.getContent(), '<p>a</p><p>b</p><p>c</p>');
  });

  suite.test('mceInsertContent - strong in strong', function (editor) {
    editor.getBody().innerHTML = '<strong>ac</strong>';
    LegacyUnit.setSelection(editor, 'strong', 1);
    editor.execCommand('mceInsertContent', false, { content: '<strong>b</strong>', merge: true });
    LegacyUnit.equal(editor.getContent(), '<p><strong>abc</strong></p>');
  });

  suite.test('mceInsertContent - span in span same style color', function (editor) {
    editor.getBody().innerHTML = '<span style="color:#ff0000">ac</strong>';
    LegacyUnit.setSelection(editor, 'span', 1);
    editor.execCommand('mceInsertContent', false, { content: '<span style="color:#ff0000">b</span>', merge: true });
    LegacyUnit.equal(editor.getContent(), '<p><span style="color: #ff0000;">abc</span></p>');
  });

  suite.test('mceInsertContent - span in span different style color', function (editor) {
    editor.getBody().innerHTML = '<span style="color:#ff0000">ac</strong>';
    LegacyUnit.setSelection(editor, 'span', 1);
    editor.execCommand('mceInsertContent', false, { content: '<span style="color:#00ff00">b</span>', merge: true });
    LegacyUnit.equal(editor.getContent(), '<p><span style="color: #ff0000;">a<span style="color: #00ff00;">b</span>c</span></p>');
  });

  suite.test('mceInsertContent - select with option element', function (editor) {
    editor.getBody().innerHTML = '<p>1</p>';
    LegacyUnit.setSelection(editor, 'p', 1);
    editor.execCommand('mceInsertContent', false, '2<select><option selected="selected">3</option></select>');
    LegacyUnit.equal(editor.getContent(), '<p>12<select><option selected="selected">3</option></select></p>');
  });

  suite.test('mceInsertContent - insert P in span style element #7090', function (editor) {
    editor.setContent('<p><span style="color: red">1</span></p><p>3</p>');
    LegacyUnit.setSelection(editor, 'span', 1);
    editor.execCommand('mceInsertContent', false, '<p>2</p>');
    LegacyUnit.equal(editor.getContent(), '<p><span style="color: red;">1</span></p><p>2</p><p>3</p>');
  });

  suite.test('mceInsertContent - insert char at char surrounded by spaces', function (editor) {
    editor.setContent('<p>a b c</p>');
    LegacyUnit.setSelection(editor, 'p', 2, 'p', 3);
    editor.execCommand('mceInsertContent', false, 'X');
    LegacyUnit.equal(JSON.serialize(editor.getContent()), '"<p>a X c</p>"');
  });

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    Pipeline.async({}, suite.toSteps(editor), onSuccess, onFailure);
  }, {
    add_unload_trigger: false,
    disable_nodechange: true,
    indent: false,
    entities: 'raw',
    convert_urls: false,
    valid_styles: {
      '*': 'color,font-size,font-family,background-color,font-weight,font-style,text-decoration,' +
        'float,margin,margin-top,margin-right,margin-bottom,margin-left,padding-left,text-align,display'
    },
    skin_url: '/project/js/tinymce/skins/lightgray'
  }, success, failure);
});

UnitTest.asynctest('browser.tinymce.plugins.imagetools.ImageToolsErrorTest', function () {
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];
  const uploadHandlerState = ImageUtils.createStateContainer();

  const corsUrl = 'http://moxiecode.cachefly.net/tinymce/v9/images/logo.png';

  Plugin();

  const sAssertErrorMessage = function (html) {
    return Step.label('Check notification message', Chain.asStep(TinyDom.fromDom(document.body), [
      UiFinder.cWaitFor('Find notification', '.tox-notification__body > p'),
      Chain.label('Get notification HTML', Chain.mapper(Html.get)),
      Chain.label('Assert HTML matches expected', Assertions.cAssertHtml('Message html does not match', html))
    ]));
  };

  const sCloseErrorMessage = Step.label('Close error message', Chain.asStep(TinyDom.fromDom(document.body), [
    UiFinder.cWaitFor('Could not find notification', '.tox-notification > button'),
    Mouse.cClick
  ]));

  TinyLoader.setup(
    function (editor, onSuccess, onFailure) {
      const tinyApis = TinyApis(editor);

      const sTestImageToolsError = (testId, description, proxyUrl, apiKey, errorMessage) => Log.step(
        testId, description, GeneralSteps.sequence([
          uploadHandlerState.sResetState,
          Step.label('Set image proxy URL', tinyApis.sSetSetting('imagetools_proxy', proxyUrl)),
          Step.label('Set API key', tinyApis.sSetSetting('api_key', apiKey)),
          ImageUtils.sLoadImage(editor, corsUrl),
          Step.label('Select image', tinyApis.sSelect('img', [])),
          ImageUtils.sExecCommand(editor, 'mceImageFlipHorizontal'),
          sAssertErrorMessage(errorMessage),
          sCloseErrorMessage,
          Step.label('Clear editor content', tinyApis.sSetContent(''))
        ])
      );

      const tests = [

        sTestImageToolsError('TBA', 'Incorrect service url no api key',
            'http://0.0.0.0.0.0/', undefined, 'ImageProxy HTTP error: Incorrect Image Proxy URL'),

        sTestImageToolsError('TBA', 'Incorrect service url with api key',
            'http://0.0.0.0.0.0/', 'fake_key', 'ImageProxy HTTP error: Incorrect Image Proxy URL'),

        sTestImageToolsError('TBA', '403 no api key',
            '/custom/403', undefined, 'ImageProxy HTTP error: Rejected request'),

        sTestImageToolsError('TBA', '403 with api key',
            '/custom/403', 'fake_key', 'ImageProxy Service error: Invalid JSON in service error message'),

        sTestImageToolsError('TBA', '403 with api key and return error data',
            '/custom/403data', 'fake_key', 'ImageProxy Service error: Unknown service error'),

        sTestImageToolsError('TBA', '404 no api key',
            '/custom/404', undefined, 'ImageProxy HTTP error: Could not find Image Proxy'),

        sTestImageToolsError('TBA', '404 with api key',
            '/custom/404', 'fake_key', 'ImageProxy HTTP error: Could not find Image Proxy'),

      ];

      Pipeline.async({}, tests, onSuccess, onFailure);
    },
    {
      theme: 'silver',
      plugins: 'imagetools',
      automatic_uploads: false,
      base_url: '/project/tinymce/js/tinymce',
    },
    success,
    failure
  );
});

UnitTest.asynctest('browser.tinymce.core.MiscCommandsTest', function () {
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];
  const suite = LegacyUnit.createSuite();

  Theme();

  const normalizeRng = function (rng) {
    if (rng.startContainer.nodeType === 3) {
      if (rng.startOffset === 0) {
        rng.setStartBefore(rng.startContainer);
      } else if (rng.startOffset >= rng.startContainer.nodeValue.length - 1) {
        rng.setStartAfter(rng.startContainer);
      }
    }

    if (rng.endContainer.nodeType === 3) {
      if (rng.endOffset === 0) {
        rng.setEndBefore(rng.endContainer);
      } else if (rng.endOffset >= rng.endContainer.nodeValue.length - 1) {
        rng.setEndAfter(rng.endContainer);
      }
    }

    return rng;
  };

  const ok = function (value, label?) {
    return LegacyUnit.equal(value, true, label);
  };

  suite.test('InsertHorizontalRule', function (editor) {
    let rng;

    editor.setContent('<p>123</p>');
    rng = editor.dom.createRng();
    rng.setStart(editor.dom.select('p')[0].firstChild, 1);
    rng.setEnd(editor.dom.select('p')[0].firstChild, 2);
    editor.selection.setRng(rng);
    editor.execCommand('InsertHorizontalRule');
    LegacyUnit.equal(editor.getContent(), '<p>1</p><hr /><p>3</p>');
    rng = normalizeRng(editor.selection.getRng(true));
    ok(rng.collapsed);
    LegacyUnit.equalDom(rng.startContainer, editor.getBody().lastChild);
    LegacyUnit.equal(rng.startContainer.nodeName, 'P');
    LegacyUnit.equal(rng.startOffset, 0);
    LegacyUnit.equal(rng.endContainer.nodeName, 'P');
    LegacyUnit.equal(rng.endOffset, 0);
  });

  if (Env.ceFalse) {
    suite.test('SelectAll', function (editor) {
      editor.setContent('<p>a</p><div contenteditable="false"><div contenteditable="true">b</div><p>c</p>');
      LegacyUnit.setSelection(editor, 'div div', 0);
      editor.execCommand('SelectAll');
      LegacyUnit.equal(editor.selection.getStart().nodeName, 'DIV');
      LegacyUnit.equal(editor.selection.getEnd().nodeName, 'DIV');
      LegacyUnit.equal(editor.selection.isCollapsed(), false);
    });
  }

  suite.test('InsertLineBreak', function (editor) {
    editor.setContent('<p>123</p>');
    LegacyUnit.setSelection(editor, 'p', 2);
    editor.execCommand('InsertLineBreak');
    LegacyUnit.equal(editor.getContent(), '<p>12<br />3</p>');

    editor.setContent('<p>123</p>');
    LegacyUnit.setSelection(editor, 'p', 0);
    editor.execCommand('InsertLineBreak');
    LegacyUnit.equal(editor.getContent(), '<p><br />123</p>');

    editor.setContent('<p>123</p>');
    LegacyUnit.setSelection(editor, 'p', 3);
    editor.execCommand('InsertLineBreak');
    LegacyUnit.equal(HtmlUtils.cleanHtml(editor.getBody().innerHTML), (Env.ie && Env.ie < 11) ? '<p>123<br></p>' : '<p>123<br><br></p>');
  });

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    Pipeline.async({}, suite.toSteps(editor), onSuccess, onFailure);
  }, {
    add_unload_trigger: false,
    disable_nodechange: true,
    indent: false,
    entities: 'raw',
    convert_urls: false,
    valid_styles: {
      '*': 'color,font-size,font-family,background-color,font-weight,font-style,text-decoration,' +
        'float,margin,margin-top,margin-right,margin-bottom,margin-left,padding-left,text-align,display'
    },
    skin_url: '/project/js/tinymce/skins/lightgray'
  }, success, failure);
});

UnitTest.asynctest('browser.AutoCompleteTest', function () {
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];

  ImagePlugin();
  LinkPlugin();
  PastePlugin();
  ContextMenuPlugin();
  TablePlugin();
  TextpatternPlugin();
  Theme();

  const cKeyStroke = function (keyvalue, modifiers) {
    return Chain.op(function (dispatcher) {
      Keyboard.keystroke(keyvalue, modifiers, dispatcher);
    });
  };

  const sSetupLinkableContent = function (tinyApis) {
    return GeneralSteps.sequence([
      tinyApis.sSetContent(
        '<h1 id="a">abc</h1>' +
        '<h2 id="b">abcd</h2>' +
        '<h3 id="c">abce</h3>'
      ),
      tinyApis.sSetSelection([0, 0], 0, [0, 0], 1)
    ]);
  };

  const sSelectAutoCompleteLink = function (tinyApis, url) {
    return Chain.asStep({}, [
      Chain.fromParent(Toolbar.cWaitForToolbar, [
        Toolbar.cClickButton('Insert/Edit link')
      ]),
      Chain.fromParent(UiFinder.cFindIn('input'), [
        UiControls.cSetValue(url),
        cKeyStroke(Keys.space(), {}),
        cKeyStroke(Keys.down(), {})
      ]),
      Chain.inject(TinyDom.fromDom(document)),
      Chain.fromParent(FocusTools.cGetFocused, [
        cKeyStroke(Keys.down(), {}),
        cKeyStroke(Keys.enter(), {})
      ]),
      Chain.fromParent(Toolbar.cWaitForToolbar, [
        Toolbar.cClickButton('Ok')
      ])
    ]);
  };

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    const tinyApis = TinyApis(editor);
    const tinyActions = TinyActions(editor);

    Pipeline.async({}, [
      tinyApis.sFocus,
      sSetupLinkableContent(tinyApis),
      tinyActions.sContentKeystroke(Keys.space(), {}),
      sSelectAutoCompleteLink(tinyApis, 'a'),
      tinyApis.sAssertContent(
        '<h1 id="a"><a href="#b">a</a>bc</h1>\n' +
        '<h2 id="b">abcd</h2>\n' +
        '<h3 id="c">abce</h3>'
      )
    ], onSuccess, onFailure);
  }, {
    theme: 'inlite',
    plugins: 'image table link paste contextmenu textpattern',
    insert_toolbar: 'quickimage media quicktable',
    selection_toolbar: 'bold italic | quicklink h1 h2 blockquote',
    inline: true,
    skin_url: '/project/js/tinymce/skins/lightgray'
  }, success, failure);
});