TypeScript Mouse.sClickOn方法代码示例

  TinyLoader.setup((editor, onSuccess, onFailure) => {
    const tinyApis = TinyApis(editor);

    const dialogSelector = 'div.tox-dialog';
    const toolbarButtonSelector = '[role="toolbar"] button[aria-label="Insert template"]';

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

    Pipeline.async({}, [
      Log.stepsAsStep('TBA', 'Template: Test selectedcontent replacement with default class', [
        tinyApis.sSetContent('Text'),
        tinyApis.sSetSelection([0, 0], 0, [0, 0], 4),
        tinyApis.sSetSetting('templates', [{ title: 'a', description: 'b', content: '<h1 class="selcontent">This will be replaced</h1>' }]),
        Mouse.sClickOn(Element.fromDom(editor.getContainer()), toolbarButtonSelector),
        UiFinder.sWaitForVisible('Waited for dialog to be visible', docBody, dialogSelector),
        Mouse.sClickOn(docBody, 'button.tox-button:contains(Save)'),
        Waiter.sTryUntil('Dialog should close', UiFinder.sNotExists(docBody, dialogSelector), 100, 3000),
        tinyApis.sAssertContent('<h1 class="selcontent">Text</h1>')
      ]),

      Log.stepsAsStep('TBA', 'Template: Test selectedcontent replacement with custom class', [
        tinyApis.sSetContent('Text'),
        tinyApis.sSetSelection([0, 0], 0, [0, 0], 4),
        tinyApis.sSetSetting('template_selected_content_classes', 'customSelected'),
        tinyApis.sSetSetting('templates', [{ title: 'a', description: 'b', content: '<h1 class="customSelected">This will be replaced/h1>' }]),
        Mouse.sClickOn(Element.fromDom(editor.getContainer()), toolbarButtonSelector),
        UiFinder.sWaitForVisible('Waited for dialog to be visible', docBody, dialogSelector),
        Mouse.sClickOn(docBody, 'button.tox-button:contains(Save)'),
        Waiter.sTryUntil('Dialog should close', UiFinder.sNotExists(docBody, dialogSelector), 100, 3000),
        tinyApis.sAssertContent('<h1 class="customSelected">Text</h1>')
      ])
    ], onSuccess, onFailure);
  }, {

  TinyLoader.setup((editor: Editor, onSuccess, onFailure) => {
    const tinyApis = TinyApis(editor);

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

    const sSetTextareaContent = (content) => {
      return Logger.t('Changing textarea content to ' + content, Step.sync(() => {
        const textarea: any = document.querySelector('div[role="dialog"] textarea');
        textarea.value = content;
      }));
    };

    const sAssertTextareaContent = (expected) => {
      return Logger.t('Asserting textarea content is ' + expected, Step.sync(() => {
        const textarea: any = document.querySelector('div[role="dialog"] textarea');
        RawAssertions.assertEq('Should have correct value', expected, textarea.value);
      }));
    };

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

    Pipeline.async({}, [
      Log.stepsAsStep('TBA', 'Code: Set content in empty editor and assert values', [
        Mouse.sClickOn(Element.fromDom(editor.getContainer()), toolbarButtonSelector),
        UiFinder.sWaitForVisible('Waited for dialog to be visible', docBody, dialogSelector),
        sAssertTextareaContent(''),
        sSetTextareaContent('<em>a</em>'),
        sSubmitDialog(docBody),
        tinyApis.sAssertContent('<p><em>a</em></p>'),
      ]),

      Log.stepsAsStep('TBA', 'Code: Reopen dialog and check textarea content is correct', [
        Mouse.sClickOn(Element.fromDom(editor.getContainer()), toolbarButtonSelector),
        UiFinder.sWaitForVisible('Waited for dialog to be visible', docBody, dialogSelector),
        sAssertTextareaContent('<p><em>a</em></p>')
      ]),

      Log.stepsAsStep('TBA', 'Code: Change source code and assert editor content changes', [
        sSetTextareaContent('<strong>b</strong>'),
        sSubmitDialog(docBody),
        tinyApis.sAssertContent('<p><strong>b</strong></p>'),
      ]),
    ], onSuccess, onFailure);
  }, {

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

const sOpenDialogAndAssertInitial = (editor, docBody, language, content) => {
  return GeneralSteps.sequence(Logger.ts('Open dialog and assert initial language and content', [
    Mouse.sClickOn(Element.fromDom(editor.getContainer()), toolbarButtonSelector),
    UiFinder.sWaitForVisible('Waited for dialog to be visible', docBody, dialogSelector),
    sAssertCodeSampleDialog(language, content)
  ]));
};

    (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);
    },

  const testDialog = (label: string, params: { inline?: string }) => Logger.t(
    `Testing ${label}`,
    GeneralSteps.sequence([
      store.sClear,
      Logger.t(
        'Open a dialog, with a change button that accesses API asynchronously',
        sTestOpen(params)
      ),

      Logger.t(
        'Trigger the async functions by clicking on the button',
        Mouse.sClickOn(Body.body(), 'button:contains("Call")')
      ),

      Logger.t(
        'Click on the close button, so that dialog is shut down',
        sTestClose
      ),

      Waiter.sTryUntil(
        'Wait until getData and setData calls fire asynchronously',
        store.sAssertEq('Checking stuff', [
          'onCancel',
          'closeWindow',
          'onClose',
          'currentData: Init Value',
          'newData: Init Value'
        ]),
        100,
        5000
      )
    ])
  );

const sClickOnConfirmDialog = (label: string, state: boolean) => Logger.t('Click on confirm dialog', GeneralSteps.sequence([
  Mouse.sClickOn(TinyDom.fromDom(document.body), '[role="dialog"].tox-confirm-dialog button:contains("' + (state ? 'Yes' : 'No') + '")'),
  Waiter.sTryUntil(
    'Waiting for confirm dialog to go away',
    UiFinder.sNotExists(TinyDom.fromDom(document.body), '.tox-confirm-dialog'),
    100,
    1000
  )
]));

    (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 sClickDialogButton = (label: string, isSave: boolean) => Logger.t('Close dialog and wait to confirm dialog goes away', GeneralSteps.sequence([
  Mouse.sClickOn(TinyDom.fromDom(document.body), '[role="dialog"].tox-dialog button:contains("' + (isSave ? 'Save' : 'Cancel') + '")'),
  Waiter.sTryUntil(
    'Waiting for confirm dialog to go away',
    UiFinder.sNotExists(TinyDom.fromDom(document.body), '.tox-confirm-dialog'),
    100,
    1000
  )
]));

        (() => {
          const button2 = getButton('.button2-container .tox-tbtn');

          return Logger.ts('Second button (button2): toggle button', [
            Step.sync(() => {
              shouldDisable.set(false);
              shouldActivate.set(false);
            }),
            Mouse.sClickOn(component.element(), '.button2-container .tox-tbtn'),
            store.sAssertEq('Store should have action2', [ 'onToggleAction.2' ]),
            store.sClear,
            sAssertButtonDisabledState('Enabled', false, button2),
            sAssertButtonActiveState('Off', false, button2),

            Step.sync(() => {
              shouldActivate.set(true);
            }),
            Mouse.sClickOn(component.element(), '.button2-container .tox-tbtn'),
            store.sAssertEq('Store should have action2', [ 'onToggleAction.2' ]),
            store.sClear,
            sAssertButtonDisabledState('Disabled', false, button2),
            sAssertButtonActiveState('Off', true, button2),

            Step.sync(() => {
              shouldActivate.set(false);
            }),
            Mouse.sClickOn(component.element(), '.button2-container .tox-tbtn'),
            store.sAssertEq('Store should have action2', [ 'onToggleAction.2' ]),
            store.sClear,
            sAssertButtonDisabledState('Disabled', false, button2),
            sAssertButtonActiveState('Off', false, button2),

            Step.sync(() => {
              shouldDisable.set(true);
            }),
            Mouse.sClickOn(component.element(), '.button2-container .tox-tbtn'),
            store.sAssertEq('Store should now have action2', [ 'onToggleAction.2' ]),
            store.sClear,
            sAssertButtonDisabledState('Disabled', true, button2),
            sAssertButtonActiveState('Off still', false, button2)
          ]);
        })(),