TypeScript NamedChain.output方法代碼示例

 const makeStep = (config, label, expected) => {
   return Chain.asStep({}, [
     McEditor.cFromSettings(config),
     NamedChain.asChain([
       NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
       NamedChain.direct('editor', cSetContent('<p>Hello world!</p>'), ''),
       NamedChain.direct('editor', cGetBodyDir, 'editorBodyDirectionality'),
       NamedChain.direct('editorBodyDirectionality', Assertions.cAssertEq(label, expected), 'assertion'),
       NamedChain.output('editor')
     ]),
     McEditor.cRemove
   ]);
 };

 const cGetImageSources = (label) => {
   return NamedChain.asChain(
     [
       NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
       Chain.label('Store img src before flip', NamedChain.write('srcBeforeFlip', cGetImageSrc)),
       Chain.label('Flip image', NamedChain.read('editor', cClickContextToolbarButton(label))),
       // Wait for image to flip
       Chain.wait(500),
       Chain.label('Store img src after flip', NamedChain.write('srcAfterFlip', cGetImageSrc)),
       NamedChain.merge(['srcBeforeFlip', 'srcAfterFlip'], 'urls'),
       NamedChain.output('urls')
     ]
   );
 };

 const cUnmergeCellsMeasureTableWidth = (label, data) => {
   return Log.chain('TBA', 'Merge and unmerge cells, measure table widths', NamedChain.asChain(
      [
       NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
       Chain.label('Insert table', NamedChain.direct('editor', cInsertTable(label, data.html), 'element')),
       Chain.label('Drag SE (-100, 0)', NamedChain.read('editor', TableTestUtils.cDragHandle('se', -100, 0))),
       Chain.label('Store width before merge', NamedChain.write('widthBefore', TableTestUtils.cGetWidth)),
       Chain.label('Merge table cells', NamedChain.read('editor', TableTestUtils.cMergeCells(data.select))),
       Chain.label('Split table cells', NamedChain.read('editor', TableTestUtils.cSplitCells)),
       Chain.label('Store width after merge/unmerge', NamedChain.write('widthAfter', TableTestUtils.cGetWidth)),
       NamedChain.merge(['widthBefore', 'widthAfter'], 'widths'),
       NamedChain.output('widths')
     ]
   ));
 };

 const cInsertColumnMeasureWidth = (label, data) => {
   return Log.chain('TBA', 'Insert column before, insert column after, erase column and measure table widths', NamedChain.asChain(
     [
       NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
       Chain.label('Insert table', NamedChain.direct('editor', cInsertTable(label, data.html), 'element')),
       Chain.label('Drag SE (-100, 0)', NamedChain.read('editor', TableTestUtils.cDragHandle('se', -100, 0))),
       Chain.label('Store width before split', NamedChain.write('widthBefore', TableTestUtils.cGetWidth)),
       Chain.label('Insert column before', NamedChain.read('editor', TableTestUtils.cInsertColumnBefore)),
       Chain.label('Insert column after', NamedChain.read('editor', TableTestUtils.cInsertColumnAfter)),
       Chain.label('Delete column', NamedChain.read('editor', TableTestUtils.cDeleteColumn)),
       Chain.label('Store width after split', NamedChain.write('widthAfter', TableTestUtils.cGetWidth)),
       NamedChain.merge(['widthBefore', 'widthAfter'], 'widths'),
       NamedChain.output('widths')
     ]
   ));
 };

 const makeStep = (config, label, editorStructure) => {
   return Chain.asStep({}, [
     McEditor.cFromSettings(config),
     NamedChain.asChain([
       NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
       NamedChain.direct('editor', cSetContent('<p>Hello world!</p>'), ''),
       NamedChain.direct('editor', cGetEditorContainer, 'editorContainer'),
       NamedChain.direct('editorContainer', Assertions.cAssertStructure(
         label,
         editorStructure
       ), 'assertion'),
       NamedChain.output('editor')
     ]),
     McEditor.cRemove
   ]);
 };

 const makeStep = (config, structureLabel, editorStructure) => {
   return Chain.asStep({}, [
     Editor.cFromSettings(config),
     NamedChain.asChain([
       NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
       NamedChain.direct('editor', cSetContent('<p><strong>hello world</strong></p>'), ''),
       NamedChain.direct('editor', Chain.wait(300), ''),
       NamedChain.direct('editor', cGetContainer, 'editorContainer'),
       NamedChain.direct('editorContainer', Assertions.cAssertStructure(
         structureLabel,
         editorStructure
       ), 'assertion'),
       NamedChain.output('editor'),
     ]),
     Editor.cRemove
   ]);
 };

