TypeScript agar.UnitTest类代码示例

UnitTest.test('DialogChanges', () => {
  Logger.sync(
    'Quick Toolbars plugin: Quick Toolbars Editor Settings and default values',
    () => {

      const test = (label: string, method: (editor: Editor) => string, settings: any, expected: string) => {
        const mockEditor = {
          getParam: (name, defaultValue) => Obj.get(settings, name).getOr(defaultValue),
          settings
        } as any;

        Logger.sync(label, () => {
          const result = method(mockEditor);
          RawAssertions.assertEq(label, expected, result);
        });
      };

      test('getTextSelectionToolbarItems: testing for empty string should return empty string',
        Settings.getTextSelectionToolbarItems,
        {
          quickbars_selection_toolbar: ''
        },
        ''
      );

      test('getTextSelectionToolbarItems: testing for boolean false should return empty string',
        Settings.getTextSelectionToolbarItems,
        {
          quickbars_selection_toolbar: false
        },
        ''
      );

      test('getTextSelectionToolbarItems: testing for boolean true should fallback to defaults',
        Settings.getTextSelectionToolbarItems,
        {
          quickbars_selection_toolbar: true
        },
        'bold italic | quicklink h2 h3 blockquote'
      );

      test('getTextSelectionToolbarItems: testing for undefined should fallback to defaults',
        Settings.getTextSelectionToolbarItems,
        {
          // intentionally blank undefined
        },
        'bold italic | quicklink h2 h3 blockquote'
      );

      test('getTextSelectionToolbarItems: testing for custom config string',
        Settings.getTextSelectionToolbarItems,
        {
          quickbars_selection_toolbar: 'hello | friend'
        },
        'hello | friend'
      );

      test('getInsertToolbarItems: testing for empty string should return empty string',
        Settings.getInsertToolbarItems,
        {
          quickbars_insert_toolbar: ''
        },
        ''
      );

      test('getInsertToolbarItems: testing for boolean false should return empty string',
        Settings.getInsertToolbarItems,
        {
          quickbars_insert_toolbar: false
        },
        ''
      );

      test('getInsertToolbarItems: testing for boolean true should fallback to defaults',
        Settings.getInsertToolbarItems,
        {
          quickbars_insert_toolbar: true
        },
        'quickimage quicktable'
      );

      test('getInsertToolbarItems: testing for undefined should fallback to defaults',
        Settings.getInsertToolbarItems,
        {
          // intentionally blank undefined
        },
        'quickimage quicktable'
      );

      test('getInsertToolbarItems: testing for custom config string',
        Settings.getInsertToolbarItems,
        {
          quickbars_insert_toolbar: 'bye | now'
        },
        'bye | now'
      );

    }
  );
});

UnitTest.asynctest('Silver fixed_toolbar_container test', (success, failure) => {

  const toolbarContainer = Element.fromHtml('<div id="toolbar" style="margin: 50px 0;"></div>');
  Insert.append(Body.body(), toolbarContainer);

  const sToolbarTest = () => Assertions.sAssertStructure(
    'Container structure',
    ApproxStructure.build((s, str, arr) => {
      return s.element('div', {
        classes: [ ],
        children: [
          s.element('div', {
            classes: [ arr.has('tox'), arr.has('tox-tinymce'), arr.has('tox-tinymce-inline') ],
            children: [
              s.element('div', {
                classes: [ arr.has('tox-editor-container') ],
                children: [
                  s.element('div', {
                    classes: [ arr.has('tox-menubar') ],
                    attrs: { role: str.is('menubar') },
                    children: [
                      s.element('button', {
                        classes: [ arr.has('tox-mbtn'), arr.has('tox-mbtn--select') ],
                        children: [
                          s.element('span', {
                            classes: [ arr.has('tox-mbtn__select-label') ],
                            html: str.is('File')
                          }),
                          s.element('div', {
                            classes: [ arr.has('tox-mbtn__select-chevron') ],
                            children: [
                              s.element('svg', { })
                            ]
                          }),
                        ]
                      })
                    ]
                  }),

                  s.element('div', {
                    classes: [ arr.has('tox-toolbar') ],
                    attrs: { role: str.is('group') },
                    children: [
                      s.element('div', {
                        classes: [ arr.has('tox-toolbar__group') ],
                        children: [
                          s.element('button', {
                            classes: [ arr.has('tox-tbtn'), arr.not('tox-btn--enabled') ],
                            attrs: {
                              'aria-label': str.is('Undo')
                            }
                          }),
                          s.element('button', {
                            classes: [ arr.has('tox-tbtn'), arr.not('tox-btn--enabled') ],
                            attrs: {
                              'aria-label': str.is('Bold')
                            }
                          }),
                        ]
                      })
                    ]
                  })
                ]
              }),
              s.element('div', {
                classes: [ arr.has('tox-throbber') ]
              })
            ]
          }),
          s.element('div', {
            classes: [ arr.has('tox'), arr.has('tox-silver-sink'), arr.has('tox-tinymce-aux')]
          })
        ]
      });
    }),
    toolbarContainer
  );

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

      Pipeline.async({ }, [
        tinyApis.sSetContent('fixed_toolbar_container test'),
        tinyApis.sFocus,
        sToolbarTest(),
      ], onSuccess, onFailure);
    }, {
      theme: 'silver',
      inline: true,
      fixed_toolbar_container: '#toolbar',
      menubar: 'file',
      toolbar: 'undo bold',
      base_url: '/project/tinymce/js/tinymce',
    }, () => {
      Remove.remove(toolbarContainer);
      success();
    },
    failure
  );
});

