TypeScript FocusTools.sSetFocus方法代碼示例

 (doc, body, gui, component, store) => {
   return [
     FocusTools.sSetFocus('Focus checkbox', body, '.tox-checkbox__input'),
     Keyboard.sKeydown(doc, Keys.enter(), {}),
     store.sAssertEq('Form change should have fired', ['test-check-box'])
   ];
 },

 const sSubmitDialog = (docBody) => {
   return GeneralSteps.sequence(Logger.ts('Clicking on the Save button to close dialog', [
     FocusTools.sSetFocus('Focus dialog', docBody, dialogSelector),
     Mouse.sClickOn(docBody, 'button.tox-button:contains(Save)'),
     Waiter.sTryUntil('Dialog should close', UiFinder.sNotExists(docBody, dialogSelector), 100, 3000)
   ]));
 };

    (doc, body, gui, component, store) => {
      const sAssertLockedStatus = (label: string, expected: boolean) => Logger.t(
        label,
        Chain.asStep(component.element(), [
          UiFinder.cFindIn('.tox-lock'),
          Assertions.cAssertStructure(
            'Checking the state of the lock button. Should be: ' + expected,
            ApproxStructure.build((s, str, arr) => {
              return s.element('button', {
                classes: [ arr.has('tox-lock') ],
                attrs: {
                  'aria-pressed': str.is(expected ? 'true' : 'false')
                }
              });
            })
          )
        ])
      );

      const sSendRealSpace = RealKeys.sSendKeysOn('.tox-lock', [
        // Space key
        RealKeys.text('\uE00D')
      ]);

      return [
        FocusTools.sSetFocus('Focus the constrain button', component.element(), '.tox-lock'),
        sAssertLockedStatus('Initially: ', true),
        sSendRealSpace,
        sAssertLockedStatus('Firing space on a pressed button', false),
        sSendRealSpace,
        sAssertLockedStatus('Firing space on a non-pressed button', true)
      ];
    },

    (doc, body, gui, component, store) => {

      const sTriggerInput = DomSteps.sTriggerEventOnFocused('input("input")', component, NativeEvents.input());

      const sSetDimensions = (width, height) => RepresentingSteps.sSetValue('dimensions', component, { width, height });

      const sAssertDimensions = (width, height) => RepresentingSteps.sAssertValue('dimensions', { width, height }, component);

      const sAssertLocked = (locked) =>
        Chain.asStep(component.element(), [
          UiFinder.cFindIn('.tox-lock'),
          Chain.op((lock) => {
            Assertions.assertStructure(
              'Checking lock has toggled',
              ApproxStructure.build((s, str, arr) => {
                return s.element('button', {
                  classes: [
                    arr.has('tox-lock'),
                    arr.has('tox-button'),
                    (locked ? arr.has : arr.not)('tox-locked')]
                });
              }),
              lock
            );
          })
        ]);

      return [
        Assertions.sAssertStructure(
          'Checking initial structure',
          ApproxStructure.build((s, str, arr) => {
            return s.element('div', {
              classes: [arr.has('tox-form__group')],
              children: [
                s.element('div', {
                  classes: [arr.has('tox-form__controls-h-stack')],
                  children: [
                    s.element('div', {
                      classes: [arr.has('tox-form__group')],
                      children: [
                        s.element('label', {
                          classes: [arr.has('tox-label')],
                          html: str.is('Width')
                        }),
                        s.element('input', {
                          classes: [arr.has('tox-textfield')],
                          attrs: {
                            'data-alloy-tabstop': str.is('true')
                          }
                        })
                      ]
                    }),
                    s.element('div', {
                      classes: [arr.has('tox-form__group')],
                      children: [
                        s.element('label', {
                          classes: [arr.has('tox-label')],
                          html: str.is('Height')
                        }),
                        s.element('input', {
                          classes: [arr.has('tox-textfield')],
                          attrs: {
                            'data-alloy-tabstop': str.is('true')
                          }
                        })
                      ]
                    }),
                    s.element('div', {
                      classes: [arr.has('tox-form__group')],
                      children: [
                        s.element('label', {
                          classes: [arr.has('tox-label')],
                          html: str.is(' ')
                        }),
                        s.element('button', {
                          classes: [arr.has('tox-lock'), arr.has('tox-button'), arr.has('tox-locked')]
                        })
                      ]
                    })
                  ]
                })
              ]
            });
          }),
          component.element()
        ),
        sAssertLocked(true),
        sSetDimensions('100px', '200px'),
        FocusTools.sSetFocus('Focusing the first field', component.element(), 'input:first'),
        FocusTools.sSetActiveValue(doc, '50'),
        sTriggerInput,
        sAssertDimensions('50', '100px'),
        // toggle off the lock
        Mouse.sClickOn(component.element(), 'button.tox-lock'),
        sAssertLocked(false),
        // now when we update the first field it will not update the second field
        FocusTools.sSetFocus('Focusing the first field', component.element(), 'input:first'),
        FocusTools.sSetActiveValue(doc, '300px'),
        sTriggerInput,
        sAssertDimensions('300px', '100px')
//.........這裏部分代碼省略.........

    (doc, body, gui, component, store) => {
      const input = component.getSystem().getByDom(
        SelectorFind.descendant(component.element(), 'input').getOrDie('Could not find input in colorinput')
      ).getOrDie();

      const legend = component.getSystem().getByDom(
        // Intentionally, only finding direct child
        SelectorFind.descendant(component.element(), 'span').getOrDie('Could not find legend in colorinput')
      ).getOrDie();

      const sSetColorInputValue = (newValue: string) => Step.sync(() => {
        // Once we put more identifying marks on a colorinput, use that instead.
        const colorinput = component.components()[0];
        Representing.setValue(colorinput, newValue);
      });

      const sOpenPicker = Logger.t(
        'Clicking the legend should bring up the colorswatch',
        GeneralSteps.sequence([
          Mouse.sClickOn(legend.element(), 'root:span'),
          UiFinder.sWaitFor('Waiting for colorswatch to show up!', sink, '.tox-swatches')
        ])
      );

      const sAssertFocusedValue = (label: string, expected: string) => Logger.t(label, Chain.asStep(sink, [
        FocusTools.cGetActiveValue,
        Assertions.cAssertEq('Checking value of focused element', expected)
      ]));

      const sAssertLegendBackground = (label: string, f) => Assertions.sAssertStructure(
        label + ': Checking background of legend button',
        ApproxStructure.build((s, str, arr) => {
          return s.element('span', {
            styles: {
              'background-color': f(s, str, arr)
            }
          });
        }),
        legend.element()
      );

      const sAssertContainerClasses = (label: string, f) => {
        return Waiter.sTryUntil(
          label + ': Checking classes on container',
          Assertions.sAssertStructure(
            'Checking classes only',
            ApproxStructure.build((s, str, arr) => {
              return s.element('div', {
                classes: f(s, str, arr)
                // ignore children
              });
            }),
            Traverse.parent(input.element()).getOrDie('Could not find parent of input')
          ),
          100,
          1000
        );
      };

      return [
        TestHelpers.GuiSetup.mAddStyles(doc, [
          '.tox-textbox-field-invalid input { outline: 2px solid red; }',
          '.tox-color-input span { padding: 4px 8px; }',
          '.tox-swatch { padding: 8px 4px }'
        ]),
        Assertions.sAssertStructure(
          'Checking initial structure',
          ApproxStructure.build((s, str, arr) => {
            return s.element('div', {
              children: [
                s.element('div', {
                  children: [
                    // Ignore other information because it is subject to change. No oxide example yet.
                    s.element('label', { }),
                    s.element('div', {
                      children: [
                        s.element('input', { }),
                        s.element('span', { })
                      ]
                    })
                  ]
                })
              ]
            });
          }),
          component.element()
        ),

        Logger.t(
          'Initially, the colour should not be invalid',
          GeneralSteps.sequence([
            Assertions.sAssertEq('Invalidating.isInvalid', false, Invalidating.isInvalid(input))
          ])
        ),

        Logger.t(
          'Type an invalid colour: "notblue"',
          GeneralSteps.sequence([
            FocusTools.sSetFocus('Move focus to input field', component.element(), 'input'),
            FocusTools.sSetActiveValue(doc, 'notblue'),
//.........這裏部分代碼省略.........

UnitTest.asynctest('ColorPickerSanityTest', (success, failure) => {
  // mutation is yummy
  let currentColor = '';

  const setColor = (hexOpt) => {
    hexOpt.each((hex) => {
      currentColor = hex;
    });
  };

  const dialogSelector = 'div[role="dialog"]';

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

  const sAssertColor = function (expected) {
    return Logger.t('Asserting color', Step.sync(function () {
      Assertions.assertEq('Asserting current colour is ' + expected, expected, currentColor);
    }));
  };

  const sSetHex = (hex) => {
    return Logger.t('Changing textarea content to ' + hex, Step.sync(() => {
      const inputs = SelectorFilter.descendants(docBody, 'div[role="dialog"] input');
      const hexInput = inputs[inputs.length - 1];
      hexInput.dom().value = hex;
    }));
  };

  const sOpenDialog = (editor, docBody) => {
    return GeneralSteps.sequence(Logger.ts('Open dialog and wait for it to be visible', [
      Step.sync(function () {
        const dialog = ColorSwatch.colorPickerDialog(editor);
        dialog(setColor, '#ffffff');
      }),
      UiFinder.sWaitForVisible('Waited for dialog to be visible', docBody, dialogSelector)
    ]));
  };

  const sAssertColorWhite = sAssertColor('#ffffff');

  const sAssertColorBlack = sAssertColor('#000000');

  const sSetHexWhite = sSetHex('ffffff');

  const sSetHexBlack = sSetHex('000000');

  const sSubmitDialog = GeneralSteps.sequence(Logger.ts('Click Save and close dialog', [
    FocusTools.sSetFocus('Focus dialog', docBody, dialogSelector),
    Waiter.sTryUntil('Button is not disabled', UiFinder.sNotExists(docBody, 'button.tox-button:contains("Save")[disabled]'), 100, 1000),
    Mouse.sClickOn(docBody, 'button.tox-button:contains(Save)'),
    Waiter.sTryUntil('Dialog should close', UiFinder.sNotExists(docBody, dialogSelector), 100, 3000),
  ]));

  const sCancelDialog = GeneralSteps.sequence(Logger.ts('Click Cancel and close dialog', [
    FocusTools.sSetFocus('Focus dialog', docBody, dialogSelector),
    Mouse.sClickOn(docBody, 'button.tox-button:contains(Cancel)'),
    Waiter.sTryUntil('Dialog should close', UiFinder.sNotExists(docBody, dialogSelector), 100, 3000),
  ]));

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    Pipeline.async({}, [
      Log.stepsAsStep('TBA', 'ColorPicker: Open dialog, click Save and assert color is white', [
        sOpenDialog(editor, docBody),
        sSubmitDialog,
        sAssertColorWhite
      ]),

      Log.stepsAsStep('TBA', 'ColorPicker: Open dialog, pick a color, click Save and assert color changes to picked color', [
        sOpenDialog(editor, docBody),
        sSetHexBlack,
        sSubmitDialog,
        sAssertColorBlack
      ]),

      Log.stepsAsStep('TBA', 'ColorPicker: Open dialog, pick a different color, click Cancel and assert color does not change', [
        sOpenDialog(editor, docBody),
        sSetHexWhite,
        sCancelDialog,
        sAssertColorBlack
      ])
    ], onSuccess, onFailure);
  }, {
    plugins: '',
    theme: 'silver',
    toolbar: '',
    base_url: '/project/tinymce/js/tinymce',
  }, success, failure);
});

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

      const structureItem = (optText: Option<string>, optIcon: Option<string>) => (s, str, arr) => {
        return s.element('div', {
          classes: [ arr.has('tox-collection__item') ],
          children: Options.cat([
            optIcon.map((icon) => s.element('div', {
              classes: [ arr.has('tox-collection__item-icon') ],
              html: str.is(icon)
            })),

            optText.map((text) => s.element('div', {
              classes: [ arr.has('tox-collection__item-label') ],
              html: str.is(text)
            }))
          ])
        });
      };

      const cFindNthIn = (selector, n) => Chain.binder((elem: Element) => {
        const matches = UiFinder.findAllIn(elem, selector);
        return matches.length > 0 && n < matches.length ? Result.value(matches[n]) :
          Result.error(`Could not find match ${n} of selector: ${selector}`);
      });

      Pipeline.async({ }, Logger.ts(
        'Check structure of collection in a dialog',
        [
          TestHelpers.GuiSetup.mAddStyles(doc, [
            ':focus { outline: 2px solid green; }'
          ]),
          Mouse.sClickOn(Body.body(), '.tox-toolbar button'),
          UiFinder.sWaitForVisible('Waiting for dialog', Body.body(), '[role="dialog"]'),

          FocusTools.sTryOnSelector('Focus should start on input', doc, 'input'),
          Keyboard.sKeydown(doc, Keys.tab(), { }),

          Logger.t(
            'Checking the first collection: columns = 1, list',
            GeneralSteps.sequence([
              Chain.asStep(Body.body(), [
                cFindNthIn('[role="dialog"] .tox-form__group .tox-collection', 0),
                Assertions.cAssertStructure(
                  'Checking structure',
                  ApproxStructure.build((s, str, arr) => {
                    return s.element('div', {
                      classes: [ arr.has('tox-collection'), arr.has('tox-collection--list'), arr.not('tox-menu') ],
                      children: [
                        s.element('div', {
                          classes: [ arr.has('tox-collection__group') ],
                          children: Arr.map([ 'A', 'B', 'C' ], (letter) =>
                            structureItem(Option.some('text-' + letter), Option.some('icon-' + letter))(s, str, arr)
                          )
                        })
                      ]
                    });
                  })
                )
              ]),
              FocusTools.sTryOnSelector('Focus should be on A', doc, '.tox-collection__item:contains(A).tox-collection__item--active'),
              Keyboard.sKeydown(doc, Keys.down(), { }),
              FocusTools.sTryOnSelector('Focus should be on B', doc, '.tox-collection__item:contains(B)'),
              Keyboard.sKeydown(doc, Keys.down(), { }),
              FocusTools.sTryOnSelector('Focus should be on C', doc, '.tox-collection__item:contains(C)'),
            ])
          ),

          // NOTE: We need a layout engine to use flex-wrap navigation.
          navigator.userAgent.indexOf('PhantomJS') > -1 ?
            FocusTools.sSetFocus('Force focus to F on phantom', Body.body(), '.tox-collection__item:contains("F")')
            : Logger.t(
            'Checking the second collection: columns = auto',
            GeneralSteps.sequence([
              Chain.asStep(Body.body(), [
                cFindNthIn('[role="dialog"] .tox-form__group .tox-collection', 1),
                Assertions.cAssertStructure(
                  'Checking structure',
                  ApproxStructure.build((s, str, arr) => {
                    return s.element('div', {
                      classes: [ arr.has('tox-collection'), arr.has('tox-collection--grid'), arr.not('tox-menu') ],
                      children: [
                        s.element('div', {
                          classes: [ arr.has('tox-collection__group') ],
                          children: Arr.map([ 'D', 'E', 'F' ], (letter) =>
                            structureItem(Option.none(), Option.some('icon-' + letter))(s, str, arr)
                          )
                        })
                      ]
                    });
                  })
                )
              ]),
              FocusTools.sTryOnSelector('Focus should be on C', doc, '.tox-collection__item:contains(C)'),
              Keyboard.sKeydown(doc, Keys.tab(), { }),
              FocusTools.sTryOnSelector('Focus should be on D', doc, '.tox-collection__item:contains(D)'),
              Keyboard.sKeydown(doc, Keys.right(), { }),
              FocusTools.sTryOnSelector('Focus should be on E', doc, '.tox-collection__item:contains(E)'),
              Keyboard.sKeydown(doc, Keys.right(), { }),
              FocusTools.sTryOnSelector('Focus should be on F', doc, '.tox-collection__item:contains(F)'),
//.........這裏部分代碼省略.........