TypeScript TinyLoader.setup方法代碼示例

UnitTest.asynctest('TextcolorCommandsTest', (success, failure) => {
    const browser = PlatformDetection.detect().browser;

    const state = Cell(null);

    const sAssertState = function (expected) {
      return Logger.t(`Assert state ${expected}`, Step.sync(function () {
        RawAssertions.assertEq('should be same', expected, state.get());
      }));
    };

    const sResetState = Logger.t('Reset state', Step.sync(function () {
      state.set(null);
    }));

    TinyLoader.setup(function (editor, onSuccess, onFailure) {

      editor.on('ExecCommand', function (e) {
        state.set(e.command);
      });

      const tinyUi = TinyUi(editor);
      const tinyApis = TinyApis(editor);

      Pipeline.async({}, browser.isIE() ? [] : [
        Log.stepsAsStep('TBA', 'TextColor: apply and remove forecolor and make sure of the right command has been executed', [
          tinyApis.sFocus,
          tinyApis.sSetContent('hello test'),
          tinyApis.sSetSelection([0, 0], 0, [0, 0], 5),
          tinyUi.sClickOnToolbar('click forecolor', '[aria-label="Text color"] > .tox-tbtn + .tox-split-button__chevron'),
          tinyUi.sWaitForUi('wait for color swatch to open', '.tox-swatches'),
          tinyUi.sClickOnUi('click color', 'div[data-mce-color="#18BC9B"]'),
          sAssertState('mceApplyTextcolor'),
          tinyApis.sSetSelection([0, 0, 0], 0, [0, 0, 0], 5),
          tinyUi.sClickOnToolbar('click forecolor', '[aria-label="Text color"] > .tox-tbtn + .tox-split-button__chevron'),
          tinyUi.sWaitForUi('wait for color swatch to open', '.tox-swatches'),
          tinyUi.sClickOnUi('click remove color', '.tox-swatch--remove'),
          sAssertState('mceRemoveTextcolor'),
          sResetState
        ]),
        Log.stepsAsStep('TBA', 'TextColor: apply and remove backcolor and make sure of the right command has been executed', [
          tinyApis.sFocus,
          tinyApis.sSetContent('hello test'),
          tinyApis.sSetSelection([0, 0], 0, [0, 0], 5),
          tinyUi.sClickOnToolbar('click backcolor', '[aria-label="Background color"] > .tox-tbtn + .tox-split-button__chevron'),
          tinyUi.sWaitForUi('wait for color swatch to open', '.tox-swatches'),
          tinyUi.sClickOnUi('click green color', 'div[data-mce-color="#18BC9B"]'),
          sAssertState('mceApplyTextcolor'),
          tinyApis.sSetSelection([0, 0, 0], 0, [0, 0, 0], 5),
          tinyUi.sClickOnToolbar('click backcolor', '[aria-label="Background color"] > .tox-tbtn + .tox-split-button__chevron'),
          tinyUi.sWaitForUi('wait for color swatch to open', '.tox-swatches'),
          tinyUi.sClickOnUi('click remove color', '.tox-swatch--remove'),
          sAssertState('mceRemoveTextcolor'),
          sResetState
        ])
      ], onSuccess, onFailure);
    }, {
      toolbar: 'forecolor backcolor',
      base_url: '/project/tinymce/js/tinymce'
    }, success, failure);
  }

UnitTest.asynctest('browser.core.IframeNodeTest', function (success, failure) {
  Plugin();
  Theme();

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

    Pipeline.async({}, [
      Log.stepsAsStep('TBA', 'Media: iframe with class and style, no width & height attribs', [
        apis.sSetContent(
          '<iframe class="test-class" style="height: 250px; width: 500px;" src="about:blank"></iframe>'
        ),
        Chain.asStep(Element.fromDom(editor.getBody()), [
          UiFinder.cFindIn('iframe'),
          Chain.op((input) =>
            Assertions.assertStructure('should have all attributes', ApproxStructure.build((s, str, arr) => {
              return s.element('iframe', {
                classes: [ arr.has('test-class') ],
                attrs: {
                  width: str.none('should not have width'),
                  height: str.none('should not have height')
                },
                styles: {
                  width: str.is('500px'),
                  height: str.is('250px')
                },
              });
            }), input)
          )
        ])
      ]),

      Log.stepsAsStep('TBA', 'Media: iframe with class, style and width & height attribs', [
        apis.sSetContent(
          '<iframe class="test-class" style="height: 250px; width: 500px;" width="300" height="150" src="about:blank"></iframe>'
        ),
        Chain.asStep(Element.fromDom(editor.getBody()), [
          UiFinder.cFindIn('iframe'),
          Chain.op((input) =>
            Assertions.assertStructure('should have all attributes', ApproxStructure.build((s, str, arr) => {
              return s.element('iframe', {
                classes: [ arr.has('test-class') ],
                attrs: {
                  width: str.is('300'),
                  height: str.is('150')
                },
                styles: {
                  width: str.is('500px'),
                  height: str.is('250px')
                },
              });
            }), input)
          )
        ])
      ]),

      Log.stepsAsStep('TBA', 'Media: iframe with width & height attribs', [
        apis.sSetContent(
          '<iframe width="300" height="150" src="about:blank"></iframe>'
        ),
        Chain.asStep(Element.fromDom(editor.getBody()), [
          UiFinder.cFindIn('iframe'),
          Chain.op((input) =>
            Assertions.assertStructure('should have all attributes', ApproxStructure.build((s, str, arr) => {
              return s.element('iframe', {
                attrs: {
                  width: str.is('300'),
                  height: str.is('150')
                },
                styles: {
                  width: str.none('should not have width style'),
                  height: str.none('should not have height style')
                },
              });
            }), input)
          )
        ])
      ]),
    ], onSuccess, onFailure);
  }, {
    plugins: ['media'],
    toolbar: 'media',
    theme: 'silver',
    media_url_resolver (data, resolve) {
      Delay.setTimeout(function () {
        resolve({
          html: '<span id="fake">' + data.url + '</span>'
        });
      }, 500);
    },
    base_url: '/project/tinymce/js/tinymce'
  }, success, failure);
});