UnitTest.asynctest('All image dialog ui options on empty editor' + (Env.ceFalse ? '' : ' (old IE)'), (success, failure) => {
  SilverTheme();
  ImagePlugin();
  Pipeline.async({}, [
    Log.chainsAsStep('TBA', 'Image: all image dialog ui options on empty editor' + (Env.ceFalse ? '' : ' (old IE)'), [
      Editor.cFromSettings({
        ...silverSettings,
        image_caption: true,
        image_list: [
          { title: 'link1', value: 'link1' },
          { title: 'link2', value: 'link2' }
        ],
        image_class_list: [
          { title: 'None', value: '' },
          { title: 'class1', value: 'class1' },
          { title: 'class2', value: 'class2' }
        ]
      }),
      cExecCommand('mceImage', true),
      cWaitForDialog(),
      cFillActiveDialog({
        src: { value: 'src' },
        alt: 'alt',
        classIndex: 1,
        dimensions: {
          width: '100',
          height: '200'
        },
        caption: true
      }),
      cSubmitDialog(),
      cAssertCleanHtml('Checking output', (() => {
        if (Env.ceFalse) {
          return (
            '<figure class="image">' +
            '<img class="class1" src="src" alt="alt" width="100" height="200" />' +
            '<figcaption>Caption</figcaption>' +
            '</figure>'
          );
        } else { // old IE
          return (
            '<p><img class="class1" src="src" alt="alt" width="100" height="200" /></p>'
          );
        }
      })()),
      Editor.cRemove
    ])
  ], () => success(), failure);
});

UnitTest.asynctest('Default image dialog on empty data', (success, failure) => {
  SilverTheme();
  ImagePlugin();
  Pipeline.async({}, [
    Log.chainsAsStep('TBA', 'Image: default image dialog on empty data', [
      Editor.cFromSettings(silverSettings),
      cExecCommand('mceImage', true),
      cWaitForDialog(),
      Chain.fromParent(Chain.identity, [
        cAssertInputValue(generalTabSelectors.src, ''),
        cAssertInputValue(generalTabSelectors.alt, ''),
        cAssertInputValue(generalTabSelectors.height, ''),
        cAssertInputValue(generalTabSelectors.width, '')
      ]),
      cFillActiveDialog({
        src: {
          value: 'src'
        },
        alt: 'alt',
        dimensions: {
          width: '200',
          height: '100'
        }
      }),
      cSubmitDialog(),
      cAssertCleanHtml('Checking output', '<p><img src="src" alt="alt" width="200" height="100" /></p>'),
      Editor.cRemove
    ])
  ], () => success(), failure);
});

