mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-24 11:21:23 +00:00
Compare commits
5 Commits
refresh-ar
...
sung_playw
| Author | SHA1 | Date | |
|---|---|---|---|
|
70ed0c79e1 | ||
|
|
c2785ace83 | ||
|
|
bb5d3bfc42 | ||
|
|
98a21f2fb1 | ||
|
|
945c457bd5 |
@@ -14,7 +14,7 @@ export default defineConfig({
|
||||
trace: "off",
|
||||
video: "off",
|
||||
screenshot: "on",
|
||||
testIdAttribute: "data-test",
|
||||
testIdAttribute: "data-testid",
|
||||
contextOptions: {
|
||||
ignoreHTTPSErrors: true,
|
||||
},
|
||||
|
||||
@@ -76,12 +76,10 @@ const mockedRbacUtils = RbacUtils as jest.Mocked<typeof RbacUtils>;
|
||||
const mockedCopyJobPrerequisitesCache = CopyJobPrerequisitesCacheModule as jest.Mocked<
|
||||
typeof CopyJobPrerequisitesCacheModule
|
||||
>;
|
||||
|
||||
interface TestWrapperProps {
|
||||
state: CopyJobContextState;
|
||||
onResult?: (result: PermissionGroupConfig[]) => void;
|
||||
}
|
||||
|
||||
const TestWrapper: React.FC<TestWrapperProps> = ({ state, onResult }) => {
|
||||
const result = usePermissionSections(state);
|
||||
|
||||
|
||||
@@ -214,9 +214,9 @@ export const Dialog: FC = () => {
|
||||
{contentHtml}
|
||||
{progressIndicatorProps && <ProgressIndicator {...progressIndicatorProps} />}
|
||||
<DialogFooter>
|
||||
<PrimaryButton {...primaryButtonProps} data-test={`DialogButton:${primaryButtonText}`} />
|
||||
<PrimaryButton {...primaryButtonProps} data-testid={`DialogButton:${primaryButtonText}`} />
|
||||
{secondaryButtonProps && (
|
||||
<DefaultButton {...secondaryButtonProps} data-test={`DialogButton:${secondaryButtonText}`} />
|
||||
<DefaultButton {...secondaryButtonProps} data-testid={`DialogButton:${secondaryButtonText}`} />
|
||||
)}
|
||||
</DialogFooter>
|
||||
</FluentDialog>
|
||||
|
||||
@@ -137,7 +137,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
|
||||
<Spinner size={SpinnerSize.large} className={this.props.spinnerClassName || "spinner"} />
|
||||
)}
|
||||
<div
|
||||
data-test="EditorReact/Host/Unloaded"
|
||||
data-testid="EditorReact/Host/Unloaded"
|
||||
className={this.props.className || "jsonEditor"}
|
||||
style={this.props.monacoContainerStyles}
|
||||
ref={(elt: HTMLElement) => this.setRef(elt)}
|
||||
@@ -148,7 +148,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
|
||||
|
||||
protected configureEditor(editor: monaco.editor.IStandaloneCodeEditor) {
|
||||
this.editor = editor;
|
||||
this.rootNode.dataset["test"] = "EditorReact/Host/Loaded";
|
||||
this.rootNode.dataset["testid"] = "EditorReact/Host/Loaded";
|
||||
|
||||
// In development, we want to be able to access the editor instance from the console
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
|
||||
@@ -193,7 +193,7 @@ export const InputDataList: FC<InputDataListProps> = ({
|
||||
<>
|
||||
<Input
|
||||
id="filterInput"
|
||||
data-test={"DocumentsTab/FilterInput"}
|
||||
data-testid={"DocumentsTab/FilterInput"}
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
size="small"
|
||||
|
||||
@@ -209,6 +209,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
|
||||
checked={isAutoscaleSelected}
|
||||
type="radio"
|
||||
role="radio"
|
||||
data-testid="ThroughputInput/ThroughputMode:Autoscale"
|
||||
tabIndex={0}
|
||||
onChange={(e) => handleOnChangeMode(e, "Autoscale")}
|
||||
/>
|
||||
@@ -224,6 +225,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
|
||||
type="radio"
|
||||
aria-required={true}
|
||||
role="radio"
|
||||
data-testid="ThroughputInput/ThroughputMode:Manual"
|
||||
tabIndex={0}
|
||||
onChange={(e) => handleOnChangeMode(e, "Manual")}
|
||||
/>
|
||||
@@ -286,7 +288,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
|
||||
</Stack>
|
||||
<TextField
|
||||
id="autoscaleRUValueField"
|
||||
data-test="autoscaleRUInput"
|
||||
data-testid="ThroughputInput/AutoscaleRUInput"
|
||||
type="number"
|
||||
styles={{
|
||||
fieldGroup: { width: 100, height: 27, flexShrink: 0 },
|
||||
@@ -352,6 +354,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
|
||||
}
|
||||
>
|
||||
<TextField
|
||||
data-testid="ThroughputInput/ManualThroughputInput"
|
||||
type="number"
|
||||
styles={{
|
||||
fieldGroup: { width: 300, height: 27 },
|
||||
|
||||
@@ -682,6 +682,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
|
||||
aria-required={true}
|
||||
checked={true}
|
||||
className="throughputInputRadioBtn"
|
||||
data-testid="ThroughputInput/ThroughputMode:Autoscale"
|
||||
id="Autoscale-input"
|
||||
onChange={[Function]}
|
||||
role="radio"
|
||||
@@ -699,6 +700,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
|
||||
aria-required={true}
|
||||
checked={false}
|
||||
className="throughputInputRadioBtn"
|
||||
data-testid="ThroughputInput/ThroughputMode:Manual"
|
||||
id="Manual-input"
|
||||
onChange={[Function]}
|
||||
role="radio"
|
||||
@@ -2144,7 +2146,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
|
||||
</Stack>
|
||||
<StyledTextFieldBase
|
||||
ariaLabel="Container max RU/s"
|
||||
data-test="autoscaleRUInput"
|
||||
data-testid="ThroughputInput/AutoscaleRUInput"
|
||||
errorMessage=""
|
||||
id="autoscaleRUValueField"
|
||||
key=".0:$.$.1"
|
||||
@@ -2171,7 +2173,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
|
||||
>
|
||||
<TextFieldBase
|
||||
ariaLabel="Container max RU/s"
|
||||
data-test="autoscaleRUInput"
|
||||
data-testid="ThroughputInput/AutoscaleRUInput"
|
||||
deferredValidationTime={200}
|
||||
errorMessage=""
|
||||
id="autoscaleRUValueField"
|
||||
@@ -2472,7 +2474,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
|
||||
aria-invalid={false}
|
||||
aria-label="Container max RU/s"
|
||||
className="ms-TextField-field field-124"
|
||||
data-test="autoscaleRUInput"
|
||||
data-testid="ThroughputInput/AutoscaleRUInput"
|
||||
id="autoscaleRUValueField"
|
||||
max="9007199254740991"
|
||||
min={1000}
|
||||
|
||||
@@ -139,7 +139,7 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
|
||||
|
||||
const contextMenuItems = (node.contextMenu ?? []).map((menuItem) => (
|
||||
<MenuItem
|
||||
data-test={`TreeNode/ContextMenuItem:${menuItem.label}`}
|
||||
data-testid={`TreeNode/ContextMenuItem:${menuItem.label}`}
|
||||
disabled={menuItem.isDisabled}
|
||||
key={menuItem.label}
|
||||
onClick={() => menuItem.onClick(contextMenuRef)}
|
||||
@@ -160,14 +160,14 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
|
||||
const expandIcon = isLoading ? (
|
||||
<Spinner size="extra-tiny" />
|
||||
) : !isBranch ? undefined : openItems.includes(treeNodeId) ? (
|
||||
<ChevronDown20Regular data-test="TreeNode/CollapseIcon" />
|
||||
<ChevronDown20Regular data-testid="TreeNode/CollapseIcon" />
|
||||
) : (
|
||||
<ChevronRight20Regular data-text="TreeNode/ExpandIcon" />
|
||||
<ChevronRight20Regular data-testid="TreeNode/ExpandIcon" />
|
||||
);
|
||||
|
||||
const treeItem = (
|
||||
<TreeItem
|
||||
data-test={`TreeNodeContainer:${treeNodeId}`}
|
||||
data-testid={`TreeNodeContainer:${treeNodeId}`}
|
||||
value={treeNodeId}
|
||||
itemType={isBranch ? "branch" : "leaf"}
|
||||
onOpenChange={onOpenChange}
|
||||
@@ -179,7 +179,7 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
|
||||
shouldShowAsSelected && treeStyles.selectedItem,
|
||||
node.className && treeStyles[node.className],
|
||||
)}
|
||||
data-test={`TreeNode:${treeNodeId}`}
|
||||
data-testid={`TreeNode:${treeNodeId}`}
|
||||
actions={
|
||||
contextMenuItems.length > 0 && {
|
||||
className: treeStyles.actionsButtonContainer,
|
||||
@@ -189,13 +189,13 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
|
||||
<Button
|
||||
aria-label="More options"
|
||||
className={mergeClasses(treeStyles.actionsButton, shouldShowAsSelected && treeStyles.selectedItem)}
|
||||
data-test="TreeNode/ContextMenuTrigger"
|
||||
data-testid="TreeNode/ContextMenuTrigger"
|
||||
appearance="subtle"
|
||||
ref={contextMenuRef}
|
||||
icon={<MoreHorizontal20Regular />}
|
||||
/>
|
||||
</MenuTrigger>
|
||||
<MenuPopover data-test={`TreeNode/ContextMenu:${treeNodeId}`}>
|
||||
<MenuPopover data-testid={`TreeNode/ContextMenu:${treeNodeId}`}>
|
||||
<MenuList>{contextMenuItems}</MenuList>
|
||||
</MenuPopover>
|
||||
</Menu>
|
||||
@@ -208,7 +208,7 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
|
||||
<span className={treeStyles.nodeLabel}>{node.label}</span>
|
||||
</TreeItemLayout>
|
||||
{!node.isLoading && node.children?.length > 0 && (
|
||||
<Tree data-test={`Tree:${treeNodeId}`} className={treeStyles.tree}>
|
||||
<Tree data-testid={`Tree:${treeNodeId}`} className={treeStyles.tree}>
|
||||
{getSortedChildren(node).map((childNode: TreeNode) => (
|
||||
<TreeNodeComponent
|
||||
openItems={openItems}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
exports[`TreeNodeComponent does not render children if the node is loading 1`] = `
|
||||
<TreeItem
|
||||
className=""
|
||||
data-test="TreeNodeContainer:root"
|
||||
data-testid="TreeNodeContainer:root"
|
||||
itemType="branch"
|
||||
onOpenChange={[Function]}
|
||||
value="root"
|
||||
@@ -11,10 +11,10 @@ exports[`TreeNodeComponent does not render children if the node is loading 1`] =
|
||||
<TreeItemLayout
|
||||
actions={false}
|
||||
className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root"
|
||||
data-testid="TreeNode:root"
|
||||
expandIcon={
|
||||
<ChevronRight20Regular
|
||||
data-text="TreeNode/ExpandIcon"
|
||||
data-testid="TreeNode/ExpandIcon"
|
||||
/>
|
||||
}
|
||||
iconBefore={
|
||||
@@ -112,7 +112,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
>
|
||||
<TreeItem
|
||||
className=""
|
||||
data-test="TreeNodeContainer:root"
|
||||
data-testid="TreeNodeContainer:root"
|
||||
itemType="branch"
|
||||
onOpenChange={[Function]}
|
||||
value="root"
|
||||
@@ -122,7 +122,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
aria-level={0}
|
||||
className="fui-TreeItem r15xhw3a"
|
||||
data-fui-tree-item-value="root"
|
||||
data-test="TreeNodeContainer:root"
|
||||
data-testid="TreeNodeContainer:root"
|
||||
onChange={[Function]}
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
@@ -144,7 +144,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
|
||||
data-text="TreeNode/ExpandIcon"
|
||||
data-testid="TreeNode/ExpandIcon"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
@@ -164,7 +164,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
"layoutRef": {
|
||||
"current": <div
|
||||
class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root"
|
||||
data-testid="TreeNode:root"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
@@ -173,7 +173,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
|
||||
data-text="TreeNode/ExpandIcon"
|
||||
data-testid="TreeNode/ExpandIcon"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
@@ -220,13 +220,13 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
aria-level="0"
|
||||
class="fui-TreeItem r15xhw3a"
|
||||
data-fui-tree-item-value="root"
|
||||
data-test="TreeNodeContainer:root"
|
||||
data-testid="TreeNodeContainer:root"
|
||||
role="treeitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root"
|
||||
data-testid="TreeNode:root"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
@@ -235,7 +235,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
|
||||
data-text="TreeNode/ExpandIcon"
|
||||
data-testid="TreeNode/ExpandIcon"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
@@ -270,7 +270,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="fui-Tree rnv2ez3 ___17a32do_7zrvj80 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
|
||||
data-test="Tree:root"
|
||||
data-testid="Tree:root"
|
||||
role="tree"
|
||||
>
|
||||
<div
|
||||
@@ -278,13 +278,13 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
aria-level="1"
|
||||
class="fui-TreeItem r15xhw3a ___jer8zr0_6no3ah0 f10bgyvd"
|
||||
data-fui-tree-item-value="root/child1Label"
|
||||
data-test="TreeNodeContainer:root/child1Label"
|
||||
data-testid="TreeNodeContainer:root/child1Label"
|
||||
role="treeitem"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root/child1Label"
|
||||
data-testid="TreeNode:root/child1Label"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
@@ -293,7 +293,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
|
||||
data-text="TreeNode/ExpandIcon"
|
||||
data-testid="TreeNode/ExpandIcon"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
@@ -332,13 +332,13 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
aria-level="1"
|
||||
class="fui-TreeItem r15xhw3a ___jer8zr0_6no3ah0 f10bgyvd"
|
||||
data-fui-tree-item-value="root/child2LoadingLabel"
|
||||
data-test="TreeNodeContainer:root/child2LoadingLabel"
|
||||
data-testid="TreeNodeContainer:root/child2LoadingLabel"
|
||||
role="treeitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root/child2LoadingLabel"
|
||||
data-testid="TreeNode:root/child2LoadingLabel"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
@@ -347,7 +347,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
|
||||
data-text="TreeNode/ExpandIcon"
|
||||
data-testid="TreeNode/ExpandIcon"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
@@ -385,13 +385,13 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
aria-level="1"
|
||||
class="fui-TreeItem r15xhw3a ___jer8zr0_6no3ah0 f10bgyvd"
|
||||
data-fui-tree-item-value="root/child3ExpandingLabel"
|
||||
data-test="TreeNodeContainer:root/child3ExpandingLabel"
|
||||
data-testid="TreeNodeContainer:root/child3ExpandingLabel"
|
||||
role="treeitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_vz3p260 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root/child3ExpandingLabel"
|
||||
data-testid="TreeNode:root/child3ExpandingLabel"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
@@ -441,10 +441,10 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
<TreeItemLayout
|
||||
actions={false}
|
||||
className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root"
|
||||
data-testid="TreeNode:root"
|
||||
expandIcon={
|
||||
<ChevronRight20Regular
|
||||
data-text="TreeNode/ExpandIcon"
|
||||
data-testid="TreeNode/ExpandIcon"
|
||||
/>
|
||||
}
|
||||
iconBefore={
|
||||
@@ -457,19 +457,19 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
>
|
||||
<div
|
||||
className="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root"
|
||||
data-testid="TreeNode:root"
|
||||
>
|
||||
<div
|
||||
aria-hidden={true}
|
||||
className="fui-TreeItemLayout__expandIcon rh4pu5o"
|
||||
>
|
||||
<ChevronRight20Regular
|
||||
data-text="TreeNode/ExpandIcon"
|
||||
data-testid="TreeNode/ExpandIcon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
className="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
|
||||
data-text="TreeNode/ExpandIcon"
|
||||
data-testid="TreeNode/ExpandIcon"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
@@ -506,7 +506,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
</TreeItemLayout>
|
||||
<Tree
|
||||
className="___17a32do_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
|
||||
data-test="Tree:root"
|
||||
data-testid="Tree:root"
|
||||
>
|
||||
<TreeProvider
|
||||
value={
|
||||
@@ -574,7 +574,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
>
|
||||
<div
|
||||
className="fui-Tree rnv2ez3 ___17a32do_7zrvj80 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
|
||||
data-test="Tree:root"
|
||||
data-testid="Tree:root"
|
||||
role="tree"
|
||||
>
|
||||
<TreeNodeComponent
|
||||
@@ -610,7 +610,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
>
|
||||
<TreeItem
|
||||
className=""
|
||||
data-test="TreeNodeContainer:root/child1Label"
|
||||
data-testid="TreeNodeContainer:root/child1Label"
|
||||
itemType="branch"
|
||||
onOpenChange={[Function]}
|
||||
value="root/child1Label"
|
||||
@@ -620,7 +620,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
aria-level={1}
|
||||
className="fui-TreeItem r15xhw3a ___jer8zr0_6no3ah0 f10bgyvd"
|
||||
data-fui-tree-item-value="root/child1Label"
|
||||
data-test="TreeNodeContainer:root/child1Label"
|
||||
data-testid="TreeNodeContainer:root/child1Label"
|
||||
onChange={[Function]}
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
@@ -642,7 +642,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
|
||||
data-text="TreeNode/ExpandIcon"
|
||||
data-testid="TreeNode/ExpandIcon"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
@@ -662,7 +662,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
"layoutRef": {
|
||||
"current": <div
|
||||
class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root/child1Label"
|
||||
data-testid="TreeNode:root/child1Label"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
@@ -671,7 +671,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
|
||||
data-text="TreeNode/ExpandIcon"
|
||||
data-testid="TreeNode/ExpandIcon"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
@@ -718,13 +718,13 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
aria-level="1"
|
||||
class="fui-TreeItem r15xhw3a ___jer8zr0_6no3ah0 f10bgyvd"
|
||||
data-fui-tree-item-value="root/child1Label"
|
||||
data-test="TreeNodeContainer:root/child1Label"
|
||||
data-testid="TreeNodeContainer:root/child1Label"
|
||||
role="treeitem"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root/child1Label"
|
||||
data-testid="TreeNode:root/child1Label"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
@@ -733,7 +733,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
|
||||
data-text="TreeNode/ExpandIcon"
|
||||
data-testid="TreeNode/ExpandIcon"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
@@ -775,10 +775,10 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
<TreeItemLayout
|
||||
actions={false}
|
||||
className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root/child1Label"
|
||||
data-testid="TreeNode:root/child1Label"
|
||||
expandIcon={
|
||||
<ChevronRight20Regular
|
||||
data-text="TreeNode/ExpandIcon"
|
||||
data-testid="TreeNode/ExpandIcon"
|
||||
/>
|
||||
}
|
||||
iconBefore={
|
||||
@@ -791,19 +791,19 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
>
|
||||
<div
|
||||
className="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root/child1Label"
|
||||
data-testid="TreeNode:root/child1Label"
|
||||
>
|
||||
<div
|
||||
aria-hidden={true}
|
||||
className="fui-TreeItemLayout__expandIcon rh4pu5o"
|
||||
>
|
||||
<ChevronRight20Regular
|
||||
data-text="TreeNode/ExpandIcon"
|
||||
data-testid="TreeNode/ExpandIcon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
className="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
|
||||
data-text="TreeNode/ExpandIcon"
|
||||
data-testid="TreeNode/ExpandIcon"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
@@ -840,7 +840,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
</TreeItemLayout>
|
||||
<Tree
|
||||
className="___17a32do_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
|
||||
data-test="Tree:root/child1Label"
|
||||
data-testid="Tree:root/child1Label"
|
||||
>
|
||||
<TreeProvider
|
||||
value={
|
||||
@@ -881,7 +881,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
>
|
||||
<TreeItem
|
||||
className=""
|
||||
data-test="TreeNodeContainer:root/child2LoadingLabel"
|
||||
data-testid="TreeNodeContainer:root/child2LoadingLabel"
|
||||
itemType="branch"
|
||||
onOpenChange={[Function]}
|
||||
value="root/child2LoadingLabel"
|
||||
@@ -891,7 +891,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
aria-level={1}
|
||||
className="fui-TreeItem r15xhw3a ___jer8zr0_6no3ah0 f10bgyvd"
|
||||
data-fui-tree-item-value="root/child2LoadingLabel"
|
||||
data-test="TreeNodeContainer:root/child2LoadingLabel"
|
||||
data-testid="TreeNodeContainer:root/child2LoadingLabel"
|
||||
onChange={[Function]}
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
@@ -913,7 +913,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
|
||||
data-text="TreeNode/ExpandIcon"
|
||||
data-testid="TreeNode/ExpandIcon"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
@@ -933,7 +933,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
"layoutRef": {
|
||||
"current": <div
|
||||
class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root/child2LoadingLabel"
|
||||
data-testid="TreeNode:root/child2LoadingLabel"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
@@ -942,7 +942,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
|
||||
data-text="TreeNode/ExpandIcon"
|
||||
data-testid="TreeNode/ExpandIcon"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
@@ -989,13 +989,13 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
aria-level="1"
|
||||
class="fui-TreeItem r15xhw3a ___jer8zr0_6no3ah0 f10bgyvd"
|
||||
data-fui-tree-item-value="root/child2LoadingLabel"
|
||||
data-test="TreeNodeContainer:root/child2LoadingLabel"
|
||||
data-testid="TreeNodeContainer:root/child2LoadingLabel"
|
||||
role="treeitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root/child2LoadingLabel"
|
||||
data-testid="TreeNode:root/child2LoadingLabel"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
@@ -1004,7 +1004,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
|
||||
data-text="TreeNode/ExpandIcon"
|
||||
data-testid="TreeNode/ExpandIcon"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
@@ -1046,10 +1046,10 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
<TreeItemLayout
|
||||
actions={false}
|
||||
className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root/child2LoadingLabel"
|
||||
data-testid="TreeNode:root/child2LoadingLabel"
|
||||
expandIcon={
|
||||
<ChevronRight20Regular
|
||||
data-text="TreeNode/ExpandIcon"
|
||||
data-testid="TreeNode/ExpandIcon"
|
||||
/>
|
||||
}
|
||||
iconBefore={
|
||||
@@ -1062,19 +1062,19 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
>
|
||||
<div
|
||||
className="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root/child2LoadingLabel"
|
||||
data-testid="TreeNode:root/child2LoadingLabel"
|
||||
>
|
||||
<div
|
||||
aria-hidden={true}
|
||||
className="fui-TreeItemLayout__expandIcon rh4pu5o"
|
||||
>
|
||||
<ChevronRight20Regular
|
||||
data-text="TreeNode/ExpandIcon"
|
||||
data-testid="TreeNode/ExpandIcon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
className="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
|
||||
data-text="TreeNode/ExpandIcon"
|
||||
data-testid="TreeNode/ExpandIcon"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
@@ -1140,7 +1140,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
>
|
||||
<TreeItem
|
||||
className=""
|
||||
data-test="TreeNodeContainer:root/child3ExpandingLabel"
|
||||
data-testid="TreeNodeContainer:root/child3ExpandingLabel"
|
||||
itemType="leaf"
|
||||
onOpenChange={[Function]}
|
||||
value="root/child3ExpandingLabel"
|
||||
@@ -1149,7 +1149,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
aria-level={1}
|
||||
className="fui-TreeItem r15xhw3a ___jer8zr0_6no3ah0 f10bgyvd"
|
||||
data-fui-tree-item-value="root/child3ExpandingLabel"
|
||||
data-test="TreeNodeContainer:root/child3ExpandingLabel"
|
||||
data-testid="TreeNodeContainer:root/child3ExpandingLabel"
|
||||
onChange={[Function]}
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
@@ -1188,7 +1188,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
"layoutRef": {
|
||||
"current": <div
|
||||
class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_vz3p260 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root/child3ExpandingLabel"
|
||||
data-testid="TreeNode:root/child3ExpandingLabel"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
@@ -1240,13 +1240,13 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
aria-level="1"
|
||||
class="fui-TreeItem r15xhw3a ___jer8zr0_6no3ah0 f10bgyvd"
|
||||
data-fui-tree-item-value="root/child3ExpandingLabel"
|
||||
data-test="TreeNodeContainer:root/child3ExpandingLabel"
|
||||
data-testid="TreeNodeContainer:root/child3ExpandingLabel"
|
||||
role="treeitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_vz3p260 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root/child3ExpandingLabel"
|
||||
data-testid="TreeNode:root/child3ExpandingLabel"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
@@ -1294,7 +1294,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
<TreeItemLayout
|
||||
actions={false}
|
||||
className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root/child3ExpandingLabel"
|
||||
data-testid="TreeNode:root/child3ExpandingLabel"
|
||||
iconBefore={
|
||||
<img
|
||||
alt=""
|
||||
@@ -1305,7 +1305,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
>
|
||||
<div
|
||||
className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_vz3p260 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root/child3ExpandingLabel"
|
||||
data-testid="TreeNode:root/child3ExpandingLabel"
|
||||
>
|
||||
<div
|
||||
aria-hidden={true}
|
||||
@@ -1345,7 +1345,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
|
||||
exports[`TreeNodeComponent renders a loading spinner if the node is loading: loaded 1`] = `
|
||||
<TreeItem
|
||||
className=""
|
||||
data-test="TreeNodeContainer:root"
|
||||
data-testid="TreeNodeContainer:root"
|
||||
itemType="leaf"
|
||||
onOpenChange={[Function]}
|
||||
value="root"
|
||||
@@ -1353,7 +1353,7 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
|
||||
<TreeItemLayout
|
||||
actions={false}
|
||||
className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root"
|
||||
data-testid="TreeNode:root"
|
||||
iconBefore={
|
||||
<img
|
||||
alt=""
|
||||
@@ -1374,7 +1374,7 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
|
||||
exports[`TreeNodeComponent renders a loading spinner if the node is loading: loading 1`] = `
|
||||
<TreeItem
|
||||
className=""
|
||||
data-test="TreeNodeContainer:root"
|
||||
data-testid="TreeNodeContainer:root"
|
||||
itemType="leaf"
|
||||
onOpenChange={[Function]}
|
||||
value="root"
|
||||
@@ -1382,7 +1382,7 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
|
||||
<TreeItemLayout
|
||||
actions={false}
|
||||
className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root"
|
||||
data-testid="TreeNode:root"
|
||||
expandIcon={
|
||||
<Spinner
|
||||
size="extra-tiny"
|
||||
@@ -1408,7 +1408,7 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
|
||||
exports[`TreeNodeComponent renders a node as expandable if it has empty, but defined, children array 1`] = `
|
||||
<TreeItem
|
||||
className=""
|
||||
data-test="TreeNodeContainer:root"
|
||||
data-testid="TreeNodeContainer:root"
|
||||
itemType="branch"
|
||||
onOpenChange={[Function]}
|
||||
value="root"
|
||||
@@ -1416,10 +1416,10 @@ exports[`TreeNodeComponent renders a node as expandable if it has empty, but def
|
||||
<TreeItemLayout
|
||||
actions={false}
|
||||
className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root"
|
||||
data-testid="TreeNode:root"
|
||||
expandIcon={
|
||||
<ChevronRight20Regular
|
||||
data-text="TreeNode/ExpandIcon"
|
||||
data-testid="TreeNode/ExpandIcon"
|
||||
/>
|
||||
}
|
||||
iconBefore={
|
||||
@@ -1450,7 +1450,7 @@ exports[`TreeNodeComponent renders a node with a menu 1`] = `
|
||||
>
|
||||
<TreeItem
|
||||
className=""
|
||||
data-test="TreeNodeContainer:root"
|
||||
data-testid="TreeNodeContainer:root"
|
||||
itemType="leaf"
|
||||
onOpenChange={[Function]}
|
||||
value="root"
|
||||
@@ -1468,22 +1468,22 @@ exports[`TreeNodeComponent renders a node with a menu 1`] = `
|
||||
appearance="subtle"
|
||||
aria-label="More options"
|
||||
className="___1pg0eu5_pgl3ex0 f1twygmj"
|
||||
data-test="TreeNode/ContextMenuTrigger"
|
||||
data-testid="TreeNode/ContextMenuTrigger"
|
||||
icon={<MoreHorizontal20Regular />}
|
||||
/>
|
||||
</MenuTrigger>
|
||||
<MenuPopover
|
||||
data-test="TreeNode/ContextMenu:root"
|
||||
data-testid="TreeNode/ContextMenu:root"
|
||||
>
|
||||
<MenuList>
|
||||
<MenuItem
|
||||
data-test="TreeNode/ContextMenuItem:enabledItem"
|
||||
data-testid="TreeNode/ContextMenuItem:enabledItem"
|
||||
onClick={[Function]}
|
||||
>
|
||||
enabledItem
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
data-test="TreeNode/ContextMenuItem:disabledItem"
|
||||
data-testid="TreeNode/ContextMenuItem:disabledItem"
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
>
|
||||
@@ -1496,7 +1496,7 @@ exports[`TreeNodeComponent renders a node with a menu 1`] = `
|
||||
}
|
||||
}
|
||||
className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root"
|
||||
data-testid="TreeNode:root"
|
||||
iconBefore={
|
||||
<img
|
||||
alt=""
|
||||
@@ -1516,14 +1516,14 @@ exports[`TreeNodeComponent renders a node with a menu 1`] = `
|
||||
<MenuPopover>
|
||||
<MenuList>
|
||||
<MenuItem
|
||||
data-test="TreeNode/ContextMenuItem:enabledItem"
|
||||
data-testid="TreeNode/ContextMenuItem:enabledItem"
|
||||
key="enabledItem"
|
||||
onClick={[Function]}
|
||||
>
|
||||
enabledItem
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
data-test="TreeNode/ContextMenuItem:disabledItem"
|
||||
data-testid="TreeNode/ContextMenuItem:disabledItem"
|
||||
disabled={true}
|
||||
key="disabledItem"
|
||||
onClick={[Function]}
|
||||
@@ -1538,7 +1538,7 @@ exports[`TreeNodeComponent renders a node with a menu 1`] = `
|
||||
exports[`TreeNodeComponent renders a single node 1`] = `
|
||||
<TreeItem
|
||||
className=""
|
||||
data-test="TreeNodeContainer:root"
|
||||
data-testid="TreeNodeContainer:root"
|
||||
itemType="leaf"
|
||||
onOpenChange={[Function]}
|
||||
value="root"
|
||||
@@ -1546,7 +1546,7 @@ exports[`TreeNodeComponent renders a single node 1`] = `
|
||||
<TreeItemLayout
|
||||
actions={false}
|
||||
className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root"
|
||||
data-testid="TreeNode:root"
|
||||
iconBefore={
|
||||
<img
|
||||
alt=""
|
||||
@@ -1567,7 +1567,7 @@ exports[`TreeNodeComponent renders a single node 1`] = `
|
||||
exports[`TreeNodeComponent renders an icon if the node has one 1`] = `
|
||||
<TreeItem
|
||||
className=""
|
||||
data-test="TreeNodeContainer:root"
|
||||
data-testid="TreeNodeContainer:root"
|
||||
itemType="leaf"
|
||||
onOpenChange={[Function]}
|
||||
value="root"
|
||||
@@ -1575,7 +1575,7 @@ exports[`TreeNodeComponent renders an icon if the node has one 1`] = `
|
||||
<TreeItemLayout
|
||||
actions={false}
|
||||
className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root"
|
||||
data-testid="TreeNode:root"
|
||||
iconBefore={
|
||||
<img
|
||||
alt=""
|
||||
@@ -1596,7 +1596,7 @@ exports[`TreeNodeComponent renders an icon if the node has one 1`] = `
|
||||
exports[`TreeNodeComponent renders selected parent node as selected if no descendant nodes are selected 1`] = `
|
||||
<TreeItem
|
||||
className=""
|
||||
data-test="TreeNodeContainer:root"
|
||||
data-testid="TreeNodeContainer:root"
|
||||
itemType="branch"
|
||||
onOpenChange={[Function]}
|
||||
value="root"
|
||||
@@ -1604,10 +1604,10 @@ exports[`TreeNodeComponent renders selected parent node as selected if no descen
|
||||
<TreeItemLayout
|
||||
actions={false}
|
||||
className="___rq9vxg0_1ykn2d2 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1nfm20t f1do9gdl"
|
||||
data-test="TreeNode:root"
|
||||
data-testid="TreeNode:root"
|
||||
expandIcon={
|
||||
<ChevronRight20Regular
|
||||
data-text="TreeNode/ExpandIcon"
|
||||
data-testid="TreeNode/ExpandIcon"
|
||||
/>
|
||||
}
|
||||
iconBefore={
|
||||
@@ -1626,7 +1626,7 @@ exports[`TreeNodeComponent renders selected parent node as selected if no descen
|
||||
</TreeItemLayout>
|
||||
<Tree
|
||||
className="___17a32do_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
|
||||
data-test="Tree:root"
|
||||
data-testid="Tree:root"
|
||||
>
|
||||
<TreeNodeComponent
|
||||
key="child1Label"
|
||||
@@ -1679,7 +1679,7 @@ exports[`TreeNodeComponent renders selected parent node as selected if no descen
|
||||
exports[`TreeNodeComponent renders selected parent node as unselected if any descendant node is selected 1`] = `
|
||||
<TreeItem
|
||||
className=""
|
||||
data-test="TreeNodeContainer:root"
|
||||
data-testid="TreeNodeContainer:root"
|
||||
itemType="branch"
|
||||
onOpenChange={[Function]}
|
||||
value="root"
|
||||
@@ -1687,10 +1687,10 @@ exports[`TreeNodeComponent renders selected parent node as unselected if any des
|
||||
<TreeItemLayout
|
||||
actions={false}
|
||||
className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
|
||||
data-test="TreeNode:root"
|
||||
data-testid="TreeNode:root"
|
||||
expandIcon={
|
||||
<ChevronRight20Regular
|
||||
data-text="TreeNode/ExpandIcon"
|
||||
data-testid="TreeNode/ExpandIcon"
|
||||
/>
|
||||
}
|
||||
iconBefore={
|
||||
@@ -1709,7 +1709,7 @@ exports[`TreeNodeComponent renders selected parent node as unselected if any des
|
||||
</TreeItemLayout>
|
||||
<Tree
|
||||
className="___17a32do_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
|
||||
data-test="Tree:root"
|
||||
data-testid="Tree:root"
|
||||
>
|
||||
<TreeNodeComponent
|
||||
key="child1Label"
|
||||
@@ -1763,7 +1763,7 @@ exports[`TreeNodeComponent renders selected parent node as unselected if any des
|
||||
exports[`TreeNodeComponent renders single selected leaf node as selected 1`] = `
|
||||
<TreeItem
|
||||
className=""
|
||||
data-test="TreeNodeContainer:root"
|
||||
data-testid="TreeNodeContainer:root"
|
||||
itemType="leaf"
|
||||
onOpenChange={[Function]}
|
||||
value="root"
|
||||
@@ -1771,7 +1771,7 @@ exports[`TreeNodeComponent renders single selected leaf node as selected 1`] = `
|
||||
<TreeItemLayout
|
||||
actions={false}
|
||||
className="___rq9vxg0_1ykn2d2 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1nfm20t f1do9gdl"
|
||||
data-test="TreeNode:root"
|
||||
data-testid="TreeNode:root"
|
||||
iconBefore={
|
||||
<img
|
||||
alt=""
|
||||
|
||||
@@ -76,7 +76,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
|
||||
name: label,
|
||||
disabled: btn.disabled,
|
||||
ariaLabel: btn.ariaLabel,
|
||||
"data-test": `CommandBar/Button:${label}`,
|
||||
"data-testid": `CommandBar/Button:${label}`,
|
||||
buttonStyles: {
|
||||
root: {
|
||||
backgroundColor: backgroundColor,
|
||||
|
||||
@@ -133,7 +133,7 @@ export class NotificationConsoleComponent extends React.Component<
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="expandCollapseButton" data-test="NotificationConsole/ExpandCollapseButton">
|
||||
<div className="expandCollapseButton" data-testid="NotificationConsole/ExpandCollapseButton">
|
||||
<img
|
||||
src={this.props.isConsoleExpanded ? ChevronDownIcon : ChevronUpIcon}
|
||||
alt={this.props.isConsoleExpanded ? "Collapse icon" : "Expand icon"}
|
||||
@@ -145,7 +145,7 @@ export class NotificationConsoleComponent extends React.Component<
|
||||
height={this.props.isConsoleExpanded ? "auto" : 0}
|
||||
onAnimationEnd={this.onConsoleWasExpanded}
|
||||
>
|
||||
<div data-test="NotificationConsole/Contents" className="notificationConsoleContents">
|
||||
<div data-testid="NotificationConsole/Contents" className="notificationConsoleContents">
|
||||
<div className="notificationConsoleControls">
|
||||
<Dropdown
|
||||
label="Filter:"
|
||||
|
||||
@@ -88,7 +88,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
|
||||
</div>
|
||||
<div
|
||||
className="expandCollapseButton"
|
||||
data-test="NotificationConsole/ExpandCollapseButton"
|
||||
data-testid="NotificationConsole/ExpandCollapseButton"
|
||||
>
|
||||
<img
|
||||
alt="Expand icon"
|
||||
@@ -122,7 +122,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
|
||||
>
|
||||
<div
|
||||
className="notificationConsoleContents"
|
||||
data-test="NotificationConsole/Contents"
|
||||
data-testid="NotificationConsole/Contents"
|
||||
>
|
||||
<div
|
||||
className="notificationConsoleControls"
|
||||
@@ -273,7 +273,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
|
||||
</div>
|
||||
<div
|
||||
className="expandCollapseButton"
|
||||
data-test="NotificationConsole/ExpandCollapseButton"
|
||||
data-testid="NotificationConsole/ExpandCollapseButton"
|
||||
>
|
||||
<img
|
||||
alt="Expand icon"
|
||||
@@ -307,7 +307,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
|
||||
>
|
||||
<div
|
||||
className="notificationConsoleContents"
|
||||
data-test="NotificationConsole/Contents"
|
||||
data-testid="NotificationConsole/Contents"
|
||||
>
|
||||
<div
|
||||
className="notificationConsoleControls"
|
||||
|
||||
@@ -56,16 +56,16 @@ export class StatusBar extends React.Component<Props> {
|
||||
|
||||
return (
|
||||
<BarContainer>
|
||||
<Bar data-test="notebookStatusBar">
|
||||
<Bar data-testid="notebookStatusBar">
|
||||
<RightStatus>
|
||||
{this.props.lastSaved ? (
|
||||
<p data-test="saveStatus"> Last saved {distanceInWordsToNow(this.props.lastSaved)} </p>
|
||||
<p data-testid="saveStatus"> Last saved {distanceInWordsToNow(this.props.lastSaved)} </p>
|
||||
) : (
|
||||
<p> Not saved yet </p>
|
||||
)}
|
||||
</RightStatus>
|
||||
<LeftStatus>
|
||||
<p data-test="kernelStatus">
|
||||
<p data-testid="kernelStatus">
|
||||
{name} | {this.props.kernelStatus}
|
||||
</p>
|
||||
</LeftStatus>
|
||||
|
||||
@@ -301,6 +301,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
|
||||
type="radio"
|
||||
role="radio"
|
||||
id="databaseCreateNew"
|
||||
data-testid="AddCollectionPanel/DatabaseRadio:CreateNew"
|
||||
tabIndex={0}
|
||||
onChange={this.onCreateNewDatabaseRadioBtnChange.bind(this)}
|
||||
/>
|
||||
@@ -314,6 +315,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
|
||||
name="databaseType"
|
||||
type="radio"
|
||||
role="radio"
|
||||
data-testid="AddCollectionPanel/DatabaseRadio:UseExisting"
|
||||
tabIndex={0}
|
||||
onChange={this.onUseExistingDatabaseRadioBtnChange.bind(this)}
|
||||
/>
|
||||
@@ -337,6 +339,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
|
||||
size={40}
|
||||
className="panelTextField"
|
||||
aria-label="New database id, Type a new database id"
|
||||
data-testid="AddCollectionPanel/DatabaseId"
|
||||
tabIndex={0}
|
||||
value={this.state.newDatabaseId}
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
@@ -346,18 +349,20 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
|
||||
|
||||
{!isServerlessAccount() && (
|
||||
<Stack horizontal>
|
||||
<Checkbox
|
||||
label={`Share throughput across ${getCollectionName(true).toLocaleLowerCase()}`}
|
||||
checked={this.state.isSharedThroughputChecked}
|
||||
styles={{
|
||||
text: { fontSize: 12 },
|
||||
checkbox: { width: 12, height: 12 },
|
||||
label: { padding: 0, alignItems: "center" },
|
||||
}}
|
||||
onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
|
||||
this.setState({ isSharedThroughputChecked: isChecked })
|
||||
}
|
||||
/>
|
||||
<div data-testid="AddCollectionPanel/SharedThroughputCheckbox">
|
||||
<Checkbox
|
||||
label={`Share throughput across ${getCollectionName(true).toLocaleLowerCase()}`}
|
||||
checked={this.state.isSharedThroughputChecked}
|
||||
styles={{
|
||||
text: { fontSize: 12 },
|
||||
checkbox: { width: 12, height: 12 },
|
||||
label: { padding: 0, alignItems: "center" },
|
||||
}}
|
||||
onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
|
||||
this.setState({ isSharedThroughputChecked: isChecked })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<TooltipHost
|
||||
directionalHint={DirectionalHint.bottomLeftEdge}
|
||||
content={`Throughput configured at the database level will be shared across all ${getCollectionName(
|
||||
@@ -396,6 +401,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
|
||||
{!this.state.createNewDatabase && (
|
||||
<Dropdown
|
||||
ariaLabel="Choose an existing database"
|
||||
data-testid="AddCollectionPanel/ExistingDatabaseDropdown"
|
||||
styles={{ title: { height: 27, lineHeight: 27 }, dropdownItem: { fontSize: 12 } }}
|
||||
style={{ width: 300, fontSize: 12 }}
|
||||
placeholder="Choose an existing database"
|
||||
@@ -443,6 +449,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
|
||||
placeholder={`e.g., ${getCollectionName()}1`}
|
||||
size={40}
|
||||
className="panelTextField"
|
||||
data-testid="AddCollectionPanel/CollectionId"
|
||||
aria-label={`${getCollectionName()} id, Example ${getCollectionName()}1`}
|
||||
value={this.state.collectionId}
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
@@ -576,6 +583,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
|
||||
<input
|
||||
type="text"
|
||||
id="addCollection-partitionKeyValue"
|
||||
data-testid="AddCollectionPanel/PartitionKey"
|
||||
aria-required
|
||||
required
|
||||
size={40}
|
||||
@@ -612,6 +620,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
|
||||
<input
|
||||
type="text"
|
||||
id="addCollection-partitionKeyValue"
|
||||
data-testid="AddCollectionPanel/PartitionKey"
|
||||
key={`addCollection-partitionKeyValue_${index}`}
|
||||
aria-required
|
||||
required
|
||||
@@ -729,7 +738,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
|
||||
)}
|
||||
|
||||
{!isFabricNative() && userContext.apiType === "SQL" && (
|
||||
<Stack style={{ marginTop: -2, marginBottom: -4 }}>
|
||||
<Stack style={{ marginTop: -2, marginBottom: -4 }} data-testid="AddCollectionPanel/UniqueKeysSection">
|
||||
{UniqueKeysHeader()}
|
||||
{this.state.uniqueKeys.map((uniqueKey: string, i: number): JSX.Element => {
|
||||
return (
|
||||
@@ -743,6 +752,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
|
||||
: "Comma separated paths e.g. /firstName,/address/zipCode"
|
||||
}
|
||||
className="panelTextField"
|
||||
data-testid="AddCollectionPanel/UniqueKey"
|
||||
value={uniqueKey}
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const uniqueKeys = this.state.uniqueKeys.map((uniqueKey: string, j: number) => {
|
||||
@@ -769,6 +779,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
|
||||
|
||||
<ActionButton
|
||||
iconProps={{ iconName: "Add" }}
|
||||
data-testid="AddCollectionPanel/AddUniqueKeyButton"
|
||||
styles={{ root: { padding: 0 }, label: { fontSize: 12 } }}
|
||||
onClick={() => this.setState({ uniqueKeys: [...this.state.uniqueKeys, ""] })}
|
||||
>
|
||||
|
||||
@@ -56,6 +56,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
|
||||
aria-label="Create new database"
|
||||
checked={true}
|
||||
className="panelRadioBtn"
|
||||
data-testid="AddCollectionPanel/DatabaseRadio:CreateNew"
|
||||
id="databaseCreateNew"
|
||||
name="databaseType"
|
||||
onChange={[Function]}
|
||||
@@ -73,6 +74,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
|
||||
aria-label="Use existing database"
|
||||
checked={false}
|
||||
className="panelRadioBtn"
|
||||
data-testid="AddCollectionPanel/DatabaseRadio:UseExisting"
|
||||
name="databaseType"
|
||||
onChange={[Function]}
|
||||
role="radio"
|
||||
@@ -94,6 +96,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
|
||||
aria-required={true}
|
||||
autoComplete="off"
|
||||
className="panelTextField"
|
||||
data-testid="AddCollectionPanel/DatabaseId"
|
||||
id="newDatabaseId"
|
||||
name="newDatabaseId"
|
||||
onChange={[Function]}
|
||||
@@ -109,26 +112,30 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
|
||||
<Stack
|
||||
horizontal={true}
|
||||
>
|
||||
<StyledCheckboxBase
|
||||
checked={false}
|
||||
label="Share throughput across containers"
|
||||
onChange={[Function]}
|
||||
styles={
|
||||
{
|
||||
"checkbox": {
|
||||
"height": 12,
|
||||
"width": 12,
|
||||
},
|
||||
"label": {
|
||||
"alignItems": "center",
|
||||
"padding": 0,
|
||||
},
|
||||
"text": {
|
||||
"fontSize": 12,
|
||||
},
|
||||
<div
|
||||
data-testid="AddCollectionPanel/SharedThroughputCheckbox"
|
||||
>
|
||||
<StyledCheckboxBase
|
||||
checked={false}
|
||||
label="Share throughput across containers"
|
||||
onChange={[Function]}
|
||||
styles={
|
||||
{
|
||||
"checkbox": {
|
||||
"height": 12,
|
||||
"width": 12,
|
||||
},
|
||||
"label": {
|
||||
"alignItems": "center",
|
||||
"padding": 0,
|
||||
},
|
||||
"text": {
|
||||
"fontSize": 12,
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
/>
|
||||
/>
|
||||
</div>
|
||||
<StyledTooltipHostBase
|
||||
content="Throughput configured at the database level will be shared across all containers within the database."
|
||||
directionalHint={4}
|
||||
@@ -191,6 +198,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
|
||||
aria-required={true}
|
||||
autoComplete="off"
|
||||
className="panelTextField"
|
||||
data-testid="AddCollectionPanel/CollectionId"
|
||||
id="collectionId"
|
||||
name="collectionId"
|
||||
onChange={[Function]}
|
||||
@@ -252,6 +260,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
|
||||
aria-label="Partition key"
|
||||
aria-required={true}
|
||||
className="panelTextField"
|
||||
data-testid="AddCollectionPanel/PartitionKey"
|
||||
id="addCollection-partitionKeyValue"
|
||||
onChange={[Function]}
|
||||
pattern=".*"
|
||||
@@ -304,6 +313,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
|
||||
setThroughputValue={[Function]}
|
||||
/>
|
||||
<Stack
|
||||
data-testid="AddCollectionPanel/UniqueKeysSection"
|
||||
style={
|
||||
{
|
||||
"marginBottom": -4,
|
||||
@@ -338,6 +348,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
|
||||
</StyledTooltipHostBase>
|
||||
</Stack>
|
||||
<CustomizedActionButton
|
||||
data-testid="AddCollectionPanel/AddUniqueKeyButton"
|
||||
iconProps={
|
||||
{
|
||||
"iconName": "Add",
|
||||
|
||||
@@ -199,6 +199,7 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
|
||||
{keyspaceCreateNew && (
|
||||
<Stack className="panelGroupSpacing">
|
||||
<TextField
|
||||
data-testid="AddCollectionPanel/DatabaseId"
|
||||
aria-required="true"
|
||||
required={true}
|
||||
autoComplete="off"
|
||||
@@ -215,16 +216,20 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
|
||||
|
||||
{!isServerlessAccount() && (
|
||||
<Stack horizontal>
|
||||
<Checkbox
|
||||
label="Provision shared throughput"
|
||||
checked={isKeyspaceShared}
|
||||
styles={{
|
||||
text: { fontSize: 12 },
|
||||
checkbox: { width: 12, height: 12 },
|
||||
label: { padding: 0, alignItems: "center" },
|
||||
}}
|
||||
onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) => setIsKeyspaceShared(isChecked)}
|
||||
/>
|
||||
<div data-testid="AddCollectionPanel/SharedThroughputCheckbox">
|
||||
<Checkbox
|
||||
label="Provision shared throughput"
|
||||
checked={isKeyspaceShared}
|
||||
styles={{
|
||||
text: { fontSize: 12 },
|
||||
checkbox: { width: 12, height: 12 },
|
||||
label: { padding: 0, alignItems: "center" },
|
||||
}}
|
||||
onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
|
||||
setIsKeyspaceShared(isChecked)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<InfoTooltip>
|
||||
Provisioned throughput at the keyspace level will be shared across unlimited number of tables within
|
||||
the keyspace
|
||||
@@ -287,6 +292,7 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
|
||||
{`CREATE TABLE ${keyspaceCreateNew ? newKeyspaceId : existingKeyspaceId}.`}
|
||||
</Text>
|
||||
<TextField
|
||||
data-testid="AddCollectionPanel/CollectionId"
|
||||
underlined
|
||||
styles={getTextFieldStyles({ fontSize: 12, width: 150 })}
|
||||
aria-required="true"
|
||||
|
||||
@@ -120,6 +120,7 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
|
||||
<Text variant="small">Confirm by typing the {collectionName.toLowerCase()} id</Text>
|
||||
<TextField
|
||||
id="confirmCollectionId"
|
||||
data-testid="DeleteCollectionConfirmationPane/ConfirmInput"
|
||||
autoFocus
|
||||
value={inputCollectionName}
|
||||
styles={{ fieldGroup: { width: 300 } }}
|
||||
|
||||
@@ -42,6 +42,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
||||
<StyledTextFieldBase
|
||||
ariaLabel="Confirm by typing the container id"
|
||||
autoFocus={true}
|
||||
data-testid="DeleteCollectionConfirmationPane/ConfirmInput"
|
||||
id="confirmCollectionId"
|
||||
onChange={[Function]}
|
||||
required={true}
|
||||
@@ -57,6 +58,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
||||
<TextFieldBase
|
||||
ariaLabel="Confirm by typing the container id"
|
||||
autoFocus={true}
|
||||
data-testid="DeleteCollectionConfirmationPane/ConfirmInput"
|
||||
deferredValidationTime={200}
|
||||
id="confirmCollectionId"
|
||||
onChange={[Function]}
|
||||
@@ -353,6 +355,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
||||
aria-label="Confirm by typing the container id"
|
||||
autoFocus={true}
|
||||
className="ms-TextField-field field-113"
|
||||
data-testid="DeleteCollectionConfirmationPane/ConfirmInput"
|
||||
id="confirmCollectionId"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
@@ -379,7 +382,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
||||
>
|
||||
<CustomizedPrimaryButton
|
||||
ariaLabel="OK"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
text="OK"
|
||||
@@ -390,7 +393,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
||||
>
|
||||
<PrimaryButton
|
||||
ariaLabel="OK"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
styles={
|
||||
@@ -681,7 +684,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
||||
>
|
||||
<CustomizedDefaultButton
|
||||
ariaLabel="OK"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
@@ -977,7 +980,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
||||
>
|
||||
<DefaultButton
|
||||
ariaLabel="OK"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
@@ -1271,7 +1274,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
||||
<BaseButton
|
||||
ariaLabel="OK"
|
||||
baseClassName="ms-Button"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
@@ -2157,7 +2160,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
||||
aria-label="OK"
|
||||
className="ms-Button ms-Button--primary root-122"
|
||||
data-is-focusable={true}
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
id="sidePanelOkButton"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
|
||||
@@ -135,7 +135,7 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
|
||||
<Text variant="small">{confirmDatabase}</Text>
|
||||
<TextField
|
||||
id="confirmDatabaseId"
|
||||
data-test="Input:confirmDatabaseId"
|
||||
data-testid="DeleteDatabaseConfirmationPanel/ConfirmInput"
|
||||
autoFocus
|
||||
styles={{ fieldGroup: { width: 300 } }}
|
||||
onChange={(event, newInput?: string) => {
|
||||
|
||||
@@ -5312,7 +5312,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
|
||||
>
|
||||
<CustomizedPrimaryButton
|
||||
ariaLabel="Execute"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
text="Execute"
|
||||
@@ -5323,7 +5323,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
|
||||
>
|
||||
<PrimaryButton
|
||||
ariaLabel="Execute"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
styles={
|
||||
@@ -5614,7 +5614,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
|
||||
>
|
||||
<CustomizedDefaultButton
|
||||
ariaLabel="Execute"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
@@ -5910,7 +5910,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
|
||||
>
|
||||
<DefaultButton
|
||||
ariaLabel="Execute"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
@@ -6204,7 +6204,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
|
||||
<BaseButton
|
||||
ariaLabel="Execute"
|
||||
baseClassName="ms-Button"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
@@ -7090,7 +7090,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
|
||||
aria-label="Execute"
|
||||
className="ms-Button ms-Button--primary root-148"
|
||||
data-is-focusable={true}
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
id="sidePanelOkButton"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
|
||||
@@ -54,7 +54,7 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
|
||||
|
||||
return (
|
||||
<Panel
|
||||
data-test={`Panel:${this.props.headerText}`}
|
||||
data-testid={`Panel:${this.props.headerText}`}
|
||||
headerText={this.props.headerText}
|
||||
isOpen={this.props.isOpen}
|
||||
onDismiss={this.onDissmiss}
|
||||
|
||||
@@ -16,7 +16,7 @@ export const PanelFooterComponent: React.FunctionComponent<PanelFooterProps> = (
|
||||
<PrimaryButton
|
||||
type="submit"
|
||||
id="sidePanelOkButton"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
text={buttonLabel}
|
||||
ariaLabel={buttonLabel}
|
||||
disabled={!!isButtonDisabled}
|
||||
|
||||
@@ -21,7 +21,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
|
||||
>
|
||||
<CustomizedPrimaryButton
|
||||
ariaLabel="Load"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
text="Load"
|
||||
@@ -32,7 +32,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
|
||||
>
|
||||
<PrimaryButton
|
||||
ariaLabel="Load"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
styles={
|
||||
@@ -323,7 +323,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
|
||||
>
|
||||
<CustomizedDefaultButton
|
||||
ariaLabel="Load"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
@@ -619,7 +619,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
|
||||
>
|
||||
<DefaultButton
|
||||
ariaLabel="Load"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
@@ -913,7 +913,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
|
||||
<BaseButton
|
||||
ariaLabel="Load"
|
||||
baseClassName="ms-Button"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
@@ -1799,7 +1799,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
|
||||
aria-label="Load"
|
||||
className="ms-Button ms-Button--primary root-109"
|
||||
data-is-focusable={true}
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
id="sidePanelOkButton"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
|
||||
@@ -688,7 +688,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
|
||||
>
|
||||
<CustomizedPrimaryButton
|
||||
ariaLabel="Create"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
text="Create"
|
||||
@@ -699,7 +699,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
|
||||
>
|
||||
<PrimaryButton
|
||||
ariaLabel="Create"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
styles={
|
||||
@@ -990,7 +990,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
|
||||
>
|
||||
<CustomizedDefaultButton
|
||||
ariaLabel="Create"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
@@ -1286,7 +1286,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
|
||||
>
|
||||
<DefaultButton
|
||||
ariaLabel="Create"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
@@ -1580,7 +1580,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
|
||||
<BaseButton
|
||||
ariaLabel="Create"
|
||||
baseClassName="ms-Button"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
@@ -2466,7 +2466,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
|
||||
aria-label="Create"
|
||||
className="ms-Button ms-Button--primary root-128"
|
||||
data-is-focusable={true}
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
id="sidePanelOkButton"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
|
||||
@@ -1258,7 +1258,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
|
||||
>
|
||||
<CustomizedPrimaryButton
|
||||
ariaLabel="OK"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
text="OK"
|
||||
@@ -1269,7 +1269,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
|
||||
>
|
||||
<PrimaryButton
|
||||
ariaLabel="OK"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
styles={
|
||||
@@ -1560,7 +1560,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
|
||||
>
|
||||
<CustomizedDefaultButton
|
||||
ariaLabel="OK"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
@@ -1856,7 +1856,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
|
||||
>
|
||||
<DefaultButton
|
||||
ariaLabel="OK"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
@@ -2150,7 +2150,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
|
||||
<BaseButton
|
||||
ariaLabel="OK"
|
||||
baseClassName="ms-Button"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
@@ -3036,7 +3036,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
|
||||
aria-label="OK"
|
||||
className="ms-Button ms-Button--primary root-125"
|
||||
data-is-focusable={true}
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
id="sidePanelOkButton"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
|
||||
@@ -369,7 +369,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
|
||||
>
|
||||
<CustomizedPrimaryButton
|
||||
ariaLabel="Add Entity"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
text="Add Entity"
|
||||
@@ -380,7 +380,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
|
||||
>
|
||||
<PrimaryButton
|
||||
ariaLabel="Add Entity"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
styles={
|
||||
@@ -671,7 +671,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
|
||||
>
|
||||
<CustomizedDefaultButton
|
||||
ariaLabel="Add Entity"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
@@ -967,7 +967,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
|
||||
>
|
||||
<DefaultButton
|
||||
ariaLabel="Add Entity"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
@@ -1261,7 +1261,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
|
||||
<BaseButton
|
||||
ariaLabel="Add Entity"
|
||||
baseClassName="ms-Button"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
@@ -2147,7 +2147,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
|
||||
aria-label="Add Entity"
|
||||
className="ms-Button ms-Button--primary root-113"
|
||||
data-is-focusable={true}
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
id="sidePanelOkButton"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
|
||||
@@ -375,7 +375,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
|
||||
>
|
||||
<CustomizedPrimaryButton
|
||||
ariaLabel="Update"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
text="Update"
|
||||
@@ -386,7 +386,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
|
||||
>
|
||||
<PrimaryButton
|
||||
ariaLabel="Update"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
styles={
|
||||
@@ -677,7 +677,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
|
||||
>
|
||||
<CustomizedDefaultButton
|
||||
ariaLabel="Update"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
@@ -973,7 +973,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
|
||||
>
|
||||
<DefaultButton
|
||||
ariaLabel="Update"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
@@ -1267,7 +1267,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
|
||||
<BaseButton
|
||||
ariaLabel="Update"
|
||||
baseClassName="ms-Button"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
@@ -2153,7 +2153,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
|
||||
aria-label="Update"
|
||||
className="ms-Button ms-Button--primary root-113"
|
||||
data-is-focusable={true}
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
id="sidePanelOkButton"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
|
||||
@@ -367,7 +367,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
|
||||
<StyledTextFieldBase
|
||||
ariaLabel="Confirm by typing the Database id (name)"
|
||||
autoFocus={true}
|
||||
data-test="Input:confirmDatabaseId"
|
||||
data-testid="DeleteDatabaseConfirmationPanel/ConfirmInput"
|
||||
id="confirmDatabaseId"
|
||||
onChange={[Function]}
|
||||
required={true}
|
||||
@@ -382,7 +382,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
|
||||
<TextFieldBase
|
||||
ariaLabel="Confirm by typing the Database id (name)"
|
||||
autoFocus={true}
|
||||
data-test="Input:confirmDatabaseId"
|
||||
data-testid="DeleteDatabaseConfirmationPanel/ConfirmInput"
|
||||
deferredValidationTime={200}
|
||||
id="confirmDatabaseId"
|
||||
onChange={[Function]}
|
||||
@@ -678,7 +678,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
|
||||
aria-label="Confirm by typing the Database id (name)"
|
||||
autoFocus={true}
|
||||
className="ms-TextField-field field-117"
|
||||
data-test="Input:confirmDatabaseId"
|
||||
data-testid="DeleteDatabaseConfirmationPanel/ConfirmInput"
|
||||
id="confirmDatabaseId"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
@@ -1054,7 +1054,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
|
||||
>
|
||||
<CustomizedPrimaryButton
|
||||
ariaLabel="OK"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
text="OK"
|
||||
@@ -1065,7 +1065,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
|
||||
>
|
||||
<PrimaryButton
|
||||
ariaLabel="OK"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
styles={
|
||||
@@ -1356,7 +1356,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
|
||||
>
|
||||
<CustomizedDefaultButton
|
||||
ariaLabel="OK"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
@@ -1652,7 +1652,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
|
||||
>
|
||||
<DefaultButton
|
||||
ariaLabel="OK"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
@@ -1946,7 +1946,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
|
||||
<BaseButton
|
||||
ariaLabel="OK"
|
||||
baseClassName="ms-Button"
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
disabled={false}
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
@@ -2832,7 +2832,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
|
||||
aria-label="OK"
|
||||
className="ms-Button ms-Button--primary root-130"
|
||||
data-is-focusable={true}
|
||||
data-test="Panel/OkButton"
|
||||
data-testid="Panel/OkButton"
|
||||
id="sidePanelOkButton"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
|
||||
@@ -4,7 +4,7 @@ exports[`PaneContainerComponent test should be resize if notification console is
|
||||
<StyledPanelBase
|
||||
closeButtonAriaLabel="Close test"
|
||||
customWidth="440px"
|
||||
data-test="Panel:test"
|
||||
data-testid="Panel:test"
|
||||
headerClassName="panelHeader"
|
||||
headerText="test"
|
||||
isFooterAtBottom={true}
|
||||
@@ -43,7 +43,7 @@ exports[`PaneContainerComponent test should not render console with panel 1`] =
|
||||
<StyledPanelBase
|
||||
closeButtonAriaLabel="Close test"
|
||||
customWidth="440px"
|
||||
data-test="Panel:test"
|
||||
data-testid="Panel:test"
|
||||
headerClassName="panelHeader"
|
||||
headerText="test"
|
||||
isFooterAtBottom={true}
|
||||
@@ -84,7 +84,7 @@ exports[`PaneContainerComponent test should render with panel content and header
|
||||
<StyledPanelBase
|
||||
closeButtonAriaLabel="Close test"
|
||||
customWidth="440px"
|
||||
data-test="Panel:test"
|
||||
data-testid="Panel:test"
|
||||
headerClassName="panelHeader"
|
||||
headerText="test"
|
||||
isFooterAtBottom={true}
|
||||
|
||||
@@ -242,9 +242,14 @@ const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.globalCommandsContainer} data-test="GlobalCommands">
|
||||
<div className={styles.globalCommandsContainer} data-testid="GlobalCommands">
|
||||
{actions.length === 1 ? (
|
||||
<Button icon={primaryAction.icon} onClick={onPrimaryActionClick} ref={primaryFocusableRef}>
|
||||
<Button
|
||||
data-testid={`GlobalCommands/Button:${primaryAction.label}`}
|
||||
icon={primaryAction.icon}
|
||||
onClick={onPrimaryActionClick}
|
||||
ref={primaryFocusableRef}
|
||||
>
|
||||
{primaryAction.label}
|
||||
</Button>
|
||||
) : (
|
||||
@@ -253,8 +258,12 @@ const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
|
||||
{(triggerProps: MenuButtonProps) => (
|
||||
<div ref={setGlobalCommandButton}>
|
||||
<SplitButton
|
||||
data-testid={`GlobalCommands/Button:${primaryAction.label}`}
|
||||
menuButton={{ ...triggerProps, "aria-label": "More commands" }}
|
||||
primaryActionButton={{ onClick: onPrimaryActionClick, ref: primaryFocusableRef }}
|
||||
primaryActionButton={{
|
||||
onClick: onPrimaryActionClick,
|
||||
ref: primaryFocusableRef,
|
||||
}}
|
||||
className={styles.globalCommandsSplitButton}
|
||||
icon={primaryAction.icon}
|
||||
>
|
||||
@@ -376,7 +385,7 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
|
||||
{!isFabricNative() && (
|
||||
<button
|
||||
type="button"
|
||||
data-test="Sidebar/RefreshButton"
|
||||
data-testid="Sidebar/RefreshButton"
|
||||
className={styles.floatingControlButton}
|
||||
disabled={loading}
|
||||
title="Refresh"
|
||||
|
||||
@@ -2146,8 +2146,8 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
|
||||
|
||||
return (
|
||||
<CosmosFluentProvider className={styles.container}>
|
||||
<div data-test={"DocumentsTab"} className="tab-pane active" role="tabpanel" style={{ display: "flex" }}>
|
||||
<div data-test={"DocumentsTab/Filter"} className={`${styles.filterRow} ${styles.smallScreenContent}`}>
|
||||
<div data-testid={"DocumentsTab"} className="tab-pane active" role="tabpanel" style={{ display: "flex" }}>
|
||||
<div data-testid={"DocumentsTab/Filter"} className={`${styles.filterRow} ${styles.smallScreenContent}`}>
|
||||
{!isPreferredApiMongoDB && <span> SELECT * FROM c </span>}
|
||||
<InputDataList
|
||||
dropdownOptions={getFilterChoices()}
|
||||
@@ -2164,7 +2164,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
|
||||
/>
|
||||
<Button
|
||||
appearance="primary"
|
||||
data-test={"DocumentsTab/ApplyFilter"}
|
||||
data-testid={"DocumentsTab/ApplyFilter"}
|
||||
size="small"
|
||||
onClick={() => {
|
||||
if (isExecuting) {
|
||||
@@ -2191,7 +2191,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
|
||||
>
|
||||
<Allotment.Pane preferredSize={`${tabStateData.leftPaneWidthPercent}%`} minSize={55}>
|
||||
<div
|
||||
data-test={"DocumentsTab/DocumentsPane"}
|
||||
data-testid={"DocumentsTab/DocumentsPane"}
|
||||
style={{ height: "100%", width: "100%", overflow: "hidden" }}
|
||||
ref={tableContainerRef}
|
||||
>
|
||||
@@ -2237,7 +2237,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
|
||||
{tableItems.length > 0 && (
|
||||
<a
|
||||
className={styles.loadMore}
|
||||
data-test={"DocumentsTab/LoadMore"}
|
||||
data-testid={"DocumentsTab/LoadMore"}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => loadNextPage(documentsIterator.iterator, false)}
|
||||
@@ -2249,7 +2249,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
|
||||
</div>
|
||||
</Allotment.Pane>
|
||||
<Allotment.Pane minSize={30}>
|
||||
<div data-test={"DocumentsTab/ResultsPane"} style={{ height: "100%", width: "100%" }}>
|
||||
<div data-testid={"DocumentsTab/ResultsPane"} style={{ height: "100%", width: "100%" }}>
|
||||
{isTabActive && selectedDocumentContent && selectedRows.size <= 1 && (
|
||||
<EditorReact
|
||||
language={"json"}
|
||||
|
||||
@@ -6,7 +6,7 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
|
||||
>
|
||||
<div
|
||||
className="tab-pane active"
|
||||
data-test="DocumentsTab"
|
||||
data-testid="DocumentsTab"
|
||||
role="tabpanel"
|
||||
style={
|
||||
{
|
||||
@@ -16,7 +16,7 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
|
||||
>
|
||||
<div
|
||||
className="___11ktxfv_0000000 f1o614cb fy9rknc f22iagw fsnqrgy f1f5gg8d fjodcmx f122n59 f1f09k3d fg706s2 frpde29 ___1ngl8o6_0000000 fz7mnu6 fl3egqs flhmrkm"
|
||||
data-test="DocumentsTab/Filter"
|
||||
data-testid="DocumentsTab/Filter"
|
||||
>
|
||||
<span>
|
||||
SELECT * FROM c
|
||||
@@ -51,7 +51,7 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
|
||||
<Button
|
||||
appearance="primary"
|
||||
aria-label="Apply filter"
|
||||
data-test="DocumentsTab/ApplyFilter"
|
||||
data-testid="DocumentsTab/ApplyFilter"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
size="small"
|
||||
@@ -68,7 +68,7 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
|
||||
preferredSize="35%"
|
||||
>
|
||||
<div
|
||||
data-test="DocumentsTab/DocumentsPane"
|
||||
data-testid="DocumentsTab/DocumentsPane"
|
||||
style={
|
||||
{
|
||||
"height": "100%",
|
||||
@@ -130,7 +130,7 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
|
||||
minSize={30}
|
||||
>
|
||||
<div
|
||||
data-test="DocumentsTab/ResultsPane"
|
||||
data-testid="DocumentsTab/ResultsPane"
|
||||
style={
|
||||
{
|
||||
"height": "100%",
|
||||
|
||||
@@ -116,7 +116,7 @@ export const ErrorList: React.FC<{ errors: QueryError[] }> = ({ errors }) => {
|
||||
|
||||
return (
|
||||
<DataGrid
|
||||
data-test="QueryTab/ResultsPane/ErrorList"
|
||||
data-testid="QueryTab/ResultsPane/ErrorList"
|
||||
items={errors}
|
||||
columns={columns}
|
||||
sortable
|
||||
@@ -131,9 +131,9 @@ export const ErrorList: React.FC<{ errors: QueryError[] }> = ({ errors }) => {
|
||||
</DataGridHeader>
|
||||
<DataGridBody<QueryError>>
|
||||
{({ item, rowId }) => (
|
||||
<DataGridRow<QueryError> key={rowId} data-test={`Row:${rowId}`}>
|
||||
<DataGridRow<QueryError> key={rowId} data-testid={`Row:${rowId}`}>
|
||||
{({ columnId, renderCell }) => (
|
||||
<DataGridCell data-test={`Row:${rowId}/Column:${columnId}`}>{renderCell(item)}</DataGridCell>
|
||||
<DataGridCell data-testid={`Row:${rowId}/Column:${columnId}`}>{renderCell(item)}</DataGridCell>
|
||||
)}
|
||||
</DataGridRow>
|
||||
)}
|
||||
|
||||
@@ -3,13 +3,13 @@ import QueryError from "Common/QueryError";
|
||||
import { IndeterminateProgressBar } from "Explorer/Controls/IndeterminateProgressBar";
|
||||
import { MessageBanner } from "Explorer/Controls/MessageBanner";
|
||||
import { useQueryTabStyles } from "Explorer/Tabs/QueryTab/Styles";
|
||||
import useZoomLevel from "hooks/useZoomLevel";
|
||||
import React from "react";
|
||||
import { conditionalClass } from "Utils/StyleUtils";
|
||||
import RunQuery from "../../../../images/RunQuery.png";
|
||||
import { QueryResults } from "../../../Contracts/ViewModels";
|
||||
import { ErrorList } from "./ErrorList";
|
||||
import { ResultsView } from "./ResultsView";
|
||||
import useZoomLevel from "hooks/useZoomLevel";
|
||||
import { conditionalClass } from "Utils/StyleUtils";
|
||||
|
||||
export interface ResultsViewProps {
|
||||
isMongoDB: boolean;
|
||||
@@ -27,7 +27,7 @@ const ExecuteQueryCallToAction: React.FC = () => {
|
||||
const styles = useQueryTabStyles();
|
||||
const isZoomed = useZoomLevel();
|
||||
return (
|
||||
<div data-test="QueryTab/ResultsPane/ExecuteCTA" className={styles.executeCallToAction}>
|
||||
<div data-testid="QueryTab/ResultsPane/ExecuteCTA" className={styles.executeCallToAction}>
|
||||
<div>
|
||||
<p>
|
||||
<img
|
||||
@@ -54,7 +54,7 @@ export const QueryResultSection: React.FC<QueryResultProps> = ({
|
||||
const maybeSubQuery = queryEditorContent && /.*\(.*SELECT.*\)/i.test(queryEditorContent);
|
||||
|
||||
return (
|
||||
<div data-test="QueryTab/ResultsPane" className={styles.queryResultsPanel}>
|
||||
<div data-testid="QueryTab/ResultsPane" className={styles.queryResultsPanel}>
|
||||
{isExecuting && <IndeterminateProgressBar />}
|
||||
<MessageBanner
|
||||
messageId="QueryEditor.EmptyMongoQuery"
|
||||
|
||||
@@ -64,7 +64,7 @@ describe("QueryTabComponent", () => {
|
||||
|
||||
const { container } = render(<QueryTabComponent {...propsMock} />);
|
||||
|
||||
const launchCopilotButton = container.querySelector('[data-test="QueryTab/ResultsPane/ExecuteCTA"]');
|
||||
const launchCopilotButton = container.querySelector('[data-testid="QueryTab/ResultsPane/ExecuteCTA"]');
|
||||
fireEvent.keyDown(launchCopilotButton, { key: "c", altKey: true });
|
||||
|
||||
expect(mockStore.setShowCopilotSidebar).toHaveBeenCalledWith(true);
|
||||
|
||||
@@ -746,7 +746,7 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
|
||||
}}
|
||||
>
|
||||
<Allotment.Pane
|
||||
data-test="QueryTab/EditorPane"
|
||||
data-testid="QueryTab/EditorPane"
|
||||
preferredSize={
|
||||
this.state.queryViewSizePercent !== undefined ? `${this.state.queryViewSizePercent}%` : undefined
|
||||
}
|
||||
@@ -813,7 +813,7 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
|
||||
render(): JSX.Element {
|
||||
const shouldScaleElements = this.state.showCopilotSidebar && this.isCopilotTabActive;
|
||||
return (
|
||||
<div data-test="QueryTab" style={{ display: "flex", flexDirection: "row", height: "100%" }}>
|
||||
<div data-testid="QueryTab" style={{ display: "flex", flexDirection: "row", height: "100%" }}>
|
||||
<div style={{ width: shouldScaleElements ? "70%" : "100%", height: "100%" }}>
|
||||
{this.getEditorAndQueryResult()}
|
||||
</div>
|
||||
|
||||
@@ -489,7 +489,7 @@ const QueryStatsTab: React.FC<Pick<ResultsViewProps, "queryResults">> = ({ query
|
||||
return (
|
||||
<div className={styles.metricsGridContainer}>
|
||||
<DataGrid
|
||||
data-test="QueryTab/ResultsPane/ResultsView/QueryStatsList"
|
||||
data-testid="QueryTab/ResultsPane/ResultsView/QueryStatsList"
|
||||
className={styles.queryStatsGrid}
|
||||
items={generateQueryStatsItems()}
|
||||
columns={columns}
|
||||
@@ -504,9 +504,9 @@ const QueryStatsTab: React.FC<Pick<ResultsViewProps, "queryResults">> = ({ query
|
||||
</DataGridHeader>
|
||||
<DataGridBody<IDocument>>
|
||||
{({ item, rowId }) => (
|
||||
<DataGridRow<IDocument> key={rowId} data-test={`Row:${rowId}`}>
|
||||
<DataGridRow<IDocument> key={rowId} data-testid={`Row:${rowId}`}>
|
||||
{({ columnId, renderCell }) => (
|
||||
<DataGridCell data-test={`Row:${rowId}/Column:${columnId}`}>{renderCell(item)}</DataGridCell>
|
||||
<DataGridCell data-testid={`Row:${rowId}/Column:${columnId}`}>{renderCell(item)}</DataGridCell>
|
||||
)}
|
||||
</DataGridRow>
|
||||
)}
|
||||
@@ -532,17 +532,17 @@ export const ResultsView: React.FC<ResultsViewProps> = ({ isMongoDB, queryResult
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div data-test="QueryTab/ResultsPane/ResultsView" className={styles.queryResultsTabPanel}>
|
||||
<div data-testid="QueryTab/ResultsPane/ResultsView" className={styles.queryResultsTabPanel}>
|
||||
<TabList selectedValue={activeTab} onTabSelect={onTabSelect}>
|
||||
<Tab
|
||||
data-test="QueryTab/ResultsPane/ResultsView/ResultsTab"
|
||||
data-testid="QueryTab/ResultsPane/ResultsView/ResultsTab"
|
||||
id={ResultsTabs.Results}
|
||||
value={ResultsTabs.Results}
|
||||
>
|
||||
Results
|
||||
</Tab>
|
||||
<Tab
|
||||
data-test="QueryTab/ResultsPane/ResultsView/QueryStatsTab"
|
||||
data-testid="QueryTab/ResultsPane/ResultsView/QueryStatsTab"
|
||||
id={ResultsTabs.QueryStats}
|
||||
value={ResultsTabs.QueryStats}
|
||||
>
|
||||
|
||||
@@ -237,14 +237,14 @@ function TabPane({ tab, active }: { tab: Tab; active: boolean }) {
|
||||
if (tab) {
|
||||
if ("render" in tab) {
|
||||
return (
|
||||
<div data-test={`Tab:${tab.tabId}`} {...attrs}>
|
||||
<div data-testid={`Tab:${tab.tabId}`} {...attrs}>
|
||||
{tab.render()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return <div data-test={`Tab:${tab.tabId}`} {...attrs} ref={ref} data-bind="html:html" />;
|
||||
return <div data-testid={`Tab:${tab.tabId}`} {...attrs} ref={ref} data-bind="html:html" />;
|
||||
}
|
||||
|
||||
const onKeyPressReactTab = (e: KeyboardEvent, tabKind: ReactTabKind): void => {
|
||||
|
||||
@@ -129,7 +129,7 @@ const App: React.FunctionComponent = () => {
|
||||
// Setting key is needed so React will re-render this element on any account change
|
||||
key={databaseAccount?.id || encryptedTokenMetadata?.accountName || authType}
|
||||
ref={ref}
|
||||
data-test="DataExplorerFrame"
|
||||
data-testid="DataExplorerFrame"
|
||||
id="explorerMenu"
|
||||
name="explorer"
|
||||
className="iframe"
|
||||
|
||||
@@ -103,7 +103,7 @@ const App: React.FunctionComponent = () => {
|
||||
|
||||
return (
|
||||
<KeyboardShortcutRoot>
|
||||
<div className="flexContainer" aria-hidden="false" data-test="DataExplorerRoot">
|
||||
<div className="flexContainer" aria-hidden="false" data-testid="DataExplorerRoot">
|
||||
{userContext.features.enableContainerCopy && userContext.apiType === "SQL" ? (
|
||||
<ContainerCopyPanel explorer={explorer} />
|
||||
) : (
|
||||
|
||||
@@ -114,7 +114,7 @@ export const ConnectExplorer: React.FunctionComponent<Props> = ({
|
||||
<div id="connectWithAad">
|
||||
<input className="filterbtnstyle" type="button" value="Sign In" onClick={login} />
|
||||
{enableConnectionStringLogin && (
|
||||
<p className="switchConnectTypeText" data-test="Link:SwitchConnectionType" onClick={showForm}>
|
||||
<p className="switchConnectTypeText" data-testid="Link:SwitchConnectionType" onClick={showForm}>
|
||||
Connect to your account with connection string
|
||||
</p>
|
||||
)}
|
||||
|
||||
@@ -463,7 +463,7 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div style={{ overflowX: "auto" }} data-test="DataExplorerRoot">
|
||||
<div style={{ overflowX: "auto" }} data-testid="DataExplorerRoot">
|
||||
<Stack tokens={containerStackTokens}>
|
||||
<Stack.Item>
|
||||
<CommandBar styles={commandBarStyles} items={this.getCommandBarItems()} />
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
exports[`SelfServeComponent message bar and spinner snapshots 1`] = `
|
||||
<div
|
||||
data-test="DataExplorerRoot"
|
||||
data-testid="DataExplorerRoot"
|
||||
style={
|
||||
{
|
||||
"overflowX": "auto",
|
||||
@@ -339,7 +339,7 @@ exports[`SelfServeComponent message bar and spinner snapshots 1`] = `
|
||||
|
||||
exports[`SelfServeComponent message bar and spinner snapshots 2`] = `
|
||||
<div
|
||||
data-test="DataExplorerRoot"
|
||||
data-testid="DataExplorerRoot"
|
||||
style={
|
||||
{
|
||||
"overflowX": "auto",
|
||||
@@ -734,7 +734,7 @@ exports[`SelfServeComponent message bar and spinner snapshots 2`] = `
|
||||
|
||||
exports[`SelfServeComponent message bar and spinner snapshots 3`] = `
|
||||
<div
|
||||
data-test="DataExplorerRoot"
|
||||
data-testid="DataExplorerRoot"
|
||||
style={
|
||||
{
|
||||
"overflowX": "auto",
|
||||
@@ -835,7 +835,7 @@ exports[`SelfServeComponent message bar and spinner snapshots 4`] = `
|
||||
|
||||
exports[`SelfServeComponent should render and honor save, discard, refresh actions 1`] = `
|
||||
<div
|
||||
data-test="DataExplorerRoot"
|
||||
data-testid="DataExplorerRoot"
|
||||
style={
|
||||
{
|
||||
"overflowX": "auto",
|
||||
|
||||
@@ -1,50 +1,114 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
|
||||
import { DataExplorer, TEST_AUTOSCALE_THROUGHPUT_RU, TestAccount, generateUniqueName } from "../fx";
|
||||
import {
|
||||
deleteContainer,
|
||||
deleteKeyspace,
|
||||
openAndFillCreateCassandraTablePanel,
|
||||
} from "../helpers/containerCreationHelpers";
|
||||
|
||||
test("Cassandra keyspace and table CRUD", async ({ page }) => {
|
||||
const keyspaceId = generateUniqueName("db");
|
||||
const tableId = "testtable"; // A unique table name isn't needed because the keyspace is unique
|
||||
test("Cassandra: Keyspace and table CRUD", async ({ page }) => {
|
||||
const keyspaceId = generateUniqueName("keyspace");
|
||||
const tableId = generateUniqueName("table");
|
||||
|
||||
const explorer = await DataExplorer.open(page, TestAccount.Cassandra);
|
||||
|
||||
await explorer.globalCommandButton("New Table").click();
|
||||
await explorer.whilePanelOpen(
|
||||
"Add Table",
|
||||
async (panel, okButton) => {
|
||||
await panel.getByPlaceholder("Type a new keyspace id").fill(keyspaceId);
|
||||
await panel.getByPlaceholder("Enter table Id").fill(tableId);
|
||||
await panel.getByTestId("autoscaleRUInput").fill(TEST_AUTOSCALE_THROUGHPUT_RU.toString());
|
||||
await okButton.click();
|
||||
},
|
||||
{ closeTimeout: 5 * 60 * 1000 },
|
||||
);
|
||||
// Create
|
||||
await openAndFillCreateCassandraTablePanel(explorer, {
|
||||
keyspaceId,
|
||||
tableId,
|
||||
isAutoscale: true,
|
||||
throughputValue: TEST_AUTOSCALE_THROUGHPUT_RU,
|
||||
});
|
||||
|
||||
const keyspaceNode = await explorer.waitForNode(keyspaceId);
|
||||
const tableNode = await explorer.waitForContainerNode(keyspaceId, tableId);
|
||||
await expect(tableNode.element).toBeAttached();
|
||||
|
||||
// Delete table
|
||||
await deleteContainer(explorer, keyspaceId, tableId, "Delete Table");
|
||||
await expect(tableNode.element).not.toBeAttached();
|
||||
|
||||
// Delete keyspace
|
||||
await deleteKeyspace(explorer, keyspaceId);
|
||||
await expect(keyspaceNode.element).not.toBeAttached();
|
||||
});
|
||||
|
||||
test("Cassandra: New keyspace shared throughput", async ({ page }) => {
|
||||
const keyspaceId = generateUniqueName("keyspace");
|
||||
const tableId = generateUniqueName("table");
|
||||
|
||||
const explorer = await DataExplorer.open(page, TestAccount.Cassandra);
|
||||
|
||||
await openAndFillCreateCassandraTablePanel(explorer, {
|
||||
keyspaceId,
|
||||
tableId,
|
||||
useSharedThroughput: true,
|
||||
});
|
||||
|
||||
const keyspaceNode = await explorer.waitForNode(keyspaceId);
|
||||
const tableNode = await explorer.waitForContainerNode(keyspaceId, tableId);
|
||||
|
||||
await tableNode.openContextMenu();
|
||||
await tableNode.contextMenuItem("Delete Table").click();
|
||||
await explorer.whilePanelOpen(
|
||||
"Delete Table",
|
||||
async (panel, okButton) => {
|
||||
await panel.getByRole("textbox", { name: "Confirm by typing the table id" }).fill(tableId);
|
||||
await okButton.click();
|
||||
},
|
||||
{ closeTimeout: 5 * 60 * 1000 },
|
||||
);
|
||||
await expect(tableNode.element).not.toBeAttached();
|
||||
|
||||
await keyspaceNode.openContextMenu();
|
||||
await keyspaceNode.contextMenuItem("Delete Keyspace").click();
|
||||
await explorer.whilePanelOpen(
|
||||
"Delete Keyspace",
|
||||
async (panel, okButton) => {
|
||||
await panel.getByRole("textbox", { name: "Confirm by typing the Keyspace id" }).fill(keyspaceId);
|
||||
await okButton.click();
|
||||
},
|
||||
{ closeTimeout: 5 * 60 * 1000 },
|
||||
);
|
||||
await expect(tableNode.element).toBeAttached();
|
||||
|
||||
// Cleanup
|
||||
await deleteKeyspace(explorer, keyspaceId);
|
||||
await expect(keyspaceNode.element).not.toBeAttached();
|
||||
});
|
||||
|
||||
test("Cassandra: Manual throughput", async ({ page }) => {
|
||||
const keyspaceId = generateUniqueName("keyspace");
|
||||
const tableId = generateUniqueName("table");
|
||||
const manualThroughput = 400;
|
||||
|
||||
const explorer = await DataExplorer.open(page, TestAccount.Cassandra);
|
||||
|
||||
await openAndFillCreateCassandraTablePanel(explorer, {
|
||||
keyspaceId,
|
||||
tableId,
|
||||
isAutoscale: false,
|
||||
throughputValue: manualThroughput,
|
||||
});
|
||||
|
||||
const keyspaceNode = await explorer.waitForNode(keyspaceId);
|
||||
const tableNode = await explorer.waitForContainerNode(keyspaceId, tableId);
|
||||
|
||||
await expect(tableNode.element).toBeAttached();
|
||||
|
||||
// Cleanup
|
||||
await deleteKeyspace(explorer, keyspaceId);
|
||||
await expect(keyspaceNode.element).not.toBeAttached();
|
||||
});
|
||||
|
||||
test("Cassandra: Multiple tables in keyspace", async ({ page }) => {
|
||||
const keyspaceId = generateUniqueName("keyspace");
|
||||
const table1Id = generateUniqueName("table");
|
||||
const table2Id = generateUniqueName("table");
|
||||
|
||||
const explorer = await DataExplorer.open(page, TestAccount.Cassandra);
|
||||
|
||||
// Create first table
|
||||
await openAndFillCreateCassandraTablePanel(explorer, {
|
||||
keyspaceId,
|
||||
tableId: table1Id,
|
||||
isAutoscale: true,
|
||||
throughputValue: TEST_AUTOSCALE_THROUGHPUT_RU,
|
||||
});
|
||||
|
||||
const keyspaceNode = await explorer.waitForNode(keyspaceId);
|
||||
await explorer.waitForContainerNode(keyspaceId, table1Id);
|
||||
|
||||
// Create second table in same keyspace
|
||||
await openAndFillCreateCassandraTablePanel(explorer, {
|
||||
keyspaceId,
|
||||
tableId: table2Id,
|
||||
isAutoscale: true,
|
||||
throughputValue: TEST_AUTOSCALE_THROUGHPUT_RU,
|
||||
});
|
||||
|
||||
await explorer.waitForContainerNode(keyspaceId, table2Id);
|
||||
|
||||
// Cleanup
|
||||
await deleteKeyspace(explorer, keyspaceId);
|
||||
await expect(keyspaceNode.element).not.toBeAttached();
|
||||
});
|
||||
|
||||
@@ -344,7 +344,7 @@ export class DataExplorer {
|
||||
* There's only a single "primary" button, but we still require you to pass the label to confirm you're selecting the right button.
|
||||
*/
|
||||
globalCommandButton(label: string): Locator {
|
||||
return this.frame.getByTestId("GlobalCommands").getByText(label);
|
||||
return this.frame.getByTestId(`GlobalCommands/Button:${label}`);
|
||||
}
|
||||
|
||||
/** Select the command bar button with the specified label */
|
||||
|
||||
@@ -1,22 +1,108 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
|
||||
import { DataExplorer, TEST_AUTOSCALE_THROUGHPUT_RU, TestAccount, generateUniqueName } from "../fx";
|
||||
import {
|
||||
GREMLIN_CONFIG,
|
||||
deleteContainer,
|
||||
deleteDatabase,
|
||||
openAndFillCreateContainerPanel,
|
||||
} from "../helpers/containerCreationHelpers";
|
||||
|
||||
test("Gremlin graph CRUD", async ({ page }) => {
|
||||
test("Gremlin: Database and graph CRUD", async ({ page }) => {
|
||||
const databaseId = generateUniqueName("db");
|
||||
const graphId = "testgraph"; // A unique graph name isn't needed because the database is unique
|
||||
const graphId = generateUniqueName("graph");
|
||||
|
||||
const explorer = await DataExplorer.open(page, TestAccount.Gremlin);
|
||||
|
||||
// Create
|
||||
await openAndFillCreateContainerPanel(explorer, GREMLIN_CONFIG, {
|
||||
databaseId,
|
||||
containerId: graphId,
|
||||
partitionKey: "/pk",
|
||||
isAutoscale: true,
|
||||
throughputValue: TEST_AUTOSCALE_THROUGHPUT_RU,
|
||||
});
|
||||
|
||||
const databaseNode = await explorer.waitForNode(databaseId);
|
||||
const graphNode = await explorer.waitForContainerNode(databaseId, graphId);
|
||||
await expect(graphNode.element).toBeAttached();
|
||||
|
||||
// Delete graph
|
||||
await deleteContainer(explorer, databaseId, graphId, "Delete Graph");
|
||||
await expect(graphNode.element).not.toBeAttached();
|
||||
|
||||
// Delete database
|
||||
await deleteDatabase(explorer, databaseId);
|
||||
await expect(databaseNode.element).not.toBeAttached();
|
||||
});
|
||||
|
||||
test("Gremlin: New database shared throughput", async ({ page }) => {
|
||||
const databaseId = generateUniqueName("db");
|
||||
const graphId = generateUniqueName("graph");
|
||||
|
||||
const explorer = await DataExplorer.open(page, TestAccount.Gremlin);
|
||||
|
||||
await openAndFillCreateContainerPanel(explorer, GREMLIN_CONFIG, {
|
||||
databaseId,
|
||||
containerId: graphId,
|
||||
partitionKey: "/pk",
|
||||
useSharedThroughput: true,
|
||||
});
|
||||
|
||||
const databaseNode = await explorer.waitForNode(databaseId);
|
||||
const graphNode = await explorer.waitForContainerNode(databaseId, graphId);
|
||||
|
||||
await expect(graphNode.element).toBeAttached();
|
||||
|
||||
// Cleanup
|
||||
await deleteDatabase(explorer, databaseId);
|
||||
await expect(databaseNode.element).not.toBeAttached();
|
||||
});
|
||||
|
||||
test("Gremlin: Manual throughput", async ({ page }) => {
|
||||
const databaseId = generateUniqueName("db");
|
||||
const graphId = generateUniqueName("graph");
|
||||
const manualThroughput = 400;
|
||||
|
||||
const explorer = await DataExplorer.open(page, TestAccount.Gremlin);
|
||||
|
||||
await openAndFillCreateContainerPanel(explorer, GREMLIN_CONFIG, {
|
||||
databaseId,
|
||||
containerId: graphId,
|
||||
partitionKey: "/pk",
|
||||
isAutoscale: false,
|
||||
throughputValue: manualThroughput,
|
||||
});
|
||||
|
||||
const databaseNode = await explorer.waitForNode(databaseId);
|
||||
const graphNode = await explorer.waitForContainerNode(databaseId, graphId);
|
||||
|
||||
await expect(graphNode.element).toBeAttached();
|
||||
|
||||
// Cleanup
|
||||
await deleteDatabase(explorer, databaseId);
|
||||
await expect(databaseNode.element).not.toBeAttached();
|
||||
});
|
||||
|
||||
test("Gremlin: No unique keys support", async ({ page }) => {
|
||||
const databaseId = generateUniqueName("db");
|
||||
const graphId = generateUniqueName("graph");
|
||||
|
||||
const explorer = await DataExplorer.open(page, TestAccount.Gremlin);
|
||||
|
||||
// Create new database and graph
|
||||
await explorer.globalCommandButton("New Graph").click();
|
||||
await explorer.whilePanelOpen(
|
||||
"New Graph",
|
||||
async (panel, okButton) => {
|
||||
await panel.getByPlaceholder("Type a new database id").fill(databaseId);
|
||||
await panel.getByRole("textbox", { name: "Graph id, Example Graph1" }).fill(graphId);
|
||||
await panel.getByTestId("AddCollectionPanel/DatabaseId").fill(databaseId);
|
||||
await panel.getByTestId("AddCollectionPanel/CollectionId").fill(graphId);
|
||||
await panel.getByRole("textbox", { name: "Partition key" }).fill("/pk");
|
||||
await panel.getByTestId("autoscaleRUInput").fill(TEST_AUTOSCALE_THROUGHPUT_RU.toString());
|
||||
await panel.getByTestId("ThroughputInput/AutoscaleRUInput").fill(TEST_AUTOSCALE_THROUGHPUT_RU.toString());
|
||||
|
||||
// Verify unique key button is not present (Gremlin-specific API limitation)
|
||||
const uniqueKeyButton = panel.getByTestId("AddCollectionPanel/AddUniqueKeyButton");
|
||||
await expect(uniqueKeyButton).not.toBeVisible();
|
||||
|
||||
await okButton.click();
|
||||
},
|
||||
{ closeTimeout: 5 * 60 * 1000 },
|
||||
@@ -24,29 +110,9 @@ test("Gremlin graph CRUD", async ({ page }) => {
|
||||
|
||||
const databaseNode = await explorer.waitForNode(databaseId);
|
||||
const graphNode = await explorer.waitForContainerNode(databaseId, graphId);
|
||||
await expect(graphNode.element).toBeAttached();
|
||||
|
||||
await graphNode.openContextMenu();
|
||||
await graphNode.contextMenuItem("Delete Graph").click();
|
||||
await explorer.whilePanelOpen(
|
||||
"Delete Graph",
|
||||
async (panel, okButton) => {
|
||||
await panel.getByRole("textbox", { name: "Confirm by typing the graph id" }).fill(graphId);
|
||||
await okButton.click();
|
||||
},
|
||||
{ closeTimeout: 5 * 60 * 1000 },
|
||||
);
|
||||
await expect(graphNode.element).not.toBeAttached();
|
||||
|
||||
await databaseNode.openContextMenu();
|
||||
await databaseNode.contextMenuItem("Delete Database").click();
|
||||
await explorer.whilePanelOpen(
|
||||
"Delete Database",
|
||||
async (panel, okButton) => {
|
||||
await panel.getByRole("textbox", { name: "Confirm by typing the Database id" }).fill(databaseId);
|
||||
await okButton.click();
|
||||
},
|
||||
{ closeTimeout: 5 * 60 * 1000 },
|
||||
);
|
||||
|
||||
// Cleanup
|
||||
await deleteDatabase(explorer, databaseId);
|
||||
await expect(databaseNode.element).not.toBeAttached();
|
||||
});
|
||||
|
||||
323
test/helpers/containerCreationHelpers.ts
Normal file
323
test/helpers/containerCreationHelpers.ts
Normal file
@@ -0,0 +1,323 @@
|
||||
import { Locator } from "@playwright/test";
|
||||
import { DataExplorer, TestAccount } from "../fx";
|
||||
|
||||
/**
|
||||
* Container creation test API configuration
|
||||
* Defines labels and selectors specific to each Cosmos DB API
|
||||
*/
|
||||
export interface ApiConfig {
|
||||
account: TestAccount;
|
||||
commandLabel: string; // "New Container", "New Collection", "New Graph", "New Table"
|
||||
containerIdLabel: string; // "Container id", "Collection id", "Graph id", "Table id"
|
||||
panelTitle: string; // "New Container", "New Collection", "New Graph", "Add Table"
|
||||
databaseIdPlaceholder: string; // "Type a new keyspace id" for Cassandra, etc.
|
||||
containerIdPlaceholder: string;
|
||||
partitionKeyLabel?: string; // "Partition key", "Shard key", or undefined for Tables
|
||||
partitionKeyPlaceholder?: string;
|
||||
confirmDeleteLabel: string; // "Confirm by typing the [container/collection/table/graph] id"
|
||||
databaseName?: string; // "TablesDB" for Tables, undefined for others
|
||||
supportsUniqueKeys: boolean;
|
||||
}
|
||||
|
||||
export const SQL_CONFIG: ApiConfig = {
|
||||
account: TestAccount.SQL,
|
||||
commandLabel: "New Container",
|
||||
containerIdLabel: "Container id, Example Container1",
|
||||
panelTitle: "New Container",
|
||||
databaseIdPlaceholder: "Type a new database id",
|
||||
containerIdPlaceholder: "e.g., Container1",
|
||||
partitionKeyLabel: "Partition key",
|
||||
partitionKeyPlaceholder: "/pk",
|
||||
confirmDeleteLabel: "Confirm by typing the container id",
|
||||
supportsUniqueKeys: true,
|
||||
};
|
||||
|
||||
export const MONGO_CONFIG: ApiConfig = {
|
||||
account: TestAccount.Mongo,
|
||||
commandLabel: "New Collection",
|
||||
containerIdLabel: "Collection id, Example Collection1",
|
||||
panelTitle: "New Collection",
|
||||
databaseIdPlaceholder: "Type a new database id",
|
||||
containerIdPlaceholder: "e.g., Collection1",
|
||||
partitionKeyLabel: "Shard key",
|
||||
partitionKeyPlaceholder: "pk",
|
||||
confirmDeleteLabel: "Confirm by typing the collection id",
|
||||
supportsUniqueKeys: false,
|
||||
};
|
||||
|
||||
export const MONGO32_CONFIG: ApiConfig = {
|
||||
...MONGO_CONFIG,
|
||||
account: TestAccount.Mongo32,
|
||||
};
|
||||
|
||||
export const GREMLIN_CONFIG: ApiConfig = {
|
||||
account: TestAccount.Gremlin,
|
||||
commandLabel: "New Graph",
|
||||
containerIdLabel: "Graph id, Example Graph1",
|
||||
panelTitle: "New Graph",
|
||||
databaseIdPlaceholder: "Type a new database id",
|
||||
containerIdPlaceholder: "e.g., Graph1",
|
||||
partitionKeyLabel: "Partition key",
|
||||
partitionKeyPlaceholder: "/pk",
|
||||
confirmDeleteLabel: "Confirm by typing the graph id",
|
||||
supportsUniqueKeys: false,
|
||||
};
|
||||
|
||||
export const TABLES_CONFIG: ApiConfig = {
|
||||
account: TestAccount.Tables,
|
||||
commandLabel: "New Table",
|
||||
containerIdLabel: "Table id, Example Table1",
|
||||
panelTitle: "New Table",
|
||||
databaseIdPlaceholder: "", // Not used
|
||||
containerIdPlaceholder: "e.g., Table1",
|
||||
confirmDeleteLabel: "Confirm by typing the table id",
|
||||
databaseName: "TablesDB",
|
||||
supportsUniqueKeys: false,
|
||||
};
|
||||
|
||||
export const CASSANDRA_CONFIG: ApiConfig = {
|
||||
account: TestAccount.Cassandra,
|
||||
commandLabel: "New Table",
|
||||
containerIdLabel: "Enter table Id",
|
||||
panelTitle: "Add Table",
|
||||
databaseIdPlaceholder: "Type a new keyspace id",
|
||||
containerIdPlaceholder: "Enter table Id",
|
||||
confirmDeleteLabel: "Confirm by typing the table id",
|
||||
supportsUniqueKeys: false,
|
||||
};
|
||||
|
||||
/**
|
||||
* Fills database selection in the panel
|
||||
* Automatically selects "Create new" and fills the database ID
|
||||
*/
|
||||
export async function fillDatabaseSelection(panel: Locator, databaseId: string): Promise<void> {
|
||||
// Wait for the radio button to be visible and click it (more reliable than check for custom styled radios)
|
||||
await panel.getByTestId("AddCollectionPanel/DatabaseRadio:CreateNew").waitFor({ state: "visible" });
|
||||
await panel.getByTestId("AddCollectionPanel/DatabaseRadio:CreateNew").click();
|
||||
await panel.getByTestId("AddCollectionPanel/DatabaseId").fill(databaseId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Fills existing database selection
|
||||
* Selects "Use existing" and clicks the dropdown to select the database
|
||||
*/
|
||||
export async function fillExistingDatabaseSelection(panel: Locator, databaseId: string): Promise<void> {
|
||||
await panel.getByTestId("AddCollectionPanel/DatabaseRadio:UseExisting").waitFor({ state: "visible" });
|
||||
await panel.getByTestId("AddCollectionPanel/DatabaseRadio:UseExisting").click();
|
||||
await panel.getByTestId("AddCollectionPanel/ExistingDatabaseDropdown").click();
|
||||
await panel.locator(`text=${databaseId}`).click();
|
||||
}
|
||||
|
||||
/**
|
||||
* Fills container/collection/graph/table details
|
||||
*/
|
||||
export async function fillContainerDetails(
|
||||
panel: Locator,
|
||||
containerId: string,
|
||||
partitionKey: string | undefined,
|
||||
): Promise<void> {
|
||||
await panel.getByTestId("AddCollectionPanel/CollectionId").fill(containerId);
|
||||
|
||||
if (partitionKey) {
|
||||
await panel.getByTestId("AddCollectionPanel/PartitionKey").first().fill(partitionKey);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fills Cassandra-specific table details
|
||||
* (keyspace and table IDs are separate for Cassandra)
|
||||
*/
|
||||
export async function fillCassandraTableDetails(panel: Locator, keyspaceId: string, tableId: string): Promise<void> {
|
||||
await panel.getByTestId("AddCollectionPanel/DatabaseId").fill(keyspaceId);
|
||||
await panel.getByTestId("AddCollectionPanel/CollectionId").fill(tableId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets throughput mode and value
|
||||
* @param isAutoscale - if true, sets autoscale mode; if false, sets manual mode
|
||||
*/
|
||||
export async function setThroughput(panel: Locator, isAutoscale: boolean, throughputValue: number): Promise<void> {
|
||||
const testId = isAutoscale ? "ThroughputInput/ThroughputMode:Autoscale" : "ThroughputInput/ThroughputMode:Manual";
|
||||
await panel.getByTestId(testId).check();
|
||||
|
||||
if (isAutoscale) {
|
||||
await panel.getByTestId("ThroughputInput/AutoscaleRUInput").fill(throughputValue.toString());
|
||||
} else {
|
||||
await panel.getByTestId("ThroughputInput/ManualThroughputInput").fill(throughputValue.toString());
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a unique key to the container (SQL/Mongo only)
|
||||
*/
|
||||
export async function addUniqueKey(panel: Locator, uniqueKeyValue: string): Promise<void> {
|
||||
// Scroll to find the unique key section
|
||||
await panel.getByTestId("AddCollectionPanel/UniqueKeysSection").scrollIntoViewIfNeeded();
|
||||
|
||||
// Click the "Add unique key" button
|
||||
await panel.getByTestId("AddCollectionPanel/AddUniqueKeyButton").click();
|
||||
|
||||
// Fill in the unique key value
|
||||
const uniqueKeyInput = panel.getByTestId("AddCollectionPanel/UniqueKey").first();
|
||||
await uniqueKeyInput.fill(uniqueKeyValue);
|
||||
}
|
||||
|
||||
/**
|
||||
* Deletes a database and waits for it to disappear from the tree
|
||||
*/
|
||||
export async function deleteDatabase(
|
||||
explorer: DataExplorer,
|
||||
databaseId: string,
|
||||
databaseNodeName: string = databaseId,
|
||||
): Promise<void> {
|
||||
const databaseNode = await explorer.waitForNode(databaseNodeName);
|
||||
await databaseNode.openContextMenu();
|
||||
await databaseNode.contextMenuItem("Delete Database").click();
|
||||
await explorer.whilePanelOpen(
|
||||
"Delete Database",
|
||||
async (panel: Locator, okButton: Locator) => {
|
||||
await panel.getByTestId("DeleteDatabaseConfirmationPanel/ConfirmInput").fill(databaseId);
|
||||
await okButton.click();
|
||||
},
|
||||
{ closeTimeout: 5 * 60 * 1000 },
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Deletes a keyspace (Cassandra only)
|
||||
*/
|
||||
export async function deleteKeyspace(explorer: DataExplorer, keyspaceId: string): Promise<void> {
|
||||
const keyspaceNode = await explorer.waitForNode(keyspaceId);
|
||||
await keyspaceNode.openContextMenu();
|
||||
await keyspaceNode.contextMenuItem("Delete Keyspace").click();
|
||||
await explorer.whilePanelOpen(
|
||||
"Delete Keyspace",
|
||||
async (panel: Locator, okButton: Locator) => {
|
||||
await panel.getByTestId("DeleteCollectionConfirmationPane/ConfirmInput").fill(keyspaceId);
|
||||
await okButton.click();
|
||||
},
|
||||
{ closeTimeout: 5 * 60 * 1000 },
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Deletes a container/collection/graph/table
|
||||
*/
|
||||
export async function deleteContainer(
|
||||
explorer: DataExplorer,
|
||||
databaseId: string,
|
||||
containerId: string,
|
||||
deleteLabel: string, // "Delete Container", "Delete Collection", etc.
|
||||
): Promise<void> {
|
||||
const containerNode = await explorer.waitForContainerNode(databaseId, containerId);
|
||||
await containerNode.openContextMenu();
|
||||
await containerNode.contextMenuItem(deleteLabel).click();
|
||||
await explorer.whilePanelOpen(
|
||||
deleteLabel,
|
||||
async (panel: Locator, okButton: Locator) => {
|
||||
// All container/collection/graph/table deletes use same panel with test ID
|
||||
await panel.getByTestId("DeleteCollectionConfirmationPane/ConfirmInput").fill(containerId);
|
||||
await okButton.click();
|
||||
},
|
||||
{ closeTimeout: 5 * 60 * 1000 },
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Opens the create container dialog and fills in the form based on scenario
|
||||
*/
|
||||
export async function openAndFillCreateContainerPanel(
|
||||
explorer: DataExplorer,
|
||||
config: ApiConfig,
|
||||
options: {
|
||||
databaseId: string;
|
||||
containerId: string;
|
||||
partitionKey?: string;
|
||||
useExistingDatabase?: boolean;
|
||||
isAutoscale?: boolean;
|
||||
throughputValue?: number;
|
||||
uniqueKey?: string;
|
||||
useSharedThroughput?: boolean;
|
||||
},
|
||||
): Promise<void> {
|
||||
await explorer.globalCommandButton(config.commandLabel).click();
|
||||
await explorer.whilePanelOpen(
|
||||
config.panelTitle,
|
||||
async (panel, okButton) => {
|
||||
// Database selection
|
||||
if (options.useExistingDatabase) {
|
||||
await fillExistingDatabaseSelection(panel, options.databaseId);
|
||||
} else {
|
||||
await fillDatabaseSelection(panel, options.databaseId);
|
||||
}
|
||||
|
||||
// Shared throughput checkbox (if applicable)
|
||||
if (options.useSharedThroughput) {
|
||||
await panel
|
||||
.getByTestId("AddCollectionPanel/SharedThroughputCheckbox")
|
||||
.getByRole("checkbox")
|
||||
.check({ force: true });
|
||||
}
|
||||
|
||||
// Container details
|
||||
await fillContainerDetails(panel, options.containerId, options.partitionKey);
|
||||
|
||||
// Throughput (only if not using shared throughput)
|
||||
if (!options.useSharedThroughput) {
|
||||
const isAutoscale = options.isAutoscale !== false;
|
||||
const throughputValue = options.throughputValue || 1000;
|
||||
await setThroughput(panel, isAutoscale, throughputValue);
|
||||
}
|
||||
|
||||
// Unique keys (if applicable)
|
||||
if (options.uniqueKey && config.supportsUniqueKeys) {
|
||||
await addUniqueKey(panel, options.uniqueKey);
|
||||
}
|
||||
|
||||
await okButton.click();
|
||||
},
|
||||
{ closeTimeout: 5 * 60 * 1000 },
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Opens the create table dialog for Cassandra and fills in the form
|
||||
* Cassandra has a different UI pattern than other APIs
|
||||
*/
|
||||
export async function openAndFillCreateCassandraTablePanel(
|
||||
explorer: DataExplorer,
|
||||
options: {
|
||||
keyspaceId: string;
|
||||
tableId: string;
|
||||
isAutoscale?: boolean;
|
||||
throughputValue?: number;
|
||||
useSharedThroughput?: boolean;
|
||||
},
|
||||
): Promise<void> {
|
||||
await explorer.globalCommandButton("New Table").click();
|
||||
await explorer.whilePanelOpen(
|
||||
"Add Table",
|
||||
async (panel, okButton) => {
|
||||
// Fill Cassandra-specific table details
|
||||
await fillCassandraTableDetails(panel, options.keyspaceId, options.tableId);
|
||||
|
||||
// Shared throughput checkbox (if applicable)
|
||||
if (options.useSharedThroughput) {
|
||||
await panel
|
||||
.getByTestId("AddCollectionPanel/SharedThroughputCheckbox")
|
||||
.getByRole("checkbox")
|
||||
.check({ force: true });
|
||||
}
|
||||
|
||||
// Throughput (only if not using shared throughput)
|
||||
if (!options.useSharedThroughput) {
|
||||
const isAutoscale = options.isAutoscale !== false;
|
||||
const throughputValue = options.throughputValue || 1000;
|
||||
await setThroughput(panel, isAutoscale, throughputValue);
|
||||
}
|
||||
|
||||
await okButton.click();
|
||||
},
|
||||
{ closeTimeout: 5 * 60 * 1000 },
|
||||
);
|
||||
}
|
||||
@@ -1,58 +1,118 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
|
||||
import { DataExplorer, TEST_AUTOSCALE_THROUGHPUT_RU, TestAccount, generateUniqueName } from "../fx";
|
||||
import {
|
||||
MONGO32_CONFIG,
|
||||
MONGO_CONFIG,
|
||||
deleteContainer,
|
||||
deleteDatabase,
|
||||
openAndFillCreateContainerPanel,
|
||||
} from "../helpers/containerCreationHelpers";
|
||||
|
||||
(
|
||||
[
|
||||
["latest API version", TestAccount.Mongo],
|
||||
["3.2 API", TestAccount.Mongo32],
|
||||
] as [string, TestAccount][]
|
||||
).forEach(([apiVersionDescription, accountType]) => {
|
||||
test(`Mongo CRUD using ${apiVersionDescription}`, async ({ page }) => {
|
||||
["latest API version", MONGO_CONFIG],
|
||||
["3.2 API", MONGO32_CONFIG],
|
||||
] as [string, typeof MONGO_CONFIG][]
|
||||
).forEach(([apiVersionDescription, config]) => {
|
||||
test(`Mongo: Database and collection CRUD using ${apiVersionDescription}`, async ({ page }) => {
|
||||
const databaseId = generateUniqueName("db");
|
||||
const collectionId = "testcollection"; // A unique collection name isn't needed because the database is unique
|
||||
const collectionId = generateUniqueName("collection");
|
||||
|
||||
const explorer = await DataExplorer.open(page, accountType);
|
||||
const explorer = await DataExplorer.open(page, config.account);
|
||||
|
||||
await explorer.globalCommandButton("New Collection").click();
|
||||
await explorer.whilePanelOpen(
|
||||
"New Collection",
|
||||
async (panel, okButton) => {
|
||||
await panel.getByPlaceholder("Type a new database id").fill(databaseId);
|
||||
await panel.getByRole("textbox", { name: "Collection id, Example Collection1" }).fill(collectionId);
|
||||
await panel.getByRole("textbox", { name: "Shard key" }).fill("pk");
|
||||
await panel.getByTestId("autoscaleRUInput").fill(TEST_AUTOSCALE_THROUGHPUT_RU.toString());
|
||||
await okButton.click();
|
||||
},
|
||||
{ closeTimeout: 5 * 60 * 1000 },
|
||||
);
|
||||
// Create
|
||||
await openAndFillCreateContainerPanel(explorer, config, {
|
||||
databaseId,
|
||||
containerId: collectionId,
|
||||
partitionKey: "pk",
|
||||
isAutoscale: true,
|
||||
throughputValue: TEST_AUTOSCALE_THROUGHPUT_RU,
|
||||
});
|
||||
|
||||
const databaseNode = await explorer.waitForNode(databaseId);
|
||||
const collectionNode = await explorer.waitForContainerNode(databaseId, collectionId);
|
||||
await expect(collectionNode.element).toBeAttached();
|
||||
|
||||
await collectionNode.openContextMenu();
|
||||
await collectionNode.contextMenuItem("Delete Collection").click();
|
||||
await explorer.whilePanelOpen(
|
||||
"Delete Collection",
|
||||
async (panel, okButton) => {
|
||||
await panel.getByRole("textbox", { name: "Confirm by typing the collection id" }).fill(collectionId);
|
||||
await okButton.click();
|
||||
},
|
||||
{ closeTimeout: 5 * 60 * 1000 },
|
||||
);
|
||||
// Delete collection
|
||||
await deleteContainer(explorer, databaseId, collectionId, "Delete Collection");
|
||||
await expect(collectionNode.element).not.toBeAttached();
|
||||
|
||||
await databaseNode.openContextMenu();
|
||||
await databaseNode.contextMenuItem("Delete Database").click();
|
||||
await explorer.whilePanelOpen(
|
||||
"Delete Database",
|
||||
async (panel, okButton) => {
|
||||
await panel.getByRole("textbox", { name: "Confirm by typing the Database id" }).fill(databaseId);
|
||||
await okButton.click();
|
||||
},
|
||||
{ closeTimeout: 5 * 60 * 1000 },
|
||||
);
|
||||
|
||||
// Delete database
|
||||
await deleteDatabase(explorer, databaseId);
|
||||
await expect(databaseNode.element).not.toBeAttached();
|
||||
});
|
||||
});
|
||||
|
||||
test("Mongo: New database shared throughput", async ({ page }) => {
|
||||
const databaseId = generateUniqueName("db");
|
||||
const collectionId = generateUniqueName("collection");
|
||||
|
||||
const explorer = await DataExplorer.open(page, TestAccount.Mongo);
|
||||
|
||||
await openAndFillCreateContainerPanel(explorer, MONGO_CONFIG, {
|
||||
databaseId,
|
||||
containerId: collectionId,
|
||||
partitionKey: "pk",
|
||||
useSharedThroughput: true,
|
||||
});
|
||||
|
||||
const databaseNode = await explorer.waitForNode(databaseId);
|
||||
const collectionNode = await explorer.waitForContainerNode(databaseId, collectionId);
|
||||
|
||||
await expect(collectionNode.element).toBeAttached();
|
||||
|
||||
// Cleanup
|
||||
await deleteDatabase(explorer, databaseId);
|
||||
await expect(databaseNode.element).not.toBeAttached();
|
||||
});
|
||||
|
||||
test("Mongo: Unique keys", async ({ page }) => {
|
||||
const databaseId = generateUniqueName("db");
|
||||
const collectionId = generateUniqueName("collection");
|
||||
|
||||
const explorer = await DataExplorer.open(page, TestAccount.Mongo);
|
||||
|
||||
await openAndFillCreateContainerPanel(explorer, MONGO_CONFIG, {
|
||||
databaseId,
|
||||
containerId: collectionId,
|
||||
partitionKey: "pk",
|
||||
isAutoscale: true,
|
||||
throughputValue: TEST_AUTOSCALE_THROUGHPUT_RU,
|
||||
uniqueKey: "email",
|
||||
});
|
||||
|
||||
const databaseNode = await explorer.waitForNode(databaseId);
|
||||
const collectionNode = await explorer.waitForContainerNode(databaseId, collectionId);
|
||||
|
||||
await expect(collectionNode.element).toBeAttached();
|
||||
|
||||
// Cleanup
|
||||
await deleteDatabase(explorer, databaseId);
|
||||
await expect(databaseNode.element).not.toBeAttached();
|
||||
});
|
||||
|
||||
test("Mongo: Manual throughput", async ({ page }) => {
|
||||
const databaseId = generateUniqueName("db");
|
||||
const collectionId = generateUniqueName("collection");
|
||||
const manualThroughput = 400;
|
||||
|
||||
const explorer = await DataExplorer.open(page, TestAccount.Mongo);
|
||||
|
||||
await openAndFillCreateContainerPanel(explorer, MONGO_CONFIG, {
|
||||
databaseId,
|
||||
containerId: collectionId,
|
||||
partitionKey: "pk",
|
||||
isAutoscale: false,
|
||||
throughputValue: manualThroughput,
|
||||
});
|
||||
|
||||
const databaseNode = await explorer.waitForNode(databaseId);
|
||||
const collectionNode = await explorer.waitForContainerNode(databaseId, collectionId);
|
||||
|
||||
await expect(collectionNode.element).toBeAttached();
|
||||
|
||||
// Cleanup
|
||||
await deleteDatabase(explorer, databaseId);
|
||||
await expect(databaseNode.element).not.toBeAttached();
|
||||
});
|
||||
|
||||
@@ -1,51 +1,110 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
|
||||
import { DataExplorer, TEST_AUTOSCALE_THROUGHPUT_RU, TestAccount, generateUniqueName } from "../fx";
|
||||
import {
|
||||
SQL_CONFIG,
|
||||
deleteContainer,
|
||||
deleteDatabase,
|
||||
openAndFillCreateContainerPanel,
|
||||
} from "../helpers/containerCreationHelpers";
|
||||
|
||||
test("SQL database and container CRUD", async ({ page }) => {
|
||||
test("SQL: Database and container CRUD", async ({ page }) => {
|
||||
const databaseId = generateUniqueName("db");
|
||||
const containerId = "testcontainer"; // A unique container name isn't needed because the database is unique
|
||||
const containerId = generateUniqueName("container");
|
||||
|
||||
const explorer = await DataExplorer.open(page, TestAccount.SQL);
|
||||
|
||||
await explorer.globalCommandButton("New Container").click();
|
||||
await explorer.whilePanelOpen(
|
||||
"New Container",
|
||||
async (panel, okButton) => {
|
||||
await panel.getByPlaceholder("Type a new database id").fill(databaseId);
|
||||
await panel.getByRole("textbox", { name: "Container id, Example Container1" }).fill(containerId);
|
||||
await panel.getByRole("textbox", { name: "Partition key" }).fill("/pk");
|
||||
await panel.getByTestId("autoscaleRUInput").fill(TEST_AUTOSCALE_THROUGHPUT_RU.toString());
|
||||
await okButton.click();
|
||||
},
|
||||
{ closeTimeout: 5 * 60 * 1000 },
|
||||
);
|
||||
// Create
|
||||
await openAndFillCreateContainerPanel(explorer, SQL_CONFIG, {
|
||||
databaseId,
|
||||
containerId,
|
||||
partitionKey: "/pk",
|
||||
isAutoscale: true,
|
||||
throughputValue: TEST_AUTOSCALE_THROUGHPUT_RU,
|
||||
});
|
||||
|
||||
const databaseNode = await explorer.waitForNode(databaseId);
|
||||
const containerNode = await explorer.waitForContainerNode(databaseId, containerId);
|
||||
await expect(containerNode.element).toBeAttached();
|
||||
|
||||
// Delete container
|
||||
await deleteContainer(explorer, databaseId, containerId, "Delete Container");
|
||||
await expect(containerNode.element).not.toBeAttached();
|
||||
|
||||
// Delete database
|
||||
await deleteDatabase(explorer, databaseId);
|
||||
await expect(databaseNode.element).not.toBeAttached();
|
||||
});
|
||||
|
||||
test("SQL: New database shared throughput", async ({ page }) => {
|
||||
const databaseId = generateUniqueName("db");
|
||||
const containerId = generateUniqueName("container");
|
||||
|
||||
const explorer = await DataExplorer.open(page, TestAccount.SQL);
|
||||
|
||||
await openAndFillCreateContainerPanel(explorer, SQL_CONFIG, {
|
||||
databaseId,
|
||||
containerId,
|
||||
partitionKey: "/pk",
|
||||
useSharedThroughput: true,
|
||||
});
|
||||
|
||||
const databaseNode = await explorer.waitForNode(databaseId);
|
||||
const containerNode = await explorer.waitForContainerNode(databaseId, containerId);
|
||||
|
||||
await containerNode.openContextMenu();
|
||||
await containerNode.contextMenuItem("Delete Container").click();
|
||||
await explorer.whilePanelOpen(
|
||||
"Delete Container",
|
||||
async (panel, okButton) => {
|
||||
await panel.getByRole("textbox", { name: "Confirm by typing the container id" }).fill(containerId);
|
||||
await okButton.click();
|
||||
},
|
||||
{ closeTimeout: 5 * 60 * 1000 },
|
||||
);
|
||||
await expect(containerNode.element).not.toBeAttached();
|
||||
|
||||
await databaseNode.openContextMenu();
|
||||
await databaseNode.contextMenuItem("Delete Database").click();
|
||||
await explorer.whilePanelOpen(
|
||||
"Delete Database",
|
||||
async (panel, okButton) => {
|
||||
await panel.getByRole("textbox", { name: "Confirm by typing the database id" }).fill(databaseId);
|
||||
await okButton.click();
|
||||
},
|
||||
{ closeTimeout: 5 * 60 * 1000 },
|
||||
);
|
||||
await expect(containerNode.element).toBeAttached();
|
||||
|
||||
// Cleanup
|
||||
await deleteDatabase(explorer, databaseId);
|
||||
await expect(databaseNode.element).not.toBeAttached();
|
||||
});
|
||||
|
||||
test("SQL: Unique keys", async ({ page }) => {
|
||||
const databaseId = generateUniqueName("db");
|
||||
const containerId = generateUniqueName("container");
|
||||
|
||||
const explorer = await DataExplorer.open(page, TestAccount.SQL);
|
||||
|
||||
await openAndFillCreateContainerPanel(explorer, SQL_CONFIG, {
|
||||
databaseId,
|
||||
containerId,
|
||||
partitionKey: "/pk",
|
||||
isAutoscale: true,
|
||||
throughputValue: TEST_AUTOSCALE_THROUGHPUT_RU,
|
||||
uniqueKey: "/email,/username",
|
||||
});
|
||||
|
||||
const databaseNode = await explorer.waitForNode(databaseId);
|
||||
const containerNode = await explorer.waitForContainerNode(databaseId, containerId);
|
||||
|
||||
await expect(containerNode.element).toBeAttached();
|
||||
|
||||
// Cleanup
|
||||
await deleteDatabase(explorer, databaseId);
|
||||
await expect(databaseNode.element).not.toBeAttached();
|
||||
});
|
||||
|
||||
test("SQL: Manual throughput", async ({ page }) => {
|
||||
const databaseId = generateUniqueName("db");
|
||||
const containerId = generateUniqueName("container");
|
||||
const manualThroughput = 400;
|
||||
|
||||
const explorer = await DataExplorer.open(page, TestAccount.SQL);
|
||||
|
||||
await openAndFillCreateContainerPanel(explorer, SQL_CONFIG, {
|
||||
databaseId,
|
||||
containerId,
|
||||
partitionKey: "/pk",
|
||||
isAutoscale: false,
|
||||
throughputValue: manualThroughput,
|
||||
});
|
||||
|
||||
const databaseNode = await explorer.waitForNode(databaseId);
|
||||
const containerNode = await explorer.waitForContainerNode(databaseId, containerId);
|
||||
|
||||
await expect(containerNode.element).toBeAttached();
|
||||
|
||||
// Cleanup
|
||||
await deleteDatabase(explorer, databaseId);
|
||||
await expect(databaseNode.element).not.toBeAttached();
|
||||
});
|
||||
|
||||
@@ -1,35 +1,116 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
|
||||
import { DataExplorer, TEST_AUTOSCALE_THROUGHPUT_RU, TestAccount, generateUniqueName } from "../fx";
|
||||
import { TABLES_CONFIG, deleteContainer, openAndFillCreateContainerPanel } from "../helpers/containerCreationHelpers";
|
||||
|
||||
test("Tables CRUD", async ({ page }) => {
|
||||
const tableId = generateUniqueName("table"); // A unique table name IS needed because the database is shared when using Table Storage.
|
||||
test("Tables: CRUD", async ({ page }) => {
|
||||
const tableId = generateUniqueName("table");
|
||||
|
||||
const explorer = await DataExplorer.open(page, TestAccount.Tables);
|
||||
|
||||
await explorer.globalCommandButton("New Table").click();
|
||||
await explorer.whilePanelOpen(
|
||||
"New Table",
|
||||
async (panel, okButton) => {
|
||||
await panel.getByRole("textbox", { name: "Table id, Example Table1" }).fill(tableId);
|
||||
await panel.getByTestId("autoscaleRUInput").fill(TEST_AUTOSCALE_THROUGHPUT_RU.toString());
|
||||
await okButton.click();
|
||||
},
|
||||
{ closeTimeout: 5 * 60 * 1000 },
|
||||
);
|
||||
// Create
|
||||
await openAndFillCreateContainerPanel(explorer, TABLES_CONFIG, {
|
||||
databaseId: "TablesDB",
|
||||
containerId: tableId,
|
||||
isAutoscale: true,
|
||||
throughputValue: TEST_AUTOSCALE_THROUGHPUT_RU,
|
||||
});
|
||||
|
||||
const tableNode = await explorer.waitForContainerNode("TablesDB", tableId);
|
||||
await expect(tableNode.element).toBeAttached();
|
||||
|
||||
await tableNode.openContextMenu();
|
||||
await tableNode.contextMenuItem("Delete Table").click();
|
||||
await explorer.whilePanelOpen(
|
||||
"Delete Table",
|
||||
async (panel, okButton) => {
|
||||
await panel.getByRole("textbox", { name: "Confirm by typing the table id" }).fill(tableId);
|
||||
await okButton.click();
|
||||
},
|
||||
{ closeTimeout: 5 * 60 * 1000 },
|
||||
);
|
||||
|
||||
// Delete table
|
||||
await deleteContainer(explorer, "TablesDB", tableId, "Delete Table");
|
||||
await expect(tableNode.element).not.toBeAttached();
|
||||
});
|
||||
|
||||
test("Tables: New database shared throughput", async ({ page }) => {
|
||||
const tableId = generateUniqueName("table");
|
||||
|
||||
const explorer = await DataExplorer.open(page, TestAccount.Tables);
|
||||
|
||||
await openAndFillCreateContainerPanel(explorer, TABLES_CONFIG, {
|
||||
databaseId: "TablesDB",
|
||||
containerId: tableId,
|
||||
useSharedThroughput: true,
|
||||
});
|
||||
|
||||
const tableNode = await explorer.waitForContainerNode("TablesDB", tableId);
|
||||
await expect(tableNode.element).toBeAttached();
|
||||
|
||||
// Cleanup
|
||||
await deleteContainer(explorer, "TablesDB", tableId, "Delete Table");
|
||||
await expect(tableNode.element).not.toBeAttached();
|
||||
});
|
||||
|
||||
test("Tables: Manual throughput", async ({ page }) => {
|
||||
const tableId = generateUniqueName("table");
|
||||
const manualThroughput = 400;
|
||||
|
||||
const explorer = await DataExplorer.open(page, TestAccount.Tables);
|
||||
|
||||
await openAndFillCreateContainerPanel(explorer, TABLES_CONFIG, {
|
||||
databaseId: "TablesDB",
|
||||
containerId: tableId,
|
||||
isAutoscale: false,
|
||||
throughputValue: manualThroughput,
|
||||
});
|
||||
|
||||
const tableNode = await explorer.waitForContainerNode("TablesDB", tableId);
|
||||
await expect(tableNode.element).toBeAttached();
|
||||
|
||||
// Cleanup
|
||||
await deleteContainer(explorer, "TablesDB", tableId, "Delete Table");
|
||||
await expect(tableNode.element).not.toBeAttached();
|
||||
});
|
||||
|
||||
test("Tables: Multiple tables in TablesDB", async ({ page }) => {
|
||||
const table1Id = generateUniqueName("table");
|
||||
const table2Id = generateUniqueName("table");
|
||||
|
||||
const explorer = await DataExplorer.open(page, TestAccount.Tables);
|
||||
|
||||
// Create first table
|
||||
await openAndFillCreateContainerPanel(explorer, TABLES_CONFIG, {
|
||||
databaseId: "TablesDB",
|
||||
containerId: table1Id,
|
||||
isAutoscale: true,
|
||||
throughputValue: TEST_AUTOSCALE_THROUGHPUT_RU,
|
||||
});
|
||||
|
||||
await explorer.waitForContainerNode("TablesDB", table1Id);
|
||||
|
||||
// Create second table
|
||||
await openAndFillCreateContainerPanel(explorer, TABLES_CONFIG, {
|
||||
databaseId: "TablesDB",
|
||||
containerId: table2Id,
|
||||
isAutoscale: true,
|
||||
throughputValue: TEST_AUTOSCALE_THROUGHPUT_RU,
|
||||
});
|
||||
|
||||
await explorer.waitForContainerNode("TablesDB", table2Id);
|
||||
|
||||
// Cleanup
|
||||
await deleteContainer(explorer, "TablesDB", table1Id, "Delete Table");
|
||||
await deleteContainer(explorer, "TablesDB", table2Id, "Delete Table");
|
||||
});
|
||||
|
||||
test("Tables: No partition key support", async ({ page }) => {
|
||||
const tableId = generateUniqueName("table");
|
||||
|
||||
const explorer = await DataExplorer.open(page, TestAccount.Tables);
|
||||
|
||||
await openAndFillCreateContainerPanel(explorer, TABLES_CONFIG, {
|
||||
databaseId: "TablesDB",
|
||||
containerId: tableId,
|
||||
isAutoscale: true,
|
||||
throughputValue: TEST_AUTOSCALE_THROUGHPUT_RU,
|
||||
});
|
||||
|
||||
const tableNode = await explorer.waitForContainerNode("TablesDB", tableId);
|
||||
await expect(tableNode.element).toBeAttached();
|
||||
|
||||
// Cleanup
|
||||
await deleteContainer(explorer, "TablesDB", tableId, "Delete Table");
|
||||
await expect(tableNode.element).not.toBeAttached();
|
||||
});
|
||||
|
||||
@@ -134,7 +134,7 @@ const initTestExplorer = async (): Promise<void> => {
|
||||
);
|
||||
iframe.id = "explorerMenu";
|
||||
iframe.name = "explorer";
|
||||
iframe.setAttribute("data-test", "DataExplorerFrame");
|
||||
iframe.setAttribute("data-testid", "DataExplorerFrame");
|
||||
iframe.classList.add("iframe");
|
||||
iframe.title = "explorer";
|
||||
iframe.src = iframeSrc; // CodeQL [SM03712] Not used in production, only for testing purposes
|
||||
|
||||
Reference in New Issue
Block a user