TypeScript Log.stepsAsStep方法代码示例

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

    const dialogSelector = 'div.tox-dialog';
    const toolbarButtonSelector = '[role="toolbar"] button[aria-label="Insert template"]';

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

    Pipeline.async({}, [
      Log.stepsAsStep('TBA', 'Template: Test selectedcontent replacement with default class', [
        tinyApis.sSetContent('Text'),
        tinyApis.sSetSelection([0, 0], 0, [0, 0], 4),
        tinyApis.sSetSetting('templates', [{ title: 'a', description: 'b', content: '<h1 class="selcontent">This will be replaced</h1>' }]),
        Mouse.sClickOn(Element.fromDom(editor.getContainer()), toolbarButtonSelector),
        UiFinder.sWaitForVisible('Waited for dialog to be visible', docBody, dialogSelector),
        Mouse.sClickOn(docBody, 'button.tox-button:contains(Save)'),
        Waiter.sTryUntil('Dialog should close', UiFinder.sNotExists(docBody, dialogSelector), 100, 3000),
        tinyApis.sAssertContent('<h1 class="selcontent">Text</h1>')
      ]),

      Log.stepsAsStep('TBA', 'Template: Test selectedcontent replacement with custom class', [
        tinyApis.sSetContent('Text'),
        tinyApis.sSetSelection([0, 0], 0, [0, 0], 4),
        tinyApis.sSetSetting('template_selected_content_classes', 'customSelected'),
        tinyApis.sSetSetting('templates', [{ title: 'a', description: 'b', content: '<h1 class="customSelected">This will be replaced/h1>' }]),
        Mouse.sClickOn(Element.fromDom(editor.getContainer()), toolbarButtonSelector),
        UiFinder.sWaitForVisible('Waited for dialog to be visible', docBody, dialogSelector),
        Mouse.sClickOn(docBody, 'button.tox-button:contains(Save)'),
        Waiter.sTryUntil('Dialog should close', UiFinder.sNotExists(docBody, dialogSelector), 100, 3000),
        tinyApis.sAssertContent('<h1 class="customSelected">Text</h1>')
      ])
    ], onSuccess, onFailure);
  }, {

  TinyLoader.setup((editor, onSuccess, onFailure) => {

    const docBody = Element.fromDom(document.body);
    const editorBody = editor.contentDocument.body;
    const markupContent = '<p>hello world</p>';
    const newContent = 'editor content should not change to this';

    Pipeline.async({}, [
      Log.stepsAsStep('TBA', 'CodeSample: Open the dialog and check it has the right initial values', [
        TestUtils.sOpenDialogAndAssertInitial(editor, docBody, 'markup', ''),
      ]),

      Log.stepsAsStep('TBA', 'CodeSample: Set the codesample content, submit and check the editor content changes correctly', [
       TestUtils.sSetTextareaContent(markupContent),
       TestUtils.sSubmitDialog(docBody),
       TestUtils.sAssertEditorContents(editorBody, 'markup', markupContent, 'pre.language-markup'),
      ]),

      Log.stepsAsStep('TBA', 'CodeSample: Re-open the dialog and check the dialog language and content is correct - focus problems and make this fail', [
        TestUtils.sOpenDialogAndAssertInitial(editor, docBody, 'markup', markupContent),
      ]),

      Log.stepsAsStep('TBA', 'CodeSample: Set the codesample content but CANCEL and check the editor content did not change', [
         TestUtils.sSetTextareaContent(newContent),
         TestUtils.sCancelDialog(docBody),
         TestUtils.sAssertEditorContents(editorBody, 'markup', markupContent, 'pre.language-markup'),
      ]),
    ], onSuccess, onFailure);
  }, {

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

    const steps = Utils.withTeardown(
      [
        Log.stepsAsStep('TBA', 'TextPattern: inline italic then undo', [
          Utils.sSetContentAndPressSpace(tinyApis, tinyActions, '*a*'),
          tinyApis.sAssertContentStructure(Utils.inlineStructHelper('em', 'a')),
          tinyApis.sExecCommand('Undo'),
          tinyApis.sAssertContent('<p>*a*&nbsp;</p>')
        ]),
        Log.stepsAsStep('TBA', 'TextPattern: block italic then undo', [
          Utils.sSetContentAndPressEnter(tinyApis, tinyActions, '*a*'),
          tinyApis.sAssertContentStructure(Utils.inlineBlockStructHelper('em', 'a')),
          tinyApis.sExecCommand('Undo'),
          tinyApis.sAssertContent('<p>*a*</p>\n<p>&nbsp;</p>'),
          tinyApis.sExecCommand('Undo'),
          tinyApis.sAssertContent('<p>*a*</p>'),
        ]),
      ],
      tinyApis.sSetContent('')
    );

    Pipeline.async({}, steps, onSuccess, onFailure);
  }, {

  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);
  }, {

  const sTestCut = function (editor, tinyApis) {
    const sWaitUntilAssertContent = function (expected) {
      return Waiter.sTryUntil('Cut is async now, so need to wait for content', tinyApis.sAssertContent(expected), 100, 1000);
    };

    return Log.stepsAsStep('TBA', 'Paste: Cut simple text', [
        sCut(editor, tinyApis, '<p>text</p>', [0, 0], 0, [0, 0], 4),
        sAssertClipboardData('text', 'text'),
        sWaitUntilAssertContent(''),
        tinyApis.sAssertSelection([0], 0, [0], 0)
      ]),

      Log.stepsAsStep('TBA', 'Paste: Cut inline elements', [
        sCut(editor, tinyApis, '<p>te<em>x</em>t</p>', [0, 0], 0, [0, 2], 1),
        sAssertClipboardData('te<em>x</em>t', 'text'),
        sWaitUntilAssertContent(''),
        tinyApis.sAssertSelection([0], 0, [0], 0)
      ]),

      Log.stepsAsStep('TBA', 'Paste: Cut partialy selected inline elements', [
        sCut(editor, tinyApis, '<p>a<em>cd</em>e</p>', [0, 0], 0, [0, 1, 0], 1),
        sAssertClipboardData('a<em>c</em>', 'ac'),
        sWaitUntilAssertContent('<p><em>d</em>e</p>'),
        tinyApis.sAssertSelection([0, 0, 0], 0, [0, 0, 0], 0)
      ]),

      Log.stepsAsStep('TBA', 'Paste: Cut collapsed selection', [
        sCut(editor, tinyApis, '<p>abc</p>', [0, 0], 1, [0, 0], 1),
        sAssertClipboardData('', ''),
        sWaitUntilAssertContent('<p>abc</p>'),
        tinyApis.sAssertSelection([0, 0], 1, [0, 0], 1)
      ]);
  };

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

    Pipeline.async({}, [
      tinyApis.sFocus,

      Log.stepsAsStep('TBA', 'Table: ul > li in table', [
        tinyApis.sSetContent('<table><tbody><tr><td><ul><li>a</li><li>b</li></ul></td></tr></tbody></table>'),
        tinyApis.sSetCursor([0, 0, 0, 0, 0, 1], 1),
        tinyActions.sContentKeystroke(Keys.tab(), {}),
        sAssertTableInnerHTML(editor, '<tbody><tr><td><ul><li>a<ul><li>b</li></ul></li></ul></td></tr></tbody>')
      ]),

      Log.stepsAsStep('TBA', 'Table: ol > li in table', [
        tinyApis.sSetContent('<table><tbody><tr><td><ol><li>a</li><li>b</li></ol></td></tr></tbody></table>'),
        tinyApis.sSetCursor([0, 0, 0, 0, 0, 1], 1),
        tinyActions.sContentKeystroke(Keys.tab(), {}),
        sAssertTableInnerHTML(editor, '<tbody><tr><td><ol><li>a<ol><li>b</li></ol></li></ol></td></tr></tbody>')
      ]),

      Log.stepsAsStep('TBA', 'Table: dl > dt in table', [
        tinyApis.sSetContent('<table><tbody><tr><td><dl><dt>a</dt><dt>b</dt></dl></td></tr></tbody></table>'),
        tinyApis.sSetCursor([0, 0, 0, 0, 0, 1], 1),
        tinyActions.sContentKeystroke(Keys.tab(), {}),
        sAssertTableInnerHTML(editor, '<tbody><tr><td><dl><dt>a</dt><dd>b</dd></dl></td></tr></tbody>')
      ])

    ], onSuccess, onFailure);
  }, {

  TinyLoader.setup((editor, onSuccess, onFailure) => {
    const sSetProgressState = (state: boolean, time?: number) => Step.sync(() => {
      if (state) {
        editor.setProgressState(true, time);
      } else {
        editor.setProgressState(false);
      }
    });

    Pipeline.async({}, [
      Log.stepsAsStep('TBA', 'Throbber actions test', [
        sAssertThrobberHiddenStructure,
        sSetProgressState(true),
        UiFinder.sWaitForVisible('Wait for throbber to show', Body.body(), '.tox-throbber'),
        sAssertThrobberShownStructure,
        sSetProgressState(false),
        UiFinder.sWaitForHidden('Wait for throbber to hide', Body.body(), '.tox-throbber'),
        sAssertThrobberHiddenStructure
      ]),
      Log.stepsAsStep('TBA', 'Throbber actions with timeout test', [
        sSetProgressState(true, 300),
        // Wait for a little and make sure the throbber is still hidden
        Step.wait(150),
        sAssertThrobberHiddenStructure,
        UiFinder.sWaitForVisible('Wait for throbber to show', Body.body(), '.tox-throbber'),
        sAssertThrobberShownStructure,
        sSetProgressState(false),
        UiFinder.sWaitForHidden('Wait for throbber to hide', Body.body(), '.tox-throbber'),
        sAssertThrobberHiddenStructure
      ])
    ], onSuccess, onFailure);
  }, {

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

    Pipeline.async({}, [
      Log.stepsAsStep('TBA', 'Table: no class input without setting', [
        tinyApis.sFocus,
        tinyApis.sSetContent(tableHtml),
        tinyApis.sSetSelection([0, 0, 0, 0, 0], 0, [0, 0, 0, 0, 0], 1),
        tinyApis.sExecCommand('mceTableCellProps'),
        TableTestUtils.sAssertDialogPresence(
          'Checking that class label is not present',
          {
            'label:contains("Class")': 0
          }
        ),
        TableTestUtils.sClickDialogButton('close', false),
        tinyApis.sSetContent('')
      ]),

      Log.stepsAsStep('TBA', 'Table: class input with setting', [
        tinyApis.sFocus,
        tinyApis.sSetSetting('table_cell_class_list', [{ title: 'test', value: 'test' }]),
        tinyApis.sSetContent(tableHtml),
        tinyApis.sSetSelection([0, 0, 0, 0, 0], 0, [0, 0, 0, 0, 0], 1),
        tinyApis.sExecCommand('mceTableCellProps'),
        TableTestUtils.sAssertSelectValue('Class select', 'Class', 'test'),
        TableTestUtils.sClickDialogButton('Trigger test class', true),
        tinyApis.sAssertContentPresence({ 'td.test': 1 })
      ])
    ], onSuccess, onFailure);
  }, {

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

    Pipeline.async({}, [
      tinyApis.sFocus,
      Log.stepsAsStep('TBA', 'Text selection toolbar', [
        tinyApis.sSetContent('<p>Some <strong>bold</strong> and <em>italic</em> content.</p><blockquote><p>Some quoted content</p></blockquote>'),
        tinyApis.sSetSelection([0, 0], 0, [0, 0], 4),
        sWaitForTextToolbarAndAssertState(tinyUi, false, false, false, false, false, false),
        tinyApis.sSetSelection([0, 1, 0], 0, [0, 1, 0], 3),
        sWaitForTextToolbarAndAssertState(tinyUi, true, false, false, false, false, false),
        tinyApis.sSetSelection([0, 3, 0], 1, [0, 3, 0], 4),
        sWaitForTextToolbarAndAssertState(tinyUi, false, true, false, false, false, false),
        tinyApis.sSetSelection([1, 0], 0, [1, 0], 1),
        sWaitForTextToolbarAndAssertState(tinyUi, false, false, false, false, false, true)
      ]),
      Log.stepsAsStep('TBA', 'Image selection toolbar', [
        sSetImageAndAssertToolbarState(tinyApis, tinyUi, false),
        sSetImageAndAssertToolbarState(tinyApis, tinyUi, false, Alignment.Left),
        sSetImageAndAssertToolbarState(tinyApis, tinyUi, false, Alignment.Center),
        sSetImageAndAssertToolbarState(tinyApis, tinyUi, false, Alignment.Right),
        sSetImageAndAssertToolbarState(tinyApis, tinyUi, true),
        sSetImageAndAssertToolbarState(tinyApis, tinyUi, true, Alignment.Left),
        sSetImageAndAssertToolbarState(tinyApis, tinyUi, true, Alignment.Center),
        sSetImageAndAssertToolbarState(tinyApis, tinyUi, true, Alignment.Right)
      ])
    ], onSuccess, onFailure);
  }, {

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

    Pipeline.async({}, browser.isIE() ? [] : [
      Log.stepsAsStep('TBA', 'TextColor: forecolor', [
        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 green color', 'div[data-mce-color="#18A085"]'),
        tinyUi.sClickOnToolbar('click forecolor again', '[aria-label="Text color"] > .tox-tbtn + .tox-split-button__chevron'),
        tinyUi.sWaitForUi('wait for color swatch to open', '.tox-swatches'),
        tinyUi.sClickOnUi('click blue color', 'div[data-mce-color="#2B3E50"]'),
        tinyApis.sAssertContentStructure(forecolorStruct)
      ]),
      Log.stepsAsStep('TBA', 'TextColor: backcolor', [
        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="#18A085"]'),
        tinyUi.sClickOnToolbar('click backcolor again', '[aria-label="Background color"] > .tox-tbtn + .tox-split-button__chevron'),
        tinyUi.sWaitForUi('wait for color swatch to open', '.tox-swatches'),
        tinyUi.sClickOnUi('click a nice purple color', 'div[data-mce-color="#2B3E50"]'),
        tinyApis.sAssertContentStructure(backcolorStruct)
      ])
    ], onSuccess, onFailure);
  }, {