TypeScript Plugin.default函数代码示例

UnitTest.asynctest('Default image dialog on empty data', (success, failure) => {
  SilverTheme();
  ImagePlugin();
  Pipeline.async({}, [
    Log.chainsAsStep('TBA', 'Image: default image dialog on empty data', [
      Editor.cFromSettings(silverSettings),
      cExecCommand('mceImage', true),
      cWaitForDialog(),
      Chain.fromParent(Chain.identity, [
        cAssertInputValue(generalTabSelectors.src, ''),
        cAssertInputValue(generalTabSelectors.alt, ''),
        cAssertInputValue(generalTabSelectors.height, ''),
        cAssertInputValue(generalTabSelectors.width, '')
      ]),
      cFillActiveDialog({
        src: {
          value: 'src'
        },
        alt: 'alt',
        dimensions: {
          width: '200',
          height: '100'
        }
      }),
      cSubmitDialog(),
      cAssertCleanHtml('Checking output', '<p><img src="src" alt="alt" width="200" height="100" /></p>'),
      Editor.cRemove
    ])
  ], () => success(), failure);
});

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

  ModernTheme();
  ImagePlugin();

  const cFakeEvent = function (name) {
    return Chain.op(function (elm: Element) {
      DOMUtils.DOM.fire(elm.dom(), name);
    });
  };

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

    Pipeline.async({}, [
      Logger.t('click image list, check that source changes, change source and check that image list changes', GeneralSteps.sequence([
        tinyApis.sSetSetting('image_list', [
          { title: 'Dog', value: 'mydog.jpg' },
          { title: 'Cat', value: 'mycat.jpg' }
        ]),
        tinyUi.sClickOnToolbar('click image button', 'div[aria-label="Insert/edit image"] button'),
        Chain.asStep({}, [
          tinyUi.cWaitForPopup('wait for dialog', 'div[role="dialog"]'),
          UiFinder.cFindIn('label:contains("Image list") + div > button'),
          Mouse.cClick
        ]),
        Chain.asStep(TinyDom.fromDom(document.body), [
          UiFinder.cFindIn('div[role="menuitem"] > span:contains("Dog")'),
          Mouse.cClick
        ]),
        Chain.asStep({}, [
          Chain.fromParent(tinyUi.cWaitForPopup('wait for dialog', 'div[role="dialog"]'),
            [
              Chain.fromChains([
                UiFinder.cFindIn('label:contains("Source") + div > input'),
                UiControls.cGetValue,
                Assertions.cAssertEq('should be dog', 'mydog.jpg')
              ]),
              Chain.fromChains([
                UiFinder.cFindIn('label:contains("Source") + div > input'),
                UiControls.cSetValue('mycat.jpg'),
                cFakeEvent('change')
              ]),
              Chain.fromChains([
                UiFinder.cFindIn('label:contains("Image list") + div > button > span:contains("Cat")')
              ])
            ]
          )
        ])
      ]))
    ], onSuccess, onFailure);
  }, {
    plugins: 'image',
    toolbar: 'image',
    skin_url: '/project/js/tinymce/skins/lightgray'
  }, success, failure);
});

UnitTest.asynctest('browser.tinymce.plugins.image.ImageListTest', (success, failure) => {

SilverTheme();
ImagePlugin();

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

  Pipeline.async({}, [
    Log.stepsAsStep('TBA', 'Image: click image list, check that source changes, change source and check that image list changes', [
      tinyApis.sSetSetting('image_list', [
        { title: 'Dog', value: 'mydog.jpg' },
        { title: 'Cat', value: 'mycat.jpg' }
      ]),
      tinyUi.sClickOnToolbar('click image button', 'button[aria-label="Insert/edit image"]'),
      tinyUi.sWaitForPopup('wait for dialog', 'div[role="dialog"]'),
      Chain.asStep({}, [
        cSetSelectValue(generalTabSelectors.images, 'mydog.jpg')
      ]),
      Chain.asStep({}, [
        cAssertInputValue(generalTabSelectors.src, 'mydog.jpg'),
        cSetInputValue(generalTabSelectors.src, 'mycat.jpg'),
        cAssertInputValue(generalTabSelectors.src, 'mycat.jpg')
      ])
    ])
  ], onSuccess, onFailure);
}, {
  theme: 'silver',
  plugins: 'image',
  toolbar: 'image',
  base_url: '/project/tinymce/js/tinymce'
}, success, failure);
});

