TypeScript NamedChain.pipeline方法代碼示例

 const step = Step.raw((_, next, die, initLogs) => {
   NamedChain.pipeline([
     NamedChain.write('container', Chain.async((input, n, die) => {
       const container = Element.fromTag('div');
       Attr.set(container, 'id', 'test-container-div');
       Html.set(container, containerHtml);
       Insert.append(Body.body(), container);
       n(container);
     })),
     NamedChain.write('editor', cOnSelector('div.tinymce')),
     NamedChain.direct('container', Chain.fromChains([
       UiFinder.cFindIn('div.tinymce'),
       Mouse.cMouseOver,
       cNotExists(Body.body(), 'div[data-row="0"]')
     ]), '_'),
     NamedChain.read('editor', Editor.cRemove),
     NamedChain.read('container', Chain.op((div) => Remove.remove(div)))
   ], next, die, initLogs);
 });

//.........這裏部分代碼省略.........
        editor.setContent(table);
        const bodyElem = TinyDom.fromDom(editor.getBody());
        const tableElem = UiFinder.findIn(bodyElem, 'table').getOr(bodyElem);
        SelectorFind.descendant(tableElem, 'td,th').each((cell) => {
          editor.selection.select(cell.dom(), true);
          editor.selection.collapse(true);
        });
        return tableElem;
      }),
      Guard.addLogging(`Insert ${label}`)
    );
  };

  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 cMergeResizeUnmergeMeasureWidth = (label, data) => {
    return Log.chain('TBA', 'Merge cells and resize table, unmerge cells 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('Merge table cells', NamedChain.read('editor', TableTestUtils.cMergeCells(data.select))),
        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('Split table cells', NamedChain.read('editor', TableTestUtils.cSplitCells)),
        Chain.label('Store width after split', NamedChain.write('widthAfter', TableTestUtils.cGetWidth)),
        NamedChain.merge(['widthBefore', 'widthAfter'], 'widths'),
        NamedChain.output('widths')
      ]
    ));
  };

  const cAssertWidths = Chain.label(
    'Assert widths before and after unmerge are equal',
    Chain.op((input: any) => {
      Assertions.assertEq('table width should not change', input.widthBefore, input.widthAfter);
    })
  );

  const cAssertWidth = (label, data) => {
    return Chain.label(
      `Assert width of table ${label}`,
      NamedChain.asChain([
        NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
        NamedChain.direct('editor', cUnmergeCellsMeasureTableWidth(label, data), 'widths'),
        NamedChain.read('widths', cAssertWidths)
      ])
    );
  };

  const cMergeResizeSplitAssertWidth = (label, data) => {
    return Chain.label(
      `Assert width of table ${label}`,
      NamedChain.asChain([
        NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
        NamedChain.direct('editor', cMergeResizeUnmergeMeasureWidth(label, data), 'widths'),
        NamedChain.read('widths', cAssertWidths)
      ])
    );
  };

  NamedChain.pipeline(Log.chains('TBA', 'Table: Resize table, merge and split cells, assert the table width does not change', [
    NamedChain.write('editor', Editor.cFromSettings({
      plugins: 'table',
      width: 400,
      theme: 'silver',
      base_url: '/project/tinymce/js/tinymce'
    })),

    NamedChain.read('editor', cAssertWidth('which is empty', emptyTable)),
    NamedChain.read('editor', cAssertWidth('with contents in some cells', contentsInSomeCells)),
    NamedChain.read('editor', cAssertWidth('with contents in all cells', contentsInAllCells)),
    NamedChain.read('editor', cAssertWidth('with headings', tableWithHeadings)),
    NamedChain.read('editor', cAssertWidth('with caption', tableWithCaption)),
    NamedChain.read('editor', cAssertWidth('with nested tables', nestedTables)),

    NamedChain.read('editor', cAssertWidth('with an entire row merged and split', selectedRow)),
    NamedChain.read('editor', cAssertWidth('with one selected cell', singleCell)),
    NamedChain.read('editor', cAssertWidth('with whole table merged and split', mergeWholeTable)),
    NamedChain.read('editor', cMergeResizeSplitAssertWidth('resized after merge and then split', mergeResizeSplit)),

    NamedChain.read('editor', Editor.cRemove)
  ]), function () {
    success();
  }, failure, TestLogs.init());
});

