random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-27 21:01:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add data-testid to components for testing

Browse Source
This commit is contained in:
Sung-Hyun Kang
2025-12-10 16:51:09 -06:00
parent 98a21f2fb1
commit bb5d3bfc42
51 changed files with 330 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
playwright.config.ts
View File

@@ -14,7 +14,7 @@ export default defineConfig({
trace: "off",
video: "off",
screenshot: "on",
testIdAttribute: "data-test",
testIdAttribute: "data-testid",
contextOptions: {
ignoreHTTPSErrors: true,
},

4
src/Explorer/ContainerCopy/Context/CopyJobContext.test.tsx
View File

@@ -32,7 +32,7 @@ describe("CopyJobContext", () => {
it("should render children correctly", () => {
render(
<CopyJobContextProvider explorer={mockExplorer}>
<div data-test="test-child">Test Child</div>
<div data-testid="test-child">Test Child</div>
</CopyJobContextProvider>,
);
@@ -552,7 +552,7 @@ describe("CopyJobContext", () => {
const TestComponent2 = (): JSX.Element => {
const context = useCopyJobContext();
contextValue2 = context;
return <div data-test="component-2">Component 2</div>;
return <div data-testid="component-2">Component 2</div>;
};
render(

12
src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/AddReadPermissionToDefaultIdentity.test.tsx
View File

@@ -20,7 +20,7 @@ jest.mock("../../../CopyJobUtils", () => ({
jest.mock("../Components/InfoTooltip", () => {
const MockInfoTooltip = ({ content }: { content: React.ReactNode }) => {
return <div data-test="info-tooltip">{content}</div>;
return <div data-testid="info-tooltip">{content}</div>;
};
MockInfoTooltip.displayName = "MockInfoTooltip";
return MockInfoTooltip;
@@ -46,13 +46,13 @@ jest.mock("../Components/PopoverContainer", () => {
return null;
}
return (
<div data-test="popover-message" data-loading={isLoading}>
<div data-test="popover-title">{title}</div>
<div data-test="popover-content">{children}</div>
<button onClick={onCancel} data-test="popover-cancel">
<div data-testid="popover-message" data-loading={isLoading}>
<div data-testid="popover-title">{title}</div>
<div data-testid="popover-content">{children}</div>
<button onClick={onCancel} data-testid="popover-cancel">
Cancel
</button>
<button onClick={onPrimary} data-test="popover-primary">
<button onClick={onPrimary} data-testid="popover-primary">
Primary
</button>
</div>

32
src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/AssignPermissions.test.tsx
View File

@@ -26,7 +26,7 @@ jest.mock("./hooks/usePermissionsSection", () => ({
jest.mock("../../../../../Common/ShimmerTree/ShimmerTree", () => {
const MockShimmerTree = (props: any) => {
return (
<div data-test="shimmer-tree" {...props}>
<div data-testid="shimmer-tree" {...props}>
Loading...
</div>
);
@@ -37,7 +37,7 @@ jest.mock("../../../../../Common/ShimmerTree/ShimmerTree", () => {
jest.mock("./AddManagedIdentity", () => {
const MockAddManagedIdentity = () => {
return <div data-test="add-managed-identity">Add Managed Identity Component</div>;
return <div data-testid="add-managed-identity">Add Managed Identity Component</div>;
};
MockAddManagedIdentity.displayName = "MockAddManagedIdentity";
return MockAddManagedIdentity;
@@ -45,7 +45,7 @@ jest.mock("./AddManagedIdentity", () => {
jest.mock("./AddReadPermissionToDefaultIdentity", () => {
const MockAddReadPermissionToDefaultIdentity = () => {
return <div data-test="add-read-permission">Add Read Permission Component</div>;
return <div data-testid="add-read-permission">Add Read Permission Component</div>;
};
MockAddReadPermissionToDefaultIdentity.displayName = "MockAddReadPermissionToDefaultIdentity";
return MockAddReadPermissionToDefaultIdentity;
@@ -53,7 +53,7 @@ jest.mock("./AddReadPermissionToDefaultIdentity", () => {
jest.mock("./DefaultManagedIdentity", () => {
const MockDefaultManagedIdentity = () => {
return <div data-test="default-managed-identity">Default Managed Identity Component</div>;
return <div data-testid="default-managed-identity">Default Managed Identity Component</div>;
};
MockDefaultManagedIdentity.displayName = "MockDefaultManagedIdentity";
return MockDefaultManagedIdentity;
@@ -61,7 +61,8 @@ jest.mock("./DefaultManagedIdentity", () => {
jest.mock("./OnlineCopyEnabled", () => {
const MockOnlineCopyEnabled = () => {
return <div data-test="online-copy-enabled">Online Copy Enabled Component</div>;
return <div data-testid="online-copy-enabled">Online Copy Enabled Component</div>;
return <div data-testid="online-copy-enabled">Online Copy Enabled Component</div>;
};
MockOnlineCopyEnabled.displayName = "MockOnlineCopyEnabled";
return MockOnlineCopyEnabled;
@@ -69,7 +70,8 @@ jest.mock("./OnlineCopyEnabled", () => {
jest.mock("./PointInTimeRestore", () => {
const MockPointInTimeRestore = () => {
return <div data-test="point-in-time-restore">Point In Time Restore Component</div>;
return <div data-testid="point-in-time-restore">Point In Time Restore Component</div>;
return <div data-testid="point-in-time-restore">Point In Time Restore Component</div>;
};
MockPointInTimeRestore.displayName = "MockPointInTimeRestore";
return MockPointInTimeRestore;
@@ -196,14 +198,16 @@ describe("AssignPermissions Component", () => {
{
id: "addManagedIdentity",
title: "Add Managed Identity",
Component: () => <div data-test="add-managed-identity">Add Managed Identity Component</div>,
Component: () => <div data-testid="add-managed-identity">Add Managed Identity Component</div>,
Component: () => <div data-testid="add-managed-identity">Add Managed Identity Component</div>,
disabled: false,
completed: true,
},
{
id: "readPermissionAssigned",
title: "Read Permission Assigned",
Component: () => <div data-test="add-read-permission">Add Read Permission Component</div>,
Component: () => <div data-testid="add-read-permission">Add Read Permission Component</div>,
Component: () => <div data-testid="add-read-permission">Add Read Permission Component</div>,
disabled: false,
completed: false,
},
@@ -228,14 +232,18 @@ describe("AssignPermissions Component", () => {
{
id: "pointInTimeRestore",
title: "Point In Time Restore",
Component: () => <div data-test="point-in-time-restore">Point In Time Restore Component</div>,
Component: () => <div data-testid="point-in-time-restore">Point In Time Restore Component</div>,
Component: () => <div data-testid="point-in-time-restore">Point In Time Restore Component</div>,
disabled: false,
completed: true,
},
{
id: "onlineCopyEnabled",
title: "Online Copy Enabled",
Component: () => <div data-test="online-copy-enabled">Online Copy Enabled Component</div>,
Component: () => <div data-testid="online-copy-enabled">Online Copy Enabled Component</div>,
Component: () => <div data-testid="online-copy-enabled">Online Copy Enabled Component</div>,
Component: () => <div data-testid="add-managed-identity">Add Managed Identity Component</div>,
Component: () => <div data-testid="online-copy-enabled">Online Copy Enabled Component</div>,
disabled: false,
completed: false,
},
@@ -262,7 +270,7 @@ describe("AssignPermissions Component", () => {
{
id: "addManagedIdentity",
title: "Add Managed Identity",
Component: () => <div data-test="add-managed-identity">Add Managed Identity Component</div>,
Component: () => <div data-testid="add-managed-identity">Add Managed Identity Component</div>,
disabled: false,
completed: true,
},
@@ -276,7 +284,7 @@ describe("AssignPermissions Component", () => {
{
id: "onlineCopyEnabled",
title: "Online Copy Enabled",
Component: () => <div data-test="online-copy-enabled">Online Copy Enabled Component</div>,
Component: () => <div data-testid="online-copy-enabled">Online Copy Enabled Component</div>,
disabled: false,
completed: false,
},

14
src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/DefaultManagedIdentity.test.tsx
View File

@@ -15,7 +15,7 @@ jest.mock("../../../../../Utils/arm/identityUtils", () => ({
jest.mock("../Components/InfoTooltip", () => {
const MockInfoTooltip = ({ content }: { content: React.ReactNode }) => {
return <div data-test="info-tooltip">{content}</div>;
return <div data-testid="info-tooltip">{content}</div>;
};
MockInfoTooltip.displayName = "MockInfoTooltip";
return MockInfoTooltip;
@@ -41,14 +41,14 @@ jest.mock("../Components/PopoverContainer", () => {
return null;
}
return (
<div data-test="popover-message">
<div data-test="popover-title">{title}</div>
<div data-test="popover-content">{children}</div>
<div data-test="popover-loading">{isLoading ? "Loading" : "Not Loading"}</div>
<button data-test="popover-cancel" onClick={onCancel}>
<div data-testid="popover-message">
<div data-testid="popover-title">{title}</div>
<div data-testid="popover-content">{children}</div>
<div data-testid="popover-loading">{isLoading ? "Loading" : "Not Loading"}</div>
<button data-testid="popover-cancel" onClick={onCancel}>
Cancel
</button>
<button data-test="popover-primary" onClick={onPrimary}>
<button data-testid="popover-primary" onClick={onPrimary}>
Primary
</button>
</div>

3
src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/OnlineCopyEnabled.test.tsx
View File

@@ -25,7 +25,8 @@ jest.mock("../../../../../Common/Logger", () => ({
jest.mock("../../../../../Common/LoadingOverlay", () => {
const MockLoadingOverlay = ({ isLoading, label }: { isLoading: boolean; label: string }) => {
return isLoading ? <div data-test="loading-overlay">{label}</div> : null;
return isLoading ? <div data-testid="loading-overlay">{label}</div> : null;
return isLoading ? <div data-testid="loading-overlay">{label}</div> : null;
};
MockLoadingOverlay.displayName = "MockLoadingOverlay";
return MockLoadingOverlay;

6
src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/hooks/useManagedIdentity.test.tsx
View File

@@ -52,11 +52,11 @@ const TestComponent: React.FC<TestComponentProps> = ({ updateIdentityFn, onError
return (
<div>
<button onClick={handleClick} disabled={loading} data-test="add-identity-button">
<button onClick={handleClick} disabled={loading} data-testid="add-identity-button">
{loading ? "Loading..." : "Add System Identity"}
</button>
<div data-test="loading-status">{loading ? "true" : "false"}</div>
{contextError && <div data-test="error-message">{contextError}</div>}
<div data-testid="loading-status">{loading ? "true" : "false"}</div>
{contextError && <div data-testid="error-message">{contextError}</div>}
</div>
);
};

24
src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/hooks/usePermissionsSection.test.tsx
View File

@@ -34,7 +34,7 @@ jest.mock("../../../../CopyJobUtils", () => ({
jest.mock("../AddManagedIdentity", () => {
const MockAddManagedIdentity = () => {
return <div data-test="add-managed-identity">AddManagedIdentity</div>;
return <div data-testid="add-managed-identity">AddManagedIdentity</div>;
};
MockAddManagedIdentity.displayName = "MockAddManagedIdentity";
return MockAddManagedIdentity;
@@ -42,7 +42,7 @@ jest.mock("../AddManagedIdentity", () => {
jest.mock("../AddReadPermissionToDefaultIdentity", () => {
const MockAddReadPermissionToDefaultIdentity = () => {
return <div data-test="add-read-permission">AddReadPermissionToDefaultIdentity</div>;
return <div data-testid="add-read-permission">AddReadPermissionToDefaultIdentity</div>;
};
MockAddReadPermissionToDefaultIdentity.displayName = "MockAddReadPermissionToDefaultIdentity";
return MockAddReadPermissionToDefaultIdentity;
@@ -50,7 +50,7 @@ jest.mock("../AddReadPermissionToDefaultIdentity", () => {
jest.mock("../DefaultManagedIdentity", () => {
const MockDefaultManagedIdentity = () => {
return <div data-test="default-managed-identity">DefaultManagedIdentity</div>;
return <div data-testid="default-managed-identity">DefaultManagedIdentity</div>;
};
MockDefaultManagedIdentity.displayName = "MockDefaultManagedIdentity";
return MockDefaultManagedIdentity;
@@ -58,7 +58,7 @@ jest.mock("../DefaultManagedIdentity", () => {
jest.mock("../OnlineCopyEnabled", () => {
const MockOnlineCopyEnabled = () => {
return <div data-test="online-copy-enabled">OnlineCopyEnabled</div>;
return <div data-testid="online-copy-enabled">OnlineCopyEnabled</div>;
};
MockOnlineCopyEnabled.displayName = "MockOnlineCopyEnabled";
return MockOnlineCopyEnabled;
@@ -66,7 +66,7 @@ jest.mock("../OnlineCopyEnabled", () => {
jest.mock("../PointInTimeRestore", () => {
const MockPointInTimeRestore = () => {
return <div data-test="point-in-time-restore">PointInTimeRestore</div>;
return <div data-testid="point-in-time-restore">PointInTimeRestore</div>;
};
MockPointInTimeRestore.displayName = "MockPointInTimeRestore";
return MockPointInTimeRestore;
@@ -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);
@@ -92,18 +90,18 @@ const TestWrapper: React.FC<TestWrapperProps> = ({ state, onResult }) => {
}, [result, onResult]);
return (
<div data-test="test-wrapper">
<div data-test="groups-count">{result.length}</div>
<div data-testid="test-wrapper">
<div data-testid="groups-count">{result.length}</div>
{result.map((group) => (
<div key={group.id} data-test={`group-${group.id}`}>
<div key={group.id} data-testid={`group-${group.id}`}>
<h3>{group.title}</h3>
<p>{group.description}</p>
{group.sections.map((section) => (
<div key={section.id} data-test={`section-${section.id}`}>
<span data-test={`section-${section.id}-completed`}>
<div key={section.id} data-testid={`section-${section.id}`}>
<span data-testid={`section-${section.id}-completed`}>
{section.completed?.toString() || "undefined"}
</span>
<span data-test={`section-${section.id}-disabled`}>{section.disabled.toString()}</span>
<span data-testid={`section-${section.id}-disabled`}>{section.disabled.toString()}</span>
</div>
))}
</div>

12
src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/hooks/useToggle.test.tsx
View File

@@ -7,14 +7,14 @@ const TestToggleComponent: React.FC<{ initialState?: boolean }> = ({ initialStat
return (
<div>
<span data-test="toggle-state">{state ? "true" : "false"}</span>
<button data-test="toggle-button" onClick={() => onToggle(null, !state)}>
<span data-testid="toggle-state">{state ? "true" : "false"}</span>
<button data-testid="toggle-button" onClick={() => onToggle(null, !state)}>
Toggle
</button>
<button data-test="set-true-button" onClick={() => onToggle(null, true)}>
<button data-testid="set-true-button" onClick={() => onToggle(null, true)}>
Set True
</button>
<button data-test="set-false-button" onClick={() => onToggle(null, false)}>
<button data-testid="set-false-button" onClick={() => onToggle(null, false)}>
Set False
</button>
</div>
@@ -57,8 +57,8 @@ describe("useToggle hook", () => {
return (
<div>
<span data-test="toggle-state">{state ? "true" : "false"}</span>
<button data-test="undefined-button" onClick={() => onToggle(null, undefined)}>
<span data-testid="toggle-state">{state ? "true" : "false"}</span>
<button data-testid="undefined-button" onClick={() => onToggle(null, undefined)}>
Set Undefined
</button>
</div>

8
src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/FieldRow.test.tsx
View File

@@ -24,8 +24,8 @@ describe("FieldRow", () => {
it("renders children content correctly", () => {
render(
<FieldRow label={testLabel}>
<input type="text" data-test="test-input" />
<button data-test="test-button">Click me</button>
<input type="text" data-testid="test-input" />
<button data-testid="test-button">Click me</button>
</FieldRow>,
);
@@ -123,7 +123,7 @@ describe("FieldRow", () => {
it("positions children in grow container with center alignment", () => {
const { container } = render(
<FieldRow label={testLabel}>
<div data-test="child-content">{mockChildContent}</div>
<div data-testid="child-content">{mockChildContent}</div>
</FieldRow>,
);
@@ -135,7 +135,7 @@ describe("FieldRow", () => {
it("maintains layout when no label is provided", () => {
const { container } = render(
<FieldRow>
<div data-test="child-content">{mockChildContent}</div>
<div data-testid="child-content">{mockChildContent}</div>
</FieldRow>,
);

4
src/Explorer/Controls/Dialog.tsx
View File

@@ -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>

4
src/Explorer/Controls/Editor/EditorReact.tsx
View File

@@ -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") {

2
src/Explorer/Controls/InputDataList/InputDataList.tsx
View File

@@ -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"

8
src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
View File

@@ -209,7 +209,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
checked={isAutoscaleSelected}
type="radio"
role="radio"
data-test="ThroughputInput/ThroughputMode:Autoscale"
data-testid="ThroughputInput/ThroughputMode:Autoscale"
tabIndex={0}
onChange={(e) => handleOnChangeMode(e, "Autoscale")}
/>
@@ -225,7 +225,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
type="radio"
aria-required={true}
role="radio"
data-test="ThroughputInput/ThroughputMode:Manual"
data-testid="ThroughputInput/ThroughputMode:Manual"
tabIndex={0}
onChange={(e) => handleOnChangeMode(e, "Manual")}
/>
@@ -288,7 +288,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
</Stack>
<TextField
id="autoscaleRUValueField"
data-test="ThroughputInput/AutoscaleRUInput"
data-testid="ThroughputInput/AutoscaleRUInput"
type="number"
styles={{
fieldGroup: { width: 100, height: 27, flexShrink: 0 },
@@ -354,7 +354,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
}
>
<TextField
data-test="ThroughputInput/ManualThroughputInput"
data-testid="ThroughputInput/ManualThroughputInput"
type="number"
styles={{
fieldGroup: { width: 300, height: 27 },

8
src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap
View File

@@ -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}

16
src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx
View File

@@ -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}

180
src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap
View File

@@ -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=""

4
src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
View File

@@ -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:"

8
src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap
View File

@@ -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"

6
src/Explorer/Notebook/NotebookRenderer/StatusBar.tsx
View File

@@ -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>

22
src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx
View File

@@ -301,7 +301,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
type="radio"
role="radio"
id="databaseCreateNew"
data-test="AddCollectionPanel/DatabaseRadio:CreateNew"
data-testid="AddCollectionPanel/DatabaseRadio:CreateNew"
tabIndex={0}
onChange={this.onCreateNewDatabaseRadioBtnChange.bind(this)}
/>
@@ -315,7 +315,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
name="databaseType"
type="radio"
role="radio"
data-test="AddCollectionPanel/DatabaseRadio:UseExisting"
data-testid="AddCollectionPanel/DatabaseRadio:UseExisting"
tabIndex={0}
onChange={this.onUseExistingDatabaseRadioBtnChange.bind(this)}
/>
@@ -339,7 +339,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
size={40}
className="panelTextField"
aria-label="New database id, Type a new database id"
data-test="AddCollectionPanel/DatabaseId"
data-testid="AddCollectionPanel/DatabaseId"
tabIndex={0}
value={this.state.newDatabaseId}
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
@@ -349,7 +349,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
{!isServerlessAccount() && (
<Stack horizontal>
<div data-test="AddCollectionPanel/SharedThroughputCheckbox">
<div data-testid="AddCollectionPanel/SharedThroughputCheckbox">
<Checkbox
label={`Share throughput across ${getCollectionName(true).toLocaleLowerCase()}`}
checked={this.state.isSharedThroughputChecked}
@@ -401,7 +401,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
{!this.state.createNewDatabase && (
<Dropdown
ariaLabel="Choose an existing database"
data-test="AddCollectionPanel/ExistingDatabaseDropdown"
data-testid="AddCollectionPanel/ExistingDatabaseDropdown"
styles={{ title: { height: 27, lineHeight: 27 }, dropdownItem: { fontSize: 12 } }}
style={{ width: 300, fontSize: 12 }}
placeholder="Choose an existing database"
@@ -449,7 +449,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
placeholder={`e.g., ${getCollectionName()}1`}
size={40}
className="panelTextField"
data-test="AddCollectionPanel/CollectionId"
data-testid="AddCollectionPanel/CollectionId"
aria-label={`${getCollectionName()} id, Example ${getCollectionName()}1`}
value={this.state.collectionId}
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
@@ -583,7 +583,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
<input
type="text"
id="addCollection-partitionKeyValue"
data-test="AddCollectionPanel/PartitionKey"
data-testid="AddCollectionPanel/PartitionKey"
aria-required
required
size={40}
@@ -620,7 +620,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
<input
type="text"
id="addCollection-partitionKeyValue"
data-test="AddCollectionPanel/PartitionKey"
data-testid="AddCollectionPanel/PartitionKey"
key={`addCollection-partitionKeyValue_${index}`}
aria-required
required
@@ -738,7 +738,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
)}
{!isFabricNative() && userContext.apiType === "SQL" && (
<Stack style={{ marginTop: -2, marginBottom: -4 }} data-test="AddCollectionPanel/UniqueKeysSection">
<Stack style={{ marginTop: -2, marginBottom: -4 }} data-testid="AddCollectionPanel/UniqueKeysSection">
{UniqueKeysHeader()}
{this.state.uniqueKeys.map((uniqueKey: string, i: number): JSX.Element => {
return (
@@ -752,7 +752,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
: "Comma separated paths e.g. /firstName,/address/zipCode"
}
className="panelTextField"
data-test="AddCollectionPanel/UniqueKey"
data-testid="AddCollectionPanel/UniqueKey"
value={uniqueKey}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
const uniqueKeys = this.state.uniqueKeys.map((uniqueKey: string, j: number) => {
@@ -779,7 +779,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
<ActionButton
iconProps={{ iconName: "Add" }}
data-test="AddCollectionPanel/AddUniqueKeyButton"
data-testid="AddCollectionPanel/AddUniqueKeyButton"
styles={{ root: { padding: 0 }, label: { fontSize: 12 } }}
onClick={() => this.setState({ uniqueKeys: [...this.state.uniqueKeys, ""] })}
>

49
src/Explorer/Panes/AddCollectionPanel/__snapshots__/AddCollectionPanel.test.tsx.snap
View File

@@ -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",

6
src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx
View File

@@ -199,7 +199,7 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
{keyspaceCreateNew && (
<Stack className="panelGroupSpacing">
<TextField
data-test="AddCollectionPanel/DatabaseId"
data-testid="AddCollectionPanel/DatabaseId"
aria-required="true"
required={true}
autoComplete="off"
@@ -216,7 +216,7 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
{!isServerlessAccount() && (
<Stack horizontal>
<div data-test="AddCollectionPanel/SharedThroughputCheckbox">
<div data-testid="AddCollectionPanel/SharedThroughputCheckbox">
<Checkbox
label="Provision shared throughput"
checked={isKeyspaceShared}
@@ -292,7 +292,7 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
{`CREATE TABLE ${keyspaceCreateNew ? newKeyspaceId : existingKeyspaceId}.`}
</Text>
<TextField
data-test="AddCollectionPanel/CollectionId"
data-testid="AddCollectionPanel/CollectionId"
underlined
styles={getTextFieldStyles({ fontSize: 12, width: 150 })}
aria-required="true"

2
src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx
View File

@@ -120,7 +120,7 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
<Text variant="small">Confirm by typing the {collectionName.toLowerCase()} id</Text>
<TextField
id="confirmCollectionId"
data-test="DeleteCollectionConfirmationPane/ConfirmInput"
data-testid="DeleteCollectionConfirmationPane/ConfirmInput"
autoFocus
value={inputCollectionName}
styles={{ fieldGroup: { width: 300 } }}

15
src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
View File

@@ -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]}

2
src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx
View File

@@ -135,7 +135,7 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
<Text variant="small">{confirmDatabase}</Text>
<TextField
id="confirmDatabaseId"
data-test="DeleteDatabaseConfirmationPanel/ConfirmInput"
data-testid="DeleteDatabaseConfirmationPanel/ConfirmInput"
autoFocus
styles={{ fieldGroup: { width: 300 } }}
onChange={(event, newInput?: string) => {

12
src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap
View File

@@ -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]}

2
src/Explorer/Panes/PanelContainerComponent.tsx
View File

@@ -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}

2
src/Explorer/Panes/PanelFooterComponent.tsx
View File

@@ -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}

12
src/Explorer/Panes/RightPaneForm/__snapshots__/RightPaneForm.test.tsx.snap
View File

@@ -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]}

12
src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
View File

@@ -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]}

12
src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap
View File

@@ -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]}

12
src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap
View File

@@ -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]}

12
src/Explorer/Panes/Tables/__snapshots__/EditTableEntityPanel.test.tsx.snap
View File

@@ -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]}

18
src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap
View File

@@ -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]}

6
src/Explorer/Panes/__snapshots__/PanelContainerComponent.test.tsx.snap
View File

@@ -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}

8
src/Explorer/Sidebar.tsx
View File

@@ -242,10 +242,10 @@ 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
data-test={`GlobalCommands/Button:${primaryAction.label}`}
data-testid={`GlobalCommands/Button:${primaryAction.label}`}
icon={primaryAction.icon}
onClick={onPrimaryActionClick}
ref={primaryFocusableRef}
@@ -258,7 +258,7 @@ const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
{(triggerProps: MenuButtonProps) => (
<div ref={setGlobalCommandButton}>
<SplitButton
data-test={`GlobalCommands/Button:${primaryAction.label}`}
data-testid={`GlobalCommands/Button:${primaryAction.label}`}
menuButton={{ ...triggerProps, "aria-label": "More commands" }}
primaryActionButton={{
onClick: onPrimaryActionClick,
@@ -385,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"

12
src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
View File

@@ -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"}

10
src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap
View File

@@ -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%",

6
src/Explorer/Tabs/QueryTab/ErrorList.tsx
View File

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

8
src/Explorer/Tabs/QueryTab/QueryResultSection.tsx
View File

@@ -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"

2
src/Explorer/Tabs/QueryTab/QueryTabComponent.test.tsx
View File

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

4
src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
View File

@@ -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>

12
src/Explorer/Tabs/QueryTab/ResultsView.tsx
View File

@@ -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}
>

4
src/Explorer/Tabs/Tabs.tsx
View File

@@ -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 => {

2
src/HostedExplorer.tsx
View File

@@ -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"

2
src/Main.tsx
View File

@@ -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} />
) : (

2
src/Platform/Hosted/Components/ConnectExplorer.tsx
View File

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

2
src/SelfServe/SelfServeComponent.tsx
View File

@@ -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()} />

8
src/SelfServe/__snapshots__/SelfServeComponent.test.tsx.snap
View File

@@ -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",

2
test/testExplorer/TestExplorer.ts
View File

@@ -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