UnitTest.asynctest('browser.tinymce.themes.mobile.ThemeTest', (success, failure) => {

  mobileTheme();
  ImagePlugin();
  TablePlugin();
  LinkPlugin();
  PastePlugin();
  ContextMenuPlugin();
  TextPatternPlugin();

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

    Pipeline.async({}, [
      UiFinder.sExists(Element.fromDom(document.body), `.${Styles.resolve('mask-tap-icon')}`),
      ui.sClickOnUi('Click the tap to edit button', `.${Styles.resolve('mask-tap-icon')}`),
      ui.sWaitForUi('Wait mobile Toolbar', `.${Styles.resolve('toolbar')}`),
      ui.sWaitForUi('Check for The first group', '[aria-label="The first group"]'),
      ui.sWaitForUi('Check for the action group', '[aria-label="the action group"]'),
      UiFinder.sNotExists(Element.fromDom(document.body), '[aria-label="The read only mode group"]'),
      UiFinder.sNotExists(Element.fromDom(document.body), `.${Styles.resolve('mask-edit-icon')}`),
      ui.sClickOnUi('Click back to Tap to Edit screen', `.${Styles.resolve('icon-back')}`),
      UiFinder.sExists(Element.fromDom(document.body), `.${Styles.resolve('mask-tap-icon')}`),
    ], onSuccess, onFailure);
  }, {
    theme: 'mobile',
    plugins: 'image table link paste textpattern',
    insert_toolbar: 'quickimage media quicktable',
    selection_toolbar: 'bold italic | quicklink h1 h2 blockquote',
    inline: false,
    base_url: '/project/tinymce/js/tinymce'
  }, success, failure);
});

UnitTest.asynctest('Image recognizes relative src url and prepends relative image_prepend_url setting.', (success, failure) => {
  SilverTheme();
  ImagePlugin();
  const prependUrl = 'testing/images/';
  Pipeline.async({}, [
    Log.chainsAsStep('TBA', 'Image: image recognizes relative src url and prepends relative image_prepend_url setting.', [
      Editor.cFromSettings({
        ...silverSettings,
        image_prepend_url: prependUrl
      }),
      cExecCommand('mceImage', true),
      cWaitForDialog(),
      cFillActiveDialog({
        src: {
          value: 'src'
        },
        alt: 'alt'
      }),
      cOpFromChains([
        Chain.inject(Body.body()),
        UiFinder.cFindIn(generalTabSelectors.src),
        cFakeEvent('change')
      ]),
      cSubmitDialog(),
      cAssertCleanHtml('Checking output', '<p><img src="' + prependUrl + 'src" alt="alt" /></p>'),
      Editor.cRemove
    ])
  ], () => success(), failure);
});

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

  ModernTheme();
  ImagePlugin();

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

    Pipeline.async({}, [
      tinyApis.sFocus,
      Logger.t('removing src in dialog should remove figure element', GeneralSteps.sequence([
        tinyApis.sSetContent('<figure class="image"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" /><figcaption>x</figcaption></figure>'),
        tinyApis.sSetSelection([], 1, [], 2),
        tinyUi.sClickOnToolbar('click on image button', 'div[aria-label="Insert/edit image"] button'),
        Chain.asStep({}, [
          tinyUi.cWaitForPopup('Wait for dialog', 'div[role="dialog"]'),
          UiFinder.cFindIn('label:contains("Source")'),
          Chain.mapper(function (val) {
            const inputElm = document.getElementById(val.dom().htmlFor).querySelector('input');
            return TinyDom.fromDom(inputElm);
          }),
          UiControls.cSetValue('')
        ]),
        tinyUi.sClickOnUi('click on ok button', 'button:contains("Ok")'),
        tinyApis.sAssertContent('')
      ])),

      Logger.t('clicking caption textbox removes figure and adds image only', GeneralSteps.sequence([
        tinyApis.sSetContent('<figure class="image"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" /><figcaption>x</figcaption></figure>'),
        tinyApis.sSetSelection([], 1, [], 2),
        tinyUi.sClickOnToolbar('click on image button', 'div[aria-label="Insert/edit image"] button'),
        Chain.asStep({}, [
          tinyUi.cWaitForPopup('Wait for dialog', 'div[role="dialog"]'),
          UiFinder.cFindIn('label:contains("Caption")'),
          Chain.mapper(function (val) {
            return TinyDom.fromDom(document.getElementById(val.dom().htmlFor));
          }),
          Mouse.cClick
        ]),
        tinyUi.sClickOnUi('click on ok button', 'button:contains("Ok")'),
        tinyApis.sAssertContentPresence({ 'figure.image': 0 })
      ]))

    ], onSuccess, onFailure);
  }, {
    plugins: 'image',
    toolbar: 'image',
    image_caption: true,
    skin_url: '/project/js/tinymce/skins/lightgray'
  }, success, failure);
});

UnitTest.asynctest('All image dialog ui options on empty editor' + (Env.ceFalse ? '' : ' (old IE)'), (success, failure) => {
  SilverTheme();
  ImagePlugin();
  Pipeline.async({}, [
    Log.chainsAsStep('TBA', 'Image: all image dialog ui options on empty editor' + (Env.ceFalse ? '' : ' (old IE)'), [
      Editor.cFromSettings({
        ...silverSettings,
        image_caption: true,
        image_list: [
          { title: 'link1', value: 'link1' },
          { title: 'link2', value: 'link2' }
        ],
        image_class_list: [
          { title: 'None', value: '' },
          { title: 'class1', value: 'class1' },
          { title: 'class2', value: 'class2' }
        ]
      }),
      cExecCommand('mceImage', true),
      cWaitForDialog(),
      cFillActiveDialog({
        src: { value: 'src' },
        alt: 'alt',
        classIndex: 1,
        dimensions: {
          width: '100',
          height: '200'
        },
        caption: true
      }),
      cSubmitDialog(),
      cAssertCleanHtml('Checking output', (() => {
        if (Env.ceFalse) {
          return (
            '<figure class="image">' +
            '<img class="class1" src="src" alt="alt" width="100" height="200" />' +
            '<figcaption>Caption</figcaption>' +
            '</figure>'
          );
        } else { // old IE
          return (
            '<p><img class="class1" src="src" alt="alt" width="100" height="200" /></p>'
          );
        }
      })()),
      Editor.cRemove
    ])
  ], () => success(), failure);
});