//.........這裏部分代碼省略.........
          ApproxStructure.build(function (s, str, arr) {
            return s.element('body', {
              children: [
                s.element('p', {
                  children: [
                    s.element('span', {
                      attrs: {
                        contenteditable: str.is('false')
                      },
                      children: [
                        s.text(str.is('a'))
                      ]
                    }),
                    s.text(str.is(Zwsp.ZWSP)),
                    s.element('span', {
                      attrs: {
                        contenteditable: str.is('false')
                      },
                      children: [
                        s.text(str.is('b'))
                      ]
                    }),
                    s.text(str.is('\u00a0'))
                  ]
                })
              ]
            });
          })
        )
      ])),

      Logger.t('Should add fake caret if we delete content beside cef elements', GeneralSteps.sequence([
        tinyApis.sSetContent('<p><span contenteditable="false">a</span>&nbsp;</p>'),
        tinyApis.sSetSelection([0, 2], 1, [0, 2], 1),
        tinyActions.sContentKeystroke(Keys.backspace(), {}),
        tinyApis.sAssertSelection([0, 1], 1, [0, 1], 1),
        tinyApis.sAssertContentStructure(
          ApproxStructure.build(function (s, str, arr) {
            return s.element('body', {
              children: [
                s.element('p', {
                  children: [
                    s.element('span', {
                      attrs: {
                        contenteditable: str.is('false')
                      },
                      children: [
                        s.text(str.is('a'))
                      ]
                    }),
                    s.text(str.is(Zwsp.ZWSP))
                  ]
                })
              ]
            });
          })
        )
      ])),

      Logger.t('Should add fake caret if we delete range beside cef', GeneralSteps.sequence([
        tinyApis.sSetContent('<p><span contenteditable="false">a</span>&nbsp;abc</p>'),
        tinyApis.sSetSelection([0, 2], 0, [0, 2], 4),
        tinyActions.sContentKeystroke(Keys.backspace(), {}),
        tinyApis.sAssertSelection([0, 1], 1, [0, 1], 1),
        tinyApis.sAssertContentStructure(
          ApproxStructure.build(function (s, str, arr) {
            return s.element('body', {
              children: [
                s.element('p', {
                  children: [
                    s.element('span', {
                      attrs: {
                        contenteditable: str.is('false')
                      },
                      children: [
                        s.text(str.is('a'))
                      ]
                    }),
                    s.text(str.is(Zwsp.ZWSP))
                  ]
                })
              ]
            });
          })
        )
      ]))
    ]);
  };

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

    Pipeline.async({}, [
      sTestDelete(editor, tinyApis, tinyActions)
    ], onSuccess, onFailure);
  }, {
    base_url: '/project/tinymce/js/tinymce'
  }, success, failure);
});

