TypeScript Step.wait方法代码示例

  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({}, [
      Logger.t('test that table toolbar can be disabled', GeneralSteps.sequence([
        tinyApis.sFocus,
        tinyApis.sSetSetting('table_toolbar', 'tableprops tabledelete'),
        tinyApis.sSetContent(tableHtml),
        tinyApis.sSetSelection([0, 0, 0, 0, 0], 0, [0, 0, 0, 0, 0], 1),
        Step.wait(100), // How should I do this better?
                        // I want to check that the inline toolbar does not appear,
                        // but I have to wait unless it won't exist any way because it's too fast
        UiFinder.sNotExists(TinyDom.fromDom(document.body), 'div[aria-label="Inline toolbar"]')
      ]))
    ], onSuccess, onFailure);
  }, {

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

    const sAssertToolbarNotVisible = GeneralSteps.sequence([
      // We can't wait for something to happen, as nothing will change. So instead, just wait some time for when the toolbar would have normally shown
      Step.wait(200),
      UiFinder.sNotExists(Body.body(), '.tox-pop__dialog .tox-toolbar')
    ]);

    Pipeline.async({}, [
      tinyApis.sFocus,
      Log.stepsAsStep('TBA', 'Text selection toolbar is not shown', [
        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),
        sAssertToolbarNotVisible
      ]),
      Log.stepsAsStep('TBA', 'Insert toolbar is not shown', [
        tinyApis.sSetContent('<p>Some <strong>bold</strong> and <em>italic</em> content.</p><p></p>'),
        tinyApis.sSetSelection([1], 0, [1], 0),
        sAssertToolbarNotVisible
      ])
    ], onSuccess, onFailure);
  }, {

//.........这里部分代码省略.........
  const sAssertUrlFocused = GeneralSteps.sequence([
    FocusTools.sTryOnSelector('Focus should be on input with link URL', doc, 'input[placeholder="Type or paste URL"]'),
    sAssertNavigation('Checking initial navigation on text node', false, true)
  ]);

  const sAssertTextFocused = GeneralSteps.sequence([
    FocusTools.sTryOnSelector('Focus should be on input with link text', doc, 'input[placeholder="Link text"]'),
    sAssertNavigation('Checking navigation for link text', true, true)
  ]);

  const sAssertTitleFocused = GeneralSteps.sequence([
    FocusTools.sTryOnSelector('Focus should be on input with link title', doc, 'input[placeholder="Link title"]'),
    sAssertNavigation('Checking navigation for link title', true, true)
  ]);

  const sAssertTargetFocused = GeneralSteps.sequence([
    FocusTools.sTryOnSelector('Focus should be on input with link target', doc, 'input[placeholder="Link target"]'),
    sAssertNavigation('Checking navigation for link target', true, false)
  ]);

  const sTestNavigation = GeneralSteps.sequence([
    Keyboard.sKeydown(doc, Keys.tab(), { }),
    sAssertTextFocused,
    Keyboard.sKeydown(doc, Keys.tab(), { }),
    sAssertTitleFocused,
    Keyboard.sKeydown(doc, Keys.tab(), { }),
    sAssertTargetFocused,
    Keyboard.sKeydown(doc, Keys.tab(), { shift: true }),
    sAssertTitleFocused,
    Keyboard.sKeydown(doc, Keys.tab(), { shift: false }),
    sAssertTargetFocused,
    Keyboard.sKeydown(doc, Keys.tab(), { }),

    Step.wait(1000),
    Logger.t('Checking pressing tab at the end should not move focus', sAssertTargetFocused),

    sClickPrev,
    sAssertTitleFocused,
    sClickNext,
    sAssertTargetFocused,
    sClickPrev,
    sAssertTitleFocused,
    sClickPrev,
    sAssertTextFocused,
    sClickPrev,
    sAssertUrlFocused
  ]);

  const sClickLink = Mouse.sClickOn(realm.element(), TestSelectors.link());

  const sTestScenario = function (rawScenario) {
    const scenario = ValueSchema.asRawOrDie('Checking scenario', ValueSchema.objOf([
      FieldSchema.strict('label'),
      FieldSchema.defaulted('content', ''),
      FieldSchema.defaulted('node', Element.fromText('')),
      FieldSchema.strictObjOf('fields', [
        FieldSchema.option('url'),
        FieldSchema.option('text'),
        FieldSchema.option('title'),
        FieldSchema.option('target')
      ]),
      FieldSchema.strict('expected'),
      FieldSchema.defaulted('beforeExecute', Step.pass),
      FieldSchema.defaulted('mutations', Fun.constant(Step.pass))
    ]), rawScenario);

UnitTest.asynctest('IFrame Dialog Test (webdriver)', (success, failure) => {
  const helpers = TestExtras();
  const windowManager = WindowManager.setup(helpers.extras);

  const doc = Element.fromDom(document);

  const tests = (Env.ie > 0 || Env.webkit || Env.gecko) ? [] :
    [
      TestHelpers.GuiSetup.mAddStyles(doc, [
        '[role="dialog"] { border: 1px solid black; padding: 2em; background-color: rgb(131,193,249); top: 40px; position: absolute; }',

        ':focus { outline: 3px solid green; !important; }',
        // NOTE: this is just for aiding debugging. It only works in some browsers
        'iframe:focus-within { outline: 3px solid green; !important; }'
      ]),

      Step.sync(() => {
        windowManager.open({
          title: 'Custom Dialog',
          body: {
            type: 'panel',
            items: [
              {
                name: 'input1',
                type: 'input'
              },
              {
                name: 'frame1',
                type: 'iframe'
              }
            ]
          },
          buttons: [
            {
              type: 'cancel',
              text: 'Close'
            }
          ],
          initialData: {
            input1: 'Dog',
            // NOTE: Tried some postMessage stuff to broadcast the scroll. Couldn't get it to work.
            // We can't just read the scroll value due to permissions
            frame1: '<!doctype html><html><head>' +
              '</head>' +
              '<body><h1>Heading</h1>' +
              Arr.map([ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], (n) => {
                return '<p>This is paragraph: ' + n + '</p>';
              }).join('\n') +
            '</body>'
          }
        }, { }, Fun.noop);
      }),

      RealKeys.sSendKeysOn(
        'input',
        [
          RealKeys.text('\u0009')
        ]
      ),
      FocusTools.sTryOnSelector(
        'focus should be on iframe',
        doc,
        'iframe'
      ),

      Step.wait(1000),

      RealKeys.sSendKeysOn(
        'iframe => body',
        [
          RealKeys.text('\uE015')
        ]
      ),

      RealKeys.sSendKeysOn(
        'iframe => body',
        [
          RealKeys.text('\u0009')
        ]
      ),

      FocusTools.sTryOnSelector(
        'focus should be on button (cancel)',
        doc,
        'button:contains("cancel")'
      ),

      // Tag it for using with selenium. Note, I should just
      // implement the automatic id tagging in agar, and
      // pass in a DOM reference (or assume focused element)
      Step.sync(() => {
        Focus.active().each((button) => {
          Class.add(button, 'cancel-button');
        });
      }),

      RealKeys.sSendKeysOn(
        '.cancel-button',
        [
          RealKeys.combo( { shiftKey: true }, '\u0009')
//.........这里部分代码省略.........

//.........这里部分代码省略.........
                  s.element('div', {
                    classes: [ arr.has('tox-menu'), arr.has(`tox-collection--${structure.type}`), arr.has('tox-collection') ],
                    children: Arr.map(structure.groups, (group) => {
                      return s.element('div', {
                        classes: [ arr.has('tox-collection__group') ],
                        children: Arr.map(group, (d) => {
                          if (structure.type === 'list') {
                            if (structure.hasIcons) {
                              return structWithTitleAndIconAndText(d)(s, str, arr);
                            } else {
                              return structWithTitleAndText(d)(s, str, arr);
                            }
                          } else {
                            return structWithTitleAndIcon(d)(s, str, arr);
                          }
                        })
                      });
                    })
                  })
                ]
              });
            })
          )
        ]);
      };

      const sTestAutocompleter = (scenario: { triggerChar: string, structure: AutocompleterStructure, choice: Step<any, any>, assertion: Step<any, any>, content?: string }) => {
        const content = scenario.content || scenario.triggerChar;
        return GeneralSteps.sequence([
          store.sClear,
          tinyApis.sSetContent(`<p>${content}</p>`),
          tinyApis.sSetCursor([ 0, 0 ], content.length),
          Keyboard.sKeypress(eDoc, scenario.triggerChar.charCodeAt(0), { }),
          tinyUi.sWaitForPopup('wait for autocompleter to appear', '.tox-autocompleter div[role="menu"]'),
          sAssertAutocompleterStructure(scenario.structure),
          scenario.choice,
          sWaitForAutocompleteToClose,
          scenario.assertion
        ]);
      };

      const sTestFirstAutocomplete = sTestAutocompleter({
        triggerChar: '+',
        structure: {
          type: 'list',
          hasIcons: true,
          groups: [
            [
              { title: 'p-a', text: 'p-a', icon: '+' },
              { title: 'p-b', text: 'p-b', icon: '+' },
              { title: 'p-c', text: 'p-c', icon: '+' },
              { title: 'p-d', text: 'p-d', icon: '+' }
            ]
          ]
        },
        choice: GeneralSteps.sequence([
          Keyboard.sKeydown(eDoc, Keys.down(), { }),
          Keyboard.sKeydown(eDoc, Keys.enter(), { })
        ]),
        assertion: tinyApis.sAssertContent('<p>plus-b</p>')
      });

      const sTestSecondAutocomplete = sTestAutocompleter({
        triggerChar: ':',
        structure: {
          type: 'grid',

//.........这里部分代码省略.........
      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() ? [
    Step.wait(1000),
    TestUi.sStartEditor(realm.system()),
    Step.wait(1000),
    Step.sync(function () {
      // iframe.dom().contentWindow.document.querySelector('.tinymce-mobile-editor-socket').scrollTop = 200;
    }),
    Step.wait(1000),
    mShowKeyboard('p', 13),
    Step.sync(function () {
      const toolstrip = iframe.dom().contentWindow.document.querySelector('.tinymce-mobile-toolstrip');
      Assertions.assertEq('Checking that the toolstrip is off screen when window moves', true, toolstrip.getBoundingClientRect().top < 0);
    }),
    Step.wait(3000),
    Step.sync(function () {
      const toolstrip = iframe.dom().contentWindow.document.querySelector('.tinymce-mobile-toolstrip');
      Assertions.assertEq('Checking that the toolstrip is at top of screen after scroll recognised', 0, toolstrip.getBoundingClientRect().top);
    }),
    Step.stateful(function (value, next, die) {
      const nowCursorY = getCursorY(value.target);
      Assertions.assertEq('Checking visual position values are approximately equal after scrolling', true, Math.abs(nowCursorY - value.cursorY) < 10);
      next(value);
    })
  ] : [], function () { unload(); success(); }, failure);
});