UnitTest.asynctest('browser.tinymce.plugins.image.ImageResizeTest', (success, failure) => {
  SilverTheme();
  ImagePlugin();

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    const tinyUi = TinyUi(editor);

    Pipeline.async({}, [
      Log.stepsAsStep('TBA', 'Image: image proportion constrains should work directly', [
        tinyUi.sClickOnToolbar('click image button', 'button[aria-label="Insert/edit image"]'),
        Chain.asStep({}, [
          Chain.fromParent(tinyUi.cWaitForPopup('Wait for dialog', 'div[role="dialog"]'),
            [
              Chain.fromChains([
                UiFinder.cFindIn('button.tox-browse-url'),
                Mouse.cClick
              ]),
              Chain.control(
                cAssertInputValue(generalTabSelectors.width, '1'),
                Guard.tryUntil('did not find width input with value 1', 10, 1000)
              ),
              cSetInputValue(generalTabSelectors.height, '5'),
              Chain.control(
                cAssertInputValue(generalTabSelectors.width, '5'),
                Guard.tryUntil('did not find width input with value 5', 10, 1000)
              ),
            ]
          ),
          tinyUi.cSubmitDialog(),
          Chain.inject(editor),
          cAssertCleanHtml('Checking output', '<p><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" width="5" height="5" /></p>')
        ])
      ])

    ], onSuccess, onFailure);
  }, {
      theme: 'silver',
      plugins: 'image',
      toolbar: 'image',
      base_url: '/project/tinymce/js/tinymce',
      file_picker_callback(callback) {
        // tslint:disable-next-line:no-console
        console.log('file picker pressed');
        callback('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
      }
    }, success, failure);
});

UnitTest.asynctest('browser.tinymce.plugins.image.FigureDeleteTest', (success, failure) => {

  SilverTheme();
  ImagePlugin();

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

    Pipeline.async({}, [
      tinyApis.sFocus,
      Log.stepsAsStep('TBA', 'Image: removing src in dialog should remove figure element', [
        tinyApis.sSetContent('<figure class="image"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" /><figcaption>x</figcaption></figure>'),
        tinyApis.sSetSelection([], 1, [], 2),
        tinyUi.sClickOnToolbar('click on image button', 'button[aria-label="Insert/edit image"]'),
        Chain.asStep({}, [
          tinyUi.cWaitForPopup('Wait for dialog', 'div[role="dialog"]'),
          cSetInputValue(generalTabSelectors.src, ''),
          cSubmitDialog()
        ]),
        tinyApis.sAssertContent('')
      ]),

      Log.stepsAsStep('TBA', 'Image: clicking caption textbox removes figure and adds image only', [
        tinyApis.sSetContent('<figure class="image"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" /><figcaption>x</figcaption></figure>'),
        tinyApis.sSetSelection([], 1, [], 2),
        tinyUi.sClickOnToolbar('click on image button', 'button[aria-label="Insert/edit image"]'),
        Chain.asStep({}, [
          tinyUi.cWaitForPopup('Wait for dialog', 'div[role="dialog"]'),
          UiFinder.cFindIn('label:contains("Show caption") input[type="checkbox"]'),
          Mouse.cClick,
          cSubmitDialog()
        ]),
        tinyApis.sAssertContentPresence({ img: 1, figure: 0, figcaption: 0 })
      ])

    ], onSuccess, onFailure);
  }, {
    theme: 'silver',
    plugins: 'image',
    toolbar: 'image',
    image_caption: true,
    base_url: '/project/tinymce/js/tinymce',
  }, success, failure);
});

UnitTest.asynctest('Image dialog image_dimensions: false', (success, failure) => {
  SilverTheme();
  ImagePlugin();
  Pipeline.async({}, [
    Log.chainsAsStep('TBA', 'Image: image dialog image_dimensions: false', [
      Editor.cFromSettings({
        ...silverSettings,
        image_dimensions: false
      }),
      cExecCommand('mceImage', true),
      cWaitForDialog(),
      cFillActiveDialog({
        src: {
          value: 'src'
        },
        alt: 'alt'
      }),
      cSubmitDialog(),
      cAssertCleanHtml('Checking output', '<p><img src="src" alt="alt" /></p>'),
      Editor.cRemove
    ])
  ], () => success(), failure);
});