TypeScript sand.PlatformDetection类代码示例

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

    const sAssertCurrentColor = (editor, format, label, expected) => Logger.t(`Assert current color ${expected}`,
      Step.sync(() => {
        const actual = ColorSwatch.getCurrentColor(editor, format);

        RawAssertions.assertEq(label, expected, actual);
      })
    );

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

      Pipeline.async({}, browser.isIE() ? [] : [
        Log.stepsAsStep('TBA', 'TextColor: getCurrentColor should return the first found forecolor, not the parent color', [
          tinyApis.sFocus,
          tinyApis.sSetContent('<p style="color: blue;">hello <span style="color: red;">world</span></p>'),
          tinyApis.sSetSelection([0, 1, 0], 2, [0, 1, 0], 2),
          sAssertCurrentColor(editor, 'forecolor', 'should return red', 'red')
        ]),
        Log.stepsAsStep('TBA', 'TextColor: getCurrentColor should return the first found backcolor, not the parent color', [
          tinyApis.sFocus,
          tinyApis.sSetContent('<p style="background-color: red;">hello <span style="background-color: blue;">world</span></p>'),
          tinyApis.sSetSelection([0, 1, 0], 2, [0, 1, 0], 2),
          sAssertCurrentColor(editor, 'backcolor', 'should return blue', 'blue')
        ])
      ], onSuccess, onFailure);
    }, {
      plugins: '',
      toolbar: 'forecolor backcolor',
      base_url: '/project/tinymce/js/tinymce'
    }, success, failure);
  }

UnitTest.asynctest('tinymce.plugins.paste.webdriver.CutTest', (success, failure) => {

  Theme();
  PastePlugin();

  const platform = PlatformDetection.detect();

  /* Test does not work on Phantom */
  if (window.navigator.userAgent.indexOf('PhantomJS') > -1) {
    return success();
  }

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

    // Cut doesn't seem to work in webdriver mode on ie, firefox is producing moveto not supported, edge fails if it's not observed
    Pipeline.async({}, (platform.browser.isIE() || platform.browser.isFirefox() || platform.browser.isEdge()) ? [] :
    Log.steps('TBA', 'Paste: Set and select content, cut using edit menu and assert cut content', [
      api.sSetContent('<p>abc</p>'),
      api.sSetSelection([0, 0], 1, [0, 0], 2),
      ui.sClickOnMenu('Click Edit menu', 'button:contains("Edit")'),
      Chain.asStep({}, [
        ui.cWaitForUi('Wait for menu item', '[role="menuitem"]:contains("Cut")'),
        RealMouse.cClick()
      ]),
      Waiter.sTryUntil('Cut is async now, so need to wait for content', api.sAssertContent('<p>ac</p>'), 100, 1000)
    ]), onSuccess, onFailure);
  }, {
    base_url: '/project/tinymce/js/tinymce',
    theme: 'silver'
  }, success, failure);
});

UnitTest.asynctest('tinymce.plugins.paste.webdriver.CutTest', function () {
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];

  Theme();
  PastePlugin();

  const platform = PlatformDetection.detect();

  /* Test does not work on Phantom */
  if (window.navigator.userAgent.indexOf('PhantomJS') > -1) {
    return success();
  }

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

    // Cut doesn't seem to work in webdriver mode on ie, firefox is producing moveto not supported, edge fails if it's not observed
    Pipeline.async({}, (platform.browser.isIE() || platform.browser.isFirefox() || platform.browser.isEdge()) ? [] : [
      api.sSetContent('<p>abc</p>'),
      api.sSetSelection([0, 0], 1, [0, 0], 2),
      ui.sClickOnMenu('Click Edit menu', 'button:contains("Edit")'),
      ui.sWaitForUi('Wait for dropdown', '.mce-floatpanel[role="application"]'),
      RealMouse.sClickOn('.mce-i-cut'),
      Waiter.sTryUntil('Cut is async now, so need to wait for content', api.sAssertContent('<p>ac</p>'), 100, 1000)
    ], onSuccess, onFailure);
  }, {
    skin_url: '/project/js/tinymce/skins/lightgray',
    plugins: 'paste'
  }, success, failure);
});