//.........這裏部分代碼省略.........
              s.element('div', { children: [ s.text(str.is(' » ')) ] }),
              s.element('div', { children: [ s.text(str.is('strong')) ] })
            ]
          }),
          s.element('span', {
            classes: [ arr.has('tox-statusbar__branding')],
            children: [
              s.element('a', { children: [ s.text(str.is('Powered by Tiny')) ] })
            ]
          })
        ]
      })
    ];
  };

  const cGetContainer = Chain.mapper((editor: any) => Element.fromDom(editor.editorContainer));

  const cSetContent = (content: string) => Chain.mapper(function (editor: any) {
    return editor.editorCommands.execCommand('mceSetContent', false, content);
  });

  const makeStep = (config, structureLabel, editorStructure) => {
    return Chain.asStep({}, [
      Editor.cFromSettings(config),
      NamedChain.asChain([
        NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
        NamedChain.direct('editor', cSetContent('<p><strong>hello world</strong></p>'), ''),
        NamedChain.direct('editor', Chain.wait(300), ''),
        NamedChain.direct('editor', cGetContainer, 'editorContainer'),
        NamedChain.direct('editorContainer', Assertions.cAssertStructure(
          structureLabel,
          editorStructure
        ), 'assertion'),
        NamedChain.output('editor'),
      ]),
      Editor.cRemove
    ]);
  };

  Pipeline.async({}, [
    Log.step('TBA', 'Full statusbar', makeStep(
      {
        theme: 'silver',
        base_url: '/project/tinymce/js/tinymce',
        plugins: 'wordcount'
      },
      'Full statusbar structure',
      ApproxStructure.build((s, str, arr) => {
        return s.element('div', {
          classes: [ arr.has('tox-tinymce') ],
          children: [
            s.anything(),
            s.element('div', {
              classes: [ arr.has('tox-statusbar')],
              children: fullStatusbarSpec(s, str, arr)
            }),
            s.theRest()
          ]
        });
      })
    )),

    Log.step('TBA', 'Statusbar without wordcount', makeStep(
      {
        theme: 'silver',
        base_url: '/project/tinymce/js/tinymce',

UnitTest.asynctest('browser.tinymce.plugins.image.FigureResizeTest', function () {
  const success = arguments[arguments.length - 2];
  const failure = arguments[arguments.length - 1];

  ModernTheme();
  ImagePlugin();

  const cGetBody = Chain.mapper(function (editor) {
    return TinyDom.fromDom(editor.getBody());
  });

  const cGetElementSize = Chain.mapper(function (elm) {
    const elmStyle = elm.dom().style;
    return { w: elmStyle.width, h: elmStyle.height };
  });

  const cDragHandleRight = function (px) {
    return Chain.op(function (input) {
      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');
    });
  };

  Pipeline.async({}, [
    Chain.asStep({}, [
      Editor.cFromSettings({
        plugins: 'image',
        toolbar: 'image',
        indent: false,
        image_caption: true,
        height: 400,
        skin_url: '/project/js/tinymce/skins/lightgray'
      }),
      UiChains.cClickOnToolbar('click image button', 'div[aria-label="Insert/edit image"]'),
      UiChains.cFillActiveDialog({
        src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
        width: 100,
        height: 100,
        caption: true
      }),
      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')
      ]),
      Editor.cRemove
    ])
  ], function () {
    success();
  }, failure);
});

UnitTest.asynctest('browser.tinymce.plugins.table.ResizeTableTest', (success, failure) => {
  const lastObjectResizeStartEvent = Cell<any>(null);
  const lastObjectResizedEvent = Cell<any>(null);

  Plugin();
  SilverTheme();

  const assertWithin = function (value, min, max) {
    Assertions.assertEq('asserting if value falls within a certain range', true, value >= min && value <= max);
  };

  const cAssertWidths = Chain.op(function (input: any) {
    const expectedPx = input.widthBefore.px - 100;
    const expectedPercent = input.widthAfter.px / input.widthBefore.px * 100;

    // not able to match the percent exactly - there's always a difference in fractions, so lets assert a small range instead
    assertWithin(input.widthAfter.px, expectedPx - 1, expectedPx + 1);
    Assertions.assertEq('table width should be in percents', true, input.widthAfter.isPercent);
    assertWithin(input.widthAfter.raw, expectedPercent - 1, expectedPercent + 1);
  });

  const cBindResizeEvents = Chain.mapper(function (input: any) {
    const objectResizeStart = (e) => {
      lastObjectResizeStartEvent.set(e);
    };

    const objectResized = (e) => {
      lastObjectResizedEvent.set(e);
    };

    input.editor.on('ObjectResizeStart', objectResizeStart);
    input.editor.on('ObjectResized', objectResized);

    return {
      objectResizeStart,
      objectResized
    };
  });

  const cUnbindResizeEvents = Chain.mapper(function (input: any) {
    input.editor.off('ObjectResizeStart', input.events.objectResizeStart);
    input.editor.off('ObjectResized', input.events.objectResized);
    return {};
  });

  const cClearResizeEventData = Chain.op(() => {
    lastObjectResizeStartEvent.set(null);
    lastObjectResizedEvent.set(null);
  });

  const cTableInsertResizeMeasure = NamedChain.asChain([
    NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
    NamedChain.write('events', cBindResizeEvents),
    NamedChain.direct('editor', TableTestUtils.cInsertTable(5, 2), 'element'),
    NamedChain.write('widthBefore', TableTestUtils.cGetWidth),
    NamedChain.read('element', Mouse.cTrueClick),
    NamedChain.read('editor', TableTestUtils.cDragHandle('se', -100, 0)),
    NamedChain.write('widthAfter', TableTestUtils.cGetWidth),
    NamedChain.write('events', cUnbindResizeEvents),
    NamedChain.merge(['widthBefore', 'widthAfter'], 'widths'),
    NamedChain.output('widths')
  ]);

  const cAssertWidthsShouldBe = (unit: string) => Chain.op((input: any) => {
    const expectingPercent = (unit === '%');
    Assertions.assertEq(`table width before resizing is in ${unit}`, expectingPercent, input.widthBefore.isPercent);
    Assertions.assertEq(`table width after resizing is in ${unit}`, expectingPercent, input.widthAfter.isPercent);
  });

  const cAssertEventData = (state, expectedEventName) => Chain.op((_) => {
    Assertions.assertEq('Should be table element', 'TABLE', state.get().target.nodeName);
    Assertions.assertEq('Should be expected resize event', expectedEventName, state.get().type);
    Assertions.assertEq('Should have width', 'number', typeof state.get().width);
    Assertions.assertEq('Should have height', 'number', typeof state.get().height);
  });

  NamedChain.pipeline([
    NamedChain.write('editor', Editor.cFromSettings({
      plugins: 'table',
      width: 400,
      theme: 'silver',
      base_url: '/project/tinymce/js/tinymce',
    })),

    // when table is resized by one of the handlers it should retain the dimension units after the resize, be it px or %
    cClearResizeEventData,
    NamedChain.direct('editor', cTableInsertResizeMeasure, 'widths'),
    NamedChain.read('widths', cAssertWidths),
    cAssertEventData(lastObjectResizeStartEvent, 'objectresizestart'),
    cAssertEventData(lastObjectResizedEvent, 'objectresized'),

    // using configuration option [table_responsive_width=true] we are able to control the default units of the table
    cClearResizeEventData,
    NamedChain.read('editor', ApiChains.cSetContent('')),
    NamedChain.direct('editor', cTableInsertResizeMeasure, 'widths'),
    NamedChain.read('widths', cAssertWidthsShouldBe('%')),
    cAssertEventData(lastObjectResizeStartEvent, 'objectresizestart'),
    cAssertEventData(lastObjectResizedEvent, 'objectresized'),

    cClearResizeEventData,
//.........這裏部分代碼省略.........

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