UnitTest.asynctest('browser.tinymce.plugins.image.ContextMenuTest', (success, failure) => {
  SilverTheme();
  ImagePlugin();

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

    const rootDoc = Element.fromDom(document);

    const sOpenContextMenu = (target) => {
      return Chain.asStep(editor, [
        tinyUi.cTriggerContextMenu('trigger image context menu', target, '.tox-silver-sink [role="menuitem"]'),
        // Not sure why this is needed, but without the browser deselects the contextmenu target
        Chain.wait(0)
      ]);
    };

    const sWaitForAndSubmitDialog = Chain.asStep(editor, [
      tinyUi.cWaitForPopup('wait for dialog', 'div[role="dialog"]'),
      Mouse.cClickOn('.tox-button:contains("Save")')
    ]);

    Pipeline.async({}, [
      tinyApis.sFocus,
      Log.stepsAsStep('TBA', 'Opening context menus on a selected figure', [
        tinyApis.sSetRawContent('<figure class="image" contenteditable="false"><img src="image.png"><figcaption contenteditable="true">Caption</figcaption></figure><p>Second paragraph</p>'),
        tinyApis.sSetSelection([], 0, [], 1),
        sOpenContextMenu('figure.image'),
        Keyboard.sKeydown(rootDoc, Keys.enter(), {}),
        sWaitForAndSubmitDialog,
        tinyApis.sAssertSelection([], 0, [], 1)
      ]),
      Log.stepsAsStep('TBA', 'Opening context menus on an unselected figure', [
        tinyApis.sSetRawContent('<figure class="image" contenteditable="false"><img src="image.png"><figcaption contenteditable="true">Caption</figcaption></figure><p>Second paragraph</p>'),
        tinyApis.sSetSelection([1, 0], 1, [1, 0], 1),
        sOpenContextMenu('figure.image'),
        Keyboard.sKeydown(rootDoc, Keys.enter(), {}),
        sWaitForAndSubmitDialog,
        tinyApis.sAssertSelection([], 0, [], 1)
      ]),
      Log.stepsAsStep('TBA', 'Opening context menus on a selected image', [
        tinyApis.sSetRawContent('<p><img src="image.png" /></p><p>Second paragraph</p>'),
        tinyApis.sSetSelection([0], 0, [0], 1),
        sOpenContextMenu('img'),
        Keyboard.sKeydown(rootDoc, Keys.enter(), {}),
        sWaitForAndSubmitDialog,
        tinyApis.sAssertSelection([0], 0, [0], 1)
      ]),
      Log.stepsAsStep('TBA', 'Opening context menus on an unselected image', [
        tinyApis.sSetRawContent('<p><img src="image.png" /></p><p>Second paragraph</p>'),
        tinyApis.sSetSelection([1, 0], 1, [1, 0], 1),
        sOpenContextMenu('img'),
        Keyboard.sKeydown(rootDoc, Keys.enter(), {}),
        sWaitForAndSubmitDialog,
        tinyApis.sAssertSelection([0], 0, [0], 1)
      ])
    ], onSuccess, onFailure);
  }, {
    theme: 'silver',
    plugins: 'image',
    toolbar: 'image',
    indent: false,
    base_url: '/project/tinymce/js/tinymce',
    image_caption: true
  }, success, failure);
});

} from '../../module/Helpers';

UnitTest.asynctest('Image recognizes relative src url and prepends relative image_prepend_url setting.', (success, failure) => {
  SilverTheme();
  ImagePlugin();
  const prependUrl = 'testing/images/';
  Pipeline.async({}, [
    Log.chainsAsStep('TBA', 'Image: image recognizes relative src url and prepends relative image_prepend_url setting.', [
      Editor.cFromSettings({
        ...silverSettings,
        image_prepend_url: prependUrl
      }),
      cExecCommand('mceImage', true),
      cWaitForDialog(),
      cFillActiveDialog({
        src: {
          value: 'src'
        },
        alt: 'alt'
      }),
      cOpFromChains([
        Chain.inject(Body.body()),
        UiFinder.cFindIn(generalTabSelectors.src),
        cFakeEvent('change')
      ]),
      cSubmitDialog(),
      cAssertCleanHtml('Checking output', '<p><img src="' + prependUrl + 'src" alt="alt" /></p>'),
      Editor.cRemove
    ])
  ], () => success(), failure);
});

