本文整理匯總了TypeScript中@ephox/agar.Chain.asStep方法的典型用法代碼示例。如果您正苦於以下問題：TypeScript Chain.asStep方法的具體用法？TypeScript Chain.asStep怎麽用？TypeScript Chain.asStep使用的例子？那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類@ephox/agar.Chain的用法示例。
在下文中一共展示了Chain.asStep方法的10個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: function
const sWaitForToolstrip = function (realm) {
return Waiter.sTryUntil(
'Waiting until CSS has loaded',
Chain.asStep(realm.element(), [
UiFinder.cFindIn('.tinymce-mobile-toolstrip'),
Chain.op(function (toolstrip) {
if (navigator.userAgent.indexOf('PhantomJS') === -1) {
Assertions.assertEq('Checking toolstrip is flex', 'flex', Css.get(toolstrip, 'display'));
}
})
]),
100,
8000
);
};示例2:
const sAssertVisibleFocusInside = (cGetFocused, selector: string) => Chain.asStep(doc, [
cGetFocused,
Chain.mapper((elem) => {
return elem.dom().getBoundingClientRect();
}),
Chain.binder((rect: ClientRect) => {
const middle = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
const range = document.caretRangeFromPoint(middle.x, middle.y);
if (! range) {
return Result.error('Could not find a range at coordinate: (' + middle.x + ', ' + middle.y + ')');
} else {
return SelectorExists.closest(Element.fromDom(range.startContainer), selector) ? Result.value(rect) : Result.error('Range was not within: "' + selector + '". Are you sure that it is on top of the dialog?');
}
})
]);示例3: cClickToolbarButton
return Step.async(function (next, die) {
const imgEl = TinyDom.fromDom(editor.selection.getNode());
const origUrl = Attr.get(imgEl, 'src');
Pipeline.async({}, [
Chain.asStep(imgEl, [
Mouse.cClick,
ui.cWaitForPopup('wait for Imagetools toolbar', 'div[aria-label="Inline toolbar"][role="dialog"]'),
execFromToolbar ? cClickToolbarButton(label) : cExecCommandFromDialog(label)
]),
sWaitForUrlChange(imgEl, origUrl)
], function () {
next();
}, die);
});示例4: cSetContent
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
]);
};示例5:
const sHasDialog = (label: string) => Chain.asStep(Body.body(), [
UiFinder.cFindIn('.tox-pop'),
Assertions.cAssertStructure(
`${label}: Checking pop has a dialog`,
ApproxStructure.build((s, str, arr) => {
return s.element('div', {
classes: [ arr.has('tox-pop') ],
children: [
s.element('div', {
classes: [ arr.has('tox-pop__dialog') ]
})
]
});
})
)
]);示例6: function
const sDragDropBlocker = function (container, selector, dx, dy) {
return Chain.asStep({}, [
Chain.fromParent(Chain.inject(container), [
Chain.fromChains([
UiFinder.cFindIn(selector),
Mouse.cMouseDown
]),
Chain.fromChains([
UiFinder.cFindIn('div.ephox-dragster-blocker'),
Mouse.cMouseMove,
Mouse.cMouseMoveTo(dx, dy),
Mouse.cMouseUpTo(dx, dy)
])
])
]);
};示例7: TinyApis
TinyLoader.setup(function (editor, onSuccess, onFailure) {
const tinyApis = TinyApis(editor);
const tinyUi = TinyUi(editor);
Pipeline.async({}, [
tinyApis.sFocus,
tinyUi.sClickOnToolbar('click charmap', 'div[aria-label="Special character"] button'),
Chain.asStep({}, [
tinyUi.cWaitForPopup('wait for popup', 'div[role="dialog"]'),
UiFinder.cFindIn('div[title="quotation mark"]'),
Mouse.cClick
]),
tinyApis.sAssertContent('<p>"</p>')
], onSuccess, onFailure);
}, {示例8: TinyApis
TinyLoader.setup(function (editor: Editor, onSuccess, onFailure) {
const tinyApis = TinyApis(editor);
const tinyUi = TinyUi(editor);
Pipeline.async({}, [
Logger.t('set background color on selected table row with text-align: center', GeneralSteps.sequence([
tinyApis.sSetContent('<table style="border-collapse: collapse; width: 100%;" border="1"><tbody><tr style="height: 18px;"><td style="width: 50%; height: 18px; text-align: center;" data-mce-selected="1">a</td><td style="width: 50%; height: 18px; text-align: center;" data-mce-selected="1">b</td></tr><tr style="height: 18px;"><td style="width: 50%; height: 18px;">c</td><td style="width: 50%; height: 18px;">d</td></tr></tbody></table>'),
tinyApis.sSetSelection([0, 0, 0, 1, 0], 1, [0, 0, 0, 1, 0], 1),
tinyApis.sExecCommand('mceTableRowProps'),
Chain.asStep({}, [
tinyUi.cWaitForPopup('row prop popup', 'div[aria-label="Row properties"]'),
tinyUi.cFillDialogWith({ backgroundColor: 'red'}),
UiFinder.cFindIn('button:contains("Ok")'),
Mouse.cClick
]),
TableTestUtils.sAssertTableStructure(editor, ApproxStructure.build((s, str, arr) => {
return s.element('table', {
children: [
s.element('tbody', {
children: [
s.element('tr', {
styles: { 'background-color': str.is('red') },
children: [
s.element('td', {
styles: { 'text-align': str.is('center') },
children: [s.text(str.is('a'))]
}),
s.element('td', {
styles: { 'text-align': str.is('center') },
children: [s.text(str.is('b'))]
})
]
}),
s.element('tr', {
children: [
s.element('td', { children: [s.text(str.is('c'))] }),
s.element('td', { children: [s.text(str.is('d'))] })
]
})
]
})
]
});
}))
]))
], onSuccess, onFailure);
}, {示例9: TinyUi
(editor, onSuccess, onFailure) => {
const tinyUi = TinyUi(editor);
const container = Element.fromDom(editor.getContainer());
Pipeline.async({ }, Logger.ts(
'Check basic structure and actions',
[
Log.stepsAsStep('TINY-2226', 'Menu should contain a group heading with the correct classes and text', [
Mouse.sClickOn(container, '.tox-toolbar button'),
tinyUi.sWaitForUi('Wait for styleselect menu', '.tox-menu.tox-collection'),
Chain.asStep(Body.body(), [
UiFinder.cFindIn('.tox-menu.tox-collection'),
Assertions.cAssertStructure(
'Container structure',
ApproxStructure.build((s, str, arr) => {
return s.element('div', {
classes: [ arr.has('tox-menu'), arr.has('tox-collection'), arr.has('tox-collection--list'), arr.has('tox-selected-menu') ],
children: [
s.element('div', {
classes: [ arr.has('tox-collection__group')],
children: [
s.element('div', {
classes: [ arr.has('tox-menu-nav__js'), arr.has('tox-collection__item') ]
})
]
}),
s.element('div', {
classes: [ arr.has('tox-collection__group')],
children: [
s.element('div', {
classes: [ arr.has('tox-collection__item'), arr.has('tox-collection__group-heading') ],
children: [ s.text(str.is('Table styles')) ]
}),
s.element('div', {
classes: [ arr.has('tox-menu-nav__js'), arr.has('tox-collection__item') ]
})
]
})
]
});
}),
),
])
])
]
), onSuccess, onFailure);
},示例10:
const sAssertLockedStatus = (label: string, expected: boolean) => Logger.t(
label,
Chain.asStep(component.element(), [
UiFinder.cFindIn('.tox-lock'),
Assertions.cAssertStructure(
'Checking the state of the lock button. Should be: ' + expected,
ApproxStructure.build((s, str, arr) => {
return s.element('button', {
classes: [ arr.has('tox-lock') ],
attrs: {
'aria-pressed': str.is(expected ? 'true' : 'false')
}
});
})
)
])
);