TypeScript sugar.Element類代碼示例

 return Chain.op(function (cellOption: Option<any>) {
   const cell = cellOption.getOrDie('x');
   const expectedContainer = Hierarchy.follow(Element.fromDom(viewBlock.get()), path).getOrDie();
   Assertions.assertDomEq('Should be the expected element', expectedContainer, Element.fromDom(cell));
 });

    return Chain.on(function (editor, next, die) {
      const container = editor.iframeElement;
      const getter = dimension === 'width' ? Width.get : Height.get;
      const actualValue = typeof value === 'string' ? container.style[dimension] : getter(Element.fromDom(container));

      Assertions.assertEq('Editors content area has expected ' + dimension, value, actualValue);

      next(Chain.wrap(editor));
    });

const nativeRangeToSelectionRange = function (r) {
  return Selection.range(Element.fromDom(r.startContainer), r.startOffset, Element.fromDom(r.endContainer), r.endOffset);
};

const insertBrBefore = function (editor, inline) {
  const br = Element.fromTag('br');
  Insert.before(Element.fromDom(inline), br);
  editor.undoManager.add();
};

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

      const apis = TinyApis(editor);

      Pipeline.async({}, [
        Log.step('TBA', 'Check structure of font format', GeneralSteps.sequence([
          Step.label('Add styles to the editor', TestHelpers.GuiSetup.mAddStyles(doc, [
            ':focus { background-color: rgb(222, 224, 226); }',
            '.tox-collection__item-label > * { margin: 0px; }'
          ])),

          Step.label('Set editor content', apis.sSetContent('<blockquote>Text</blockquote>')),
          Step.label('Set cursor position', apis.sSetCursor([0, 0], 'Te'.length)),

          Step.label('Click on the style select button', Mouse.sClickOn(Body.body(), '.tox-toolbar button')),
          Step.label('Wait for the style select menu', UiFinder.sWaitForVisible('Waiting for menu', Body.body(), '[role="menu"]')),
          Step.label('Checking menu structure', 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')],
                          children: [
                            s.element('div', { classes: [arr.has('tox-collection__item-icon')] }),
                            s.element('div', {
                              classes: [arr.has('tox-collection__item-label')],
                              children: [
                                s.element('h1', { html: str.is('Title') })
                              ]
                            })
                          ]
                        }),
                        s.element('div', {
                          classes: [arr.has('tox-collection__item')],
                          children: [
                            s.element('div', { classes: [arr.has('tox-collection__item-icon')] }),
                            s.element('div', {
                              classes: [arr.has('tox-collection__item-label')],
                              children: [
                                s.element('h2', { html: str.is('Main heading') })
                              ]
                            })
                          ]
                        }),
                        s.element('div', {
                          classes: [arr.has('tox-collection__item')],
                          children: [
                            s.element('div', { classes: [arr.has('tox-collection__item-icon')] }),
                            s.element('div', {
                              classes: [arr.has('tox-collection__item-label')],
                              children: [
                                s.element('h3', { html: str.is('Sub heading') })
                              ]
                            })
                          ]
                        })
                      ]
                    }),

                    s.element('div', {
                      classes: [arr.has('tox-collection__group')],
                      children: [
                        s.element('div', {
                          classes: [ arr.has('tox-collection__item'), arr.has('tox-collection__group-heading') ],
                          children: [ s.text(str.is('Example Separator')) ]
                        }),
                        s.element('div', {
                          classes: [ arr.has('tox-collection__item') ],
                          children: [
                            s.element('div', { classes: [arr.has('tox-collection__item-icon')] }),
                            s.element('div', {
                              classes: [arr.has('tox-collection__item-label')],
                              children: [
                                s.element('p', { html: str.is('Paragraph') })
                              ]
                            })
                          ]
                        }),
                        s.element('div', {
                          classes: [arr.has('tox-collection__item')],
                          children: [
                            s.element('div', { classes: [arr.has('tox-collection__item-icon')] }),
                            s.element('div', {
                              classes: [arr.has('tox-collection__item-label')],
                              children: [
                                s.element('blockquote', { html: str.is('Blockquote') })
                              ]
                            })
                          ]
                        }),
                        s.element('div', {
                          classes: [arr.has('tox-collection__item')],
//.........這裏部分代碼省略.........

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

    const tableHtml = '<table style = "width: 5%;">' +
    '<tbody>' +
      '<tr>' +
        '<td></td>' +
      '</tr>' +
    '</tbody>' +
    '</table>';

    const sAddTableAndOpenContextToolbar = (html: string) => GeneralSteps.sequence([
      tinyApis.sSetContent(html),
      tinyUi.sWaitForUi('Wait for table context toolbar', '.tox-toolbar button[aria-label="Table properties"]'),
    ]);

    // Use keyboard shortcut ctrl+F9 to navigate to the context toolbar
    const sPressKeyboardShortcutKey = Keyboard.sKeydown(Element.fromDom(editor.getDoc()), 120, { ctrl: true });
    const sPressRightArrowKey = Keyboard.sKeydown(doc, Keys.right(), { });
    const sPressTabKey = Keyboard.sKeydown(doc, Keys.tab(), { });

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

    const sAssertButtonDisabled = (label: string, selector: string) => {
      return tinyUi.sWaitForUi(label, `.tox-pop__dialog ${selector}:disabled`);
    };

    const sClickOnToolbarButton = (selector: string) => {
      return Chain.asStep({}, [
        Chain.fromParent(tinyUi.cWaitForPopup('wait for context toolbar', '.tox-pop__dialog div'), [
          Chain.fromChains([
            UiFinder.cFindIn(selector),
            Mouse.cClick
          ])
        ])
      ]);
    };

    const sAssertHtmlStructure = (label, expectedHtml) => Chain.asStep({editor}, [ NamedChain.read('editor', Chain.op((editor) => {
      const elm = Replication.deep(Element.fromDom(editor.getBody()));
      Arr.each(SelectorFilter.descendants(elm, '*[data-mce-bogus="all"]'), Remove.remove);
      const actualHtml = Html.get(elm);
      Assertions.assertHtmlStructure(label, `<body>${expectedHtml}</body>`, `<body>${actualHtml}</body>`);
    }))]);

    const sOpenAndCloseDialog = GeneralSteps.sequence([
      Chain.asStep(editor, [
        tinyUi.cWaitForPopup('wait for dialog', 'div[role="dialog"]'),
        UiChains.cCloseDialog('div[role="dialog"]')
      ]),
      Waiter.sTryUntil('Wait for dialog to close', UiFinder.sNotExists(body, 'div[role="dialog"]'), 50, 5000)
    ]);

    Pipeline.async({}, [
      tinyApis.sFocus,
      Log.stepsAsStep('TBA', 'Table: context toolbar keyboard navigation test', [
        sAddTableAndOpenContextToolbar(tableHtml),
        sPressKeyboardShortcutKey,
        sAssertFocusOnItem('Table properties button', 'button[aria-label="Table properties"]'),
        sPressRightArrowKey,
        sAssertFocusOnItem('Delete table button', 'button[aria-label="Delete table"]'),
        sPressTabKey,
        sAssertFocusOnItem('Insert row above button', 'button[aria-label="Insert row before"]'),
        sPressRightArrowKey,
        sAssertFocusOnItem('Insert row below button', 'button[aria-label="Insert row after"]'),
        sPressRightArrowKey,
        sAssertFocusOnItem('Delete row button', 'button[aria-label="Delete row"]'),
        sPressTabKey,
        sAssertFocusOnItem('Insert column before button', 'button[aria-label="Insert column before"]'),
        sPressRightArrowKey,
        sAssertFocusOnItem('Insert column after button', 'button[aria-label="Insert column after"]'),
        sPressRightArrowKey,
        sAssertFocusOnItem('Delete column button', 'button[aria-label="Delete column"]'),
        sPressTabKey,
        sAssertFocusOnItem('Table properties button', 'button[aria-label="Table properties"]'),
        sClickOnToolbarButton('button[aria-label="Delete table"]'),
        sAssertHtmlStructure('Assert delete table', '<p><br></p>')
      ]),
      Log.stepsAsStep('TBA', 'Table: context toolbar functionality test', [
        sAddTableAndOpenContextToolbar(tableHtml),

        sClickOnToolbarButton('button[aria-label="Table properties"]'),
        sOpenAndCloseDialog,

        sClickOnToolbarButton('button[aria-label="Insert row before"]'),
        sAssertHtmlStructure('Assert insert row before', '<table><tbody><tr><td><br></td></tr><tr><td><br></td></tr></tbody></table>'),

        sClickOnToolbarButton('button[aria-label="Insert row after"]'),
        sAssertHtmlStructure('Assert insert row after', '<table><tbody><tr><td><br></td></tr><tr><td><br></td></tr><tr><td><br></td></tr></tbody></table>'),

        sClickOnToolbarButton('button[aria-label="Delete row"]'),
        sAssertHtmlStructure('Assert delete row', '<table><tbody><tr><td><br></td></tr><tr><td><br></td></tr></tbody></table>'),

        sClickOnToolbarButton('button[aria-label="Insert column before"]'),
//.........這裏部分代碼省略.........

 return Step.sync(function () {
   const actual = Element.fromHtml(editor.getBody().innerHTML);
   return Assertions.assertStructure('Should be the same structure', expected, actual);
 });

//.........這裏部分代碼省略.........
    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);

    return Logger.t(
      scenario.label,
      GeneralSteps.sequence([
        tEditor.sPrepareState(scenario.node.dom(), scenario.content),
        sClickLink,
        TestUi.sSetFieldOptValue(scenario.fields.url),
        sClickNext,
        sAssertTextFocused,
        TestUi.sSetFieldOptValue(scenario.fields.text),
        sClickNext,
        sAssertTitleFocused,
        TestUi.sSetFieldOptValue(scenario.fields.title),
        sClickNext,
        sAssertTargetFocused,
        TestUi.sSetFieldOptValue(scenario.fields.target),
        sClickPrev,
        sAssertTitleFocused,
        sClickPrev,
        sAssertTextFocused,
        sClickPrev,
        sAssertUrlFocused,

const removeStyles = function () {
  const head = Element.fromDom(document.head);
  SelectorFind.descendant(head, '.' + styleClass).each(Remove.remove);
};

 const assertSelection = function (editor, startPath, soffset, finishPath, foffset) {
   const actual = editor.selection.getRng();
   const root = Element.fromDom(editor.getBody());
   assertPath('start', root, startPath, soffset, actual.startContainer, actual.startOffset);
   assertPath('finish', root, finishPath, foffset, actual.endContainer, actual.endOffset);
 };