TypeScript sugar.Body类代码示例

  TinyLoader.setup((editor, onSuccess, onFailure) => {
    const sSetProgressState = (state: boolean, time?: number) => Step.sync(() => {
      if (state) {
        editor.setProgressState(true, time);
      } else {
        editor.setProgressState(false);
      }
    });

    Pipeline.async({}, [
      Log.stepsAsStep('TBA', 'Throbber actions test', [
        sAssertThrobberHiddenStructure,
        sSetProgressState(true),
        UiFinder.sWaitForVisible('Wait for throbber to show', Body.body(), '.tox-throbber'),
        sAssertThrobberShownStructure,
        sSetProgressState(false),
        UiFinder.sWaitForHidden('Wait for throbber to hide', Body.body(), '.tox-throbber'),
        sAssertThrobberHiddenStructure
      ]),
      Log.stepsAsStep('TBA', 'Throbber actions with timeout test', [
        sSetProgressState(true, 300),
        // Wait for a little and make sure the throbber is still hidden
        Step.wait(150),
        sAssertThrobberHiddenStructure,
        UiFinder.sWaitForVisible('Wait for throbber to show', Body.body(), '.tox-throbber'),
        sAssertThrobberShownStructure,
        sSetProgressState(false),
        UiFinder.sWaitForHidden('Wait for throbber to hide', Body.body(), '.tox-throbber'),
        sAssertThrobberHiddenStructure
      ])
    ], onSuccess, onFailure);
  }, {

    (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 tinyUi = TinyUi(editor);

      Pipeline.async({}, [
          tinyApis.sFocus,
          tinyUi.sClickOnToolbar('click emoticons', 'button'),
          Chain.asStep({}, [
            tinyUi.cWaitForPopup('wait for popup', 'div[role="dialog"]'),
          ]),
          Waiter.sTryUntil(
            'Wait for emojis to load',
            UiFinder.sNotExists(Body.body(), '.tox-spinner'),
            100,
            1000
          ),
          Chain.asStep(Body.body(), [
            UiFinder.cFindAllIn('[role="tab"]'),
            Chain.mapper((elements: Element[]) => {
              return Arr.map(elements, (elm: Element) => {
                return elm.dom().textContent;
              });
            }),
            Assertions.cAssertEq('Categories match', categories)
          ])
        ], onSuccess, onFailure);
    }, {

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

      Pipeline.async({ }, Logger.ts(
        'Check structure of grid collection menu',
        [
          TestHelpers.GuiSetup.mAddStyles(doc, [
            ':focus { background-color: rgb(222, 224, 226); }'
          ]),
          Mouse.sClickOn(Body.body(), '.tox-split-button__chevron'),
          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--grid') ],
                  children: [
                    s.element('div', {
                      classes: [ arr.has('tox-collection__group') ],
                      children: Arr.map([ '1', '2', '3', '4', '5', '6', '7', '8' ], (num) => {
                        return s.element('div', {
                          classes: [ arr.has('tox-collection__item') ],
                          attrs: {
                            title: str.is(num)
                          },
                          children: [
                            // NOTE: The oxide demo page has div, but I think that's just a mistake
                            s.element('div', {
                             classes: [ arr.has('tox-collection__item-icon') ],
                             children: [
                               s.element('svg', {})
                             ]
                            })
                          ]
                        });
                      })
                    })
                  ]
                });
              })
            )
          ]),

          // Without layout, the flatgrid cannot be calculated on phantom
          navigator.userAgent.indexOf('PhantomJS') > -1 ? Step.pass : GeneralSteps.sequence([
            FocusTools.sTryOnSelector('Focus should be on 1', doc, '.tox-collection__item[title="1"]'),
            Keyboard.sKeydown(doc, Keys.right(), { }),
            FocusTools.sTryOnSelector('Focus should be on 2', doc, '.tox-collection__item[title="2"]'),
            Keyboard.sKeydown(doc, Keys.right(), { }),
            FocusTools.sTryOnSelector('Focus should be on 3', doc, '.tox-collection__item[title="3"]')
          ]),
          TestHelpers.GuiSetup.mRemoveStyles
        ]
      ), onSuccess, onFailure);
    },

 const clickOnSplitBtnFor = (label) => {
   return Log.stepsAsStep('TBA', `ADVlist: Test split menu for ${label} has the correct Dom structure`, [
     Mouse.sClickOn(Body.body(), '[aria-label="' + label + '"] > .tox-tbtn + .tox-split-button__chevron'),
     Waiter.sTryUntil(
       `Waiting for ${label} menu to appear`,
       UiFinder.sExists(Body.body(), '.tox-menu.tox-selected-menu'),
       100,
       1000
     )
   ]);
 };

 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"]')
       ]),
     ])
   );
 };

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

    Pipeline.async({}, [
      Log.stepsAsStep('TBA', 'Close float panels when setProgressState is called', [
        tinyUi.sClickOnToolbar('click forecolor', 'div[aria-label="Text color"] > button.mce-open'),
        UiFinder.sWaitFor('Float panel for color button should be open', Body.body(), '.mce-floatpanel'),
        sSetProgressState(editor, true),
        UiFinder.sWaitForHidden('', Body.body(), '.mce-floatpanel')
      ])
    ], onSuccess, onFailure);
  }, {

 }, (tinyApis: any, editor: Editor) => [
   Logger.t('Using default style formats config, the Block formatting dropdown should show the correct format selection ', GeneralSteps.sequence([
     tinyApis.sSetContent('<p>a</p>'),
     tinyApis.sSetCursor([0, 0], 1),
     UiFinder.sWaitFor('Check that formatter displays Paragraph', Body.body(), 'button.tox-tbtn--select span.tox-tbtn__select-label:contains("Paragraph")'),
     Step.sync(() => editor.formatter.apply('h1')),
     UiFinder.sWaitFor('Check that formatter displays Heading 1', Body.body(), 'button.tox-tbtn--select span.tox-tbtn__select-label:contains("Heading 1")'),
     Step.sync(() => editor.formatter.apply('pre')),
     UiFinder.sWaitFor('Check that formatter displays Pre', Body.body(), 'button.tox-tbtn--select span.tox-tbtn__select-label:contains("Pre")'),
     Step.sync(() => editor.formatter.apply('p')),
     UiFinder.sWaitFor('Check that formatter displays Paragraph', Body.body(), 'button.tox-tbtn--select span.tox-tbtn__select-label:contains("Paragraph")'),
   ]))
 ])

 const createTest = (label, conf, asserter) => Logger.t(
   label,
   GeneralSteps.sequence([
     Waiter.sTryUntil(
       'Waiting for any other dialogs to disappear',
       UiFinder.sNotExists(Body.body(), '.tox-button--icon[aria-label="Close"]'),
       100,
       1000
     ),
     sSetupDialog(conf),
     UiFinder.sWaitFor('Waiting for dialog to appear', Body.body(), '.tox-button--icon[aria-label="Close"]'),
     sAssertSinkStructure(asserter),
     sTeardown,
   ])
 );