//.........這裏部分代碼省略.........
  const nestedTables = {
    html: '<table style = "width: 100%;">' +
            '<tbody>' +
              '<tr>' +
                '<td>a1' +
                  '<table style = "width: 100%;">' +
                  '<tbody>' +
                    '<tr>' +
                      '<td></td>' +
                      '<td></td>' +
                    '</tr>' +
                    '<tr>' +
                      '<td></td>' +
                      '<td></td>' +
                    '</tr>' +
                  '</tbody>' +
                  '</table>' +
                '</td>' +
                '<td>b1</td>' +
              '</tr>' +
              '<tr>' +
                '<td>a2</td>' +
                '<td>b2</td>' +
              '</tr>' +
            '</tbody>' +
          '</table>'
  };

  const cInsertTable = (label, table) => {
    return Chain.control(
      Chain.mapper((editor: any) => {
        editor.setContent(table);
        const bodyElem = TinyDom.fromDom(editor.getBody());
        const tableElem = UiFinder.findIn(bodyElem, 'table').getOr(bodyElem);
        SelectorFind.descendant(tableElem, 'td,th').each((cell) => {
          editor.selection.select(cell.dom(), true);
          editor.selection.collapse(true);
        });
        return tableElem;
      }),
      Guard.addLogging(`Insert ${label}`)
    );
  };

  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 cAssertWidths = Chain.label(
    'Assert widths before and after insert column are equal',
    Chain.op((input: any) => {
      Assertions.assertEq('table width should not change', input.widthBefore, input.widthAfter);
    })
  );

  const cAssertWidth = (label, data) => {
    return Chain.label(
      `Assert width of table ${label} after inserting column`,
      NamedChain.asChain([
        NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
        NamedChain.direct('editor', cInsertColumnMeasureWidth(label, data), 'widths'),
        NamedChain.read('widths', cAssertWidths)
      ])
    );
  };

  NamedChain.pipeline(Log.chains('TBA', 'Table: Insert columns, erase column and assert the table width does not change', [
    NamedChain.write('editor', Editor.cFromSettings({
      plugins: 'table',
      width: 400,
      theme: 'silver',
      base_url: '/project/tinymce/js/tinymce'
    })),

    NamedChain.read('editor', cAssertWidth('which is empty', emptyTable)),
    NamedChain.read('editor', cAssertWidth('with contents in some cells', contentsInSomeCells)),
    NamedChain.read('editor', cAssertWidth('with contents in all cells', contentsInAllCells)),
    NamedChain.read('editor', cAssertWidth('with headings', tableWithHeadings)),
    NamedChain.read('editor', cAssertWidth('with caption', tableWithCaption)),
    NamedChain.read('editor', cAssertWidth('with nested tables', nestedTables)),

    NamedChain.read('editor', Editor.cRemove)
  ]),
   function () {
    success();
  }, failure, TestLogs.init());
});

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.table.InlineEditorInsideTableTest', (success, failure) => {
  Plugin();
  Theme();

  const containerHtml = '<table>' +
  '<tbody>' +
  '<tr>' +
  '<td>' +
  '<div class="tinymce" style="border: 1px gray solid">a</div>' +
  '</td>' +
  '</tr>' +
  '</tbody>' +
  '</table>';

  const cOnSelector = function (selector) {
    return Chain.async(function (_, next, _die) {
      EditorManager.init({
        selector,
        inline: true,
        statusbar: false,
        menubar: false,
        plugins: 'table',
        skin_url: '/project/js/tinymce/skins/lightgray',
        setup (editor) {
          editor.on('SkinLoaded', function () {
              setTimeout(function () {
                  next(editor);
              }, 0);
          });
      }
      });
    });
  };

  const cNotExists = (container, selector) => {
    return Chain.op(() => {
      UiFinder.findIn(container, selector).fold(
        () => RawAssertions.assertEq('should not find anything', true, true),
        () => RawAssertions.assertEq('Expected ' + selector + ' not to exist.', true, false)
      );
    });
  };

  NamedChain.pipeline([
    NamedChain.write('container', Chain.async((input, next) => {
      const container = Element.fromTag('div');
      Attr.set(container, 'id', 'test-container-div');
      Html.set(container, containerHtml);
      Insert.append(Body.body(), container);

      next(container);
    })),
    NamedChain.write('editor', cOnSelector('div.tinymce')),
    NamedChain.direct('container', Chain.fromChains([
      UiFinder.cFindIn('div.tinymce'),
      Mouse.cMouseOver,
      cNotExists(Body.body(), 'div[data-row="0"]')
    ]), '_'),
    NamedChain.read('editor', Editor.cRemove),
    NamedChain.read('container', Chain.op((div) => Remove.remove(div)))
  ], function (v, newLogs) {
    success();
  }, failure, TestLogs.init());
});

