TypeScript Keys.escape方法代碼示例

  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(), { }) ] : [ ]
    ]);
  });

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

    const sOpenDialog = () => {
      return GeneralSteps.sequence(Logger.ts('Open dialog and wait for it to be visible', [
        tinyUi.sClickOnToolbar('click on preview toolbar', 'button'),
        tinyUi.sWaitForPopup('wait for preview popup', '[role="dialog"] iframe')
      ]));
    };

    Pipeline.async({},
      Log.steps('TBA', 'Preview: Set content, open dialog, click Close to close dialog. Open dialog, press escape and assert dialog closes', [
        tinyApis.sSetContent('<strong>a</strong>'),

        sOpenDialog(),
        tinyUi.sClickOnUi('Click on Close button', '.tox-button:not(.tox-button--secondary)'),
        Waiter.sTryUntil('Dialog should close', UiFinder.sNotExists(docBody, dialogSelector), 100, 3000),

        sOpenDialog(),
        Keyboard.sKeydown(doc, Keys.escape(), { }),
        Waiter.sTryUntil('Dialog should close on esc', UiFinder.sNotExists(docBody, dialogSelector), 100, 3000)
      ])
    , onSuccess, onFailure);
  }, {

 const sCheckSubItemsAtLocation = (expectedSubmenu: string) => sCheckItemsAtLocationPlus(
   GeneralSteps.sequence([
     Keyboard.sKeydown(doc, Keys.right(), { }),
     sAssertFocusOnItem(expectedSubmenu)
   ]),
   // Afterwards, escape the submenu
   Keyboard.sKeydown(doc, Keys.escape(), { }),
   (text) => sOpenMenu('', text)
 );

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    Pipeline.async({}, [

      clickOnSplitBtnFor('Numbered list'),
      assertNumListStructure(),
      Keyboard.sKeydown(Element.fromDom(document), Keys.escape(), { }),
      clickOnSplitBtnFor('Bullet list'),
      assertBullListStructure(),

    ], onSuccess, onFailure);
  }, {

 const sCheckItemsAtLocationPlus = (beforeStep: Step<any, any>, afterStep: Step<any, any>, sOpen: (text: string) => Step<any, any>) => (label: string, expectedTicks: boolean[], menuText: string, path: number[], offset: number) => Logger.t(
   label,
   GeneralSteps.sequence([
     tinyApis.sSetCursor(path, offset),
       sOpen(menuText),
       beforeStep,
       sAssertItemTicks('Checking ticks at location', expectedTicks),
       afterStep,
       Keyboard.sKeydown(doc, Keys.escape(), { }),
       UiFinder.sNotExists(Body.body(), '[role="menu"]'),
   ])
 );

  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 tinyApis = TinyApis(editor);
    const tinyActions = TinyActions(editor);
    let count;

    // hijack editor.selection.normalize() to count how many times it will be invoked
    const backupNormalize = editor.selection.normalize;
    const normalize = function () {
      count = count === undefined ? 1 : count + 1;
      backupNormalize.apply(this, arguments);
    };
    editor.selection.normalize = normalize;

    const sResetNormalizeCounter = function () {
      return Step.sync(function () {
        count = 0;
      });
    };

    const sAssertNormalizeCounter = function (expected) {
      return Step.sync(function () {
        Assertions.assertEq('checking normalization counter', expected, count);
      });
    };

    const sClickBody = function (editor) {
      return Step.sync(function () {
        const target = editor.getBody();

        editor.fire('mousedown', { target });
        editor.fire('mouseup', { target });
        editor.fire('click', { target });
      });
    };

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

      Logger.t('Test normalization for floated images', GeneralSteps.sequence([
        tinyApis.sSetContent('<p>a<img src="about:blank" style="float: right"></p>'),
        tinyApis.sSetSelection([0], 1, [0], 2),
        Step.sync(function () {
          const selection = editor.selection.getSel();
          Assertions.assertEq('Anchor node should be the paragraph not the text node', 'P', selection.anchorNode.nodeName);
          Assertions.assertEq('Anchor offset should be the element index', 1, selection.anchorOffset);
        })
      ])),

      Logger.t('Normalize on key events when range is collapsed', GeneralSteps.sequence([
        tinyApis.sSetContent('<p>a</p><p>b</p>'),
        tinyApis.sSetSelection([], 1, [], 1),
        tinyActions.sContentKeystroke(Keys.escape(), {}),
        tinyApis.sAssertSelection([1, 0], 0, [1, 0], 0)
      ])),

      Logger.t('Normalize on mouse events when range is expanded', GeneralSteps.sequence([
        tinyApis.sSetContent('<p>a</p><p>b</p>'),
        tinyApis.sSetSelection([], 0, [], 1),
        sClickBody(editor),
        tinyApis.sAssertSelection([0, 0], 0, [0, 0], 1)
      ])),

      Logger.t('Normalize on mouse events when range is collapsed', GeneralSteps.sequence([
        tinyApis.sSetContent('<p>a</p><p>b</p>'),
        tinyApis.sSetSelection([], 1, [], 1),
        sClickBody(editor),
        tinyApis.sAssertSelection([1, 0], 0, [1, 0], 0)
      ])),

      Logger.t('Normalization during operations with modifier keys, should run only once in the end when user releases modifier key.', GeneralSteps.sequence([
        sResetNormalizeCounter(),
        tinyApis.sSetContent('<p><b>a</b><i>a</i></p>'),
        tinyApis.sSetSelection([0, 0, 0], 0, [0, 0], 0),
        Keyboard.sKeyup(Element.fromDom(editor.getDoc()), Keys.left(), { shift: true }),
        sAssertNormalizeCounter(0),
        Keyboard.sKeyup(Element.fromDom(editor.getDoc()), 17, {}), // single ctrl
        sAssertNormalizeCounter(1),
        tinyApis.sAssertSelection([0, 0], 0, [0, 0], 0)
      ]))
    ], onSuccess, onFailure);
  }, {

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    const api = TinyApis(editor);
    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 sAssertFocused = (name, selector) => {
      return FocusTools.sTryOnSelector(name, doc, selector);
    };

    Pipeline.async({}, [
      Log.stepsAsStep('TBA', 'Insert Image Dialog basic cycle ', [
        api.sExecCommand('mceImage'),
        sAssertFocused('Source', '.tox-textfield'),
        sPressTab,
        sAssertFocused('Description', '.tox-textfield'),
        sPressTab,
        sAssertFocused('Width', '.tox-textfield'),
        sPressTab,
        sAssertFocused('Height', '.tox-textfield'),
        sPressTab,
        sAssertFocused('Constraint proportions', 'button.tox-lock'),
        sPressTab,
        sAssertFocused('Cancel', 'button.tox-button:contains("Cancel")'),
        sPressTab,
        sAssertFocused('Save', 'button.tox-button:contains("Save")'),
        sPressEsc,
      ]),

      Log.stepsAsStep('TBA', 'Insert Image Dialog with filepicker cycle', [
        api.sSetSetting('image_advtab', true),
        api.sExecCommand('mceImage'),
        sAssertFocused('Tab', '.tox-dialog__body-nav-item:contains("General")'),
        sPressTab,
        sAssertFocused('Source', '.tox-textfield'),
        sPressTab,
        sAssertFocused('Description', '.tox-textfield'),
        sPressTab,
        sAssertFocused('Width', '.tox-textfield'),
        sPressTab,
        sAssertFocused('Height', '.tox-textfield'),
        sPressTab,
        sAssertFocused('Constraint proportions', 'button.tox-lock'),
        sPressTab,
        sAssertFocused('Cancel', 'button.tox-button:contains("Cancel")'),
        sPressTab,
        sAssertFocused('Save', 'button.tox-button:contains("Save")'),
        sPressEsc,
      ]),

      Log.stepsAsStep('TBA', 'Insert Image Dialog with all options', [
        api.sSetSetting('file_picker_callback', () => {}),
        api.sSetSetting('image_class_list', [{title: 'sample', value: 'sample'}]),
        api.sSetSetting('image_list', [{title: 'sample', value: 'sample'}]),
        api.sSetSetting('image_caption', true),
        api.sExecCommand('mceImage'),
        sAssertFocused('Tab', '.tox-dialog__body-nav-item:contains("General")'),
        sPressTab,
        sAssertFocused('Source', '.tox-textfield'),
        sPressTab,
        sAssertFocused('Source button', '.tox-browse-url'),
        sPressTab,
        sAssertFocused('Image list', 'select'),
        sPressTab,
        sAssertFocused('Description', '.tox-textfield'),
        sPressTab,
        sAssertFocused('Width', '.tox-textfield'),
        sPressTab,
        sAssertFocused('Height', '.tox-textfield'),
        sPressTab,
        sAssertFocused('Constraint proportions', 'button.tox-lock'),
        sPressTab,
        sAssertFocused('Class', 'select'),
        sPressTab,
        sAssertFocused('Caption', 'input.tox-checkbox__input'),
        sPressTab,
        sAssertFocused('Cancel', 'button.tox-button:contains("Cancel")'),
        sPressTab,
        sAssertFocused('Save', 'button.tox-button:contains("Save")'),
        sPressEsc,
      ]),

      Log.stepsAsStep('TBA', 'Insert Image Dialog with advanced tab', [
        api.sExecCommand('mceImage'),
        sAssertFocused('Tab', '.tox-dialog__body-nav-item:contains("General")'),
        sPressDown,
        sAssertFocused('Tab', '.tox-dialog__body-nav-item:contains("Advanced")'),
        sPressTab,
        sAssertFocused('Style', '.tox-textfield'),
        sPressTab,
        sAssertFocused('Vertical space', '.tox-textfield'),
        sPressTab,
        sAssertFocused('Horizontal space', '.tox-textfield'),
        sPressTab,
        sAssertFocused('Border width', '.tox-textfield'),
        sPressTab,
        sAssertFocused('Border style', 'select'),
        sPressTab,
//.........這裏部分代碼省略.........

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

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

      const sAssertFocusOnToolbarButton = (buttonText: string) => {
        return FocusTools.sTryOnSelector(
          `Focus should be on ${buttonText}`,
          doc,
          `.tox-toolbar button:contains("${buttonText}")`
        );
      };

      const sAssertFocusOnAlignToolbarButton = () => {
        return FocusTools.sTryOnSelector(
          `Focus should be on Align`,
          doc,
          `.tox-toolbar button[aria-label="Align"]`
        );
      };

      const sOpenMenu = (label: string, menuText: string) => {
        const menuTextParts = menuText.indexOf(':') > -1 ? menuText.split(':') : [ menuText ];
        const btnText = menuTextParts[0];
        const pseudo = menuTextParts.length > 1 ? ':' + menuTextParts[1] : '';
        const selector = `button:contains(${btnText})${pseudo}`;
        return sOpenMenuWithSelector(label, selector);
      };

      const sOpenAlignMenu = (label: string) => {
        const selector = `button[aria-label="Align"]`;
        return sOpenMenuWithSelector(label, selector);
      };

      const sOpenMenuWithSelector = (label: string, selector: string) => {
        return Logger.t(
          `Trying to open menu: ${label}`,
          GeneralSteps.sequence([
            Mouse.sClickOn(Body.body(), selector),
            Chain.asStep(Body.body(), [
              UiFinder.cWaitForVisible('Waiting for menu', '[role="menu"]')
            ]),
          ])
        );
      };

      const sAssertItemTicks = (label: string, expectedTicks: boolean[]) => Logger.t(
        `Checking tick state of items (${label})`,
        Chain.asStep(Body.body(), [
          UiFinder.cFindIn('.tox-selected-menu .tox-collection__group'),
          Assertions.cAssertStructure('Checking structure', ApproxStructure.build((s, str, arr) => {
            return s.element('div', {
              classes: [ arr.has('tox-collection__group') ],
              children: Arr.map(expectedTicks, (expected) => {
                return s.element('div', {
                  attrs: {
                    'role': str.is('menuitemcheckbox'),
                    'aria-checked': str.is(expected ? 'true' : 'false')
                  }
                });
              })
            });
          }))
        ])
      );

      const sCheckItemsAtLocationPlus = (beforeStep: Step<any, any>, afterStep: Step<any, any>, sOpen: (text: string) => Step<any, any>) => (label: string, expectedTicks: boolean[], menuText: string, path: number[], offset: number) => Logger.t(
        label,
        GeneralSteps.sequence([
          tinyApis.sSetCursor(path, offset),
            sOpen(menuText),
            beforeStep,
            sAssertItemTicks('Checking ticks at location', expectedTicks),
            afterStep,
            Keyboard.sKeydown(doc, Keys.escape(), { }),
            UiFinder.sNotExists(Body.body(), '[role="menu"]'),
        ])
      );

      const sCheckItemsAtLocation = sCheckItemsAtLocationPlus(Step.pass, Step.pass, (text) => sOpenMenu('', text));
      const sCheckAlignItemsAtLocation = sCheckItemsAtLocationPlus(Step.pass, Step.pass, () => sOpenAlignMenu(''));

      const sCheckSubItemsAtLocation = (expectedSubmenu: string) => sCheckItemsAtLocationPlus(
        GeneralSteps.sequence([
          Keyboard.sKeydown(doc, Keys.right(), { }),
          sAssertFocusOnItem(expectedSubmenu)
        ]),
        // Afterwards, escape the submenu
        Keyboard.sKeydown(doc, Keys.escape(), { }),
        (text) => sOpenMenu('', text)
      );

      const sTestAlignment = Log.stepsAsStep('TBA', 'Checking alignment ticks and updating', [
//.........這裏部分代碼省略.........

//.........這裏部分代碼省略.........

            Mouse.sClickOn(container, '.tox-toolbar button'),
            Step.sync(() => {
              Assertions.assertEq('Button should have been triggered', [ 'button1' ], store.get());
            }),

            Log.stepsAsStep('TBA', 'Menu appearing from menubar should have svg icons', [
              Mouse.sClickOn(container, '[role="menubar"] button[role="menuitem"]:contains("test")'),
              UiFinder.sWaitForVisible('Waiting for menu to appear', Body.body(), '[role="menu"]'),
              Chain.asStep(Body.body(), [
                UiFinder.cFindIn('[role="menu"] .tox-collection__item--active'),
                Assertions.cAssertStructure(
                  'Checking item has svg icon and text',
                  ApproxStructure.build((s, str, arr) => {
                    return s.element('div', {
                      classes: [ arr.has('tox-collection__item') ],
                      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') ],
                          html: str.is('Text with icon')
                        }),
                        s.element('div', {
                          classes: [ arr.has('tox-collection__item-accessory') ],
                          html: str.is(Env.mac ? '\u2318' + 'M' : 'Ctrl' + '+M')
                        })
                      ]
                    });
                  })
                )
              ]),
              Keyboard.sKeydown(Element.fromDom(document), Keys.escape(), { }),
              UiFinder.sNotExists(Body.body(), '[role="menu"]')
            ]),

            Log.stepsAsStep('TBA', 'Clicking on a toggle button should not toggle. It is up to the setActive api to do that', [
              Mouse.sClickOn(container, '.tox-toolbar .tox-tbtn:contains("ToggleMe")'),
              Chain.asStep(container, [
                UiFinder.cFindIn('.tox-tbtn:contains("ToggleMe")'),
                Assertions.cAssertStructure('Should not be pressed', ApproxStructure.build((s, str, arr) => {
                  return s.element('button', {
                    attrs: {
                      'aria-pressed': str.is('false')
                    },
                    classes: [ arr.not('tox-tbtn--enabled') ]
                  });
                }))
              ])
            ]),

            Log.stepsAsStep('TBA', 'Using the api should toggle a toggle button', [
              Step.sync(() => {
                editor.fire('customtoggle1-toggle');
              }),
              Chain.asStep(container, [
                UiFinder.cFindIn('.tox-tbtn:contains("ToggleMe")'),
                Assertions.cAssertStructure('Should be pressed', ApproxStructure.build((s, str, arr) => {
                  return s.element('button', {
                    attrs: {
                      'aria-pressed': str.is('true')
                    },
                    classes: [ arr.has('tox-tbtn--enabled') ]
                  });
                }))
              ])
            ]),

            Log.stepsAsStep('TBA', 'Clicking on a split button primary part should not toggle. It is up to the setActive api to do that', [
              Mouse.sClickOn(container, '.tox-toolbar .tox-split-button:contains("Delta")'),
              Chain.asStep(container, [
                UiFinder.cFindIn('.tox-split-button > .tox-tbtn:contains("Delta")'),
                Assertions.cAssertStructure('Should not be pressed', ApproxStructure.build((s, str, arr) => {
                  return s.element('span', {
                    classes: [ arr.not('tox-tbtn--enabled') ]
                  });
                }))
              ])
            ]),

            Log.stepsAsStep('TBA', 'Using the api should toggle a split button', [
              Step.sync(() => {
                editor.fire('splitbutton1-toggle');
              }),
              Chain.asStep(container, [
                UiFinder.cFindIn('.tox-split-button > .tox-tbtn:contains("Delta")'),
                Assertions.cAssertStructure('Should be pressed', ApproxStructure.build((s, str, arr) => {
                  return s.element('span', {
                    classes: [ arr.has('tox-tbtn--enabled') ]
                  });
                }))
              ])
            ])
          ]
        ), onSuccess, onFailure);
    },