UnitTest.asynctest('browser.tinymce.core.keyboard.ArrowKeysTableTest', (success, failure) => {
    const browser = PlatformDetection.detect().browser;

    ModernTheme();

    const table = (html: string) => ApproxStructure.fromHtml('<table><tbody><tr><td>' + html + '</td></tr></tbody></table>');
    const caret = (type: string) => {
      return ApproxStructure.fromHtml(`<p data-mce-caret="${type}" data-mce-bogus="all"><br data-mce-bogus="1"></p>`);
    };
    const visualCaret = (before: boolean) => {
      const caretClass = before ? 'mce-visual-caret-before' : 'mce-visual-caret';
      return ApproxStructure.fromHtml(`<div class="mce-visual-caret ${caretClass}" data-mce-bogus="all"></div>`);
    };

    const caretBefore = Fun.curry(caret, 'before');
    const caretAfter = Fun.curry(caret, 'after');
    const visualCaretBefore = Fun.curry(visualCaret, true);
    const visualCaretAfter = Fun.curry(visualCaret, false);
    const buildBody = (children) => ApproxStructure.build((s, str, arr) => s.element('body', { children }));

    TinyLoader.setup(function (editor, onSuccess, onFailure) {
      Pipeline.async({}, [
        Logger.t('FakeCaret before/after table', GeneralSteps.sequence(browser.isEdge() || browser.isFirefox() ? [
          Logger.t('Move fake caret left before table', Chain.asStep(editor, [
            ApiChains.cFocus,
            ApiChains.cSetContent('<table><tbody><tr><td>1</td></tr></tbody></table>'),
            ApiChains.cSetCursor([0, 0, 0, 0, 0], 0),
            ApiChains.cAssertContentStructure(buildBody([ table('1') ])),
            ActionChains.cContentKeystroke(Keys.left()),
            ApiChains.cAssertContentStructure(buildBody([ caretBefore(), table('1'), visualCaretBefore() ])),
            ApiChains.cAssertSelection([0], 0, [0], 0)
          ])),
          Logger.t('Move fake caret right after table', Chain.asStep(editor, [
            ApiChains.cFocus,
            ApiChains.cSetContent('<table><tbody><tr><td>1</td></tr></tbody></table>'),
            ApiChains.cSetCursor([0, 0, 0, 0, 0], 1),
            ApiChains.cAssertContentStructure(buildBody([ table('1') ])),
            ActionChains.cContentKeystroke(Keys.right()),
            ApiChains.cAssertContentStructure(buildBody([ table('1'), caretAfter(), visualCaretAfter() ])),
            ApiChains.cAssertSelection([1], 0, [1], 0)
          ])),
          Logger.t('Move fake caret right after table then right again before other table', Chain.asStep(editor, [
            ApiChains.cFocus,
            ApiChains.cSetContent('<table><tbody><tr><td>1</td></tr></tbody></table><table><tbody><tr><td>2</td></tr></tbody></table>'),
            ApiChains.cSetCursor([0, 0, 0, 0, 0], 1),
            ApiChains.cAssertContentStructure(buildBody([ table('1'), table('2') ])),
            ActionChains.cContentKeystroke(Keys.right()),
            ApiChains.cAssertContentStructure(buildBody([ table('1'), caretAfter(), table('2'), visualCaretAfter() ])),
            ApiChains.cAssertSelection([1], 0, [1], 0),
            ActionChains.cContentKeystroke(Keys.right()),
            ApiChains.cAssertContentStructure(buildBody([ table('1'), caretBefore(), table('2'), visualCaretBefore() ])),
            ApiChains.cAssertSelection([1], 0, [1], 0)
          ])),
          Logger.t('Move fake caret left before table then left again after other table', Chain.asStep(editor, [
            ApiChains.cFocus,
            ApiChains.cSetContent('<table><tbody><tr><td>1</td></tr></tbody></table><table><tbody><tr><td>2</td></tr></tbody></table>'),
            ApiChains.cSetCursor([1, 0, 0, 0, 0], 0),
            ApiChains.cAssertContentStructure(buildBody([ table('1'), table('2') ])),
            ActionChains.cContentKeystroke(Keys.left()),
            ApiChains.cAssertContentStructure(buildBody([ table('1'), caretBefore(), table('2'), visualCaretBefore() ])),
            ApiChains.cAssertSelection([1], 0, [1], 0),
            ActionChains.cContentKeystroke(Keys.left()),
            ApiChains.cAssertContentStructure(buildBody([ table('1'), caretAfter(), table('2'), visualCaretAfter() ])),
            ApiChains.cAssertSelection([1], 0, [1], 0)
          ])),
          Logger.t('Move fake up for when table is first element', Chain.asStep(editor, [
            ApiChains.cFocus,
            ApiChains.cSetContent('<table><tbody><tr><td>1</td></tr></tbody></table>'),
            ApiChains.cSetCursor([0, 0, 0, 0, 0], 0),
            ApiChains.cAssertContentStructure(buildBody([ table('1') ])),
            ActionChains.cContentKeystroke(Keys.up()),
            ApiChains.cAssertContentStructure(buildBody([ caretBefore(), table('1'), visualCaretBefore() ])),
            ApiChains.cAssertSelection([0], 0, [0], 0)
          ])),
          Logger.t('Move fake down for when table is last element', Chain.asStep(editor, [
            ApiChains.cFocus,
            ApiChains.cSetContent('<table><tbody><tr><td>1</td></tr></tbody></table>'),
            ApiChains.cSetCursor([0, 0, 0, 0, 0], 1),
            ApiChains.cAssertContentStructure(buildBody([ table('1') ])),
            ActionChains.cContentKeystroke(Keys.down()),
            ApiChains.cAssertContentStructure(buildBody([ table('1'), caretAfter(), visualCaretAfter() ])),
            ApiChains.cAssertSelection([1], 0, [1], 0)
          ])),
          Logger.t('Move fake up for when table is first element but not when caret is not as start', Chain.asStep(editor, [
            ApiChains.cFocus,
            ApiChains.cSetContent('<table><tbody><tr><td>1</td></tr></tbody></table>'),
            ApiChains.cSetCursor([0, 0, 0, 0, 0], 1),
            ApiChains.cAssertContentStructure(buildBody([ table('1') ])),
            ActionChains.cContentKeystroke(Keys.up()),
            ApiChains.cAssertContentStructure(buildBody([ caretBefore(), table('1'), visualCaretBefore() ])),
            ApiChains.cAssertSelection([0], 0, [0], 0)
          ])),
          Logger.t('Move fake down for when table is last element but not when caret is not as end', Chain.asStep(editor, [
            ApiChains.cFocus,
            ApiChains.cSetContent('<table><tbody><tr><td>1</td></tr></tbody></table>'),
            ApiChains.cSetCursor([0, 0, 0, 0, 0], 0),
            ApiChains.cAssertContentStructure(buildBody([ table('1') ])),
            ActionChains.cContentKeystroke(Keys.down()),
            ApiChains.cAssertContentStructure(buildBody([ table('1'), caretAfter(), visualCaretAfter() ])),
            ApiChains.cAssertSelection([1], 0, [1], 0)
//.........這裏部分代碼省略.........

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

  Plugin();
  Theme();

  const sTestEmbedContentFromUrlWithAttribute = function (ui, url, content) {
    return GeneralSteps.sequence([
      Utils.sOpenDialog(ui),
      Utils.sPasteSourceValue(ui, url),
      Utils.sAssertEmbedContent(ui, content),
      Utils.sSubmitAndReopen(ui),
      Utils.sAssertSourceValue(ui, url),
      Utils.sCloseDialog(ui)
    ]);
  };
  const sTestEmbedContentFromUrl2 = function (ui, url, url2, content, content2) {
    return GeneralSteps.sequence([
      Utils.sOpenDialog(ui),
      Utils.sPasteSourceValue(ui, url),
      Utils.sAssertEmbedContent(ui, content),
      Utils.sSubmitAndReopen(ui),
      Utils.sAssertSourceValue(ui, url),
      Utils.sPasteSourceValue(ui, url2),
      Utils.sAssertEmbedContent(ui, content2),
      Utils.sCloseDialog(ui)
    ]);
  };

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    const ui = TinyUi(editor);
    const api = TinyApis(editor);

    Pipeline.async({}, [
      sTestEmbedContentFromUrlWithAttribute(ui,
        'a',
        '<div data-ephox-embed-iri="a" style="max-width: 300px; max-height: 150px"></div>'
      ),
      sTestEmbedContentFromUrl2(ui, 'a', 'b',
        '<div data-ephox-embed-iri="a" style="max-width: 300px; max-height: 150px"></div>',
        '<div data-ephox-embed-iri="b" style="max-width: 300px; max-height: 150px"></div>'
      ),
      Utils.sTestEmbedContentFromUrl(ui,
        'a',
        '<div data-ephox-embed-iri="a" style="max-width: 300px; max-height: 150px"></div>'
      ),
      Utils.sAssertSizeRecalcConstrained(ui),
      Utils.sAssertSizeRecalcUnconstrained(ui),
      api.sSetContent(''),
      Utils.sAssertSizeRecalcConstrainedReopen(ui)
    ], onSuccess, onFailure);
  }, {
    plugins: ['media'],
    toolbar: 'media',
    media_url_resolver (data, resolve) {
      resolve({ html: '<div data-ephox-embed-iri="' + data.url + '" style="max-width: 300px; max-height: 150px"></div>' });
    },
    skin_url: '/project/js/tinymce/skins/lightgray'
  }, success, failure);
});

UnitTest.asynctest('ColorPickerSanityTest', (success, failure) => {
  // mutation is yummy
  let currentColor = '';

  const setColor = (hexOpt) => {
    hexOpt.each((hex) => {
      currentColor = hex;
    });
  };

  const dialogSelector = 'div[role="dialog"]';

  const docBody = Element.fromDom(document.body);

  const sAssertColor = function (expected) {
    return Logger.t('Asserting color', Step.sync(function () {
      Assertions.assertEq('Asserting current colour is ' + expected, expected, currentColor);
    }));
  };

  const sSetHex = (hex) => {
    return Logger.t('Changing textarea content to ' + hex, Step.sync(() => {
      const inputs = SelectorFilter.descendants(docBody, 'div[role="dialog"] input');
      const hexInput = inputs[inputs.length - 1];
      hexInput.dom().value = hex;
    }));
  };

  const sOpenDialog = (editor, docBody) => {
    return GeneralSteps.sequence(Logger.ts('Open dialog and wait for it to be visible', [
      Step.sync(function () {
        const dialog = ColorSwatch.colorPickerDialog(editor);
        dialog(setColor, '#ffffff');
      }),
      UiFinder.sWaitForVisible('Waited for dialog to be visible', docBody, dialogSelector)
    ]));
  };

  const sAssertColorWhite = sAssertColor('#ffffff');

  const sAssertColorBlack = sAssertColor('#000000');

  const sSetHexWhite = sSetHex('ffffff');

  const sSetHexBlack = sSetHex('000000');

  const sSubmitDialog = GeneralSteps.sequence(Logger.ts('Click Save and close dialog', [
    FocusTools.sSetFocus('Focus dialog', docBody, dialogSelector),
    Waiter.sTryUntil('Button is not disabled', UiFinder.sNotExists(docBody, 'button.tox-button:contains("Save")[disabled]'), 100, 1000),
    Mouse.sClickOn(docBody, 'button.tox-button:contains(Save)'),
    Waiter.sTryUntil('Dialog should close', UiFinder.sNotExists(docBody, dialogSelector), 100, 3000),
  ]));

  const sCancelDialog = GeneralSteps.sequence(Logger.ts('Click Cancel and close dialog', [
    FocusTools.sSetFocus('Focus dialog', docBody, dialogSelector),
    Mouse.sClickOn(docBody, 'button.tox-button:contains(Cancel)'),
    Waiter.sTryUntil('Dialog should close', UiFinder.sNotExists(docBody, dialogSelector), 100, 3000),
  ]));

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    Pipeline.async({}, [
      Log.stepsAsStep('TBA', 'ColorPicker: Open dialog, click Save and assert color is white', [
        sOpenDialog(editor, docBody),
        sSubmitDialog,
        sAssertColorWhite
      ]),

      Log.stepsAsStep('TBA', 'ColorPicker: Open dialog, pick a color, click Save and assert color changes to picked color', [
        sOpenDialog(editor, docBody),
        sSetHexBlack,
        sSubmitDialog,
        sAssertColorBlack
      ]),

      Log.stepsAsStep('TBA', 'ColorPicker: Open dialog, pick a different color, click Cancel and assert color does not change', [
        sOpenDialog(editor, docBody),
        sSetHexWhite,
        sCancelDialog,
        sAssertColorBlack
      ])
    ], onSuccess, onFailure);
  }, {
    plugins: '',
    theme: 'silver',
    toolbar: '',
    base_url: '/project/tinymce/js/tinymce',
  }, success, failure);
});

  function () {
    const success = arguments[arguments.length - 2];
    const failure = arguments[arguments.length - 1];

    ModernTheme();
    TextpatternPlugin();

    const sTypeChar = function (editor, character) {
      return Step.sync(function () {
        const charCode = character.charCodeAt(0);
        editor.fire('keypress', { charCode });
      });
    };

    const sTypeAndTrigger = function (tinyApis, editor) {
      return function (label, patternText, trigger, tag, rawText) {
        return Logger.t(label, GeneralSteps.sequence([
          tinyApis.sSetContent('<p>' + patternText + trigger + '</p>'),
          tinyApis.sFocus,
          tinyApis.sSetCursor([0, 0], patternText.length + 1),
          sTypeChar(editor, trigger),
          Waiter.sTryUntil(
            'did not get expected format',
            tinyApis.sAssertContentStructure(ApproxStructure.build(function (s, str) {
              return s.element('body', {
                children: [
                  s.element('p', {
                    children: [
                      s.element(tag, {
                        children: [
                          s.text(str.is(rawText))
                        ]
                      }),
                      s.text(str.is(trigger))
                    ]
                  })
                ]
              });
            })), 10, 10000
          )
        ]));
      };
    };

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

      Pipeline.async({}, [
        tnt('em with ,', '*a*', ',', 'em', 'a'),
        tnt('strong with ,', '**a**', ',', 'strong', 'a'),
        tnt('em with .', '*a*', '.', 'em', 'a'),
        tnt('strong with .', '**a**', '.', 'strong', 'a'),
        tnt('em with ;', '*a*', ';', 'em', 'a'),
        tnt('strong with ;', '**a**', ';', 'strong', 'a'),
        tnt('em with :', '*a*', ':', 'em', 'a'),
        tnt('strong with :', '**a**', ':', 'strong', 'a'),
        tnt('em with !', '*a*', '!', 'em', 'a'),
        tnt('strong with !', '**a**', '!', 'strong', 'a'),
        tnt('em with ?', '*a*', '?', 'em', 'a'),
        tnt('strong with ?', '**a**', '?', 'strong', 'a')
      ], onSuccess, onFailure);
    }, {
      plugins: 'textpattern',
      skin_url: '/project/js/tinymce/skins/lightgray'
    }, success, failure);
  }

UnitTest.asynctest('browser.tinymce.core.annotate.AnnotationChangedTest', (success, failure) => {

  ModernTheme();

  const changes: Cell<Array<{state: boolean, name: string, uid: string}>> = Cell([ ]);

  const sAssertChanges = (message: string, expected: Array<{uid: string, state: boolean, name: string}>) => Logger.t(
    message,
    // Use a chain so that changes.get() can be evaluated at run-time.
    Chain.asStep({ }, [
      Chain.mapper((_) => {
        return changes.get();
      }),
      Chain.op((cs: Array<{uid: string, name: string}>) => {
        Assertions.assertEq('Checking changes', expected, cs);
      })
    ])
  );

  const sClearChanges = Step.sync(() => {
    changes.set([ ]);
  });

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

    const sTestAnnotationEvents = (label: string, start: number[], soffset: number, expected: Array<{ uid: string, name: string, state: boolean}>): any => {
      return GeneralSteps.sequence([
        tinyApis.sSetSelection(start, soffset, start, soffset),
        Waiter.sTryUntil(
          label,
          sAssertChanges('sTestAnnotationEvents.sAssertChanges', expected),
          10,
          1000
        ),
      ]);
    };

    const sTestChanges = GeneralSteps.sequence([
      // '<p>This |is the first paragraph</p><p>This is the second.</p><p>This is| the third.</p><p>Spanning |multiple</p><p>par||ag||raphs| now</p>'
      tinyApis.sSetContent([
        '<p>This is the first paragraph</p>',
        '<p>This is the second.</p>',
        '<p>This is the third.</p>',
        '<p>Spanning multiple</p>',
        '<p>paragraphs now</p>'
      ].join('')),
      tinyApis.sSetSelection([ 0, 0 ], 'This '.length, [ 0, 0 ], 'This is'.length),
      sAnnotate(editor, 'alpha', 'id-one', { anything: 'comment-1' }),

      tinyApis.sSetSelection([ 1, 0 ], 'T'.length, [ 1, 0 ], 'This is'.length),
      sAnnotate(editor, 'alpha', 'id-two', { anything: 'comment-two' }),

      tinyApis.sSetSelection([ 2, 0 ], 'This is the th'.length, [ 2, 0 ], 'This is the thir'.length),
      sAnnotate(editor, 'beta', 'id-three', { something: 'comment-three' }),

      tinyApis.sSetSelection([ 3, 0 ], 'Spanning '.length, [ 4, 0 ], 'paragraphs'.length),
      sAnnotate(editor, 'gamma', 'id-four', { something: 'comment-four' }),

      tinyApis.sSetSelection([ 4, 0, 0 ], 'par'.length, [ 4, 0, 0 ], 'parag'.length ),
      sAnnotate(editor, 'delta', 'id-five', { something: 'comment-five' }),

      Step.wait(1000),
      sClearChanges,

      sAssertHtmlContent(tinyApis, [
        `<p>This <span data-mce-annotation="alpha" data-test-anything="comment-1" data-mce-annotation-uid="id-one" class="mce-annotation">is</span> the first paragraph</p>`,

        `<p>T<span data-mce-annotation="alpha" data-test-anything="comment-two" data-mce-annotation-uid="id-two" class="mce-annotation">his is</span> the second.</p>`,

        `<p>This is the th<span data-mce-annotation="beta" data-test-something="comment-three" data-mce-annotation-uid="id-three" class="mce-annotation">ir</span>d.</p>`,

        `<p>Spanning <span data-mce-annotation="gamma" data-test-something="comment-four" data-mce-annotation-uid="id-four" class="mce-annotation">multiple</span></p>`,

        `<p><span data-mce-annotation="gamma" data-test-something="comment-four" data-mce-annotation-uid="id-four" class="mce-annotation">par` +
          `<span data-mce-annotation="delta" data-test-something="comment-five" data-mce-annotation-uid="id-five" class="mce-annotation delta-test">ag</span>` +
          `raphs</span> now</p>`
      ]),

      // Outside: p(0) > text(0) > "Th".length
      // Inside: p(0) > span(1) > text(0) > 'i'.length
      // Inside: p(1) > span(1) > text(0), 'hi'.length
      // Outside: p(1) > text(2) > ' the '.length

      Waiter.sTryUntil(
        'Waiting for no changes',
        sAssertChanges('Should be no changes', [ ]),
        10,
        1000
      ),

      sTestAnnotationEvents(
        'No annotation at cursor',
        [ 0, 0 ], 'Th'.length,
        [
          { state: false, name: 'delta', uid: null },
          { state: false, name: 'gamma', uid: null }
        ]
      ),

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

//.........這裏部分代碼省略.........
      '<ul>' +
      '<li>a' +
      '<ul>' +
      '<li>b</li>' +
      '<li>c</li>' +
      '</ul>' +
      '</li>' +
      '<li>d</li>' +
      '</ul>'
    );

    editor.focus();
    LegacyUnit.setSelection(editor, 'li li:first', 0, 'li li:last', 1);
    LegacyUnit.execCommand(editor, 'InsertUnorderedList');

    LegacyUnit.equal(editor.getContent(),
      '<ul>' +
      '<li>a</li>' +
      '</ul>' +
      '<p>b</p>' +
      '<p>c</p>' +
      '<ul>' +
      '<li>d</li>' +
      '</ul>'
    );
    LegacyUnit.equal(editor.selection.getStart().firstChild.data, 'b');
    LegacyUnit.equal(editor.selection.getEnd().firstChild.data, 'c');
  });

  suite.test('Remove indented list with multiple items', function (editor) {
    editor.getBody().innerHTML = LegacyUnit.trimBrs(
      '<ul>' +
        '<li>a</li>' +
        '<li><p>b</p></li>' +
        '<li>c</li>' +
      '</ul>'
    );

    editor.focus();
    LegacyUnit.setSelection(editor, 'p', 0);
    LegacyUnit.execCommand(editor, 'InsertUnorderedList');

    LegacyUnit.equal(editor.getContent(),
      '<ul>' +
        '<li>a</li>' +
      '</ul>' +
      '<p>b</p>' +
      '<ul>' +
        '<li>c</li>' +
      '</ul>'
    );
  });

  // Ignore on IE 7, 8 this is a known bug not worth fixing
  if (!Env.ie || Env.ie > 8) {
    suite.test('Remove empty UL between two textblocks in BR mode', function (editor) {
      editor.settings.forced_root_block = false;

      editor.getBody().innerHTML = LegacyUnit.trimBrs(
        '<div>a</div>' +
        '<ul>' +
        '<li></li>' +
        '</ul>' +
        '<div>b</div>'
      );

      editor.focus();
      LegacyUnit.setSelection(editor, 'li:first', 0);
      LegacyUnit.execCommand(editor, 'InsertUnorderedList');

      LegacyUnit.equal(editor.getContent(),
        '<div>a</div>' +
        '<br />' +
        '<div>b</div>'
      );
      LegacyUnit.equal(editor.selection.getStart().nodeName, 'BR');

      editor.settings.forced_root_block = 'p';
    });
  }

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    Pipeline.async({}, suite.toSteps(editor), onSuccess, onFailure);
  }, {
    plugins: 'lists',
    add_unload_trigger: false,
    disable_nodechange: true,
    indent: false,
    entities: 'raw',
    valid_elements:
      'li[style|class|data-custom],ol[style|class|data-custom],' +
      'ul[style|class|data-custom],dl,dt,dd,em,strong,span,#p,div,br',
    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,display,position,top,left,list-style-type'
    },
    skin_url: '/project/js/tinymce/skins/lightgray'
  }, success, failure);
});

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

  ModernTheme();
  LinkPlugin();

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    const ui = TinyUi(editor);
    const api = TinyApis(editor);

    const sEnterUrl = function (url) {
      return Step.sync(function () {
        const input: any = document.activeElement;

        input.value = url;
        DOMUtils.DOM.fire(input, 'change');
      });
    };

    const sInsertLink = function (url) {
      return GeneralSteps.sequence([
        ui.sClickOnToolbar('click link button', 'div[aria-label="Insert/edit link"] > button'),
        ui.sWaitForPopup('wait for link dialog', 'div[aria-label="Insert link"][role="dialog"]'),
        sEnterUrl(url),
        ui.sClickOnUi('click ok button', 'button:contains("Ok")')
      ]);
    };

    const getDialogByElement = function (element) {
      return Arr.find(editor.windowManager.getWindows(), function (win) {
        return element.dom().id === win._id;
      });
    };

    const cAssertDialogContents = function (data) {
      return Chain.on(function (element, next, die) {
        getDialogByElement(element).fold(die, function (win) {
          Assertions.assertEq('asserting dialog contents', data, win.toJSON());
          next(Chain.wrap(element));
        });
      });
    };

    Pipeline.async({}, [
      Logger.t('doesn\'t add rel noopener stuff with allow_unsafe_link_target: true', GeneralSteps.sequence([
        api.sSetSetting('allow_unsafe_link_target', true),
        sInsertLink('http://www.google.com'),
        api.sAssertContentPresence({ 'a[rel="noopener"]': 0, 'a': 1 }),
        api.sSetContent('')
      ])),

      Logger.t('adds if allow_unsafe_link_target: false', GeneralSteps.sequence([
        api.sSetSetting('allow_unsafe_link_target', false),
        sInsertLink('http://www.google.com'),
        api.sAssertContentPresence({ 'a[rel="noopener"]': 1 }),
        api.sSetContent('')
      ])),

      Logger.t('...and if it\'s undefined', GeneralSteps.sequence([
        api.sSetSetting('allow_unsafe_link_target', undefined),
        sInsertLink('http://www.google.com'),
        api.sAssertContentPresence({ 'a[rel="noopener"]': 1 })
      ])),

      Logger.t('allow_unsafe_link_target=false: node filter normalizes and secures rel on SetContent', GeneralSteps.sequence([
        api.sSetSetting('allow_unsafe_link_target', false),
        api.sSetContent('<a href="http://www.google.com" target="_blank" rel="nofollow alternate">Google</a>'),
        api.sAssertContent('<p><a href="http://www.google.com" target="_blank" rel="alternate nofollow noopener">Google</a></p>'),
        api.sSetContent('')
      ])),

      Logger.t('allow_unsafe_link_target=false: proper option selected for defined rel_list', GeneralSteps.sequence([
        api.sSetSetting('allow_unsafe_link_target', false),
        api.sSetSetting('rel_list', [
          { title: 'Lightbox', value: 'lightbox' },
          { title: 'Test rel', value: 'alternate nofollow' },
          { title: 'Table of contents', value: 'toc' }
        ]),
        api.sSetContent('<a href="http://www.google.com" target="_blank" rel="nofollow alternate">Google</a>'),
        api.sSelect('p', [0]),
        ui.sClickOnToolbar('click link button', 'div[aria-label="Insert/edit link"] > button'),
        Chain.asStep({}, [
          ui.cWaitForPopup('wait for link dialog', 'div[aria-label="Insert link"][role="dialog"]'),
          cAssertDialogContents({
            text: 'Google',
            title: '',
            href: 'http://www.google.com',
            target: '_blank',
            rel: 'alternate nofollow noopener'
          })
        ]),
        ui.sClickOnUi('click ok button', 'button:contains("Ok")')
      ]))

    ], onSuccess, onFailure);
  }, {
    plugins: 'link',
    toolbar: 'link',
    skin_url: '/project/js/tinymce/skins/lightgray',
//.........這裏部分代碼省略.........