TypeScript agar.NamedChain類代碼示例

    const testChangingUrlValueWith = (sChooseItem: Step<any, any>) => Log.stepsAsStep('TBA', 'Link: Choosing something in the urlinput changes text and value', [
      tinyApis.sSetContent('<h1>Header One</h1><h2 id="existing-id">Header2</h2>'),
      TestLinkUi.sOpenLinkDialog,
      Keyboard.sKeydown(doc, Keys.down(), { }),
      UiFinder.sWaitForVisible('Waiting for dropdown', TinyDom.fromDom(document.body), '.tox-menu'),
      sChooseItem,
      sAssertUrlStructure((s, str, _arr) => {
        return s.element('input', {
          value: str.startsWith('#h_')
        });
      }),
      sAssertInputValue('Header One', 'Text to display'),
      TestLinkUi.sAssertContentPresence(tinyApis, {
        'h1[id]': 0,
        'h2[id]': 1
      }),
      TestLinkUi.sClickSave,
      TestLinkUi.sAssertContentPresence(tinyApis, {
        'h1[id]': 1
      }),

      // Check that the h1's id value is referred to by a link containing dog
      Chain.asStep(TinyDom.fromDom(editor.getBody()), [
        NamedChain.asChain([
          NamedChain.direct(NamedChain.inputName(), UiFinder.cFindIn('h1'), 'h1'),
          NamedChain.direct('h1', Chain.mapper((h1) => Attr.get(h1, 'id')), 'h1-id'),
          NamedChain.bundle((obj) => {
            return UiFinder.findIn(obj[NamedChain.inputName()], `a[href="#${obj['h1-id']}"]:contains("Header One")`);
          })
        ])
      ])
    ]);

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

const cAssertCleanHtml = (label: string, expected: string) => Chain.control(
  NamedChain.asChain([
    NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
    NamedChain.direct('editor', Chain.mapper((editor: Editor) => cleanHtml(editor.getContent())), 'content'),
    NamedChain.direct('content', Assertions.cAssertHtml(label, expected), 'result'),
    NamedChain.outputInput
  ]),
  Guard.addLogging('Assert clean html')
);

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

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

 const sAssertImageFlip = (label) => {
   return Chain.asStep({editor}, [
     Chain.label(`Assert ${label}`,
     NamedChain.asChain([
       NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
       NamedChain.direct('editor', cGetImageSources(label), 'urls'),
       NamedChain.read('urls', Chain.op((urls) => {
         Assertions.assertEq(`Image should be flipped: ${label}`, true, ( urls.srcBeforeFlip !== urls.srcAfterFlip ));
       }))
     ]))
   ]);
 };

UnitTest.asynctest('WindowManager:inline-dialog Test', (success, failure) => {
  const helpers = TestExtras();
  const windowManager = WindowManager.setup(helpers.extras);

  const cGetDialogLabelId = Chain.binder((dialogE: Element) => {
    if (Attr.has(dialogE, 'aria-labelledby')) {
      const labelId = Attr.get(dialogE, 'aria-labelledby');
      return labelId.length > 0 ? Result.value(labelId) : Result.error('Dialog has zero length aria-labelledby attribute');
    } else {
      return Result.error('Dialog has no aria-labelledby attribute');
    }
  });

  const sAssertDialogLabelledBy =
    Chain.asStep(Body.body(), [NamedChain.asChain([
      NamedChain.direct(NamedChain.inputName(), UiFinder.cFindIn('[role="dialog"]'), 'dialog'),
      NamedChain.direct('dialog', cGetDialogLabelId, 'labelId'),
      NamedChain.bundle((obj) => UiFinder.findIn(obj.dialog, `#${obj.labelId}`)),
    ])]);

  const sTestDialogLabelled = (params) =>
    Logger.t(
      `Dialog should have "aria-labelledby" for config "${JSON.stringify(params)}"`,
      GeneralSteps.sequence([
        Step.sync(() => {
            const dialogSpec: Types.Dialog.DialogApi<{}> = {
              title: 'Silver Test Inline (Toolbar) Dialog',
              body: {
                type: 'panel',
                items: []
              },
              buttons: [],
              initialData: {}
            };
            windowManager.open(dialogSpec, params, Fun.noop );
        }),
        sAssertDialogLabelledBy,
      ])
    );

  Pipeline.async({}, [
    TestHelpers.GuiSetup.mAddStyles(Element.fromDom(document), [
      '.tox-dialog { background: white; border: 2px solid black; padding: 1em; margin: 1em; }'
    ]),
    sTestDialogLabelled({ inline: 'toolbar' }),
    sTestDialogLabelled({ inline: 'not-inline!!' }),
    TestHelpers.GuiSetup.mRemoveStyles
  ], () => {
    helpers.destroy();
    success();
  }, failure);
});

const cWaitForDialog = () => Chain.control(
  NamedChain.asChain([
    NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
    NamedChain.direct('editor', cTinyUI, 'tinyUi'),
    // Hmm. We might need an API to handle the case where you need to pass logs through a subchain.
    NamedChain.direct('tinyUi', Chain.on((tinyUi, next, die, logs) => {
      const subchain = tinyUi.cWaitForPopup('wait for dialog', 'div[role="dialog"]');
      Chain.pipeline([subchain], (value, newLogs) => next(Chain.wrap(value), newLogs), die, logs);
    }), '_'),
    NamedChain.outputInput
  ]),
  Guard.addLogging('Wait for dialog')
);

 const sBookmarkTest = (namedChains) => {
   return Chain.asStep({}, [
     NamedChain.asChain(Arr.flatten([
       [ cCreateNamedEditor ],
       namedChains,
       [ cRemoveEditor ]
     ])
   )]);
 };

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