TypeScript Log.chainsAsStep方法代碼示例

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

});

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('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('Editor alignment toolbar buttons test', (success, failure) => {
  Theme();

  Pipeline.async({}, [
    Log.chainsAsStep('TBA', 'Testing toolbar: toolbar alignment buttons', [
      NamedChain.asChain([
        NamedChain.writeValue('body', Body.body()),
        NamedChain.write('editor', McEditor.cFromSettings({
          toolbar: 'alignleft aligncenter alignright alignjustify alignnone',
          theme: 'silver',
          base_url: '/project/tinymce/js/tinymce'
        })),
        NamedChain.direct('body', UiFinder.cWaitForVisible('Waiting for menubar', '.tox-menubar'), '_menubar'),
        NamedChain.direct('body', cExtractOnlyOne('.tox-toolbar'), 'toolbar'),
        NamedChain.direct('toolbar', Assertions.cAssertStructure(
          'Checking toolbar should have just alignment buttons',
          ApproxStructure.build((s, str, arr) => {
            return s.element('div', {
              classes: [ arr.has('tox-toolbar') ],
              children: [
                s.element('div', {
                  classes: [ arr.has('tox-toolbar__group') ],
                  children: [
                    s.element('button', {
                      attrs: { title: str.is('Align left')}
                    }),
                    s.element('button', {
                      attrs: { title: str.is('Align center')}
                    }),
                    s.element('button', {
                      attrs: { title: str.is('Align right')}
                    }),
                    s.element('button', {
                      attrs: { title: str.is('Justify')}
                    }),
                    s.element('button', {
                      attrs: { title: str.is('No alignment')}
                    }),
                  ]
                })
              ]
            });
          })
        ), Id.generate('')),
        NamedChain.direct('editor', McEditor.cRemove, Id.generate('')),
        NamedChain.bundle(Result.value)
      ])
    ])
  ], 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('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);
});

UnitTest.asynctest('Editor (Silver) test', (success, failure) => {
  // Theme();

  const cCreateEditorWithMenubar = (menubar) => McagarEditor.cFromSettings({
    menubar,
    theme: 'silver',
    base_url: '/project/tinymce/js/tinymce',
  });

  const cAssertIsDefaultMenubar = Assertions.cAssertStructure(
    'Checking structure of tox-menubar is "default"',
    ApproxStructure.build((s, str, arr) => {
      return s.element('div', {
        classes: [ arr.has('tox-menubar') ],
        children: Arr.map([ 'File', 'Edit', 'View', 'Format' ], (x) =>
          s.element('button', {
            children: [
              s.element('span', {
                html: str.is(x)
              }),
              // chevron
              s.element('div', { })
            ]
          })
        )
      });
    })
  );

  Pipeline.async({}, [
    Log.chainsAsStep('TBA', 'Testing menubar: false should not create menubar at all', [
      NamedChain.asChain([
        NamedChain.writeValue('body', Body.body()),
        NamedChain.write('editor', cCreateEditorWithMenubar(false)),
        NamedChain.direct('body', UiFinder.cWaitForVisible('Waiting for container', '.tox-tinymce'), '_tiny'),
        NamedChain.direct('body', cCountNumber('.tox-menubar'), 'numMenubars'),
        NamedChain.direct('numMenubars', Assertions.cAssertEq('Should be no menubars', 0), Id.generate('')),
        NamedChain.direct('editor', McagarEditor.cRemove, Id.generate('')),
        NamedChain.bundle(Result.value)
      ])
    ]),

    Log.chainsAsStep('TBA', 'Testing menubar: true should create default menubar', [
      NamedChain.asChain([
        NamedChain.writeValue('body', Body.body()),
        NamedChain.write('editor', cCreateEditorWithMenubar(true)),
        NamedChain.direct('body', UiFinder.cWaitForVisible('Waiting for menubar', '.tox-menubar'), '_menubar'),
        NamedChain.direct('body', cExtractOnlyOne('.tox-menubar'), 'menubar'),
        NamedChain.direct('menubar', cAssertIsDefaultMenubar, Id.generate('')),
        NamedChain.direct('editor', McagarEditor.cRemove, Id.generate('')),
        NamedChain.bundle(Result.value)
      ])
    ]),

    Log.chainsAsStep('TBA', 'Testing menubar: undefined should create default menubar', [
      NamedChain.asChain([
        NamedChain.writeValue('body', Body.body()),
        NamedChain.write('editor', cCreateEditorWithMenubar(undefined)),
        NamedChain.direct('body', UiFinder.cWaitForVisible('Waiting for menubar', '.tox-menubar'), '_menubar'),
        NamedChain.direct('body', cExtractOnlyOne('.tox-menubar'), 'menubar'),
        NamedChain.direct('menubar', cAssertIsDefaultMenubar, Id.generate('')),
        NamedChain.direct('editor', McagarEditor.cRemove, Id.generate('')),
        NamedChain.bundle(Result.value)
      ])
    ]),

    Log.chainsAsStep('TBA', 'Testing menubar: "file edit" should create "file edit" menubar', [
      NamedChain.asChain([
        NamedChain.writeValue('body', Body.body()),
        NamedChain.write('editor', cCreateEditorWithMenubar('file edit')),
        NamedChain.direct('body', UiFinder.cWaitForVisible('Waiting for menubar', '.tox-menubar'), '_menubar'),
        NamedChain.direct('body', cExtractOnlyOne('.tox-menubar'), 'menubar'),
        NamedChain.direct('menubar', Assertions.cAssertStructure(
          'Checking menubar should have just file and edit',
          ApproxStructure.build((s, str, arr) => {
            return s.element('div', {
              classes: [ arr.has('tox-menubar') ],
              children: [
                s.element('button', { }),
                s.element('button', { })
              ]
            });
          })
        ), Id.generate('')),
        NamedChain.direct('editor', McagarEditor.cRemove, Id.generate('')),
        NamedChain.bundle(Result.value)
      ])
    ])
  ], () => success(), failure);
});

UnitTest.asynctest('browser.tinymce.plugins.image.core.ImageDataTest', (success, failure) => {
  const cSetHtml = (html) => {
    return Chain.control(
      Chain.op(function (elm: Element) {
        Html.set(elm, html);
      }),
      Guard.addLogging('Set html')
    );
  };

  const normalizeCss = (cssText: string) => {
    const css = DOMUtils.DOM.styles.parse(cssText);
    const newCss = {};

    Arr.each(Obj.keys(css).sort(), (key) => {
      newCss[key] = css[key];
    });

    return DOMUtils.DOM.styles.serialize(newCss);
  };

  const cCreate = (data) => {
    return Chain.control(
      Chain.inject(Element.fromDom(create(normalizeCss, data))),
      Guard.addLogging(`Create ${data}`)
    );
  };
  const cReadFromImage = Chain.control(
    Chain.mapper(function (elm: Element) {
      const img = Node.name(elm) === 'img' ? elm : SelectorFind.descendant(elm, 'img').getOrDie('failed to find image');
      return { model: read(normalizeCss, img.dom()), image: img, parent: elm };
    }),
    Guard.addLogging('Read from image')
  );

  const cWriteToImage = Chain.control(
    Chain.op(function (data: any) {
      write(normalizeCss, data.model, data.image.dom());
    }),
    Guard.addLogging('Write to image')
  );

  const cUpdateModel = (props) => {
    return Chain.control(
      Chain.mapper(function (data: any) {
        return { model: Merger.merge(data.model, props), image: data.image, parent: data.parent };
      }),
      Guard.addLogging('Update data model')
    );
  };

  const cAssertModel = (model) => {
    return Chain.control(
      Chain.op(function (data: any) {
        RawAssertions.assertEq('', model, data.model);
      }),
      Guard.addLogging('Assert model')
    );
  };

  const cAssertStructure = (structure) => {
    return Chain.control(
        Chain.op(function (data: any) {
        Assertions.assertStructure('', structure, data.parent);
      }),
      Guard.addLogging('Assert structure')
    );
  };

  const cAssertImage = Chain.control(
    Chain.op(function (data: any) {
      RawAssertions.assertEq('Should be an image', true, isImage(data.image.dom()));
    }),
    Guard.addLogging('Assert image')
  );

  const cAssertFigure = Chain.op(function (data: any) {
    RawAssertions.assertEq('Parent should be a figure', true, isFigure(data.image.dom().parentNode));
  });

  Pipeline.async({}, [
    Log.step('TBA', 'Image: getStyleValue from image data', Step.sync(() => {
      RawAssertions.assertEq('Should not produce any styles', '', getStyleValue(normalizeCss, defaultData()));
      RawAssertions.assertEq('Should produce border width', 'border-width: 1px;', getStyleValue(normalizeCss, Merger.merge(defaultData(), { border: '1' })));
      RawAssertions.assertEq('Should produce style', 'border-style: solid;', getStyleValue(normalizeCss, Merger.merge(defaultData(), { borderStyle: 'solid' })));
      RawAssertions.assertEq('Should produce style & border', 'border-style: solid; border-width: 1px;', getStyleValue(normalizeCss, Merger.merge(defaultData(), { border: '1', borderStyle: 'solid' })));
      RawAssertions.assertEq('Should produce compact border', 'border: 2px dotted red;', getStyleValue(normalizeCss, Merger.merge(defaultData(), { style: 'border: 1px solid red', border: '2', borderStyle: 'dotted' })));
    })),
    Log.chainsAsStep('TBA', 'Image: Create image from data', [
      cCreate({
        src: 'some.gif',
        alt: 'alt',
        title: 'title',
        width: '100',
        height: '200',
        class: 'class',
        style: 'border: 1px solid red',
        caption: false,
        hspace: '2',
        vspace: '3',
//.........這裏部分代碼省略.........

UnitTest.asynctest('browser.tinymce.plugins.image.FigureResizeTest', (success, failure) => {

  SilverTheme();
  ImagePlugin();

  const cGetBody = Chain.control(
    Chain.mapper(function (editor: any) {
      return TinyDom.fromDom(editor.getBody());
    }),
    Guard.addLogging('Get body')
  );

  const cGetElementSize = Chain.control(
    Chain.mapper(function (elm: any) {
      const elmStyle = elm.dom().style;
      return { w: elmStyle.width, h: elmStyle.height };
    }),
    Guard.addLogging('Get element size')
);

  const cDragHandleRight = function (px) {
    return Chain.control(
      Chain.op(function (input: any) {
        const dom = input.editor.dom;
        const target = input.resizeSE.dom();
        const pos = dom.getPos(target);

        dom.fire(target, 'mousedown', { screenX: pos.x, screenY: pos.y });
        dom.fire(target, 'mousemove', { screenX: pos.x + px, screenY: pos.y });
        dom.fire(target, 'mouseup');
      }),
      Guard.addLogging('Drag handle right')
    );
  };

  Pipeline.async({}, [
    Log.chainsAsStep('TBA', 'Image: resizing image in figure', [
      McEditor.cFromSettings({
        theme: 'silver',
        plugins: 'image',
        toolbar: 'image',
        indent: false,
        image_caption: true,
        height: 400,
        base_url: '/project/tinymce/js/tinymce'
      }),
      UiChains.cClickOnToolbar('click image button', 'button[aria-label="Insert/edit image"]'),

      Chain.control(
        cFillActiveDialog({
          src: {
            value: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
          },
          dimensions: {
            width: '100px',
            height: '100px',
          },
          caption: true
        }),
        Guard.tryUntil('Waiting for fill active dialog', 100, 5000)
      ),
      UiChains.cSubmitDialog(),
      NamedChain.asChain([
        NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
        NamedChain.direct('editor', cGetBody, 'editorBody'),
        // click the image, but expect the handles on the figure
        NamedChain.direct('editorBody', UiFinder.cFindIn('figure > img'), 'img'),
        NamedChain.direct('img', Mouse.cTrueClick, '_'),
        NamedChain.direct(NamedChain.inputName(), ApiChains.cAssertSelection([], 0, [], 1), '_'),
        NamedChain.direct('editorBody', Chain.control(
          UiFinder.cFindIn('#mceResizeHandlese'),
          Guard.tryUntil('wait for resize handlers', 100, 40000)
        ), '_'),
        // actually drag the handle to the right
        NamedChain.direct('editorBody', UiFinder.cFindIn('#mceResizeHandlese'), 'resizeSE'),
        NamedChain.write('_', cDragHandleRight(100)),
        NamedChain.direct('img', cGetElementSize, 'imgSize'),
        NamedChain.direct('imgSize', Assertions.cAssertEq('asserting image size after resize', { w: '200px', h: '200px' }), '_'),
        NamedChain.output('editor')
      ]),
      McEditor.cRemove
    ])
  ], function () {
    success();
  }, failure);
});

UnitTest.asynctest('Editor (Silver) test', (success, failure) => {
  // Theme();

  const cCreateEditorWithToolbar = (toolbarVal, toolbarVal1?, toolbarVal2?, toolbarVal9?, toolbarVal20?) => McagarEditor.cFromSettings({
    toolbar: toolbarVal,
    toolbar1: toolbarVal1,
    toolbar2: toolbarVal2,
    toolbar9: toolbarVal9,
    toolbar20: toolbarVal20,
    theme: 'silver',
    base_url: '/project/tinymce/js/tinymce',
  });

  const cAssertIsDefaultToolbar = Assertions.cAssertStructure(
    'Checking structure of tox-toolbar is "default"',
    ApproxStructure.build((s, str, arr) => {
      return s.element('div', {
        classes: [ arr.has('tox-toolbar') ],
        children: Arr.map([ 1, 2, 3, 4, 5], (_) => // Technically meant to be 6 groups by default but the link and image plugins aren't loaded here so whatever
          s.element('div', { classes: [ arr.has('tox-toolbar__group') ] }))
      });
    })
  );

  Pipeline.async({}, [
    Log.chainsAsStep('TBA', 'Testing toolbar: false should not create toolbar at all', [
      NamedChain.asChain([
        NamedChain.writeValue('body', Body.body()),
        NamedChain.write('editor', cCreateEditorWithToolbar(false)),
        NamedChain.direct('body', UiFinder.cWaitForVisible('Waiting for menubar', '.tox-menubar'), '_menubar'),
        NamedChain.direct('body', cCountNumber('.tox-toolbar'), 'numToolbars'),
        NamedChain.direct('numToolbars', Assertions.cAssertEq('Should be no toolbars', 0), Id.generate('')),
        NamedChain.direct('editor', McagarEditor.cRemove, Id.generate('')),
        NamedChain.bundle(Result.value)
      ])
    ]),

    Log.chainsAsStep('TBA', 'Testing toolbar: true should create default toolbar', [
      NamedChain.asChain([
        NamedChain.writeValue('body', Body.body()),
        NamedChain.write('editor', cCreateEditorWithToolbar(true)),
        NamedChain.direct('body', UiFinder.cWaitForVisible('Waiting for menubar', '.tox-menubar'), '_menubar'),
        NamedChain.direct('body', cExtractOnlyOne('.tox-toolbar'), 'toolbar'),
        NamedChain.direct('toolbar', cAssertIsDefaultToolbar, Id.generate('')),
        NamedChain.direct('editor', McagarEditor.cRemove, Id.generate('')),
        NamedChain.bundle(Result.value)
      ])
    ]),

    Log.chainsAsStep('TBA', 'Testing toolbar: undefined should create default toolbar', [
      NamedChain.asChain([
        NamedChain.writeValue('body', Body.body()),
        NamedChain.write('editor', cCreateEditorWithToolbar(undefined)),
        NamedChain.direct('body', UiFinder.cWaitForVisible('Waiting for menubar', '.tox-menubar'), '_menubar'),
        NamedChain.direct('body', cExtractOnlyOne('.tox-toolbar'), 'toolbar'),
        NamedChain.direct('toolbar', cAssertIsDefaultToolbar, Id.generate('')),
        NamedChain.direct('editor', McagarEditor.cRemove, Id.generate('')),
        NamedChain.bundle(Result.value)
      ])
    ]),

    Log.chainsAsStep('TBA', 'Testing toolbar: "bold italic" should create "bold italic" toolbar', [
      NamedChain.asChain([
        NamedChain.writeValue('body', Body.body()),
        NamedChain.write('editor', cCreateEditorWithToolbar('bold italic')),
        NamedChain.direct('body', UiFinder.cWaitForVisible('Waiting for menubar', '.tox-menubar'), '_menubar'),
        NamedChain.direct('body', cExtractOnlyOne('.tox-toolbar'), 'toolbar'),
        NamedChain.direct('toolbar', Assertions.cAssertStructure(
          'Checking toolbar should have just bold and italic',
          ApproxStructure.build((s, str, arr) => {
            return s.element('div', {
              classes: [ arr.has('tox-toolbar') ],
              children: [
                s.element('div', {
                  classes: [ arr.has('tox-toolbar__group') ],
                  children: [
                    s.element('button', { }),
                    s.element('button', { })
                  ]
                })
              ]
            });
          })
        ), Id.generate('')),
        NamedChain.direct('editor', McagarEditor.cRemove, Id.generate('')),
        NamedChain.bundle(Result.value)
      ])
    ]),

    Log.chainsAsStep('TBA', 'Testing toolbar: "bold italic | stufffffed | strikethrough underline" should create "bold italic | strikethrough underline" toolbar', [
      NamedChain.asChain([
        NamedChain.writeValue('body', Body.body()),
        NamedChain.write('editor', cCreateEditorWithToolbar('bold italic | stufffffed | strikethrough underline')),
        NamedChain.direct('body', UiFinder.cWaitForVisible('Waiting for menubar', '.tox-menubar'), '_menubar'),
        NamedChain.direct('body', cExtractOnlyOne('.tox-toolbar'), 'toolbar'),
        NamedChain.direct('toolbar', Assertions.cAssertStructure(
          'Checking toolbar should have just bold and italic',
          ApproxStructure.build((s, str, arr) => {
            return s.element('div', {
              classes: [ arr.has('tox-toolbar') ],
//.........這裏部分代碼省略.........