UnitTest.asynctest('browser.tinymce.plugins.textcolor.GetCurrentColorTest', (success, failure) => {
    const browser = PlatformDetection.detect().browser;

    ModernTheme();
    TextcolorPlugin();

    const sAssertCurrentColor = (editor, format, label, expected) => Step.sync(() => {
      const actual = TextColor.getCurrentColor(editor, format);

      RawAssertions.assertEq(label, expected, actual);
    });

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

      Pipeline.async({}, browser.isIE() ? [] : [
        Logger.t('getCurrentColor should return the first found forecolor, not the parent color', GeneralSteps.sequence([
          tinyApis.sFocus,
          tinyApis.sSetContent('<p style="color: blue;">hello <span style="color: red;">world</span></p>'),
          tinyApis.sSetSelection([0, 1, 0], 2, [0, 1, 0], 2),
          sAssertCurrentColor(editor, 'forecolor', 'should return red', 'red')
        ])),
        Logger.t('getCurrentColor should return the first found backcolor, not the parent color', GeneralSteps.sequence([
          tinyApis.sFocus,
          tinyApis.sSetContent('<p style="background-color: red;">hello <span style="background-color: blue;">world</span></p>'),
          tinyApis.sSetSelection([0, 1, 0], 2, [0, 1, 0], 2),
          sAssertCurrentColor(editor, 'backcolor', 'should return blue', 'blue')
        ]))
      ], onSuccess, onFailure);
    }, {
      plugins: 'textcolor',
      toolbar: 'forecolor backcolor',
      skin_url: '/project/js/tinymce/skins/lightgray'
    }, success, failure);
  }

    TinyLoader.setup(function (editor, onSuccess, onFailure) {
      const browser = PlatformDetection.detect().browser;
      Pipeline.async({}, browser.isIE() ? [ // Only run on IE
        sAddTestDiv,
        Logger.t('assert selection after no nodechanged, should not restore', Step.sync(function () {
          editor.setContent('<p>a</p><p>b</p>');

          setSelection(editor, [0, 0], 0, [0, 0], 0);
          editor.nodeChanged();

          setSelection(editor, [1, 0], 1, [1, 0], 1);
          focusDiv();

          assertSelection(editor, [0, 0], 0, [0, 0], 0);
        })),
        Logger.t('assert selection after nodechanged, should restore', Step.sync(function () {
          editor.setContent('<p>a</p><p>b</p>');

          setSelection(editor, [0], 0, [0], 0);
          editor.nodeChanged();

          setSelection(editor, [1, 0], 1, [1, 0], 1);
          editor.nodeChanged();
          focusDiv();

          assertSelection(editor, [1, 0], 1, [1, 0], 1);
        })),
        Logger.t('assert selection after keyup, should restore', Step.sync(function () {
          editor.setContent('<p>a</p><p>b</p>');

          setSelection(editor, [0], 0, [0], 0);
          editor.nodeChanged();

          setSelection(editor, [1, 0], 1, [1, 0], 1);
          editor.fire('keyup', { });
          focusDiv();

          assertSelection(editor, [1, 0], 1, [1, 0], 1);
        })),
        Logger.t('assert selection after mouseup, should restore', Step.sync(function () {
          editor.setContent('<p>a</p><p>b</p>');

          setSelection(editor, [0], 0, [0], 0);
          editor.nodeChanged();

          setSelection(editor, [1, 0], 1, [1, 0], 1);
          editor.fire('mouseup', { });
          focusDiv();

          assertSelection(editor, [1, 0], 1, [1, 0], 1);
        })),
        sRemoveTestDiv
      ] : [], onSuccess, onFailure);
    }, {

UnitTest.asynctest('browser.tinymce.plugins.imagetools.SequenceTest', (success, failure) => {

  const platform = PlatformDetection.detect();

  if (platform.browser.isIE() || platform.browser.isEdge()) {
    console.log('Disabled on IE and Edge because of race conditions');
    return success();
  }

  const srcUrl = '/project/tinymce/src/plugins/imagetools/demo/img/dogleft.jpg';
  // var corsUrl = 'http://moxiecode.cachefly.net/tinymce/v9/images/logo.png';

  Plugin();

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

    const sManipulateImage = function (message, url) {
      return Log.stepsAsStep('TBA', `ImageTools: ${message}`, [
        ImageUtils.sLoadImage(editor, url),
        tinyApis.sSelect('img', []),
        imgOps.sExecToolbar('Flip horizontally'),
        imgOps.sExecToolbar('Rotate clockwise'),
        imgOps.sExecDialog('Invert'),
        imgOps.sExecDialog('Crop'),
        imgOps.sExecDialog('Resize'),
        imgOps.sExecDialog('Flip vertically'),
        imgOps.sExecDialog('Rotate clockwise'),
        imgOps.sExecDialog('Brightness'),
        imgOps.sExecDialog('Sharpen'),
        imgOps.sExecDialog('Contrast'),
        imgOps.sExecDialog('Color levels'),
        imgOps.sExecDialog('Gamma')
      ]);
    };

    Pipeline.async({}, [
      // sManipulateImage('Test image operations on an image CORS domain', corsUrl),
      sManipulateImage('Test image operations on an image from the same domain', srcUrl)
    ], onSuccess, onFailure);
  }, {
    theme: 'silver',
    plugins: 'imagetools',
    imagetools_cors_hosts: ['moxiecode.cachefly.net'],
    base_url: '/project/tinymce/js/tinymce',
    toolbar: 'editimage',
  }, success, failure);
});