UnitTest.asynctest('browser.tinymce.plugins.table.ContextMenuTest', (success, failure) => {
  SilverTheme();
  TablePlugin();

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

    const doc = Element.fromDom(document);
    const body = Body.body();
    const editorBody = Element.fromDom(editor.getBody());

    const sOpenContextMenu = (target: string) => {
      return Chain.asStep(editor, [
        tinyUi.cTriggerContextMenu('trigger context menu', target, '.tox-silver-sink [role="menuitem"]'),
        Chain.wait(0)
      ]);
    };

    const sAssertFocusOnItem = (label: string, selector: string) => {
      return FocusTools.sTryOnSelector(`Focus should be on: ${label}`, doc, selector);
    };

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

    const sPressDownArrowKey = Keyboard.sKeydown(doc, Keys.down(), { });
    const sPressEnterKey = Keyboard.sKeydown(doc, Keys.enter(), { });

    const sRepeatDownArrowKey = (index) => {
      return GeneralSteps.sequence(Arr.range(index, () => sPressDownArrowKey));
    };

    // 'index' points to the context menuitems while 'subindex' points to the sub menuitems
    const sSelectContextMenu = (label: string, selector: string, index: number, subindex: number) => {
      return GeneralSteps.sequence([
        sOpenContextMenu('td'),
        sRepeatDownArrowKey(subindex),
        Keyboard.sKeydown(doc, Keys.right(), {}),
        sRepeatDownArrowKey(index),
        sAssertFocusOnItem(label, selector),
        sPressEnterKey
      ]);
    };

    const sSelectCellContextMenu = (label, selector, index) => sSelectContextMenu(label, selector, index, 0);
    const sSelectRowContextMenu = (label, selector, index) => sSelectContextMenu(label, selector, index, 1);
    const sSelectColumnContextMenu = (label, selector, index) => sSelectContextMenu(label, selector, index, 2);

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

    const tableWithCaptionHtml = '<table style="width: 100%;">' +
      '<caption>Caption</caption>' +
      '<tbody>' +
        '<tr>' +
          '<td></td>' +
          '<td></td>' +
        '</tr>' +
      '</tbody>' +
    '</table>';

    // Using a different table to test merge cells as selection using keydown (shift + arrow keys) does not work on Edge for some reason.
    // TODO: Investigate why selection does not work on Edge.
    const mergeTableHtml = '<table style="width: 100%;">' +
      '<tbody>' +
        '<tr>' +
          '<td data-mce-selected="1" data-mce-first-selected="1">a1</td>' +
          '<td>a2</td>' +
        '</tr>' +
        '<tr>' +
          '<td data-mce-selected="1" data-mce-last-selected="1">b1</td>' +
          '<td>b2</td>' +
        '</tr>' +
      '</tbody>' +
    '</table>';

    const sAssertHtmlStructure = (label: string, expectedHtml: string) => Assertions.sAssertStructure(label, ApproxStructure.build((s) => {
      return s.element('body', {
        children: [
          ApproxStructure.fromHtml(expectedHtml),
          s.theRest()
//.........这里部分代码省略.........

UnitTest.asynctest('Menu group heading test', (success, failure) => {
  Theme();

  TinyLoader.setup(
    (editor, onSuccess, onFailure) => {
      const tinyUi = TinyUi(editor);
      const container = Element.fromDom(editor.getContainer());

      Pipeline.async({ }, Logger.ts(
        'Check basic structure and actions',
        [
          Log.stepsAsStep('TINY-2226', 'Menu should contain a group heading with the correct classes and text', [
            Mouse.sClickOn(container, '.tox-toolbar button'),
            tinyUi.sWaitForUi('Wait for styleselect menu', '.tox-menu.tox-collection'),
            Chain.asStep(Body.body(), [
              UiFinder.cFindIn('.tox-menu.tox-collection'),
              Assertions.cAssertStructure(
                'Container structure',
                ApproxStructure.build((s, str, arr) => {
                  return s.element('div', {
                    classes: [ arr.has('tox-menu'), arr.has('tox-collection'), arr.has('tox-collection--list'), arr.has('tox-selected-menu') ],
                    children: [
                      s.element('div', {
                        classes: [ arr.has('tox-collection__group')],
                        children: [
                          s.element('div', {
                            classes: [ arr.has('tox-menu-nav__js'), arr.has('tox-collection__item') ]
                          })
                        ]
                      }),
                      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('Table styles')) ]
                          }),
                          s.element('div', {
                            classes: [ arr.has('tox-menu-nav__js'), arr.has('tox-collection__item') ]
                          })
                        ]
                      })
                    ]
                  });
                }),
              ),
            ])
          ])
        ]
      ), onSuccess, onFailure);
    },
    {
      theme: 'silver',
      base_url: '/project/tinymce/js/tinymce',
      toolbar: 'styleselect',
      menubar: false,
      style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
      ],
    },
    () => {
      success();
    },
    failure
  );
});

