TypeScript NamedChain.writeValue方法代碼示例

const cSubmitDialog = () => Chain.control(
  NamedChain.asChain([
    NamedChain.writeValue('body', Body.body()),
    NamedChain.read('body', Mouse.cClickOn('.tox-button:contains("Save")')),
    NamedChain.outputInput
  ]),
  Guard.addLogging('Submit dialog')
);

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

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

    Pipeline.async({},
      Log.steps('TBA', 'Charmap: Search for items, dialog height should not change when fewer items returned', [
        tinyApis.sFocus,
        tinyUi.sClickOnToolbar('click charmap', 'button[aria-label="Special character"]'),
        Chain.asStep({}, [
          tinyUi.cWaitForPopup('wait for popup', 'div[role="dialog"]'),
        ]),
        FocusTools.sTryOnSelector('Focus should start on', doc, '[role="tab"]'),
        Keyboard.sKeydown(doc, Keys.tab(), { }),
        FocusTools.sTryOnSelector('Focus should have moved to input', doc, 'input'),
        Chain.asStep(Body.body() , [
          NamedChain.asChain([
            NamedChain.direct(NamedChain.inputName(), Chain.identity, 'body'),
            NamedChain.writeValue('doc', doc),
            NamedChain.direct('body', UiFinder.cFindIn('[role="dialog"] [role="tabpanel"]'), 'tabpanel'),
            NamedChain.direct('tabpanel', cTabPanelHeight, 'oldheight'),
            NamedChain.direct('body', FocusTools.cSetActiveValue('.'), '_'),
            NamedChain.direct('doc', FocusTools.cGetFocused, 'input'),
            NamedChain.direct('input', cFakeEvent('input'), '_'),
            // need to wait until '.tox-collection__group' has no children
            NamedChain.direct('body', UiFinder.cWaitForState('wait until ', '[role="dialog"] .tox-collection__group', (e) => Traverse.childNodesCount(e) === 0), '_'),
            NamedChain.direct('tabpanel', cTabPanelHeight, 'newheight'),
            NamedChain.bundle((bindings) => {
              // TODO: Use round pixel numbers in DialogTabHeight.ts
              return parseInt(bindings.oldheight, 10) !== parseInt(bindings.newheight, 10) ?
                Result.error(`Old height and new height differ. Old height: '${bindings.oldheight}' new height '${bindings.newheight}'`) :
                Result.value({});
            })
          ])
        ])
      ])
    , onSuccess, onFailure);
  }, {

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

  TinyLoader.setup((editor: Editor, onSuccess, onFailure) => {
    const cAssertEditorSize = (expectedWidth: number, expectedHeight: number) => {
      return Chain.control(
        Chain.op((container: Element) => {
          Assertions.assertEq(`Editor should be ${expectedHeight}px high`, expectedHeight, container.dom().offsetHeight);
          Assertions.assertEq(`Editor should be ${expectedWidth}px wide`, expectedWidth, container.dom().offsetWidth);
        }),
        Guard.addLogging('Ensure that the editor has resized')
      );
    };

    const cResizeToPos = (sx: number, sy: number, dx: number, dy: number, delta: number = 10) => {
      // Simulate moving the mouse, by making a number of movements
      const numMoves = sy === dy ? Math.abs(dx - sx) / delta : Math.abs(dy - sy) / delta;
      // Determine the deltas based on the number of moves to make
      const deltaX = (dx - sx) / numMoves;
      const deltaY = (dy - sy) / numMoves;
      // Move and release the mouse
      return Chain.control(
        Chain.fromChains([
            UiFinder.cFindIn('.tox-blocker'),
            Mouse.cMouseMoveTo(sx, sy)
          ].concat(
            Arr.range(numMoves, (count) => {
              const nx = sx + count * deltaX;
              const ny = sy + count * deltaY;
              return Mouse.cMouseMoveTo(nx, ny);
            })
          ).concat([
            Mouse.cMouseMoveTo(dx, dy),
            Mouse.cMouseUp
          ])
        ),
        Guard.addLogging(`Resizing from (${sx}, ${sy}) to (${dx}, ${dy})`)
      );
    };

    Pipeline.async({ }, [
      Chain.asStep(Body.body(), [
        Chain.op(() => {
          // Add a border to ensure we're using the correct height/width (ie border-box sizing)
          editor.dom.setStyles(editor.getContainer(), {
            border: '2px solid #ccc'
          });
        }),
        Chain.label(`Test resize with max/min sizing`, NamedChain.asChain([
          NamedChain.direct(NamedChain.inputName(), Chain.identity, 'body'),
          NamedChain.writeValue('container', Element.fromDom(editor.getContainer())),
          NamedChain.direct('body', UiFinder.cFindIn('.tox-statusbar__resize-handle'), 'resizeHandle'),

          // Shrink to 300px
          NamedChain.direct('resizeHandle', Mouse.cMouseDown, '_'),
          NamedChain.direct('body', cResizeToPos(400, 400, 300, 300), '_'),
          NamedChain.direct('container', cAssertEditorSize(300, 300), '_'),

          // Enlarge to 450px
          NamedChain.direct('resizeHandle', Mouse.cMouseDown, '_'),
          NamedChain.direct('body', cResizeToPos(300, 300, 450, 450), '_'),
          NamedChain.direct('container', cAssertEditorSize(450, 450), '_'),

          // Try to shrink to below min height
          NamedChain.direct('resizeHandle', Mouse.cMouseDown, '_'),
          NamedChain.direct('body', cResizeToPos(450, 450, 450, 250), '_'),
          NamedChain.direct('container', cAssertEditorSize(450, 300), '_'),

          // Try to enlarge to above max height
          NamedChain.direct('resizeHandle', Mouse.cMouseDown, '_'),
          NamedChain.direct('body', cResizeToPos(450, 300, 450, 550), '_'),
          NamedChain.direct('container', cAssertEditorSize(450, 500), '_'),

          // Try to shrink to below min width
          NamedChain.direct('resizeHandle', Mouse.cMouseDown, '_'),
          NamedChain.direct('body', cResizeToPos(450, 500, 250, 500), '_'),
          NamedChain.direct('container', cAssertEditorSize(300, 500), '_'),

          // Try to enlarge to above max width
          NamedChain.direct('resizeHandle', Mouse.cMouseDown, '_'),
          NamedChain.direct('body', cResizeToPos(300, 500, 550, 500), '_'),
          NamedChain.direct('container', cAssertEditorSize(500, 500), '_'),
        ]))
      ])
    ], onSuccess, onFailure);
  },

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

  }), '_'),

  Pipeline.async({ }, [
    Step.sync(() => {
      windowManager.open({
        title: 'Custom Dialog',
        body: {
          type: 'tabpanel',
          tabs: [
            {
              title: 'Basic',
              items: [
                {
                  name: 'basic1',
                  type: 'input'
                }
              ]
            },
            {
              title: 'Advanced',
              items: [
                {
                  name: 'advanced1',
                  type: 'textarea'
                }
              ]
            }
          ]
        },
        buttons: [
          {
            type: 'custom',
            name: 'gotoBasic',
            text: '-> Basic',
            disabled: false
          },
          {
            type: 'custom',
            name: 'gotoAdvanced',
            text: '-> Advanced',
            disabled: false
          },
          {
            type: 'cancel',
            text: 'Cancel'
          },
          {
            type: 'submit',
            text: 'Save'
          }
        ],
        initialData: {
          basic1: 'First tab value',
          advanced1: 'Textarea value'
        },
        onAction: (api, a) => {
          const target = a.name === 'gotoBasic' ? 'Basic' : 'Advanced';
          api.showTab(target);
        },
        onSubmit: () => {

        }
      }, {}, () => {});
    }),

    Chain.asStep({ }, [
      NamedChain.asChain([
        NamedChain.writeValue('page', Body.body()),
        NamedChain.direct('page', UiFinder.cFindIn('[role="dialog"]'), 'dialog'),
        NamedChain.direct('dialog', UiFinder.cFindIn('[role="tab"]:contains("Basic")'), 'basicTab'),
        NamedChain.direct('dialog', UiFinder.cFindIn('[role="tab"]:contains("Advanced")'), 'advancedTab'),
        NamedChain.direct('dialog', UiFinder.cFindIn('[role="tabpanel"]'), 'tabview'),
        NamedChain.direct('dialog', Mouse.cClickOn('button:contains("-> Basic")'), '_'),
        NamedChain.direct('tabview', cAssertFormContents('Clicking Basic button', (s, str, arr) => {
          return s.element('input', {
            value: str.is('First tab value')
          });
        }), '_'),

        NamedChain.direct('dialog', Mouse.cClickOn('button:contains("-> Advanced")'), '_'),
        NamedChain.direct('tabview', cAssertFormContents('Clicking Advanced button (not tab)', (s, str, arr) => {
          return s.element('textarea', {
            value: str.is('Textarea value')
          });
        }), '_'),

        NamedChain.direct('dialog', Mouse.cClickOn('button:contains("-> Basic")'), '_'),
        NamedChain.direct('tabview', cAssertFormContents('Clicking Basic button again (not tab)', (s, str, arr) => {
          return s.element('input', {
            value: str.is('First tab value')
          });
        }), '_'),
      ])
    ])
  ], () => {
    helpers.destroy();
    success();
  }, failure);
});

