TypeScript Chain.fromChainsWith方法代碼示例

const cAssertInputValue = (selector: string, value: string) => {
  return Chain.fromChainsWith(Body.body(), [
    UiFinder.cFindIn(selector),
    UiControls.cGetValue,
    Assertions.cAssertEq(`input value should be ${value}`, value)
  ]);
};

export const cWaitForDialog = (ariaLabel) =>
  Chain.control(
    Chain.fromChainsWith(Body.body(), [
      UiFinder.cWaitFor('Waiting for dialog', '[role="dialog"]'),
      Chain.op((dialog) => {
        if (Attr.has(dialog, 'aria-labelledby')) {
          const labelledby = Attr.get(dialog, 'aria-labelledby');
          const dialogLabel = SelectorFind.descendant(dialog, '#' + labelledby).getOrDie('Could not find labelledby');
          Assertions.assertEq('Checking label text', ariaLabel, Html.get(dialogLabel));
        } else {
          throw new Error('Dialog did not have an aria-labelledby');
        }
      })
    ]),
    Guard.addLogging('Looking for dialog with an aria-label: ' + ariaLabel)
  );

UnitTest.asynctest('browser.core.ThemeTest', function () {
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];
  const dialogRoot = TinyDom.fromDom(document.body);

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

  const sClickFocusedButton = function (selector) {
    return GeneralSteps.sequence([
      Waiter.sTryUntil(
        'Focus was not moved to the expected element',
        FocusTools.sIsOnSelector('Is not on the right element', TinyDom.fromDom(document), selector),
        10,
        1000
      ),
      Chain.asStep(TinyDom.fromDom(document), [
        FocusTools.cGetFocused,
        Mouse.cTrueClick
      ])
    ]);
  };

  const sBoldTests = function (tinyApis) {
    return GeneralSteps.sequence([
      tinyApis.sSetContent('<p>a</p>'),
      tinyApis.sSetSelection([0, 0], 0, [0, 0], 1),
      Toolbar.sClickButton('Bold'),
      tinyApis.sAssertContent('<p><strong>a</strong></p>')
    ]);
  };

  const sH2Tests = function (tinyApis) {
    return GeneralSteps.sequence([
      tinyApis.sSetContent('<p>a</p>'),
      tinyApis.sSetSelection([0, 0], 0, [0, 0], 1),
      Toolbar.sClickButton('Heading 2'),
      tinyApis.sAssertContent('<h2>a</h2>')
    ]);
  };

  const sInsertLink = function (url) {
    return Chain.asStep({}, [
      Toolbar.cWaitForToolbar,
      Toolbar.cClickButton('Insert/Edit link'),
      Toolbar.cWaitForToolbar,
      UiFinder.cFindIn('input'),
      UiControls.cSetValue(url),
      Toolbar.cWaitForToolbar,
      Toolbar.cClickButton('Ok')
    ]);
  };

  const cWaitForConfirmDialog = Chain.fromChainsWith(dialogRoot, [
    UiFinder.cWaitForState('window element', '.mce-window', function () {
      return true;
    })
  ]);

  const cClickButton = function (btnText) {
    return Chain.fromChains([
      UiFinder.cFindIn('button:contains("' + btnText + '")'),
      Mouse.cTrueClick
    ]);
  };

  const sClickConfirmButton = function (btnText) {
    return Chain.asStep({}, [
      cWaitForConfirmDialog,
      cClickButton(btnText)
    ]);
  };

  const sInsertLinkConfirmPrefix = function (url, btnText) {
    return GeneralSteps.sequence([
      sInsertLink(url),
      sClickConfirmButton(btnText)
    ]);
  };

  const sUnlink = Chain.asStep({}, [
    Toolbar.cWaitForToolbar,
    Toolbar.cClickButton('Insert/Edit link'),
    Toolbar.cWaitForToolbar,
    Toolbar.cClickButton('Remove link')
  ]);

  const sLinkTests = function (tinyApis, tinyActions) {
    const sContentActionTest = function (inputHtml, spath, soffset, fpath, foffset, expectedHtml, sAction) {
      return GeneralSteps.sequence([
        tinyApis.sSetContent(inputHtml),
        tinyApis.sSetSelection(spath, soffset, fpath, foffset),
        tinyActions.sContentKeystroke(Keys.space(), {}),
        sAction,
        tinyApis.sAssertContent(expectedHtml)
//.........這裏部分代碼省略.........

UnitTest.asynctest('tinymce.themes.modern.test.browser.SidebarTest', function () {
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];
  const dialogRoot = TinyDom.fromDom(document.body);
  let state = [];

  Theme();

  const storeEvent = function (name) {
    return function (api) {
      state.push({
        name,
        element: api.element()
      });
    };
  };

  const cWaitForToolbar = Chain.fromChainsWith(dialogRoot, [
    UiFinder.cWaitFor('Sidebar toolbar', '.mce-sidebar-toolbar')
  ]);

  const cFindButton = function (ariaLabel) {
    return UiFinder.cFindIn('div[aria-label="' + ariaLabel + '"]');
  };

  const cClickButton = function (ariaLabel) {
    return Chain.fromChains([
      cFindButton(ariaLabel),
      Mouse.cTrueClick
    ]);
  };

  const sClickButton = function (ariaLabel) {
    return Chain.asStep({}, [
      cWaitForToolbar,
      cClickButton(ariaLabel)
    ]);
  };

  const sResetState = Step.sync(function () {
    state = [];
  });

  const sAssertEventNames = function (expectedNames) {
    return Step.sync(function () {
      const actualNames = state.map(function (state) {
        return state.name;
      });

      Assertions.assertEq('Names need to be equal', expectedNames, actualNames);
    });
  };

  const getSidebarElement = function (index) {
    const sidebarPanelElms = document.querySelectorAll('.mce-sidebar-panel > .mce-container-body');
    const flippedIndex = sidebarPanelElms.length - 1 - index;
    return sidebarPanelElms ? sidebarPanelElms[flippedIndex] : null;
  };

  const sAssertPanelElements = function (expectedPanelIndexes) {
    return Step.sync(function () {
      state.forEach(function (state, i) {
        const actualElement = state.element;
        const expectedElement = getSidebarElement(expectedPanelIndexes[i]);
        Assertions.assertEq('Elements need to be equal', true, expectedElement === actualElement);
      });
    });
  };

  const sAssertPanelVisibility = function (visibleStates) {
    return Step.sync(function () {
      visibleStates.forEach(function (visibleState, i) {
        const panelElement: any = getSidebarElement(i).parentNode;
        Assertions.assertEq('Visibility need to be equal', visibleState, panelElement.style.display !== 'none');
      });
    });
  };

  const sClickAndAssertEvents = function (tooltip, expectedNames, expectedPanelIndexes) {
    return GeneralSteps.sequence([
      sResetState,
      sClickButton(tooltip),
      sAssertEventNames(expectedNames),
      sAssertPanelElements(expectedPanelIndexes)
    ]);
  };

  const sAssertButtonIcon = function (tooltip, expectedIcon) {
    return Chain.asStep({}, [
      cWaitForToolbar,
      cFindButton(tooltip),
      UiFinder.cFindIn('i'),
      Chain.op(function (iconElm) {
        const className = iconElm.dom().className;
        Assertions.assertEq('Needs to have icon class: ' + expectedIcon, true, className.indexOf('mce-i-' + expectedIcon) !== -1);
      })
    ]);
  };

  const normalizeUrlString = function (urlString) {
//.........這裏部分代碼省略.........

import { TinyDom } from '@ephox/mcagar';
import { Chain } from '@ephox/agar';
import { UiFinder } from '@ephox/agar';
import { Mouse } from '@ephox/agar';

const dialogRoot = TinyDom.fromDom(document.body);

const cWaitForToolbar = Chain.fromChainsWith(dialogRoot, [
  UiFinder.cWaitForState('Did not find inline toolbar', '.mce-tinymce-inline', function (elm) {
    return elm.dom().style.display === '';
  })
]);

const sWaitForToolbar = function () {
  return Chain.asStep({}, [
    cWaitForToolbar
  ]);
};

const cClickButton = function (ariaLabel) {
  return Chain.fromChains([
    UiFinder.cFindIn('div[aria-label="' + ariaLabel + '"]'),
    Mouse.cTrueClick
  ]);
};

const sClickButton = function (ariaLabel) {
  return Chain.asStep({}, [
    cWaitForToolbar,
    cClickButton(ariaLabel)
  ]);