TypeScript Step.label方法代碼示例

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

    Pipeline.async({}, [
      Logger.t('Select image by context menu clicking on it', GeneralSteps.sequence([
        Step.label('Focus editor', tinyApis.sFocus),
        Step.label('Set editor content to a paragraph with a image within', tinyApis.sSetContent('<p><img src="http://www.google.com/google.jpg" width="100" height="100"></p>')),
        Step.label('Context menu click on the image', sContextMenuClickInMiddleOf(editor, [0, 0])),
        Step.label('Check that the image is selected', tinyApis.sAssertSelection([0], 0, [0], 1))
      ]))
    ], onSuccess, onFailure);
  }, {

 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 sAssertContentAndCursor = (beforeType: string, afterType?: string) => {
   const normalize = afterType === undefined;
   if (normalize) {
     afterType = beforeType.replace(/<(([^> ]*)[^>]*)>(&nbsp;| )\|<\/\2>/g, '<$1>|</$2>').replace(/&nbsp;/g, ' ');
     beforeType = beforeType.replace(/\|/g, '');
   }
   return GeneralSteps.sequence([
     Step.label('Check content', tinyApis.sAssertContent(beforeType)),
     Step.label('Insert cursor marker', Step.sync(() => editor.insertContent('|'))),
     Step.label('Check cursor position', Step.sync(() => {
       const content = editor.getContent();
       const normalizedContent = normalize ? content.replace(/&nbsp;/g, ' ') : content;
       Assertions.assertHtml('Checking cursor', afterType, normalizedContent);
     })),
   ]);
 };

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

    const sSetContentToBigDiv = Step.label(
      'Set content to big div',
      tinyApis.sSetContent('<div style="width: 5000px; height: 5000px">X</div>')
    );

    Pipeline.async({}, [
      Logger.t('isXYInContentArea without borders, margin', GeneralSteps.sequence([
        sSetBodyStyles(editor, { border: '0', margin: '0', width: '100px', height: '100px', overflow: 'scroll' }),
        sSetContentToBigDiv,
        sTestIsXYInContentArea(editor, 0, 0)
      ])),

      Logger.t('isXYInContentArea with margin', GeneralSteps.sequence([
        sSetBodyStyles(editor, { margin: '15px' }),
        sSetContentToBigDiv,
        sTestIsXYInContentArea(editor, -15, -15)
      ])),

      Logger.t('isXYInContentArea with borders, margin', GeneralSteps.sequence([
        sSetBodyStyles(editor, { border: '5px', margin: '15px' }),
        sSetContentToBigDiv,
        sTestIsXYInContentArea(editor, -20, -20)
      ]))
    ], onSuccess, onFailure);
  }, {

 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 sTestIsXYInContentArea = function (editor, deltaX, deltaY) {
   const dx1 = - 25 - deltaX;
   const dy1 = -25 - deltaY;
   const dx2 = - 5 - deltaX;
   const dy2 = - 5 - deltaY;
   return Step.label('Check points relative to deltaX=' + deltaX + ' deltaY=' + deltaY, Chain.asStep({}, [
     Chain.fromParent(
       Chain.label(
         'Calculate bounding rectangle',
         Chain.injectThunked(() => getIframeClientRect(editor))
       ), [
         Chain.label(
           'Check 〈bottom right〉 + (' + dx1 + ', ' + dy1 + ') is inside editor',
           Chain.op((rect) => Assertions.assertEq(
             'Should be inside the area since the scrollbars are excluded',
             true,
             EditorView.isXYInContentArea(editor, rect.width + dx1, rect.height + dy1)
           ))
         ),
         Chain.label(
           'Check 〈bottom right〉 + (' + dx2 + ', ' + dy2 + ') is ' + (hiddenScrollbar ? 'inside' : 'outside') + ' editor',
           Chain.op((rect) => Assertions.assertEq(
             (hiddenScrollbar ?
               'Should be inside the area since the scrollbars are hidden' :
               'Should be outside the area since the cordinate is on the scrollbars'),
             hiddenScrollbar,
             EditorView.isXYInContentArea(editor, rect.width + dx2, rect.height + dy2)
           ))
         )
       ]
     )
   ]));
 };

const sSetContentAndPressSpace = (tinyApis, tinyActions, content: string, offset = content.length) => {
  return Step.label(`Set content and press space`, GeneralSteps.sequence([
    tinyApis.sSetContent('<p>' + content + '</p>'),
    tinyApis.sFocus,
    tinyApis.sSetCursor(
      [0, 0],
      offset
    ),
    tinyApis.sExecCommand('mceInsertContent', ' '),
    tinyActions.sContentKeystroke(32, {}),
  ]));
};

 const sSetMode = (mode: string) => {
   return Step.label('sSetMode: setting the editor mode to ' + mode, Step.sync(() => {
     editor.mode.set(mode);
   }));
 };