UnitTest.asynctest('browser.tinymce.plugins.media.NoAdvancedTabTest', (success, failure) => {
  Plugin();
  Theme();

  Pipeline.async({}, [
    Log.chainsAsStep('TBA', 'Media: if alt source and poster set to false, do not show advance tab', [
      Chain.fromParent(
        Editor.cFromSettings({
          plugins: ['media'],
          toolbar: 'media',
          media_alt_source: false,
          media_poster: false,
          theme: 'silver',
          base_url: '/project/tinymce/js/tinymce'
        }),
        [
          Chain.fromChains([
            UiChains.cClickOnToolbar('click button', 'button[aria-label="Insert/edit media"]'),
            Chain.inject(Body.body()),
            UiFinder.cWaitForVisible('wait for popup', 'div.tox-dialog'),
            Utils.cNotExists('div.tox-tab:contains(Advanced)')
          ]),
          Editor.cRemove
        ]
      )
    ]),
    Log.chainsAsStep('TBA', 'Media: if alt source and poster not set to false, show advance tab', [
      Chain.fromParent(
        Editor.cFromSettings({
          plugins: ['media'],
          toolbar: 'media',
          theme: 'silver',
          base_url: '/project/tinymce/js/tinymce'
        }),
        [
          Chain.fromChains([
            UiChains.cClickOnToolbar('click button', 'button[aria-label="Insert/edit media"]'),
            Chain.inject(Body.body()),
            UiFinder.cWaitForVisible('wait for popup', 'div.tox-dialog'),
            Utils.cExists('div.tox-tab:contains(Advanced)')
          ]),
          Editor.cRemove
        ]
      )
    ])
  ], () => success(), failure);

});