TypeScript Keys.tab方法代碼示例

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

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

      Logger.t('ul > li in table', GeneralSteps.sequence([
        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>')
      ])),

      Logger.t('ol > li in table', GeneralSteps.sequence([
        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>')
      ])),

      Logger.t('dl > dt in table', GeneralSteps.sequence([
        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 tinyApis = TinyApis(editor);
    const doc = Element.fromDom(document);

    // Tab key press
    const sPressTabKey = Keyboard.sKeydown(doc, Keys.tab(), { });

    // Down arrow key press to nav between tabs
    const sPressDownArrowKey = Keyboard.sKeydown(doc, Keys.down(), { });

    // Assert focus is on the expected form element
    const sAssertFocusOnItem = (label, selector) => {
      return FocusTools.sTryOnSelector(
        `Focus should be on: ${label}`,
        doc,
        selector
      );
    };

    Pipeline.async({}, [
      Log.stepsAsStep('TBA', 'Help: Open dialog', [
        tinyApis.sFocus,
        tinyApis.sExecCommand('mceHelp')
      ]),

      Log.stepsAsStep('TBA', 'Help: test the tab key navigation cycles through all focusable fields in Handy Shortcuts tab', [
        sAssertFocusOnItem('Handy Shortcuts Tab', '.tox-dialog__body-nav-item:contains("Handy Shortcuts")'),
        sPressTabKey,
        sAssertFocusOnItem('Handy Shortcuts Items', '.tox-dialog__table'),
        sPressTabKey,
        sAssertFocusOnItem('Close Button', '.tox-button:contains("Close")'),
        sPressTabKey,
        sAssertFocusOnItem('Handy Shortcuts Tab', '.tox-dialog__body-nav-item:contains("Handy Shortcuts")'),
        sPressDownArrowKey
      ]),

      Log.stepsAsStep('TBA', 'Help: test the tab key navigation cycles through all focusable fields in Plugins tab', [
        sAssertFocusOnItem('Plugins Tab', '.tox-dialog__body-nav-item:contains("Plugins")'),
        sPressTabKey,
        sAssertFocusOnItem('Installed Plugins', 'div[role="document"]'),
        sPressTabKey,
        sAssertFocusOnItem('Close Button', '.tox-button:contains("Close")'),
        sPressTabKey,
        sAssertFocusOnItem('Plugins Tab', '.tox-dialog__body-nav-item:contains("Plugins")'),
        sPressDownArrowKey
      ]),

      Log.stepsAsStep('TBA', 'Help: test the tab key navigation cycles through all focusable fields in Version tab', [
        sAssertFocusOnItem('Version Tab', '.tox-dialog__body-nav-item:contains("Version")'),
        sPressTabKey,
        sAssertFocusOnItem('TinyMCE Version', 'div[role="document"]'),
        sPressTabKey,
        sAssertFocusOnItem('Close Button', '.tox-button:contains("Close")'),
        sPressTabKey,
        sAssertFocusOnItem('Version Tab', '.tox-dialog__body-nav-item:contains("Version")')
      ])
    ], onSuccess, onFailure);
  }, {

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

    Pipeline.async({},
      Log.steps('TBA', 'Charmap: Open dialog, Search for "euro", Euro should be first option', [
        tinyApis.sFocus,
        tinyUi.sClickOnToolbar('click charmap', 'button[aria-label="Special character"]'),
        Chain.asStep({}, [
          tinyUi.cWaitForPopup('wait for popup', 'div[role="dialog"]'),
        ]),
        FocusTools.sTryOnSelector('Focus should start on', doc, '[role="tab"]'), // TODO: Remove duped startup of these tests
        Keyboard.sKeydown(doc, Keys.tab(), { }),
        FocusTools.sTryOnSelector('Focus should have moved to input', doc, 'input'),
        FocusTools.sSetActiveValue(doc, 'euro'),
        Chain.asStep(doc, [
          FocusTools.cGetFocused,
          cFakeEvent('input')
        ]),
        Waiter.sTryUntil(
          'Wait until Euro is the first choice (search should filter)',
          Chain.asStep(Body.body(), [
            UiFinder.cFindIn('.tox-collection__item:first'),
            Chain.mapper((item) => {
              return Attr.get(item, 'data-collection-item-value');
            }),
            Assertions.cAssertEq('Search should show euro', '€')
          ]),
          100,
          1000
        ),
        Keyboard.sKeydown(doc, Keys.tab(), { }),
        FocusTools.sTryOnSelector('Focus should have moved to collection', doc, '.tox-collection__item'),
        Keyboard.sKeydown(doc, Keys.enter(), { }),
        Waiter.sTryUntil(
          'Waiting for content update',
          tinyApis.sAssertContent('<p>&euro;</p>'),
          100,
          1000
        )
      ])
    , onSuccess, onFailure);
  }, {

 ], (dest) => {
   return [
     Keyboard.sKeydown(doc, Keys.tab(), { shiftKey: true }),
     FocusTools.sTryOnSelector(
       'Focus should move to ' + dest.label,
       doc,
       dest.selector
     )
   ];
 })

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    const tinyApis = TinyApis(editor);
    const tinyUi = TinyUi(editor);
    const doc = Element.fromDom(document);
    const body = Body.body();

    Pipeline.async({},
      Log.steps('TBA', 'Emoticons: Open dialog, verify custom categories listed and search for custom emoticon', [
        tinyApis.sFocus,
        tinyUi.sClickOnToolbar('click emoticons', 'button'),
        Chain.asStep({}, [
          tinyUi.cWaitForPopup('wait for popup', 'div[role="dialog"]'),
        ]),
        FocusTools.sTryOnSelector('Focus should start on input', doc, 'input'),
        Chain.asStep(body, [
          UiFinder.cFindIn('[role="tablist"]'),
          Assertions.cAssertStructure('check custom categories are shown', ApproxStructure.build((s, str, arr) => {
            return s.element('div', {
              children: [
                tabElement(s, str, arr)('All'),
                tabElement(s, str, arr)('People'),
                tabElement(s, str, arr)('User Defined')
              ]
            });
          })),
        ]),
        FocusTools.sSetActiveValue(doc, 'clock'),
        Chain.asStep(doc, [
          FocusTools.cGetFocused,
          cFakeEvent('input')
        ]),
        Waiter.sTryUntil(
          'Wait until clock is the first choice (search should filter)',
          Chain.asStep(body, [
            UiFinder.cFindIn('.tox-collection__item:first'),
            Chain.mapper((item) => {
              return Attr.get(item, 'data-collection-item-value');
            }),
            Assertions.cAssertEq('Search should show custom clock', '⏲')
          ]),
          100,
          1000
        ),
        Keyboard.sKeydown(doc, Keys.tab(), {}),
        FocusTools.sTryOnSelector('Focus should have moved to collection', doc, '.tox-collection__item'),
        Keyboard.sKeydown(doc, Keys.enter(), {}),
        Waiter.sTryUntil(
          'Waiting for content update',
          tinyApis.sAssertContent('<p>⏲</p>'),
          100,
          1000
        )
      ])
      , onSuccess, onFailure);
  }, {

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

      Pipeline.async({}, [
        Logger.t('test table grid disabled', GeneralSteps.sequence([
          tinyApis.sFocus,
          tinyApis.sSetContent(tableHtml),
          TableTestUtils.sOpenToolbarOn(editor, 'td', [0]),
          tinyActions.sContentKeystroke(Keys.tab(), {}),
          tinyApis.sAssertSelection([0, 0, 0, 0], 0, [0, 0, 0, 0], 1)
        ]))
      ], onSuccess, onFailure);
    }, {

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

      Pipeline.async({},
        Log.steps('TBA', 'Table: test table grid disabled', [
          tinyApis.sFocus,
          tinyApis.sSetContent(tableHtml),
          // NOTE: This isn't really testing anything because this does not exist yet.
          TableTestUtils.sOpenToolbarOn(editor, 'td', [0]),
          tinyActions.sContentKeystroke(Keys.tab(), {}),
          tinyApis.sAssertSelection([0, 0, 0, 0], 0, [0, 0, 0, 0], 1)
        ])
      , onSuccess, onFailure);
    }, {

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    const doc = Element.fromDom(document);
    Pipeline.async({},
      Log.steps('TBA', 'FullPage: Test initial data, set new input values, open dialog, verify that the dialog data matches the input values', [

        sInitialState(editor),
        sCheckInputValue('Title', selectors.titleInput, 'Fullpage Dialog Test Title'),
        sCheckInputValue('Keywords', selectors.keywordsInput, ''),
        sCheckInputValue('Description', selectors.descriptionInput, ''),
        sCheckInputValue('Robots', selectors.robotsInput, ''),
        sCheckInputValue('Author', selectors.authorInput, ''),
        sCheckInputValue('Encoding', selectors.encodingInput, 'ISO-8859-1'),

        FocusTools.sTryOnSelector(
          'Focus should start on first input',
          doc,
          selectors.titleInput
        ),
        FocusTools.sSetActiveValue(doc, 'the nu title'),
        Keyboard.sKeydown(doc, Keys.tab(), { }),
        FocusTools.sSetActiveValue(doc, 'the nu keywords'),
        Keyboard.sKeydown(doc, Keys.tab(), { }),
        FocusTools.sSetActiveValue(doc, 'the nu description'),
        Keyboard.sKeydown(doc, Keys.tab(), { }),
        FocusTools.sSetActiveValue(doc, 'the nu robots'),
        Keyboard.sKeydown(doc, Keys.tab(), { }),
        FocusTools.sSetActiveValue(doc, 'the nu author'),
        Keyboard.sKeydown(doc, Keys.tab(), { }),
        FocusTools.sSetActiveValue(doc, 'the nu encoding'),
        FocusTools.sIsOnSelector('last', doc, selectors.encodingInput),

        Keyboard.sKeydown(doc, Keys.tab(), { }),
        FocusTools.sIsOnSelector('The cancel button should be focused', doc, 'button:contains("Cancel")'),
        Keyboard.sKeydown(doc, Keys.tab(), { }),
        FocusTools.sIsOnSelector('The save button should be focused', doc, 'button:contains("Save")'),
        Keyboard.sKeydown(doc, Keys.enter(), { }),
        UiFinder.sNotExists(Body.body(), 'div.tox-dialog'),

        sOpenDialog(editor),
        sCheckInputValue('Title', selectors.titleInput, 'the nu title'),
        sCheckInputValue('Keywords', selectors.keywordsInput, 'the nu keywords'),
        sCheckInputValue('Description', selectors.descriptionInput, 'the nu description'),
        sCheckInputValue('Robots', selectors.robotsInput, 'the nu robots'),
        sCheckInputValue('Author', selectors.authorInput, 'the nu author'),
        sCheckInputValue('Encoding', selectors.encodingInput, 'the nu encoding'),
    ]), onSuccess, onFailure);

  }, {

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    const doc = Element.fromDom(document);

    const sPressTab = Keyboard.sKeydown(doc, Keys.tab(), {});
    const sPressEsc = Keyboard.sKeydown(doc, Keys.escape(), {});
    const sPressDown = Keyboard.sKeydown(doc, Keys.down(), {});
    const sPressRight = Keyboard.sKeydown(doc, Keys.right(), {});

    const sFocusToolbar = Step.sync(() => {
      const args = Tools.extend({
        ctrlKey: false,
        altKey: false,
        shiftKey: false,
        metaKey: false
      }, {altKey: true, keyCode: 120});
      editor.fire('keydown', args);
    });

    const sAssertFocused = (name, selector) => {
      return FocusTools.sTryOnSelector(name, doc, selector);
    };

    Pipeline.async({}, Log.steps('TBA', 'Spellchecker: Reaching the spellchecker via the keyboard', [
      sTestDefaultLanguage(editor),
      sFocusToolbar,
      sAssertFocused('File', '.tox-mbtn:contains("File")'),
      sPressRight,
      sAssertFocused('Edit', '.tox-mbtn:contains("Edit")'),
      sPressRight,
      sAssertFocused('View', '.tox-mbtn:contains("View")'),
      sPressRight,
      sAssertFocused('Format', '.tox-mbtn:contains("Format")'),
      sPressRight,
      sAssertFocused('Tools', '.tox-mbtn:contains("Tools")'),
      sPressDown,
      sAssertFocused('Spellcheck tool menu item', '.tox-collection__item:contains("Spellcheck")'), // Menu item can be reached by keyboard
      sPressEsc,
      sPressTab,
      sAssertFocused('Spellchecker button', '.tox-split-button'), // Button can be reached by keyboard
      sPressDown,
      sAssertFocused('First language', '.tox-collection__item:contains("English")'), // Languages can be reached by keyboard
    ]), onSuccess, onFailure);
  }, {

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

    Pipeline.async({}, [
      sAddInputs(editor),
      tinyApis.sFocus,
      Step.sync(function () {
        RawAssertions.assertEq('should be same', 'IFRAME', document.activeElement.nodeName);
      }),
      tinyActions.sContentKeystroke(Keys.tab(), {}),
      Waiter.sTryUntil('vait for focus',
        Step.sync(function () {
          const input = document.getElementById('tempinput1');
          RawAssertions.assertEq('should be same', input.outerHTML, document.activeElement.outerHTML);
        }), 100, 4000),
      sRemoveInputs
    ], onSuccess, onFailure);
  }, {