UnitTest.asynctest('SilverContextMenuTest', (success, failure) => {
  SilverTheme();
  LinkPlugin();
  ImagePlugin();
  ImageToolsPlugin();
  TablePlugin();

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

    const doc = Element.fromDom(document);
    const editorBody = Element.fromDom(editor.getBody());

    const sOpenContextMenu = (target) => {
      return Chain.asStep(editor, [
        tinyUi.cTriggerContextMenu('trigger context menu', target, '.tox-silver-sink [role="menuitem"]'),
        Chain.wait(0)
      ]);
    };

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

    // Wait for dialog to open and close dialog
    const sWaitForAndCloseDialog = 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(TinyDom.fromDom(document.body), 'div[role="dialog"]'), 50, 5000
      )
    ]);

    const sPressDownArrowKey = Keyboard.sKeydown(doc, Keys.down(), { });
    const sPressEnterKey = Keyboard.sKeydown(doc, Keys.enter(), { });

    const sRepeatDownArrowKey = (index) => {
      return GeneralSteps.sequence(Arr.range(index, () => sPressDownArrowKey));
    };

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

    const imgSrc = '../img/dogleft.jpg';

    const contentInTableHtml = (content: string) => {
      return '<table style="width: 100%;">' +
       '<tbody>' +
          '<tr>' +
            `<td>${content}</td>` +
          '</tr>' +
        '</tbody>' +
      '</table>';
    };

    const imageInTableHtml = contentInTableHtml('<img src="' + imgSrc + '" width="160" height="100"/>');
    const placeholderImageInTableHtml = contentInTableHtml('<img src="' + imgSrc + '" width="160" height="100" data-mce-placeholder="1"/>');
    const linkInTableHtml = contentInTableHtml('<a href="http://tiny.cloud/">Tiny</a>');

    // In Firefox we add a a bogus br element after the link that fixes a gecko link bug when,
    // a link is placed at the end of block elements there is no way to move the caret behind the link.
    const sAssertRemoveLinkHtmlStructure = Assertions.sAssertStructure('Assert remove link', ApproxStructure.build((s, str) => {
      return s.element('body', {
        children: [
          s.element('p', {
            children: [
              s.text(str.is('Tiny')),
              s.zeroOrOne(s.element('br', {}))
            ]
          })
        ]
      });
    }), editorBody);

    Pipeline.async({}, [
      tinyApis.sFocus,
      Log.stepsAsStep('TBA', 'Test context menus on empty editor', [
        sOpenContextMenu('p'),
        sAssertFocusOnItem('Link', '.tox-collection__item:contains("Link...")'),
        sPressEnterKey,
        sWaitForAndCloseDialog
      ]),
      Log.stepsAsStep('TBA', 'Test context menus on a link', [
        tinyApis.sSetContent('<p><a href="http://tiny.cloud/">Tiny</a></p>'),
        tinyApis.sSetSelection([ 0, 0, 0 ], 'Ti'.length, [ 0, 0, 0 ], 'Ti'.length),
//.........这里部分代码省略.........

  cAssertCleanHtml,
  cExecCommand,
  cFillActiveDialog,
  cSubmitDialog,
  cWaitForDialog,
  silverSettings,
} from '../../module/Helpers';

UnitTest.asynctest('Image dialog image_dimensions: false', (success, failure) => {
  SilverTheme();
  ImagePlugin();
  Pipeline.async({}, [
    Log.chainsAsStep('TBA', 'Image: image dialog image_dimensions: false', [
      Editor.cFromSettings({
        ...silverSettings,
        image_dimensions: false
      }),
      cExecCommand('mceImage', true),
      cWaitForDialog(),
      cFillActiveDialog({
        src: {
          value: 'src'
        },
        alt: 'alt'
      }),
      cSubmitDialog(),
      cAssertCleanHtml('Checking output', '<p><img src="src" alt="alt" /></p>'),
      Editor.cRemove
    ])
  ], () => success(), failure);
});