UnitTest.asynctest('browser.tinymce.themes.mobile.EditorRemoveTest', (success, failure) => {
  const platform = PlatformDetection.detect();

  if (platform.browser.isIE() || platform.browser.isEdge()) {
    // No need to run mobile tests on IE/Edge as it's not supported
    return success();
  }

  mobileTheme();

  const cleanedThorAttrsStruct = (str) => {
    return {
      'position': str.none(),
      'background-color': str.none(),
    };
  };

  Pipeline.async({}, [
    Chain.asStep({}, [
      McEditor.cFromSettings({
        theme: 'mobile',
        inline: false,
        base_url: '/project/tinymce/js/tinymce'
      }),
      Chain.op((editor) => {
        const wrapperElm = Element.fromHtml('<div class="tinymce-editor"></div>');
        Selectors.one('#' + editor.id).each((textareaElm) => {
          Insert.wrap(textareaElm, wrapperElm);
        });
        Selectors.one('.tinymce-mobile-outer-container').each((editorElm) => {
          Insert.wrap(editorElm, wrapperElm);
        });
      }),
      NamedChain.asChain([
        NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
        NamedChain.writeValue('body', Body.body()),
        NamedChain.direct('body', UiFinder.cExists(`.${Styles.resolve('mask-tap-icon')}`), '_'),
        NamedChain.direct('body', UiChains.cClickOnUi('Click the tap to edit button', `.${Styles.resolve('mask-tap-icon')}`), '_'),
        NamedChain.direct('body', UiChains.cWaitForUi('Wait mobile Toolbar', `.${Styles.resolve('toolbar')}`), '_'),
        NamedChain.direct('body', UiChains.cWaitForUi('Check for The first group', '[aria-label="The first group"]'), '_'),
        NamedChain.direct('body', UiChains.cWaitForUi('Check for the action group', '[aria-label="the action group"]'), '_'),
        NamedChain.direct('body', UiFinder.cNotExists('[aria-label="The read only mode group"]'), '_'),
        NamedChain.direct('body', UiFinder.cNotExists(`.${Styles.resolve('mask-edit-icon')}`), '_'),
        NamedChain.direct('body', UiChains.cClickOnUi('Click back to Tap to Edit screen', `.${Styles.resolve('icon-back')}`), '_'),
        NamedChain.direct('body', UiFinder.cExists(`.${Styles.resolve('mask-tap-icon')}`), '_'),
        NamedChain.outputInput
      ]),
      McEditor.cRemove,
      Chain.mapper(() => Body.body()),
      Assertions.cAssertStructure('Assert Thor overrides removed from body', ApproxStructure.build((s, str) => {
        return s.element('body', {
          attrs: cleanedThorAttrsStruct(str),
        });
      })),
      UiFinder.cFindIn('div.tinymce-editor'),
      Assertions.cAssertStructure('Assert Thor overrides removed from editor div', ApproxStructure.build((s, str) => {
        return s.element('div', {
          attrs: cleanedThorAttrsStruct(str),
          children: []
        });
      })),
      Chain.op((editorElm) => {
        Remove.remove(editorElm);
      })
    ])
  ], 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') ],
//.........這裏部分代碼省略.........