const registerEditorEvents = function (editor, throttledStore) {
  const browser = PlatformDetection.detect().browser;

  if (browser.isIE()) {
    registerFocusOut(editor);
  } else {
    registerMouseUp(editor, throttledStore);
  }

  editor.on('keyup nodechange', function (e) {
    if (!isManualNodeChange(e)) {
      SelectionBookmark.store(editor);
    }
  });
};

const executeKeydownOverride = function (editor, caret, evt) {
  const os = PlatformDetection.detect().os;

  MatchKeys.execute([
    { keyCode: VK.RIGHT, action: CefNavigation.moveH(editor, true) },
    { keyCode: VK.LEFT, action: CefNavigation.moveH(editor, false) },
    { keyCode: VK.UP, action: CefNavigation.moveV(editor, false) },
    { keyCode: VK.DOWN, action: CefNavigation.moveV(editor, true) },
    { keyCode: VK.RIGHT, action: BoundarySelection.move(editor, caret, true) },
    { keyCode: VK.LEFT, action: BoundarySelection.move(editor, caret, false) },
    { keyCode: VK.RIGHT, ctrlKey: !os.isOSX(), altKey: os.isOSX(), action: BoundarySelection.moveNextWord(editor, caret) },
    { keyCode: VK.LEFT, ctrlKey: !os.isOSX(), altKey: os.isOSX(), action: BoundarySelection.movePrevWord(editor, caret) }
  ], evt).each(function (_) {
    evt.preventDefault();
  });
};

UnitTest.asynctest('Browser Test: ui.FontSizeSliderTest', function () {
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];
  const detection = PlatformDetection.detect();

  const realm = IosRealm(Fun.noop);
  // Make toolbar appear
  Class.add(realm.system().element(), 'tinymce-mobile-fullscreen-maximized');

  const body = Body.body();
  Attachment.attachSystem(body, realm.system());

  TestStyles.addStyles();

  const unload = function () {
    TestStyles.removeStyles();
    Attachment.detachSystem(realm.system());
  };

  const tEditor = TestFrameEditor();

  realm.system().add(tEditor.component());

  realm.setToolbarGroups([
    {
      label: 'group1',
      items: [
        FontSizeSlider.sketch(realm, tEditor.editor())
      ]
    }
  ]);

  Pipeline.async({}, detection.browser.isChrome() ? [
    TestStyles.sWaitForToolstrip(realm),
    tEditor.sWaitForEditorLoaded,
    Step.sync(function () {
      tEditor.editor().focus();
    }),
    Mouse.sClickOn(realm.system().element(), TestSelectors.fontsize()),
    tEditor.sAssertEq('on first showing, the font size slider should not have fired execCommand', [ ])

    // Think about how to do the slider events
  ] : [], function () {
    unload(); success();
  }, failure);
});