//.........這裏部分代碼省略.........
  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', cInsertTable(5, 2), 'element'),
    NamedChain.write('widthBefore', cGetWidth),
    NamedChain.read('element', Mouse.cTrueClick),
    NamedChain.read('editor', cDragHandle('se', -100, 0)),
    NamedChain.write('widthAfter', 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,
      skin_url: '/project/js/tinymce/skins/lightgray'
    })),

    // 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,
    NamedChain.read('editor', ApiChains.cSetContent('')),
    NamedChain.read('editor', ApiChains.cSetSetting('table_responsive_width', false)),
    NamedChain.direct('editor', cTableInsertResizeMeasure, 'widths'),
    NamedChain.read('widths', cAssertWidthsShouldBe('px')),
    cAssertEventData(lastObjectResizeStartEvent, 'objectresizestart'),
    cAssertEventData(lastObjectResizedEvent, 'objectresized'),

    NamedChain.read('editor', Editor.cRemove)
  ], function () {
    success();
  }, failure, TestLogs.init());
});

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

  Plugin();
  Theme();

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

  const cInsertTable = function (cols, rows) {
    return Chain.mapper(function (editor) {
      return TinyDom.fromDom(editor.plugins.table.insertTable(cols, rows));
    });
  };

  const cDragHandle = function (id, deltaH, deltaV) {
    return NamedChain.asChain([
      NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
      NamedChain.direct('editor', cGetBody, 'editorBody'),
      NamedChain.read('editorBody', Chain.control(
        UiFinder.cFindIn('#mceResizeHandle' + id),
        Guard.tryUntil('wait for resize handlers', 100, 40000)
      )),
      NamedChain.read('editorBody', Chain.fromChains([
        UiFinder.cFindIn('#mceResizeHandle' + id),
        Mouse.cMouseDown,
        Mouse.cMouseMoveTo(deltaH, deltaV),
        Mouse.cMouseUp
      ])),
      NamedChain.outputInput
    ]);
  };

  const cGetWidth = Chain.mapper(function (input) {
    const editor = input.editor;
    const elm = input.element.dom();
    const rawWidth = editor.dom.getStyle(elm, 'width');
    const pxWidth = editor.dom.getStyle(elm, 'width', true);
    return {
      raw: parseFloat(rawWidth),
      px: parseInt(pxWidth, 10),
      isPercent: /%$/.test(rawWidth)
    };
  });

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

  NamedChain.pipeline([
    NamedChain.write('editor', Editor.cFromSettings({
      plugins: 'table',
      width: 400,
      skin_url: '/project/js/tinymce/skins/lightgray'
    })),
    NamedChain.direct('editor', cInsertTable(5, 2), 'element'),
    NamedChain.write('widthBefore', cGetWidth),
    NamedChain.read('element', Mouse.cTrueClick),
    NamedChain.read('editor', cDragHandle('se', -100, 0)),
    NamedChain.write('widthAfter', cGetWidth),
    NamedChain.merge(['widthBefore', 'widthAfter'], 'widths'),
    NamedChain.read('widths', cAssertWidths),
    NamedChain.read('editor', Editor.cRemove)
  ], function () {
    success();
  }, failure);
});