TypeScript Keys.down方法代碼示例

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

      const selectionChangeState = Cell(false);

      Pipeline.async({}, Env.webkit ?
        Log.steps('TBA', 'TestCase-Table-TBA-Create lists within table cells and verify keyboard navigation for the cells', [
          tinyApis.sFocus,
          tinyApis.sSetContent(
            '<table><tbody><tr><td><ul><li>a</li><li>b</li></ul></td></tr><tr><td><ul><li>c</li><li>d</li></ul></td></tr></tbody></table>'
          ),
          tinyApis.sSetCursor([0, 0, 0, 0, 0, 1, 0], 0),
          tinyActions.sContentKeydown(Keys.down(), {}),
          tinyApis.sSetCursor([0, 0, 1, 0, 0, 0, 0], 0),
          Step.sync(function () {
            editor.on('SelectionChange', function () {
              selectionChangeState.set(true);
            });
          }),
          Waiter.sTryUntil(
            'editor did not have correct selection',
            Step.sync(function () {
              RawAssertions.assertEq('state is true', true, selectionChangeState.get());
            }),
            100, 3000
          ),
          tinyApis.sAssertSelection([0, 0, 1, 0, 0, 0, 0], 0, [0, 0, 1, 0, 0, 0, 0], 0)
        ])
      : [], onSuccess, onFailure);
    }, {

    const testChangingUrlValueWith = (sChooseItem: Step<any, any>) => Log.stepsAsStep('TBA', 'Link: Choosing something in the urlinput changes text and value', [
      tinyApis.sSetContent('<h1>Header One</h1><h2 id="existing-id">Header2</h2>'),
      TestLinkUi.sOpenLinkDialog,
      Keyboard.sKeydown(doc, Keys.down(), { }),
      UiFinder.sWaitForVisible('Waiting for dropdown', TinyDom.fromDom(document.body), '.tox-menu'),
      sChooseItem,
      sAssertUrlStructure((s, str, _arr) => {
        return s.element('input', {
          value: str.startsWith('#h_')
        });
      }),
      sAssertInputValue('Header One', 'Text to display'),
      TestLinkUi.sAssertContentPresence(tinyApis, {
        'h1[id]': 0,
        'h2[id]': 1
      }),
      TestLinkUi.sClickSave,
      TestLinkUi.sAssertContentPresence(tinyApis, {
        'h1[id]': 1
      }),

      // Check that the h1's id value is referred to by a link containing dog
      Chain.asStep(TinyDom.fromDom(editor.getBody()), [
        NamedChain.asChain([
          NamedChain.direct(NamedChain.inputName(), UiFinder.cFindIn('h1'), 'h1'),
          NamedChain.direct('h1', Chain.mapper((h1) => Attr.get(h1, 'id')), 'h1-id'),
          NamedChain.bundle((obj) => {
            return UiFinder.findIn(obj[NamedChain.inputName()], `a[href="#${obj['h1-id']}"]:contains("Header One")`);
          })
        ])
      ])
    ]);

  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(), { })
    ]) : [
      // Should do nothing
      Keyboard.sKeydown(doc, Keys.right(), { })
    ];

    return Arr.flatten([
      [ sAssertFocusOnItem(doc, nav.item) ],
      exploration,
      [ sAssertFocusOnItem(doc, nav.item) ],
      [ sDelay ],
      // Move to the next one
      i < navigation.length ? [ Keyboard.sKeydown(doc, Keys.down(), { }) ] : [ ]
    ]);
  });

    (editor, onSuccess, onFailure) => {
      const doc = Element.fromDom(document);

      Pipeline.async({ }, Log.steps(
        'TBA',
        'Check structure of table picker',
        [
          Mouse.sClickOn(Body.body(), '.tox-toolbar button'),
          UiFinder.sWaitForVisible('Waiting for menu', Body.body(), '[role="menu"]'),
          Chain.asStep(Body.body(), [
            UiFinder.cFindIn('[role="menu"]'),
            Assertions.cAssertStructure(
              'Checking structure',
              ApproxStructure.build((s, str, arr) => insertTablePickerApprox(s, str, arr, 1, 1))
            )
          ]),
          FocusTools.sTryOnSelector('Focus should be on first table cell', doc, '.tox-insert-table-picker__selected:last'),
          Keyboard.sKeydown(doc, Keys.down(), {}),
          Keyboard.sKeydown(doc, Keys.right(), {}),
          Chain.asStep(Body.body(), [
            UiFinder.cFindIn('[role="menu"]'),
            Assertions.cAssertStructure(
              'Checking structure',
              ApproxStructure.build((s, str, arr) => insertTablePickerApprox(s, str, arr, 2, 2))
            )
          ]),
          FocusTools.sTryOnSelector('Focus should be on 2 down, 2 across table cell', doc, '.tox-insert-table-picker__selected:last')
        ]
      ), onSuccess, onFailure);
    },

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

      const selectionChangeState = Cell(false);

      Pipeline.async({}, Env.webkit ? [
        tinyApis.sFocus,
        tinyApis.sSetContent(
          '<table><tbody><tr><td><ul><li>a</li><li>b</li></ul></td></tr><tr><td><ul><li>c</li><li>d</li></ul></td></tr></tbody></table>'
        ),
        tinyApis.sSetCursor([0, 0, 0, 0, 0, 1, 0], 0),
        tinyActions.sContentKeydown(Keys.down(), {}),
        tinyApis.sSetCursor([0, 0, 1, 0, 0, 0, 0], 0),
        Step.sync(function () {
          editor.on('selectionchange', function () {
            selectionChangeState.set(true);
          });
        }),
        Waiter.sTryUntil(
          'editor did not have correct selection',
          Step.sync(function () {
            RawAssertions.assertEq('state is true', true, selectionChangeState.get());
          }),
          100, 3000
        ),
        tinyApis.sAssertSelection([0, 0, 1, 0, 0, 0, 0], 0, [0, 0, 1, 0, 0, 0, 0], 0)
      ] : [], 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);
  }, {

 const sSelectAutoCompleteLink = function (tinyApis, url) {
   return Chain.asStep({}, [
     Chain.fromParent(Toolbar.cWaitForToolbar, [
       Toolbar.cClickButton('Insert/Edit link')
     ]),
     Chain.fromParent(UiFinder.cFindIn('input'), [
       UiControls.cSetValue(url),
       cKeyStroke(Keys.space(), {}),
       cKeyStroke(Keys.down(), {})
     ]),
     Chain.inject(TinyDom.fromDom(document)),
     Chain.fromParent(FocusTools.cGetFocused, [
       cKeyStroke(Keys.down(), {}),
       cKeyStroke(Keys.enter(), {})
     ]),
     Chain.fromParent(Toolbar.cWaitForToolbar, [
       Toolbar.cClickButton('Ok')
     ])
   ]);
 };

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

      Pipeline.async({}, [
        tinyApis.sFocus,
        Logger.t('Arrow keys in figcaption', GeneralSteps.sequence([
          Logger.t('Arrow up from start of figcaption to paragraph before figure', GeneralSteps.sequence([
            tinyApis.sSetContent('<figure><figcaption>a</figcaption></figure>'),
            tinyApis.sSetCursor([0, 0, 0], 0),
            tinyActions.sContentKeystroke(Keys.up(), { }),
            tinyApis.sAssertContent('<br /><figure><figcaption>a</figcaption></figure>'),
            tinyApis.sAssertSelection([], 0, [], 0)
          ])),
          Logger.t('Arrow down from end of figcaption to paragraph after figure', GeneralSteps.sequence([
            tinyApis.sSetContent('<figure><figcaption>a</figcaption></figure>'),
            tinyApis.sSetCursor([0, 0, 0], 1),
            tinyActions.sContentKeystroke(Keys.down(), { }),
            sAssertRawContent(editor, '<figure><figcaption>a</figcaption></figure><br>'),
            tinyApis.sAssertSelection([], 1, [], 1)
          ])),
          Logger.t('Arrow up in middle of figcaption', GeneralSteps.sequence([
            tinyApis.sSetContent('<figure><figcaption>ab</figcaption></figure>'),
            tinyApis.sSetCursor([0, 0, 0], 1),
            tinyActions.sContentKeystroke(Keys.up(), { }),
            sAssertRawContent(editor, '<br><figure><figcaption>ab</figcaption></figure>'),
            tinyApis.sAssertSelection([], 0, [], 0)
          ])),
          Logger.t('Arrow down in middle of figcaption', GeneralSteps.sequence([
            tinyApis.sSetContent('<figure><figcaption>ab</figcaption></figure>'),
            tinyApis.sSetCursor([0, 0, 0], 1),
            tinyActions.sContentKeystroke(Keys.down(), { }),
            sAssertRawContent(editor, '<figure><figcaption>ab</figcaption></figure><br>'),
            tinyApis.sAssertSelection([], 1, [], 1)
          ]))
        ]))
      ], 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);
  }, {

    (editor, onSuccess, onFailure) => {
      const doc = Element.fromDom(document);

      Pipeline.async({ }, Logger.ts(
        'Check structure of list collection',
        [
          TestHelpers.GuiSetup.mAddStyles(doc, [
            ':focus { background-color: rgb(222, 224, 226); }'
          ]),
          Mouse.sClickOn(Body.body(), '.tox-toolbar button'),
          UiFinder.sWaitForVisible('Waiting for menu', Body.body(), '[role="menu"]'),
          Chain.asStep(Body.body(), [
            UiFinder.cFindIn('[role="menu"]'),
            Assertions.cAssertStructure(
              'Checking structure',
              ApproxStructure.build((s, str, arr) => {
                return s.element('div', {
                  classes: [ arr.has('tox-menu'), arr.has('tox-collection'), arr.has('tox-collection--list') ],
                  children: [
                    s.element('div', {
                      classes: [ arr.has('tox-collection__group') ],
                      children: [
                        s.element('div', {
                          classes: [ arr.has('tox-collection__item') ],
                          attrs: {
                            title: str.is('Alpha')
                          },
                          children: [
                            s.element('div', {
                              classes: [ arr.has('tox-collection__item-icon'), arr.has('tox-collection__item-checkmark') ],
                              children: [
                                s.element('svg', {})
                              ]
                            }),
                            s.element('div', {
                              classes: [ arr.has('tox-collection__item-label') ]
                            }),
                            s.element('div', {
                              classes: [ arr.has('tox-collection__item-accessory') ]
                            })
                          ]
                        }),
                        s.element('div', {
                          classes: [ arr.has('tox-collection__item') ],
                          attrs: {
                            title: str.is('Beta')
                          },
                          children: [
                            s.element('div', {
                              classes: [ arr.has('tox-collection__item-icon') ],
                              children: [
                                s.element('svg', {})
                              ]
                            }),
                            s.element('div', {
                              classes: [ arr.has('tox-collection__item-label') ]
                            }),
                            s.element('div', {
                              classes: [ arr.has('tox-collection__item-caret') ]
                            })
                          ]
                        })
                      ]
                    }),
                    s.element('div', {
                      classes: [ arr.has('tox-collection__group') ],
                      children: [
                        s.element('div', {
                          classes: [ arr.has('tox-collection__item') ],
                          attrs: {
                            title: str.is('Gamma')
                          },
                          children: [
                            s.element('div', {
                              classes: [ arr.has('tox-collection__item-icon') ],
                              children: [
                                s.element('svg', {})
                              ]
                            }),
                            s.element('div', {
                              classes: [ arr.has('tox-collection__item-label') ]
                            }),
                            s.element('div', {
                              classes: [ arr.has('tox-collection__item-accessory') ]
                            })
                          ]
                        })
                      ]
                    })
                  ]
                });
              })
            )
          ]),
          FocusTools.sTryOnSelector('Focus should be on Alpha', doc, '.tox-collection__item:contains(Alpha)'),
          Keyboard.sKeydown(doc, Keys.down(), { }),
          FocusTools.sTryOnSelector('Focus should be on Beta', doc, '.tox-collection__item:contains(Beta)'),
          Keyboard.sKeydown(doc, Keys.down(), { }),
          FocusTools.sTryOnSelector('Focus should be on Gamma', doc, '.tox-collection__item:contains(Gamma)'),
          TestHelpers.GuiSetup.mRemoveStyles
//.........這裏部分代碼省略.........