UnitTest.asynctest('Browser Test: ios.IosRealmTest', function () {
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];
  const detection = PlatformDetection.detect();

  const realm = IosRealm(Fun.noop);

  const unload = function () {
    Remove.remove(iframe);
    Attachment.detachSystem(realm.system());
  };

  const iframe = Element.fromTag('iframe');
  Css.set(iframe, 'height', '400px');
  const onload = DomEvent.bind(iframe, 'load', function () {
    const head = Element.fromDom(iframe.dom().contentWindow.document.head);
    const body = Element.fromDom(iframe.dom().contentWindow.document.body);
    Attachment.attachSystem(body, realm.system());

    Css.set(body, 'margin', '0px');

    const css = Element.fromTag('link');
    Attr.setAll(css, {
      href: '/project/tinymce/js/tinymce/skins/ui/oxide/skin.mobile.min.css',
      rel: 'Stylesheet',
      type: 'text/css'
    });
    Insert.append(head, css);
    onload.unbind();

    const editor = Element.fromTag('iframe');
    Attr.set(editor, 'src', '/project/tinymce/src/themes/mobile/test/html/editor.html');
    Replacing.append(
      realm.system().getByDom(Element.fromDom(
        realm.element().dom().querySelector('.tinymce-mobile-editor-socket'))
      ).getOrDie(),
      GuiFactory.external({
        element: editor
      })
    );

    realm.init({
      editor: {
        getFrame () {
          return editor;
        },
        onDomChanged () {
          return { unbind: Fun.noop };
        }
      },
      container: realm.element(),
      socket: Element.fromDom(realm.element().dom().querySelector('.tinymce-mobile-editor-socket')),
      toolstrip: Element.fromDom(realm.element().dom().querySelector('.tinymce-mobile-toolstrip')),
      toolbar: Element.fromDom(realm.element().dom().querySelector('.tinymce-mobile-toolbar')),
      alloy: realm.system(),
      dropup: realm.dropup()
    });
  });

  Insert.append(Body.body(), iframe);

  const getCursorY = function (target) {
    /* The y position on the cursor for the viewer is a combination of y position of the editor frame and the y
     * y position of the target
     */
    const editorY = iframe.dom().contentWindow.document.querySelector('iframe').getBoundingClientRect().top;
    const targetY = target.dom().getBoundingClientRect().top;
    // tslint:disable-next-line:no-console
    console.log('editorY', editorY, 'targetY', targetY);
    return editorY + targetY;
  };

  const mShowKeyboard = function (selector, index) {
    const keyboardHeight = 200;
    return Step.stateful(function (value, next, die) {
      const pageBody = iframe.dom().contentWindow.document.body;
      const editorBody = pageBody.querySelector('iframe').contentWindow.document.body;
      const target: any = Option.from(editorBody.querySelectorAll(selector)[index]).map(Element.fromDom).getOrDie('no index ' + index + ' for selector: ' + selector);
      WindowSelection.setExact(editorBody.ownerDocument.defaultView, target, 0, target, 0);
      const socket = pageBody.querySelector('.tinymce-mobile-editor-socket');
      socket.scrollTop = target.dom().getBoundingClientRect().top - 100 - keyboardHeight;
      pageBody.style.setProperty('margin-bottom', '2000px');
      pageBody.ownerDocument.defaultView.scrollTo(0, keyboardHeight);

      //
      const cursorY = getCursorY(target);
      const newValue = Merger.deepMerge(
        value,
        {
          target,
          cursorY
        }
      );
      // tslint:disable-next-line:no-console
      console.log('newValue', newValue);
      next(newValue);
    });
  };

  Pipeline.async({}, detection.browser.isChrome() ? [
//.........这里部分代码省略.........