import { Keyboard, Step, Keys, FocusTools } from '@ephox/agar';
import { Arr } from '@ephox/katamari';

const sAssertFocusOnItem = (doc, text) => {
  return FocusTools.sTryOnSelector(
    'Focus should be on: ' + text,
    doc,
    `.tox-collection__item:contains(${text})`
  );
};

const sDelay = Step.wait(0);

const generateNavigation = (doc, navigation) => {
  if (navigation.length === 0) { return [ ]; }

  return Arr.bind(navigation.concat(navigation.slice(0, 1)), (nav, i) => {
    const exploration = (nav.subitems.length > 0) ? [
      Keyboard.sKeydown(doc, Keys.right(), { }),
      sAssertFocusOnItem(doc, nav.subitems[0])
    ].concat(
      Arr.bind(
        nav.subitems.slice(1).concat(nav.subitems.slice(0, 1)),
        (si) => [
          Keyboard.sKeydown(doc, Keys.down(), { }),
          sDelay,
          sAssertFocusOnItem(doc, si)
        ]
      )
    ).concat([
      Keyboard.sKeydown(doc, Keys.escape(), { })

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

    const sSetupData = GeneralSteps.sequence([
      // '<p>This |is the first paragraph</p><p>This is the second.</p><p>This is| the third.</p>'
      tinyApis.sSetContent('<p>This was the first paragraph</p><p>This is the second.</p><p>This is the third.</p>'),
      tinyApis.sSetSelection([ 0, 0 ], 'This '.length, [ 0, 0 ], 'This was'.length),
      sAnnotate(editor, 'alpha', 'id-one', { anything: 'comment-1' }),

      tinyApis.sSetSelection([ 1, 0 ], 'T'.length, [ 1, 0 ], 'This is'.length),
      sAnnotate(editor, 'alpha', 'id-two', { anything: 'comment-two' }),

      tinyApis.sSetSelection([ 2, 0 ], 'This is the th'.length, [ 2, 0 ], 'This is the thir'.length),
      sAnnotate(editor, 'beta', 'id-three', { something: 'comment-three' }),

      sAssertHtmlContent(tinyApis, [
        `<p>This <span data-mce-annotation="alpha" data-test-anything="comment-1" data-mce-annotation-uid="id-one" class="mce-annotation">was</span> the first paragraph</p>`,

        `<p>T<span data-mce-annotation="alpha" data-test-anything="comment-two" data-mce-annotation-uid="id-two" class="mce-annotation">his is</span> the second.</p>`,

        `<p>This is the th<span data-mce-annotation="beta" data-test-something="comment-three" data-mce-annotation-uid="id-three" class="mce-annotation">ir</span>d.</p>`
      ])
    ]);

    const outside1 = { path: [ 0, 0 ], offset: 'Th'.length };
    const inside1 = { path: [ 0, 1, 0 ], offset: 'i'.length };
    const inside3 = { path: [ 2, 1, 0 ], offset: 'i'.length };

    // Outside: p(0) > text(0) > "Th".length
    // Inside: p(0) > span(1) > text(0) > 'i'.length
    // Inside: p(1) > span(1) > text(0), 'hi'.length
    // Outside: p(1) > text(2) > ' the '.length
    const sTestGetAndRemove = GeneralSteps.sequence([
      tinyApis.sSetSelection(outside1.path, outside1.offset, outside1.path, outside1.offset),
      Waiter.sTryUntil(
        'Nothing active (outside1)',
        tinyApis.sAssertContentPresence({
          '.mce-annotation': 3
        }),
        100,
        1000
      ),

      Logger.t(
        'There should be two alpha annotations',
        sAssertGetAll(editor, {
          'id-one': 1,
          'id-two': 1
        }, 'alpha')
      ),

      Logger.t(
        'There should be one beta annotation',
        sAssertGetAll(editor, {
          'id-three': 1
        }, 'beta')
      ),

      Step.sync(() => {
        editor.annotator.remove('alpha');
      }),

      // Need to wait because nothing should have changed. If we don't wait, we'll get
      // a false positive when the throttling makes the change delayed.
      Step.wait(1000),

      Waiter.sTryUntil(
        'removed alpha, but was not inside alpha',
        tinyApis.sAssertContentPresence({
          '.mce-annotation': 3
        }),
        100,
        1000
      ),
      Logger.t(
        'There should be still be two alpha annotations (because remove only works if you are inside)',
        sAssertGetAll(editor, {
          'id-one': 1,
          'id-two': 1
        }, 'alpha')
      ),
      Logger.t(
        'There should still be one beta annotation',
        sAssertGetAll(editor, {
          'id-three': 1
        }, 'beta')
      ),

      tinyApis.sSetSelection(inside3.path, inside3.offset, inside3.path, inside3.offset),
      Step.sync(() => {
        editor.annotator.remove('beta');
      }),
      Waiter.sTryUntil(
        'removed beta',
        tinyApis.sAssertContentPresence({
          '.mce-annotation': 2
        }),
        100,
        1000
      ),
//.........这里部分代码省略.........

//.........这里部分代码省略.........
        sWaitForMenuToAppear(),
        sAssertFocusOnToggleItem('Remember me'),
        sAssertActiveToggleItemHasOneCheckmark('Remember me'),
        Keyboard.sKeydown(doc, Keys.escape(), { }),
        sAssertFocusOnMenuButton('Changes'),
        sWaitForMenuToDisappear(),

        Keyboard.sKeydown(doc, Keys.right(), {}),
        sAssertFocusOnMenuButton('Basic Menu Button'),

        Keyboard.sKeydown(doc, Keys.space(), { }),
        sWaitForMenuToAppear(),
        sAssertFocusOnItem('Item1'),

        Keyboard.sKeydown(doc, Keys.down(), { }),
        sAssertFocusOnItem('Item2'),

        Keyboard.sKeydown(doc, Keys.down(), { }),
        sAssertFocusOnItem('Nested'),

        Keyboard.sKeydown(doc, Keys.right(), { }),
        sAssertFocusOnItem('Nested menu x 2'),

        Keyboard.sKeydown(doc, Keys.right(), { }),
        sAssertFocusOnItem('Nested menu x 3'),

        Keyboard.sKeydown(doc, Keys.left(), { }),
        sAssertFocusOnItem('Nested menu x 2'),

        Keyboard.sKeydown(doc, Keys.escape(), { }),
        sAssertFocusOnItem('Nested'),

        Keyboard.sKeydown(doc, Keys.escape(), { }),
        sAssertFocusOnMenuButton('Basic Menu Button'),
        sWaitForMenuToDisappear(),

        Keyboard.sKeydown(doc, Keys.enter(), { }),
        sWaitForMenuToAppear(),
        sAssertFocusOnItem('Item1'),

        Keyboard.sKeydown(doc, Keys.up(), { }),
        sAssertFocusOnItem('Nested'),
        Keyboard.sKeydown(doc, Keys.enter(), { }),
        sAssertFocusOnItem('Nested menu x 2'),

        Keyboard.sKeydown(doc, Keys.escape(), { }),
        sAssertFocusOnItem('Nested'),
        Keyboard.sKeydown(doc, Keys.up(), { }),
        Keyboard.sKeydown(doc, Keys.enter(), { }),
        Logger.t(
          'Pressing <enter> on an item without a submenu should trigger it and close the menu',
          GeneralSteps.sequence([
            sWaitForMenuToDisappear(),
            store.sAssertEq('Store should have evidence of item triggered', [ 'menuitem-2 action' ])
          ])
        ),

        store.sClear,
        Step.sync(() => {
          SilverMenubar.focus(menubar);
        }),
        sAssertFocusOnMenuButton('Changes'),

        Keyboard.sKeydown(doc, Keys.escape(), { }),
        store.sAssertEq('Pressing escape in menubar should fire event', [ 'Menubar.escape' ]),

        Log.stepsAsStep('TBA', 'AP-307: Once a menu is expanded, hovering on buttons should switch which menu is expanded', [
          Mouse.sHoverOn(menubar.element(), 'button[role="menuitem"]:contains("Basic Menu Button")'),
          Step.wait(100),
          UiFinder.sNotExists(sink, '[role="menu"]'),
          Mouse.sClickOn(menubar.element(), 'button[role="menuitem"]:contains("Changes")'),
          UiFinder.sWaitForVisible(
            'Waiting for changes menu',
            sink,
            '.tox-collection__item:contains("Remember me")'
          ),
          sAssertMenuItemGroups('After clicking on "Changes"', [
            [ 'Remember me' ]
          ]),
          Mouse.sHoverOn(menubar.element(), 'button[role="menuitem"]:contains("Basic Menu Button")'),
          UiFinder.sWaitForVisible(
            'Waiting for basic menu',
            sink,
            '.tox-collection__item:contains("Item1")'
          ),
          // Focus the menu item, not the toolbar item
          Keyboard.sKeydown(doc, Keys.down(), { }),
          UiFinder.sWaitForVisible(
            'Wait for basic menu to get selected class',
            sink,
            '.tox-selected-menu .tox-collection__item:contains("Item1")'
          ),
          // This is failing because tox-selected-menu is not set.
          sAssertMenuItemGroups('After hovering on Basic (after another menu was open)', [
            [ 'Item1' ],
            [ 'Item2', 'Nested menu>' ]
          ])
        ])
      ];
    }, () => {