Compare commits

..

1 Commits

Author SHA1 Message Date
Bikram Choudhury
f894c6c0fb Refactor: Extract root components architecture with comprehensive tests 2026-01-21 22:39:59 +05:30
26 changed files with 1320 additions and 637 deletions

View File

@@ -189,9 +189,6 @@ jobs:
NOSQL_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-sql.documents.azure.com/.default" -o tsv --query accessToken)
echo "::add-mask::$NOSQL_TESTACCOUNT_TOKEN"
echo NOSQL_TESTACCOUNT_TOKEN=$NOSQL_TESTACCOUNT_TOKEN >> $GITHUB_ENV
NOSQL2_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-sql-2.documents.azure.com/.default" -o tsv --query accessToken)
echo "::add-mask::$NOSQL2_TESTACCOUNT_TOKEN"
echo NOSQL2_TESTACCOUNT_TOKEN=$NOSQL2_TESTACCOUNT_TOKEN >> $GITHUB_ENV
NOSQL_READONLY_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-sql-readonly.documents.azure.com/.default" -o tsv --query accessToken)
echo "::add-mask::$NOSQL_READONLY_TESTACCOUNT_TOKEN"
echo NOSQL_READONLY_TESTACCOUNT_TOKEN=$NOSQL_READONLY_TESTACCOUNT_TOKEN >> $GITHUB_ENV

View File

@@ -1,4 +1,6 @@
import React, { useEffect } from "react";
import { Dialog } from "../../Explorer/Controls/Dialog";
import { SidePanel } from "../../Explorer/Panes/PanelContainerComponent";
import CopyJobCommandBar from "./CommandBar/CopyJobCommandBar";
import "./containerCopyStyles.less";
import { MonitorCopyJobsRefState } from "./MonitorCopyJobs/MonitorCopyJobRefState";
@@ -16,6 +18,8 @@ const ContainerCopyPanel: React.FC<ContainerCopyProps> = ({ explorer }) => {
<div id="containerCopyWrapper" className="flexContainer hideOverflows">
<CopyJobCommandBar explorer={explorer} />
<MonitorCopyJobs ref={monitorCopyJobsRef} explorer={explorer} />
<SidePanel />
<Dialog />
</div>
);
};

View File

@@ -2,18 +2,9 @@
import "./ReactDevTools";
// CSS Dependencies
import { initializeIcons, loadTheme, useTheme } from "@fluentui/react";
import { FluentProvider, makeStyles, webDarkTheme, webLightTheme } from "@fluentui/react-components";
import { Platform } from "ConfigContext";
import ContainerCopyPanel from "Explorer/ContainerCopy/ContainerCopyPanel";
import Explorer from "Explorer/Explorer";
import { QuickstartCarousel } from "Explorer/Quickstart/QuickstartCarousel";
import { MongoQuickstartTutorial } from "Explorer/Quickstart/Tutorials/MongoQuickstartTutorial";
import { SQLQuickstartTutorial } from "Explorer/Quickstart/Tutorials/SQLQuickstartTutorial";
import { userContext } from "UserContext";
import { initializeIcons } from "@fluentui/react";
import "allotment/dist/style.css";
import "bootstrap/dist/css/bootstrap.css";
import { useCarousel } from "hooks/useCarousel";
import React from "react";
import ReactDOM from "react-dom";
import "../externals/jquery-ui.min.css";
@@ -24,13 +15,8 @@ import "../externals/jquery.dataTables.min.css";
import "../externals/jquery.typeahead.min.css";
import "../externals/jquery.typeahead.min.js";
// Image Dependencies
import { SidePanel } from "Explorer/Panes/PanelContainerComponent";
import { QueryCopilotCarousel } from "Explorer/QueryCopilot/CopilotCarousel";
import { SidebarContainer } from "Explorer/Sidebar";
import { KeyboardShortcutRoot } from "KeyboardShortcuts";
import "allotment/dist/style.css";
import "../images/CosmosDB_rgb_ui_lighttheme.ico";
import hdeConnectImage from "../images/HdeConnectCosmosDB.svg";
import "../images/favicon.ico";
import "../less/TableStyles/CustomizeColumns.less";
import "../less/TableStyles/EntityEditor.less";
@@ -42,182 +28,29 @@ import "../less/infobox.less";
import "../less/menus.less";
import "../less/messagebox.less";
import "../less/resourceTree.less";
import * as StyleConstants from "./Common/StyleConstants";
import "./Explorer/Controls/Accordion/AccordionComponent.less";
import "./Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.less";
import { Dialog } from "./Explorer/Controls/Dialog";
import "./Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.less";
import "./Explorer/Controls/JsonEditor/JsonEditorComponent.less";
import "./Explorer/Controls/Notebook/NotebookTerminalComponent.less";
import "./Explorer/Controls/TreeComponent/treeComponent.less";
import { ErrorBoundary } from "./Explorer/ErrorBoundary";
import "./Explorer/Graph/GraphExplorerComponent/graphExplorer.less";
import "./Explorer/Menus/CommandBar/CommandBarComponent.less";
import { CommandBar } from "./Explorer/Menus/CommandBar/CommandBarComponentAdapter";
import "./Explorer/Menus/CommandBar/ConnectionStatusComponent.less";
import "./Explorer/Menus/CommandBar/MemoryTrackerComponent.less";
import "./Explorer/Menus/NotificationConsole/NotificationConsole.less";
import { NotificationConsole } from "./Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
import "./Explorer/Panes/PanelComponent.less";
import "./Explorer/SplashScreen/SplashScreen.less";
import "./Libs/jquery";
import MetricScenario from "./Metrics/MetricEvents";
import { MetricScenarioProvider, useMetricScenario } from "./Metrics/MetricScenarioProvider";
import { ApplicationMetricPhase } from "./Metrics/ScenarioConfig";
import { useInteractive } from "./Metrics/useMetricPhases";
import { appThemeFabric } from "./Platform/Fabric/FabricTheme";
import { MetricScenarioProvider } from "./Metrics/MetricScenarioProvider";
import Root from "./RootComponents/Root";
import "./Shared/appInsights";
import { useConfig } from "./hooks/useConfig";
import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
import { useThemeStore } from "./hooks/useTheme";
import "./less/DarkModeMenus.less";
import "./less/ThemeSystem.less";
// Initialize icons before React is loaded
initializeIcons(undefined, { disableWarnings: true });
const useStyles = makeStyles({
root: {
height: "100vh",
width: "100vw",
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
},
});
const App = (): JSX.Element => {
const config = useConfig();
const styles = useStyles();
// theme is used for application-wide styling
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const theme = useTheme();
// Load Fabric theme and styles only once when platform is Fabric
React.useEffect(() => {
if (config?.platform === Platform.Fabric) {
loadTheme(appThemeFabric);
import("../less/documentDBFabric.less");
}
StyleConstants.updateStyles();
}, [config?.platform]);
const explorer = useKnockoutExplorer(config?.platform);
// Scenario-based health tracking: start ApplicationLoad and complete phases.
const { startScenario, completePhase } = useMetricScenario();
React.useEffect(() => {
// Only start scenario after config is initialized to avoid race conditions
// with message handlers that depend on configContext.platform
if (config) {
startScenario(MetricScenario.ApplicationLoad);
}
}, [config, startScenario]);
React.useEffect(() => {
if (explorer) {
completePhase(MetricScenario.ApplicationLoad, ApplicationMetricPhase.ExplorerInitialized);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [explorer]);
if (!explorer) {
return <LoadingExplorer />;
}
return (
<div id="Main" className={styles.root}>
<KeyboardShortcutRoot>
<div className="flexContainer" aria-hidden="false">
{userContext.features.enableContainerCopy && userContext.apiType === "SQL" ? (
<>
<ContainerCopyPanel explorer={explorer} />
<SidePanel />
<Dialog />
</>
) : (
<DivExplorer explorer={explorer} />
)}
</div>
</KeyboardShortcutRoot>
</div>
);
};
const DivExplorer: React.FC<{ explorer: Explorer }> = ({ explorer }) => {
const isCarouselOpen = useCarousel((state) => state.shouldOpen);
const isCopilotCarouselOpen = useCarousel((state) => state.showCopilotCarousel);
useInteractive(MetricScenario.ApplicationLoad);
return (
<div
className="flexContainer"
style={{
flex: 1,
display: "flex",
flexDirection: "column",
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
}}
aria-hidden="false"
data-test="DataExplorerRoot"
>
<div
id="divExplorer"
className="flexContainer hideOverflows"
style={{
flex: 1,
display: "flex",
flexDirection: "column",
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
}}
>
<div id="freeTierTeachingBubble"> </div>
<CommandBar container={explorer} />
<SidebarContainer explorer={explorer} />
<div
className="dataExplorerErrorConsoleContainer"
role="contentinfo"
aria-label="Notification console"
id="explorerNotificationConsole"
style={{
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
}}
>
<NotificationConsole />
</div>
</div>
<SidePanel />
<Dialog />
{<QuickstartCarousel isOpen={isCarouselOpen} />}
{<SQLQuickstartTutorial />}
{<MongoQuickstartTutorial />}
{<QueryCopilotCarousel isOpen={isCopilotCarouselOpen} explorer={explorer} />}
</div>
);
};
const Root: React.FC = () => {
// Use React state to track isDarkMode and subscribe to changes
const [isDarkMode, setIsDarkMode] = React.useState(useThemeStore.getState().isDarkMode);
const currentTheme = isDarkMode ? webDarkTheme : webLightTheme;
// Subscribe to theme changes
React.useEffect(() => {
return useThemeStore.subscribe((state) => {
setIsDarkMode(state.isDarkMode);
});
}, []);
return (
<ErrorBoundary>
<FluentProvider theme={currentTheme}>
<App />
</FluentProvider>
</ErrorBoundary>
);
};
const mainElement = document.getElementById("Main");
if (mainElement) {
ReactDOM.render(
@@ -227,24 +60,3 @@ if (mainElement) {
mainElement,
);
}
function LoadingExplorer(): JSX.Element {
const styles = useStyles();
return (
<div className={styles.root}>
<div className="splashLoaderContainer">
<div className="splashLoaderContentContainer">
<p className="connectExplorerContent">
<img src={hdeConnectImage} alt="Azure Cosmos DB" />
</p>
<p className="splashLoaderTitle" id="explorerLoadingStatusTitle">
Welcome to Azure Cosmos DB
</p>
<p className="splashLoaderText" id="explorerLoadingStatusText" role="alert">
Connecting...
</p>
</div>
</div>
</div>
);
}

View File

@@ -3,7 +3,7 @@ import MetricScenario from "./MetricEvents";
import { MetricPhase } from "./ScenarioConfig";
import { scenarioMonitor } from "./ScenarioMonitor";
interface MetricScenarioContextValue {
export interface MetricScenarioContextValue {
startScenario: (scenario: MetricScenario) => void;
startPhase: (scenario: MetricScenario, phase: MetricPhase) => void;
completePhase: (scenario: MetricScenario, phase: MetricPhase) => void;

View File

@@ -0,0 +1,316 @@
import { loadTheme } from "@fluentui/react";
import "@testing-library/jest-dom";
import { render, screen, waitFor } from "@testing-library/react";
import React from "react";
import { updateStyles } from "../Common/StyleConstants";
import { Platform } from "../ConfigContext";
import { useConfig } from "../hooks/useConfig";
import { useKnockoutExplorer } from "../hooks/useKnockoutExplorer";
import { MetricScenarioContextValue, useMetricScenario } from "../Metrics/MetricScenarioProvider";
import App from "./App";
const mockUserContext = {
features: { enableContainerCopy: false },
apiType: "SQL",
};
jest.mock("@fluentui/react", () => ({
loadTheme: jest.fn(),
makeStyles: jest.fn(() => () => ({
root: "mock-app-root-class",
})),
MessageBarType: {
error: "error",
warning: "warning",
info: "info",
success: "success",
},
SpinnerSize: {
xSmall: "xSmall",
small: "small",
medium: "medium",
large: "large",
},
}));
jest.mock("../Common/StyleConstants", () => ({
StyleConstants: {
BaseMedium: "#000000",
AccentMediumHigh: "#0078d4",
AccentMedium: "#106ebe",
AccentLight: "#deecf9",
AccentAccentExtra: "#0078d4",
FabricAccentMediumHigh: "#0078d4",
FabricAccentMedium: "#106ebe",
FabricAccentLight: "#deecf9",
PortalAccentMediumHigh: "#0078d4",
PortalAccentMedium: "#106ebe",
PortalAccentLight: "#deecf9",
},
updateStyles: jest.fn(),
}));
jest.mock("./LoadingExplorer", () => {
const MockLoadingExplorer = () => {
return <div data-testid="mock-loading-explorer">Loading Explorer</div>;
};
MockLoadingExplorer.displayName = "MockLoadingExplorer";
return MockLoadingExplorer;
});
jest.mock("./ExplorerContainer", () => {
const MockExplorerContainer = ({ explorer }: { explorer: unknown }) => {
return (
<div data-testid="mock-explorer-container">Explorer Container - {explorer ? "with explorer" : "no explorer"}</div>
);
};
MockExplorerContainer.displayName = "MockExplorerContainer";
return MockExplorerContainer;
});
jest.mock("../Explorer/ContainerCopy/ContainerCopyPanel", () => {
const MockContainerCopyPanel = ({ explorer }: { explorer: unknown }) => {
return (
<div data-testid="mock-container-copy-panel">
Container Copy Panel - {explorer ? "with explorer" : "no explorer"}
</div>
);
};
MockContainerCopyPanel.displayName = "MockContainerCopyPanel";
return MockContainerCopyPanel;
});
jest.mock("../KeyboardShortcuts", () => ({
KeyboardShortcutRoot: ({ children }: { children: React.ReactNode }) => (
<div data-testid="mock-keyboard-shortcut-root">{children}</div>
),
}));
jest.mock("../UserContext", () => ({
get userContext() {
return mockUserContext;
},
}));
const mockConfig = {
platform: Platform.Portal,
};
const mockExplorer = {
id: "test-explorer",
name: "Test Explorer",
};
jest.mock("../hooks/useConfig", () => ({
useConfig: jest.fn(() => mockConfig),
}));
jest.mock("../hooks/useKnockoutExplorer", () => ({
useKnockoutExplorer: jest.fn(),
}));
jest.mock("../Metrics/MetricScenarioProvider", () => ({
useMetricScenario: jest.fn(() => ({
startScenario: jest.fn(),
completePhase: jest.fn(),
})),
}));
jest.mock("../Metrics/MetricEvents", () => ({
__esModule: true,
default: {
ApplicationLoad: "ApplicationLoad",
},
}));
jest.mock("../Metrics/ScenarioConfig", () => ({
ApplicationMetricPhase: {
ExplorerInitialized: "ExplorerInitialized",
},
CommonMetricPhase: {
Interactive: "Interactive",
},
}));
jest.mock("../Platform/Fabric/FabricTheme", () => ({
appThemeFabric: { name: "fabric-theme" },
}));
describe("App", () => {
afterEach(() => {
jest.clearAllMocks();
mockUserContext.features = { enableContainerCopy: false };
mockUserContext.apiType = "SQL";
});
let mockStartScenario: jest.Mock;
let mockCompletePhase: jest.Mock;
let mockUseKnockoutExplorer: jest.Mock;
let mockUseConfig: jest.Mock;
let mockLoadTheme: jest.Mock;
let mockUpdateStyles: jest.Mock;
beforeEach(() => {
jest.clearAllMocks();
mockStartScenario = jest.fn();
mockCompletePhase = jest.fn();
mockUseKnockoutExplorer = jest.mocked(useKnockoutExplorer);
mockUseConfig = jest.mocked(useConfig);
mockLoadTheme = jest.mocked(loadTheme);
mockUpdateStyles = jest.mocked(updateStyles);
const mockUseMetricScenario = jest.mocked(useMetricScenario);
mockUseMetricScenario.mockReturnValue({
startScenario: mockStartScenario,
completePhase: mockCompletePhase,
} as unknown as MetricScenarioContextValue);
mockUseConfig.mockReturnValue(mockConfig);
mockUseKnockoutExplorer.mockReturnValue(null);
});
test("should render loading explorer when explorer is not ready", () => {
mockUseKnockoutExplorer.mockReturnValue(null);
render(<App />);
expect(screen.getByTestId("mock-loading-explorer")).toBeInTheDocument();
expect(screen.queryByTestId("mock-explorer-container")).not.toBeInTheDocument();
});
test("should render explorer container when explorer is ready", () => {
mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
render(<App />);
expect(screen.getByTestId("mock-explorer-container")).toBeInTheDocument();
expect(screen.queryByTestId("mock-loading-explorer")).not.toBeInTheDocument();
});
test("should start metric scenario on mount", () => {
render(<App />);
expect(mockStartScenario).toHaveBeenCalledWith("ApplicationLoad");
expect(mockStartScenario).toHaveBeenCalledTimes(1);
});
test("should complete metric phase when explorer is initialized", async () => {
const { rerender } = render(<App />);
expect(mockCompletePhase).not.toHaveBeenCalled();
mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
rerender(<App />);
await waitFor(() => {
expect(mockCompletePhase).toHaveBeenCalledWith("ApplicationLoad", "ExplorerInitialized");
});
});
test("should load fabric theme when platform is Fabric", () => {
const fabricConfig = { platform: Platform.Fabric };
mockUseConfig.mockReturnValue(fabricConfig);
mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
render(<App />);
expect(mockLoadTheme).toHaveBeenCalledWith({ name: "fabric-theme" });
});
test("should not load fabric theme when platform is not Fabric", () => {
const portalConfig = { platform: Platform.Portal };
mockUseConfig.mockReturnValue(portalConfig);
render(<App />);
expect(mockLoadTheme).not.toHaveBeenCalled();
});
test("should always call updateStyles", () => {
render(<App />);
expect(mockUpdateStyles).toHaveBeenCalled();
});
test("should render container copy panel when container copy is enabled and API is SQL", () => {
mockUserContext.features = { enableContainerCopy: true };
mockUserContext.apiType = "SQL";
mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
render(<App />);
expect(screen.getByTestId("mock-container-copy-panel")).toBeInTheDocument();
expect(screen.queryByTestId("mock-explorer-container")).not.toBeInTheDocument();
});
test("should render explorer container when container copy is disabled", () => {
mockUserContext.features = { enableContainerCopy: false };
mockUserContext.apiType = "SQL";
mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
render(<App />);
expect(screen.getByTestId("mock-explorer-container")).toBeInTheDocument();
expect(screen.queryByTestId("mock-container-copy-panel")).not.toBeInTheDocument();
});
test("should render explorer container when API is not SQL", () => {
mockUserContext.features = { enableContainerCopy: true };
mockUserContext.apiType = "MongoDB";
mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
render(<App />);
expect(screen.getByTestId("mock-explorer-container")).toBeInTheDocument();
expect(screen.queryByTestId("mock-container-copy-panel")).not.toBeInTheDocument();
});
test("should have correct DOM structure", () => {
mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
const { container } = render(<App />);
const mainDiv = container.querySelector("#Main");
expect(mainDiv).toBeInTheDocument();
expect(mainDiv).toHaveClass("mock-app-root-class");
expect(screen.getByTestId("mock-keyboard-shortcut-root")).toBeInTheDocument();
const flexContainer = container.querySelector(".flexContainer");
expect(flexContainer).toBeInTheDocument();
expect(flexContainer).toHaveAttribute("aria-hidden", "false");
});
test("should handle config changes for Fabric platform", () => {
const { rerender } = render(<App />);
const fabricConfig = { platform: Platform.Fabric };
mockUseConfig.mockReturnValue(fabricConfig);
rerender(<App />);
expect(mockLoadTheme).toHaveBeenCalledWith({ name: "fabric-theme" });
});
test("should pass explorer to child components", () => {
mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
render(<App />);
expect(screen.getByText("Explorer Container - with explorer")).toBeInTheDocument();
});
test("should handle null config gracefully", () => {
mockUseConfig.mockReturnValue(null);
mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
expect(() => render(<App />)).not.toThrow();
expect(mockLoadTheme).not.toHaveBeenCalled();
expect(mockUpdateStyles).toHaveBeenCalled();
});
});

View File

@@ -0,0 +1,76 @@
import { loadTheme, makeStyles } from "@fluentui/react";
import React from "react";
import * as StyleConstants from "../Common/StyleConstants";
import { Platform } from "../ConfigContext";
import ContainerCopyPanel from "../Explorer/ContainerCopy/ContainerCopyPanel";
import { useConfig } from "../hooks/useConfig";
import { useKnockoutExplorer } from "../hooks/useKnockoutExplorer";
import { KeyboardShortcutRoot } from "../KeyboardShortcuts";
import MetricScenario from "../Metrics/MetricEvents";
import { useMetricScenario } from "../Metrics/MetricScenarioProvider";
import { ApplicationMetricPhase } from "../Metrics/ScenarioConfig";
import { appThemeFabric } from "../Platform/Fabric/FabricTheme";
import { userContext } from "../UserContext";
import ExplorerContainer from "./ExplorerContainer";
import LoadingExplorer from "./LoadingExplorer";
const useStyles = makeStyles({
root: {
height: "100vh",
width: "100vw",
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
},
});
const App = (): JSX.Element => {
const config = useConfig();
const styles = useStyles();
// Load Fabric theme and styles only once when platform is Fabric
React.useEffect(() => {
if (config?.platform === Platform.Fabric) {
loadTheme(appThemeFabric);
import("../../less/documentDBFabric.less");
}
StyleConstants.updateStyles();
}, [config?.platform]);
const explorer = useKnockoutExplorer(config?.platform);
// Scenario-based health tracking: start ApplicationLoad and complete phases.
const { startScenario, completePhase } = useMetricScenario();
React.useEffect(() => {
// Only start scenario after config is initialized to avoid race conditions
// with message handlers that depend on configContext.platform
if (config) {
startScenario(MetricScenario.ApplicationLoad);
}
}, [config, startScenario]);
React.useEffect(() => {
if (explorer) {
completePhase(MetricScenario.ApplicationLoad, ApplicationMetricPhase.ExplorerInitialized);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [explorer]);
if (!explorer) {
return <LoadingExplorer />;
}
return (
<div id="Main" className={styles.root}>
<KeyboardShortcutRoot>
<div className="flexContainer" aria-hidden="false">
{userContext.features.enableContainerCopy && userContext.apiType === "SQL" ? (
<ContainerCopyPanel explorer={explorer} />
) : (
<ExplorerContainer explorer={explorer} />
)}
</div>
</KeyboardShortcutRoot>
</div>
);
};
export default App;

View File

@@ -0,0 +1,183 @@
import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
import React from "react";
import Explorer from "../Explorer/Explorer";
import { useCarousel } from "../hooks/useCarousel";
import { useInteractive } from "../Metrics/useMetricPhases";
import ExplorerContainer from "./ExplorerContainer";
jest.mock("../Explorer/Controls/Dialog", () => ({
Dialog: () => <div data-testid="mock-dialog">Dialog</div>,
}));
jest.mock("../Explorer/Menus/CommandBar/CommandBarComponentAdapter", () => ({
CommandBar: ({ container }: { container: Explorer }) => (
<div data-testid="mock-command-bar">CommandBar - {container ? "with explorer" : "no explorer"}</div>
),
}));
jest.mock("../Explorer/Menus/NotificationConsole/NotificationConsoleComponent", () => ({
NotificationConsole: () => <div data-testid="mock-notification-console">NotificationConsole</div>,
}));
jest.mock("../Explorer/Panes/PanelContainerComponent", () => ({
SidePanel: () => <div data-testid="mock-side-panel">SidePanel</div>,
}));
jest.mock("../Explorer/QueryCopilot/CopilotCarousel", () => ({
QueryCopilotCarousel: ({ isOpen, explorer }: { isOpen: boolean; explorer: Explorer }) => (
<div data-testid="mock-copilot-carousel">
CopilotCarousel - {isOpen ? "open" : "closed"} - {explorer ? "with explorer" : "no explorer"}
</div>
),
}));
jest.mock("../Explorer/Quickstart/QuickstartCarousel", () => ({
QuickstartCarousel: ({ isOpen }: { isOpen: boolean }) => (
<div data-testid="mock-quickstart-carousel">QuickstartCarousel - {isOpen ? "open" : "closed"}</div>
),
}));
jest.mock("../Explorer/Quickstart/Tutorials/MongoQuickstartTutorial", () => ({
MongoQuickstartTutorial: () => <div data-testid="mock-mongo-tutorial">MongoQuickstartTutorial</div>,
}));
jest.mock("../Explorer/Quickstart/Tutorials/SQLQuickstartTutorial", () => ({
SQLQuickstartTutorial: () => <div data-testid="mock-sql-tutorial">SQLQuickstartTutorial</div>,
}));
jest.mock("../Explorer/Sidebar", () => ({
SidebarContainer: ({ explorer }: { explorer: Explorer }) => (
<div data-testid="mock-sidebar-container">SidebarContainer - {explorer ? "with explorer" : "no explorer"}</div>
),
}));
jest.mock("../hooks/useCarousel", () => ({
useCarousel: jest.fn((selector) => {
if (selector.toString().includes("shouldOpen")) {
return true;
}
if (selector.toString().includes("showCopilotCarousel")) {
return false;
}
return false;
}),
}));
jest.mock("../Metrics/useMetricPhases", () => ({
useInteractive: jest.fn(),
}));
jest.mock("../Metrics/MetricEvents", () => ({
__esModule: true,
default: {
ApplicationLoad: "ApplicationLoad",
},
}));
describe("ExplorerContainer", () => {
let mockExplorer: Explorer;
beforeEach(() => {
mockExplorer = {
id: "test-explorer",
name: "Test Explorer",
} as unknown as Explorer;
jest.clearAllMocks();
});
test("should render explorer container with all components", () => {
const { container } = render(<ExplorerContainer explorer={mockExplorer} />);
const mainContainer = container.querySelector('[data-test="DataExplorerRoot"]');
expect(mainContainer).toBeInTheDocument();
expect(mainContainer).toHaveClass("flexContainer");
expect(screen.getByTestId("mock-command-bar")).toBeInTheDocument();
expect(screen.getByTestId("mock-sidebar-container")).toBeInTheDocument();
expect(screen.getByTestId("mock-notification-console")).toBeInTheDocument();
expect(screen.getByTestId("mock-side-panel")).toBeInTheDocument();
expect(screen.getByTestId("mock-dialog")).toBeInTheDocument();
expect(screen.getByTestId("mock-quickstart-carousel")).toBeInTheDocument();
expect(screen.getByTestId("mock-sql-tutorial")).toBeInTheDocument();
expect(screen.getByTestId("mock-mongo-tutorial")).toBeInTheDocument();
expect(screen.getByTestId("mock-copilot-carousel")).toBeInTheDocument();
});
test("should pass explorer to components that need it", () => {
render(<ExplorerContainer explorer={mockExplorer} />);
expect(screen.getByText("CommandBar - with explorer")).toBeInTheDocument();
expect(screen.getByText("SidebarContainer - with explorer")).toBeInTheDocument();
expect(screen.getByText("CopilotCarousel - closed - with explorer")).toBeInTheDocument();
});
test("should have correct DOM structure", () => {
const { container } = render(<ExplorerContainer explorer={mockExplorer} />);
const mainContainer = container.querySelector('[data-test="DataExplorerRoot"]');
expect(mainContainer).toBeInTheDocument();
expect(mainContainer).toHaveAttribute("aria-hidden", "false");
const divExplorer = container.querySelector("#divExplorer");
expect(divExplorer).toBeInTheDocument();
expect(divExplorer).toHaveClass("flexContainer", "hideOverflows");
const freeTierBubble = container.querySelector("#freeTierTeachingBubble");
expect(freeTierBubble).toBeInTheDocument();
const notificationContainer = container.querySelector("#explorerNotificationConsole");
expect(notificationContainer).toBeInTheDocument();
expect(notificationContainer).toHaveClass("dataExplorerErrorConsoleContainer");
expect(notificationContainer).toHaveAttribute("role", "contentinfo");
expect(notificationContainer).toHaveAttribute("aria-label", "Notification console");
});
test("should apply correct inline styles", () => {
const { container } = render(<ExplorerContainer explorer={mockExplorer} />);
const mainContainer = container.querySelector('[data-test="DataExplorerRoot"]');
expect(mainContainer).toHaveStyle({
flex: "1",
display: "flex",
flexDirection: "column",
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
});
const divExplorer = container.querySelector("#divExplorer");
expect(divExplorer).toHaveStyle({
flex: "1",
display: "flex",
flexDirection: "column",
});
});
test("should handle carousel states correctly", () => {
const mockUseCarousel = jest.mocked(useCarousel);
mockUseCarousel.mockImplementation((selector: { toString: () => string | string[] }) => {
if (selector.toString().includes("shouldOpen")) {
return false;
}
if (selector.toString().includes("showCopilotCarousel")) {
return true;
}
return false;
});
render(<ExplorerContainer explorer={mockExplorer} />);
expect(screen.getByText("QuickstartCarousel - closed")).toBeInTheDocument();
expect(screen.getByText("CopilotCarousel - open - with explorer")).toBeInTheDocument();
});
test("should call useInteractive hook with correct metric", () => {
const mockUseInteractive = jest.mocked(useInteractive);
render(<ExplorerContainer explorer={mockExplorer} />);
expect(mockUseInteractive).toHaveBeenCalledWith("ApplicationLoad");
});
});

View File

@@ -0,0 +1,71 @@
import React from "react";
import { Dialog } from "../Explorer/Controls/Dialog";
import Explorer from "../Explorer/Explorer";
import { CommandBar } from "../Explorer/Menus/CommandBar/CommandBarComponentAdapter";
import { NotificationConsole } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
import { SidePanel } from "../Explorer/Panes/PanelContainerComponent";
import { QueryCopilotCarousel } from "../Explorer/QueryCopilot/CopilotCarousel";
import { QuickstartCarousel } from "../Explorer/Quickstart/QuickstartCarousel";
import { MongoQuickstartTutorial } from "../Explorer/Quickstart/Tutorials/MongoQuickstartTutorial";
import { SQLQuickstartTutorial } from "../Explorer/Quickstart/Tutorials/SQLQuickstartTutorial";
import { SidebarContainer } from "../Explorer/Sidebar";
import { useCarousel } from "../hooks/useCarousel";
import MetricScenario from "../Metrics/MetricEvents";
import { useInteractive } from "../Metrics/useMetricPhases";
const ExplorerContainer: React.FC<{ explorer: Explorer }> = ({ explorer }) => {
const isCarouselOpen = useCarousel((state) => state.shouldOpen);
const isCopilotCarouselOpen = useCarousel((state) => state.showCopilotCarousel);
useInteractive(MetricScenario.ApplicationLoad);
return (
<div
className="flexContainer"
style={{
flex: 1,
display: "flex",
flexDirection: "column",
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
}}
aria-hidden="false"
data-test="DataExplorerRoot"
>
<div
id="divExplorer"
className="flexContainer hideOverflows"
style={{
flex: 1,
display: "flex",
flexDirection: "column",
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
}}
>
<div id="freeTierTeachingBubble"> </div>
<CommandBar container={explorer} />
<SidebarContainer explorer={explorer} />
<div
className="dataExplorerErrorConsoleContainer"
role="contentinfo"
aria-label="Notification console"
id="explorerNotificationConsole"
style={{
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
}}
>
<NotificationConsole />
</div>
</div>
<SidePanel />
<Dialog />
{<QuickstartCarousel isOpen={isCarouselOpen} />}
{<SQLQuickstartTutorial />}
{<MongoQuickstartTutorial />}
{<QueryCopilotCarousel isOpen={isCopilotCarouselOpen} explorer={explorer} />}
</div>
);
};
export default ExplorerContainer;

View File

@@ -0,0 +1,71 @@
import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
import React from "react";
import LoadingExplorer from "./LoadingExplorer";
jest.mock("../../images/HdeConnectCosmosDB.svg", () => "test-hde-connect-image.svg");
jest.mock("@fluentui/react-components", () => ({
makeStyles: jest.fn(() => () => ({
root: "mock-root-class",
})),
}));
describe("LoadingExplorer", () => {
beforeEach(() => {
jest.clearAllMocks();
});
test("should render loading explorer component", () => {
render(<LoadingExplorer />);
const container = screen.getByRole("alert");
expect(container).toBeInTheDocument();
expect(container).toHaveTextContent("Connecting...");
});
test("should display welcome title", () => {
render(<LoadingExplorer />);
const title = screen.getByText("Welcome to Azure Cosmos DB");
expect(title).toBeInTheDocument();
expect(title).toHaveAttribute("id", "explorerLoadingStatusTitle");
});
test("should display connecting status text", () => {
render(<LoadingExplorer />);
const statusText = screen.getByText("Connecting...");
expect(statusText).toBeInTheDocument();
expect(statusText).toHaveAttribute("id", "explorerLoadingStatusText");
expect(statusText).toHaveAttribute("role", "alert");
});
test("should render Azure Cosmos DB image", () => {
render(<LoadingExplorer />);
const image = screen.getByAltText("Azure Cosmos DB");
expect(image).toBeInTheDocument();
expect(image).toHaveAttribute("src", "test-hde-connect-image.svg");
});
test("should have correct class structure", () => {
render(<LoadingExplorer />);
const splashContainer = document.querySelector(".splashLoaderContainer");
expect(splashContainer).toBeInTheDocument();
const contentContainer = document.querySelector(".splashLoaderContentContainer");
expect(contentContainer).toBeInTheDocument();
const connectContent = document.querySelector(".connectExplorerContent");
expect(connectContent).toBeInTheDocument();
});
test("should apply CSS classes correctly", () => {
const { container } = render(<LoadingExplorer />);
const rootDiv = container.firstChild as HTMLElement;
expect(rootDiv).toHaveClass("mock-root-class");
});
});

View File

@@ -0,0 +1,36 @@
import { makeStyles } from "@fluentui/react-components";
import React from "react";
import hdeConnectImage from "../../images/HdeConnectCosmosDB.svg";
const useStyles = makeStyles({
root: {
height: "100vh",
width: "100vw",
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
},
});
function LoadingExplorer(): JSX.Element {
const styles = useStyles();
return (
<div className={styles.root}>
<div className="splashLoaderContainer">
<div className="splashLoaderContentContainer">
<p className="connectExplorerContent">
<img src={hdeConnectImage} alt="Azure Cosmos DB" />
</p>
<p className="splashLoaderTitle" id="explorerLoadingStatusTitle">
Welcome to Azure Cosmos DB
</p>
<p className="splashLoaderText" id="explorerLoadingStatusText" role="alert">
Connecting...
</p>
</div>
</div>
</div>
);
}
export default LoadingExplorer;

View File

@@ -0,0 +1,107 @@
import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
import React from "react";
import Root from "./Root";
jest.mock("../Explorer/ErrorBoundary", () => ({
ErrorBoundary: ({ children }: { children: React.ReactNode }) => (
<div data-testid="mock-error-boundary">{children}</div>
),
}));
jest.mock("@fluentui/react-components", () => ({
FluentProvider: ({ children, theme }: { children: React.ReactNode; theme: { colorNeutralBackground1: string } }) => (
<div
data-testid="mock-fluent-provider"
data-theme={theme.colorNeutralBackground1 === "dark" ? "webDarkTheme" : "webLightTheme"}
>
{children}
</div>
),
webLightTheme: { colorNeutralBackground1: "light" },
webDarkTheme: { colorNeutralBackground1: "dark" },
}));
jest.mock("./App", () => ({
__esModule: true,
default: () => <div data-testid="mock-app">App</div>,
}));
const createMockStore = (isDarkMode: boolean = false) => ({
getState: jest.fn(() => ({ isDarkMode })),
subscribe: jest.fn(() => jest.fn()),
});
const mockThemeStore = createMockStore(false);
jest.mock("../hooks/useTheme", () => ({
get useThemeStore() {
return mockThemeStore;
},
}));
describe("Root", () => {
beforeEach(() => {
jest.clearAllMocks();
});
test("should render Root component with all child components", () => {
render(<Root />);
expect(screen.getByTestId("mock-error-boundary")).toBeInTheDocument();
expect(screen.getByTestId("mock-fluent-provider")).toBeInTheDocument();
expect(screen.getByTestId("mock-app")).toBeInTheDocument();
});
test("should have correct component hierarchy", () => {
render(<Root />);
const errorBoundary = screen.getByTestId("mock-error-boundary");
const fluentProvider = screen.getByTestId("mock-fluent-provider");
const app = screen.getByTestId("mock-app");
expect(errorBoundary).toContainElement(fluentProvider);
expect(fluentProvider).toContainElement(app);
});
test("should subscribe to theme changes on mount", () => {
render(<Root />);
expect(mockThemeStore.subscribe).toHaveBeenCalled();
expect(mockThemeStore.subscribe).toHaveBeenCalledWith(expect.any(Function));
});
test("should get initial theme state", () => {
render(<Root />);
expect(mockThemeStore.getState).toHaveBeenCalled();
});
test("should handle component unmounting", () => {
const mockUnsubscribe = jest.fn();
mockThemeStore.subscribe.mockReturnValue(mockUnsubscribe);
const { unmount } = render(<Root />);
unmount();
expect(mockUnsubscribe).toHaveBeenCalled();
});
test("should call getState to initialize theme", () => {
render(<Root />);
expect(mockThemeStore.getState).toHaveBeenCalledTimes(1);
});
test("should handle theme subscription properly", () => {
render(<Root />);
expect(mockThemeStore.subscribe).toHaveBeenCalledTimes(1);
expect(mockThemeStore.getState).toHaveBeenCalled();
});
test("should render without errors", () => {
expect(() => render(<Root />)).not.toThrow();
});
});

View File

@@ -0,0 +1,28 @@
import { FluentProvider, webDarkTheme, webLightTheme } from "@fluentui/react-components";
import React from "react";
import { ErrorBoundary } from "../Explorer/ErrorBoundary";
import { useThemeStore } from "../hooks/useTheme";
import App from "./App";
const Root: React.FC = () => {
// Use React state to track isDarkMode and subscribe to changes
const [isDarkMode, setIsDarkMode] = React.useState(useThemeStore.getState().isDarkMode);
const currentTheme = isDarkMode ? webDarkTheme : webLightTheme;
// Subscribe to theme changes
React.useEffect(() => {
return useThemeStore.subscribe((state) => {
setIsDarkMode(state.isDarkMode);
});
}, []);
return (
<ErrorBoundary>
<FluentProvider theme={currentTheme}>
<App />
</FluentProvider>
</ErrorBoundary>
);
};
export default Root;

View File

@@ -39,7 +39,6 @@ export enum TestAccount {
MongoReadonly = "MongoReadOnly",
Mongo32 = "Mongo32",
SQL = "SQL",
SQL2 = "SQL2",
SQLReadOnly = "SQLReadOnly",
SQLContainerCopyOnly = "SQLContainerCopyOnly",
}
@@ -52,7 +51,6 @@ export const defaultAccounts: Record<TestAccount, string> = {
[TestAccount.MongoReadonly]: "github-e2etests-mongo-readonly",
[TestAccount.Mongo32]: "github-e2etests-mongo32",
[TestAccount.SQL]: "github-e2etests-sql",
[TestAccount.SQL2]: "github-e2etests-sql-2",
[TestAccount.SQLReadOnly]: "github-e2etests-sql-readonly",
[TestAccount.SQLContainerCopyOnly]: "github-e2etests-sql-containercopyonly",
};
@@ -74,9 +72,6 @@ function tryGetStandardName(accountType: TestAccount) {
}
export function getAccountName(accountType: TestAccount) {
if (accountType === TestAccount.SQL2 && !process.env.CI) {
accountType = TestAccount.SQL;
}
return (
process.env[`DE_TEST_ACCOUNT_NAME_${accountType.toLocaleUpperCase()}`] ??
tryGetStandardName(accountType) ??
@@ -106,7 +101,6 @@ export async function getTestExplorerUrl(accountType: TestAccount, options?: Tes
params.set("feature.enableCopilot", "false");
const nosqlRbacToken = process.env.NOSQL_TESTACCOUNT_TOKEN;
const nosql2RbacToken = process.env.NOSQL2_TESTACCOUNT_TOKEN;
const nosqlReadOnlyRbacToken = process.env.NOSQL_READONLY_TESTACCOUNT_TOKEN;
const nosqlContainerCopyRbacToken = process.env.NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN;
const tableRbacToken = process.env.TABLE_TESTACCOUNT_TOKEN;
@@ -123,12 +117,7 @@ export async function getTestExplorerUrl(accountType: TestAccount, options?: Tes
params.set("enableaaddataplane", "true");
}
break;
case TestAccount.SQL2:
if (nosql2RbacToken) {
params.set("nosql2RbacToken", nosql2RbacToken);
params.set("enableaaddataplane", "true");
}
break;
case TestAccount.SQLContainerCopyOnly:
if (nosqlContainerCopyRbacToken) {
params.set("nosqlRbacToken", nosqlContainerCopyRbacToken);
@@ -526,14 +515,14 @@ export class DataExplorer {
const containerNode = await this.waitForContainerNode(context.database.id, context.container.id);
await containerNode.expand();
// // refresh tree to remove deleted database
// const consoleMessages = await this.getNotificationConsoleMessages();
// const refreshButton = this.frame.getByTestId("Sidebar/RefreshButton");
// await refreshButton.click();
// await expect(consoleMessages).toContainText("Successfully refreshed databases", {
// timeout: ONE_MINUTE_MS,
// });
// await this.collapseNotificationConsole();
// refresh tree to remove deleted database
const consoleMessages = await this.getNotificationConsoleMessages();
const refreshButton = this.frame.getByTestId("Sidebar/RefreshButton");
await refreshButton.click();
await expect(consoleMessages).toContainText("Successfully refreshed databases", {
timeout: ONE_MINUTE_MS,
});
await this.collapseNotificationConsole();
const scaleAndSettingsButton = this.frame.getByTestId(
`TreeNode:${context.database.id}/${context.container.id}/Scale & Settings`,

View File

@@ -1,258 +1,258 @@
// /* eslint-disable @typescript-eslint/no-explicit-any */
// import { expect, Frame, Locator, Page, test } from "@playwright/test";
// import { truncateName } from "../../../src/Explorer/ContainerCopy/CopyJobUtils";
// import {
// ContainerCopy,
// getAccountName,
// getDropdownItemByNameOrPosition,
// interceptAndInspectApiRequest,
// TestAccount,
// waitForApiResponse,
// } from "../../fx";
// import { createMultipleTestContainers } from "../../testData";
/* eslint-disable @typescript-eslint/no-explicit-any */
import { expect, Frame, Locator, Page, test } from "@playwright/test";
import { truncateName } from "../../../src/Explorer/ContainerCopy/CopyJobUtils";
import {
ContainerCopy,
getAccountName,
getDropdownItemByNameOrPosition,
interceptAndInspectApiRequest,
TestAccount,
waitForApiResponse,
} from "../../fx";
import { createMultipleTestContainers } from "../../testData";
// test.describe("Container Copy - Offline Migration", () => {
// let page: Page;
// let wrapper: Locator;
// let panel: Locator;
// let frame: Frame;
// let expectedJobName: string;
// let targetAccountName: string;
// let expectedSubscriptionName: string;
// let expectedCopyJobNameInitial: string;
test.describe("Container Copy - Offline Migration", () => {
let page: Page;
let wrapper: Locator;
let panel: Locator;
let frame: Frame;
let expectedJobName: string;
let targetAccountName: string;
let expectedSubscriptionName: string;
let expectedCopyJobNameInitial: string;
// test.beforeEach("Setup for offline migration test", async ({ browser }) => {
// await createMultipleTestContainers({ accountType: TestAccount.SQLContainerCopyOnly, containerCount: 2 });
test.beforeEach("Setup for offline migration test", async ({ browser }) => {
await createMultipleTestContainers({ accountType: TestAccount.SQLContainerCopyOnly, containerCount: 2 });
// page = await browser.newPage();
// ({ wrapper, frame } = await ContainerCopy.open(page, TestAccount.SQLContainerCopyOnly));
// expectedJobName = `offline_test_job_${Date.now()}`;
// targetAccountName = getAccountName(TestAccount.SQLContainerCopyOnly);
// });
page = await browser.newPage();
({ wrapper, frame } = await ContainerCopy.open(page, TestAccount.SQLContainerCopyOnly));
expectedJobName = `offline_test_job_${Date.now()}`;
targetAccountName = getAccountName(TestAccount.SQLContainerCopyOnly);
});
// test.afterEach("Cleanup after offline migration test", async () => {
// await page.unroute(/.*/, (route) => route.continue());
// await page.close();
// });
test.afterEach("Cleanup after offline migration test", async () => {
await page.unroute(/.*/, (route) => route.continue());
await page.close();
});
// test("Successfully create and manage offline migration copy job", async () => {
// expect(wrapper).not.toBeNull();
// await wrapper.locator(".commandBarContainer").waitFor({ state: "visible" });
test("Successfully create and manage offline migration copy job", async () => {
expect(wrapper).not.toBeNull();
await wrapper.locator(".commandBarContainer").waitFor({ state: "visible" });
// // Open Create Copy Job panel
// const createCopyJobButton = wrapper.getByTestId("CommandBar/Button:Create Copy Job");
// await expect(createCopyJobButton).toBeVisible();
// await createCopyJobButton.click();
// panel = frame.getByTestId("Panel:Create copy job");
// await expect(panel).toBeVisible();
// Open Create Copy Job panel
const createCopyJobButton = wrapper.getByTestId("CommandBar/Button:Create Copy Job");
await expect(createCopyJobButton).toBeVisible();
await createCopyJobButton.click();
panel = frame.getByTestId("Panel:Create copy job");
await expect(panel).toBeVisible();
// // Reduced wait time for better performance
// await page.waitForTimeout(2000);
// Reduced wait time for better performance
await page.waitForTimeout(2000);
// // Setup subscription and account
// const subscriptionDropdown = panel.getByTestId("subscription-dropdown");
// const expectedAccountName = targetAccountName;
// expectedSubscriptionName = await subscriptionDropdown.locator("span.ms-Dropdown-title").innerText();
// Setup subscription and account
const subscriptionDropdown = panel.getByTestId("subscription-dropdown");
const expectedAccountName = targetAccountName;
expectedSubscriptionName = await subscriptionDropdown.locator("span.ms-Dropdown-title").innerText();
// await subscriptionDropdown.click();
// const subscriptionItem = await getDropdownItemByNameOrPosition(
// frame,
// { name: expectedSubscriptionName },
// { ariaLabel: "Subscription" },
// );
// await subscriptionItem.click();
await subscriptionDropdown.click();
const subscriptionItem = await getDropdownItemByNameOrPosition(
frame,
{ name: expectedSubscriptionName },
{ ariaLabel: "Subscription" },
);
await subscriptionItem.click();
// // Select account
// const accountDropdown = panel.getByTestId("account-dropdown");
// await expect(accountDropdown).toHaveText(new RegExp(expectedAccountName));
// await accountDropdown.click();
// Select account
const accountDropdown = panel.getByTestId("account-dropdown");
await expect(accountDropdown).toHaveText(new RegExp(expectedAccountName));
await accountDropdown.click();
// const accountItem = await getDropdownItemByNameOrPosition(
// frame,
// { name: expectedAccountName },
// { ariaLabel: "Account" },
// );
// await accountItem.click();
const accountItem = await getDropdownItemByNameOrPosition(
frame,
{ name: expectedAccountName },
{ ariaLabel: "Account" },
);
await accountItem.click();
// // Test offline migration mode toggle functionality
// const migrationTypeContainer = panel.getByTestId("migration-type");
// Test offline migration mode toggle functionality
const migrationTypeContainer = panel.getByTestId("migration-type");
// // First test online mode (should show permissions screen)
// const onlineCopyRadioButton = migrationTypeContainer.getByRole("radio", { name: /Online mode/i });
// await onlineCopyRadioButton.click({ force: true });
// await expect(migrationTypeContainer.getByTestId("migration-type-description-online")).toBeVisible();
// First test online mode (should show permissions screen)
const onlineCopyRadioButton = migrationTypeContainer.getByRole("radio", { name: /Online mode/i });
await onlineCopyRadioButton.click({ force: true });
await expect(migrationTypeContainer.getByTestId("migration-type-description-online")).toBeVisible();
// await panel.getByRole("button", { name: "Next" }).click();
// await expect(panel.getByTestId("Panel:AssignPermissionsContainer")).toBeVisible();
// await expect(panel.getByText("Online container copy", { exact: true })).toBeVisible();
await panel.getByRole("button", { name: "Next" }).click();
await expect(panel.getByTestId("Panel:AssignPermissionsContainer")).toBeVisible();
await expect(panel.getByText("Online container copy", { exact: true })).toBeVisible();
// // Go back and switch to offline mode
// await panel.getByRole("button", { name: "Previous" }).click();
// Go back and switch to offline mode
await panel.getByRole("button", { name: "Previous" }).click();
// const offlineCopyRadioButton = migrationTypeContainer.getByRole("radio", { name: /Offline mode/i });
// await offlineCopyRadioButton.click({ force: true });
// await expect(migrationTypeContainer.getByTestId("migration-type-description-offline")).toBeVisible();
const offlineCopyRadioButton = migrationTypeContainer.getByRole("radio", { name: /Offline mode/i });
await offlineCopyRadioButton.click({ force: true });
await expect(migrationTypeContainer.getByTestId("migration-type-description-offline")).toBeVisible();
// await panel.getByRole("button", { name: "Next" }).click();
await panel.getByRole("button", { name: "Next" }).click();
// // Verify we skip permissions screen in offline mode
// await expect(panel.getByTestId("Panel:SelectSourceAndTargetContainers")).toBeVisible();
// await expect(panel.getByTestId("Panel:AssignPermissionsContainer")).not.toBeVisible();
// Verify we skip permissions screen in offline mode
await expect(panel.getByTestId("Panel:SelectSourceAndTargetContainers")).toBeVisible();
await expect(panel.getByTestId("Panel:AssignPermissionsContainer")).not.toBeVisible();
// // Test source and target container selection with validation
// const sourceContainerDropdown = panel.getByTestId("source-containerDropdown");
// expect(sourceContainerDropdown).toBeVisible();
// await expect(sourceContainerDropdown).toHaveClass(/(^|\s)is-disabled(\s|$)/);
// Test source and target container selection with validation
const sourceContainerDropdown = panel.getByTestId("source-containerDropdown");
expect(sourceContainerDropdown).toBeVisible();
await expect(sourceContainerDropdown).toHaveClass(/(^|\s)is-disabled(\s|$)/);
// // Select source database first (containers are disabled until database is selected)
// const sourceDatabaseDropdown = panel.getByTestId("source-databaseDropdown");
// await sourceDatabaseDropdown.click();
// const sourceDbDropdownItem = await getDropdownItemByNameOrPosition(
// frame,
// { position: 0 },
// { ariaLabel: "Database" },
// );
// await sourceDbDropdownItem.click();
// Select source database first (containers are disabled until database is selected)
const sourceDatabaseDropdown = panel.getByTestId("source-databaseDropdown");
await sourceDatabaseDropdown.click();
const sourceDbDropdownItem = await getDropdownItemByNameOrPosition(
frame,
{ position: 0 },
{ ariaLabel: "Database" },
);
await sourceDbDropdownItem.click();
// // Now container dropdown should be enabled
// await expect(sourceContainerDropdown).not.toHaveClass(/(^|\s)is-disabled(\s|$)/);
// await sourceContainerDropdown.click();
// const sourceContainerDropdownItem = await getDropdownItemByNameOrPosition(
// frame,
// { position: 0 },
// { ariaLabel: "Container" },
// );
// await sourceContainerDropdownItem.click();
// Now container dropdown should be enabled
await expect(sourceContainerDropdown).not.toHaveClass(/(^|\s)is-disabled(\s|$)/);
await sourceContainerDropdown.click();
const sourceContainerDropdownItem = await getDropdownItemByNameOrPosition(
frame,
{ position: 0 },
{ ariaLabel: "Container" },
);
await sourceContainerDropdownItem.click();
// // Test target container selection
// const targetContainerDropdown = panel.getByTestId("target-containerDropdown");
// expect(targetContainerDropdown).toBeVisible();
// await expect(targetContainerDropdown).toHaveClass(/(^|\s)is-disabled(\s|$)/);
// Test target container selection
const targetContainerDropdown = panel.getByTestId("target-containerDropdown");
expect(targetContainerDropdown).toBeVisible();
await expect(targetContainerDropdown).toHaveClass(/(^|\s)is-disabled(\s|$)/);
// const targetDatabaseDropdown = panel.getByTestId("target-databaseDropdown");
// await targetDatabaseDropdown.click();
// const targetDbDropdownItem = await getDropdownItemByNameOrPosition(
// frame,
// { position: 0 },
// { ariaLabel: "Database" },
// );
// await targetDbDropdownItem.click();
const targetDatabaseDropdown = panel.getByTestId("target-databaseDropdown");
await targetDatabaseDropdown.click();
const targetDbDropdownItem = await getDropdownItemByNameOrPosition(
frame,
{ position: 0 },
{ ariaLabel: "Database" },
);
await targetDbDropdownItem.click();
// await expect(targetContainerDropdown).not.toHaveClass(/(^|\s)is-disabled(\s|$)/);
// await targetContainerDropdown.click();
await expect(targetContainerDropdown).not.toHaveClass(/(^|\s)is-disabled(\s|$)/);
await targetContainerDropdown.click();
// // First try selecting the same container (should show error)
// const targetContainerDropdownItem1 = await getDropdownItemByNameOrPosition(
// frame,
// { position: 0 },
// { ariaLabel: "Container" },
// );
// await targetContainerDropdownItem1.click();
// First try selecting the same container (should show error)
const targetContainerDropdownItem1 = await getDropdownItemByNameOrPosition(
frame,
{ position: 0 },
{ ariaLabel: "Container" },
);
await targetContainerDropdownItem1.click();
// await panel.getByRole("button", { name: "Next" }).click();
await panel.getByRole("button", { name: "Next" }).click();
// // Verify validation error for same source and target containers
// const errorContainer = panel.getByTestId("Panel:ErrorContainer");
// await expect(errorContainer).toBeVisible();
// await expect(errorContainer).toHaveText(/Source and destination containers cannot be the same/i);
// Verify validation error for same source and target containers
const errorContainer = panel.getByTestId("Panel:ErrorContainer");
await expect(errorContainer).toBeVisible();
await expect(errorContainer).toHaveText(/Source and destination containers cannot be the same/i);
// // Select different target container
// await targetContainerDropdown.click();
// const targetContainerDropdownItem2 = await getDropdownItemByNameOrPosition(
// frame,
// { position: 1 },
// { ariaLabel: "Container" },
// );
// await targetContainerDropdownItem2.click();
// Select different target container
await targetContainerDropdown.click();
const targetContainerDropdownItem2 = await getDropdownItemByNameOrPosition(
frame,
{ position: 1 },
{ ariaLabel: "Container" },
);
await targetContainerDropdownItem2.click();
// // Generate expected job name based on selections
// const selectedSourceDatabase = await sourceDatabaseDropdown.innerText();
// const selectedSourceContainer = await sourceContainerDropdown.innerText();
// const selectedTargetDatabase = await targetDatabaseDropdown.innerText();
// const selectedTargetContainer = await targetContainerDropdown.innerText();
// expectedCopyJobNameInitial = `${truncateName(selectedSourceDatabase)}.${truncateName(
// selectedSourceContainer,
// )}_${truncateName(selectedTargetDatabase)}.${truncateName(selectedTargetContainer)}`;
// Generate expected job name based on selections
const selectedSourceDatabase = await sourceDatabaseDropdown.innerText();
const selectedSourceContainer = await sourceContainerDropdown.innerText();
const selectedTargetDatabase = await targetDatabaseDropdown.innerText();
const selectedTargetContainer = await targetContainerDropdown.innerText();
expectedCopyJobNameInitial = `${truncateName(selectedSourceDatabase)}.${truncateName(
selectedSourceContainer,
)}_${truncateName(selectedTargetDatabase)}.${truncateName(selectedTargetContainer)}`;
// await panel.getByRole("button", { name: "Next" }).click();
await panel.getByRole("button", { name: "Next" }).click();
// // Error should disappear and preview should be visible
// await expect(errorContainer).not.toBeVisible();
// await expect(panel.getByTestId("Panel:PreviewCopyJob")).toBeVisible();
// Error should disappear and preview should be visible
await expect(errorContainer).not.toBeVisible();
await expect(panel.getByTestId("Panel:PreviewCopyJob")).toBeVisible();
// // Verify job preview details
// const previewContainer = panel.getByTestId("Panel:PreviewCopyJob");
// await expect(previewContainer).toBeVisible();
// await expect(previewContainer.getByTestId("source-subscription-name")).toHaveText(expectedSubscriptionName);
// await expect(previewContainer.getByTestId("source-account-name")).toHaveText(expectedAccountName);
// Verify job preview details
const previewContainer = panel.getByTestId("Panel:PreviewCopyJob");
await expect(previewContainer).toBeVisible();
await expect(previewContainer.getByTestId("source-subscription-name")).toHaveText(expectedSubscriptionName);
await expect(previewContainer.getByTestId("source-account-name")).toHaveText(expectedAccountName);
// const jobNameInput = previewContainer.getByTestId("job-name-textfield");
// await expect(jobNameInput).toHaveValue(new RegExp(expectedCopyJobNameInitial));
const jobNameInput = previewContainer.getByTestId("job-name-textfield");
await expect(jobNameInput).toHaveValue(new RegExp(expectedCopyJobNameInitial));
// const primaryBtn = panel.getByRole("button", { name: "Copy", exact: true });
// await expect(primaryBtn).not.toHaveClass(/(^|\s)is-disabled(\s|$)/);
const primaryBtn = panel.getByRole("button", { name: "Copy", exact: true });
await expect(primaryBtn).not.toHaveClass(/(^|\s)is-disabled(\s|$)/);
// // Test invalid job name validation (spaces not allowed)
// await jobNameInput.fill("test job name");
// await expect(primaryBtn).toHaveClass(/(^|\s)is-disabled(\s|$)/);
// Test invalid job name validation (spaces not allowed)
await jobNameInput.fill("test job name");
await expect(primaryBtn).toHaveClass(/(^|\s)is-disabled(\s|$)/);
// // Test duplicate job name error handling
// const duplicateJobName = "test-job-name-1";
// await jobNameInput.fill(duplicateJobName);
// Test duplicate job name error handling
const duplicateJobName = "test-job-name-1";
await jobNameInput.fill(duplicateJobName);
// const copyButton = panel.getByRole("button", { name: "Copy", exact: true });
// const expectedErrorMessage = `Duplicate job name '${duplicateJobName}'`;
const copyButton = panel.getByRole("button", { name: "Copy", exact: true });
const expectedErrorMessage = `Duplicate job name '${duplicateJobName}'`;
// await interceptAndInspectApiRequest(
// page,
// `${expectedAccountName}/dataTransferJobs/${duplicateJobName}`,
// "PUT",
// new Error(expectedErrorMessage),
// (url?: string) => url?.includes(duplicateJobName) ?? false,
// );
await interceptAndInspectApiRequest(
page,
`${expectedAccountName}/dataTransferJobs/${duplicateJobName}`,
"PUT",
new Error(expectedErrorMessage),
(url?: string) => url?.includes(duplicateJobName) ?? false,
);
// let errorThrown = false;
// try {
// await copyButton.click();
// await page.waitForTimeout(2000);
// } catch (error: any) {
// errorThrown = true;
// expect(error.message).toContain("not allowed");
// }
let errorThrown = false;
try {
await copyButton.click();
await page.waitForTimeout(2000);
} catch (error: any) {
errorThrown = true;
expect(error.message).toContain("not allowed");
}
// if (!errorThrown) {
// const errorContainer = panel.getByTestId("Panel:ErrorContainer");
// await expect(errorContainer).toBeVisible();
// await expect(errorContainer).toHaveText(new RegExp(expectedErrorMessage, "i"));
// }
if (!errorThrown) {
const errorContainer = panel.getByTestId("Panel:ErrorContainer");
await expect(errorContainer).toBeVisible();
await expect(errorContainer).toHaveText(new RegExp(expectedErrorMessage, "i"));
}
// await expect(panel).toBeVisible();
await expect(panel).toBeVisible();
// // Test successful job creation with valid job name
// const validJobName = expectedJobName;
// Test successful job creation with valid job name
const validJobName = expectedJobName;
// const copyJobCreationPromise = waitForApiResponse(
// page,
// `${expectedAccountName}/dataTransferJobs/${validJobName}`,
// "PUT",
// );
const copyJobCreationPromise = waitForApiResponse(
page,
`${expectedAccountName}/dataTransferJobs/${validJobName}`,
"PUT",
);
// await jobNameInput.fill(validJobName);
// await expect(copyButton).not.toHaveClass(/(^|\s)is-disabled(\s|$)/);
await jobNameInput.fill(validJobName);
await expect(copyButton).not.toHaveClass(/(^|\s)is-disabled(\s|$)/);
// await copyButton.click();
await copyButton.click();
// const response = await copyJobCreationPromise;
// expect(response.ok()).toBe(true);
const response = await copyJobCreationPromise;
expect(response.ok()).toBe(true);
// // Verify panel closes and job appears in the list
// await expect(panel).not.toBeVisible({ timeout: 5000 });
// Verify panel closes and job appears in the list
await expect(panel).not.toBeVisible({ timeout: 5000 });
// const jobsListContainer = wrapper.locator(".CopyJobListContainer .ms-DetailsList-contentWrapper .ms-List-page");
// await jobsListContainer.waitFor({ state: "visible", timeout: 5000 });
const jobsListContainer = wrapper.locator(".CopyJobListContainer .ms-DetailsList-contentWrapper .ms-List-page");
await jobsListContainer.waitFor({ state: "visible", timeout: 5000 });
// const jobItem = jobsListContainer.getByText(validJobName);
// await jobItem.waitFor({ state: "visible", timeout: 5000 });
// await expect(jobItem).toBeVisible();
// });
// });
const jobItem = jobsListContainer.getByText(validJobName);
await jobItem.waitFor({ state: "visible", timeout: 5000 });
await expect(jobItem).toBeVisible();
});
});

View File

@@ -1,185 +1,185 @@
// /* eslint-disable @typescript-eslint/no-explicit-any */
// import { expect, Frame, Locator, Page, test } from "@playwright/test";
// import {
// ContainerCopy,
// getAccountName,
// getDropdownItemByNameOrPosition,
// TestAccount,
// waitForApiResponse,
// } from "../../fx";
// import { createMultipleTestContainers } from "../../testData";
/* eslint-disable @typescript-eslint/no-explicit-any */
import { expect, Frame, Locator, Page, test } from "@playwright/test";
import {
ContainerCopy,
getAccountName,
getDropdownItemByNameOrPosition,
TestAccount,
waitForApiResponse,
} from "../../fx";
import { createMultipleTestContainers } from "../../testData";
// test.describe("Container Copy - Online Migration", () => {
// let page: Page;
// let wrapper: Locator;
// let panel: Locator;
// let frame: Frame;
// let targetAccountName: string;
test.describe("Container Copy - Online Migration", () => {
let page: Page;
let wrapper: Locator;
let panel: Locator;
let frame: Frame;
let targetAccountName: string;
// test.beforeEach("Setup for online migration test", async ({ browser }) => {
// await createMultipleTestContainers({ accountType: TestAccount.SQLContainerCopyOnly, containerCount: 2 });
test.beforeEach("Setup for online migration test", async ({ browser }) => {
await createMultipleTestContainers({ accountType: TestAccount.SQLContainerCopyOnly, containerCount: 2 });
// page = await browser.newPage();
// ({ wrapper, frame } = await ContainerCopy.open(page, TestAccount.SQLContainerCopyOnly));
// targetAccountName = getAccountName(TestAccount.SQLContainerCopyOnly);
// });
page = await browser.newPage();
({ wrapper, frame } = await ContainerCopy.open(page, TestAccount.SQLContainerCopyOnly));
targetAccountName = getAccountName(TestAccount.SQLContainerCopyOnly);
});
// test.afterEach("Cleanup after online migration test", async () => {
// await page.unroute(/.*/, (route) => route.continue());
// await page.close();
// });
test.afterEach("Cleanup after online migration test", async () => {
await page.unroute(/.*/, (route) => route.continue());
await page.close();
});
// test("Successfully create and manage online migration copy job", async () => {
// expect(wrapper).not.toBeNull();
// await wrapper.locator(".commandBarContainer").waitFor({ state: "visible" });
test("Successfully create and manage online migration copy job", async () => {
expect(wrapper).not.toBeNull();
await wrapper.locator(".commandBarContainer").waitFor({ state: "visible" });
// // Open Create Copy Job panel
// const createCopyJobButton = wrapper.getByTestId("CommandBar/Button:Create Copy Job");
// await expect(createCopyJobButton).toBeVisible();
// await createCopyJobButton.click();
// panel = frame.getByTestId("Panel:Create copy job");
// await expect(panel).toBeVisible();
// Open Create Copy Job panel
const createCopyJobButton = wrapper.getByTestId("CommandBar/Button:Create Copy Job");
await expect(createCopyJobButton).toBeVisible();
await createCopyJobButton.click();
panel = frame.getByTestId("Panel:Create copy job");
await expect(panel).toBeVisible();
// // Reduced wait time for better performance
// await page.waitForTimeout(1000);
// Reduced wait time for better performance
await page.waitForTimeout(1000);
// // Enable online migration mode
// const migrationTypeContainer = panel.getByTestId("migration-type");
// const onlineCopyRadioButton = migrationTypeContainer.getByRole("radio", { name: /Online mode/i });
// await onlineCopyRadioButton.click({ force: true });
// Enable online migration mode
const migrationTypeContainer = panel.getByTestId("migration-type");
const onlineCopyRadioButton = migrationTypeContainer.getByRole("radio", { name: /Online mode/i });
await onlineCopyRadioButton.click({ force: true });
// await expect(migrationTypeContainer.getByTestId("migration-type-description-online")).toBeVisible();
await expect(migrationTypeContainer.getByTestId("migration-type-description-online")).toBeVisible();
// await panel.getByRole("button", { name: "Next" }).click();
await panel.getByRole("button", { name: "Next" }).click();
// // Verify permissions screen is shown for online migration
// const permissionScreen = panel.getByTestId("Panel:AssignPermissionsContainer");
// await expect(permissionScreen).toBeVisible();
// await expect(permissionScreen.getByText("Online container copy", { exact: true })).toBeVisible();
// Verify permissions screen is shown for online migration
const permissionScreen = panel.getByTestId("Panel:AssignPermissionsContainer");
await expect(permissionScreen).toBeVisible();
await expect(permissionScreen.getByText("Online container copy", { exact: true })).toBeVisible();
// // Skip permissions setup and proceed to container selection
// await panel.getByRole("button", { name: "Next" }).click();
// Skip permissions setup and proceed to container selection
await panel.getByRole("button", { name: "Next" }).click();
// // Configure source and target containers for online migration
// const sourceDatabaseDropdown = panel.getByTestId("source-databaseDropdown");
// await sourceDatabaseDropdown.click();
// const sourceDbDropdownItem = await getDropdownItemByNameOrPosition(
// frame,
// { position: 0 },
// { ariaLabel: "Database" },
// );
// await sourceDbDropdownItem.click();
// Configure source and target containers for online migration
const sourceDatabaseDropdown = panel.getByTestId("source-databaseDropdown");
await sourceDatabaseDropdown.click();
const sourceDbDropdownItem = await getDropdownItemByNameOrPosition(
frame,
{ position: 0 },
{ ariaLabel: "Database" },
);
await sourceDbDropdownItem.click();
// const sourceContainerDropdown = panel.getByTestId("source-containerDropdown");
// await sourceContainerDropdown.click();
// const sourceContainerDropdownItem = await getDropdownItemByNameOrPosition(
// frame,
// { position: 0 },
// { ariaLabel: "Container" },
// );
// await sourceContainerDropdownItem.click();
const sourceContainerDropdown = panel.getByTestId("source-containerDropdown");
await sourceContainerDropdown.click();
const sourceContainerDropdownItem = await getDropdownItemByNameOrPosition(
frame,
{ position: 0 },
{ ariaLabel: "Container" },
);
await sourceContainerDropdownItem.click();
// const targetDatabaseDropdown = panel.getByTestId("target-databaseDropdown");
// await targetDatabaseDropdown.click();
// const targetDbDropdownItem = await getDropdownItemByNameOrPosition(
// frame,
// { position: 0 },
// { ariaLabel: "Database" },
// );
// await targetDbDropdownItem.click();
const targetDatabaseDropdown = panel.getByTestId("target-databaseDropdown");
await targetDatabaseDropdown.click();
const targetDbDropdownItem = await getDropdownItemByNameOrPosition(
frame,
{ position: 0 },
{ ariaLabel: "Database" },
);
await targetDbDropdownItem.click();
// const targetContainerDropdown = panel.getByTestId("target-containerDropdown");
// await targetContainerDropdown.click();
// const targetContainerDropdownItem = await getDropdownItemByNameOrPosition(
// frame,
// { position: 1 },
// { ariaLabel: "Container" },
// );
// await targetContainerDropdownItem.click();
const targetContainerDropdown = panel.getByTestId("target-containerDropdown");
await targetContainerDropdown.click();
const targetContainerDropdownItem = await getDropdownItemByNameOrPosition(
frame,
{ position: 1 },
{ ariaLabel: "Container" },
);
await targetContainerDropdownItem.click();
// await panel.getByRole("button", { name: "Next" }).click();
await panel.getByRole("button", { name: "Next" }).click();
// // Verify job preview and create the online migration job
// const previewContainer = panel.getByTestId("Panel:PreviewCopyJob");
// await expect(previewContainer.getByTestId("source-account-name")).toHaveText(targetAccountName);
// Verify job preview and create the online migration job
const previewContainer = panel.getByTestId("Panel:PreviewCopyJob");
await expect(previewContainer.getByTestId("source-account-name")).toHaveText(targetAccountName);
// const jobNameInput = previewContainer.getByTestId("job-name-textfield");
// const onlineMigrationJobName = await jobNameInput.inputValue();
const jobNameInput = previewContainer.getByTestId("job-name-textfield");
const onlineMigrationJobName = await jobNameInput.inputValue();
// const copyButton = panel.getByRole("button", { name: "Copy", exact: true });
const copyButton = panel.getByRole("button", { name: "Copy", exact: true });
// const copyJobCreationPromise = waitForApiResponse(
// page,
// `${targetAccountName}/dataTransferJobs/${onlineMigrationJobName}`,
// "PUT",
// );
// await copyButton.click();
// await page.waitForTimeout(1000); // Reduced wait time
const copyJobCreationPromise = waitForApiResponse(
page,
`${targetAccountName}/dataTransferJobs/${onlineMigrationJobName}`,
"PUT",
);
await copyButton.click();
await page.waitForTimeout(1000); // Reduced wait time
// const response = await copyJobCreationPromise;
// expect(response.ok()).toBe(true);
const response = await copyJobCreationPromise;
expect(response.ok()).toBe(true);
// // Verify panel closes and job appears in the list
// await expect(panel).not.toBeVisible({ timeout: 5000 });
// Verify panel closes and job appears in the list
await expect(panel).not.toBeVisible({ timeout: 5000 });
// const jobsListContainer = wrapper.locator(".CopyJobListContainer .ms-DetailsList-contentWrapper .ms-List-page");
// await jobsListContainer.waitFor({ state: "visible", timeout: 5000 });
const jobsListContainer = wrapper.locator(".CopyJobListContainer .ms-DetailsList-contentWrapper .ms-List-page");
await jobsListContainer.waitFor({ state: "visible", timeout: 5000 });
// let jobRow, statusCell, actionMenuButton;
// jobRow = jobsListContainer.locator(".ms-DetailsRow", { hasText: onlineMigrationJobName });
// statusCell = jobRow.locator("[data-automationid='DetailsRowCell'][data-automation-key='CopyJobStatus']");
// await jobRow.waitFor({ state: "visible", timeout: 5000 });
let jobRow, statusCell, actionMenuButton;
jobRow = jobsListContainer.locator(".ms-DetailsRow", { hasText: onlineMigrationJobName });
statusCell = jobRow.locator("[data-automationid='DetailsRowCell'][data-automation-key='CopyJobStatus']");
await jobRow.waitFor({ state: "visible", timeout: 5000 });
// // Verify job status changes to queued state
// await expect(statusCell).toContainText(/running|queued|pending/i, { timeout: 5000 });
// Verify job status changes to queued state
await expect(statusCell).toContainText(/running|queued|pending/i, { timeout: 5000 });
// // Test job lifecycle management through action menu
// actionMenuButton = wrapper.getByTestId(`CopyJobActionMenu/Button:${onlineMigrationJobName}`);
// await actionMenuButton.click();
// Test job lifecycle management through action menu
actionMenuButton = wrapper.getByTestId(`CopyJobActionMenu/Button:${onlineMigrationJobName}`);
await actionMenuButton.click();
// // Test pause functionality
// const pauseAction = frame.locator(".ms-ContextualMenu-list button:has-text('Pause')");
// await pauseAction.click();
// Test pause functionality
const pauseAction = frame.locator(".ms-ContextualMenu-list button:has-text('Pause')");
await pauseAction.click();
// const pauseResponse = await waitForApiResponse(
// page,
// `${targetAccountName}/dataTransferJobs/${onlineMigrationJobName}/pause`,
// "POST",
// );
// expect(pauseResponse.ok()).toBe(true);
const pauseResponse = await waitForApiResponse(
page,
`${targetAccountName}/dataTransferJobs/${onlineMigrationJobName}/pause`,
"POST",
);
expect(pauseResponse.ok()).toBe(true);
// // Verify job status changes to paused
// jobRow = jobsListContainer.locator(".ms-DetailsRow", { hasText: onlineMigrationJobName });
// await jobRow.waitFor({ state: "visible", timeout: 5000 });
// statusCell = jobRow.locator("[data-automationid='DetailsRowCell'][data-automation-key='CopyJobStatus']");
// await expect(statusCell).toContainText(/paused/i, { timeout: 5000 });
// await page.waitForTimeout(1000);
// Verify job status changes to paused
jobRow = jobsListContainer.locator(".ms-DetailsRow", { hasText: onlineMigrationJobName });
await jobRow.waitFor({ state: "visible", timeout: 5000 });
statusCell = jobRow.locator("[data-automationid='DetailsRowCell'][data-automation-key='CopyJobStatus']");
await expect(statusCell).toContainText(/paused/i, { timeout: 5000 });
await page.waitForTimeout(1000);
// // Test cancel job functionality
// actionMenuButton = wrapper.getByTestId(`CopyJobActionMenu/Button:${onlineMigrationJobName}`);
// await actionMenuButton.click();
// await frame.locator(".ms-ContextualMenu-list button:has-text('Cancel')").click();
// Test cancel job functionality
actionMenuButton = wrapper.getByTestId(`CopyJobActionMenu/Button:${onlineMigrationJobName}`);
await actionMenuButton.click();
await frame.locator(".ms-ContextualMenu-list button:has-text('Cancel')").click();
// // Verify cancellation confirmation dialog
// await expect(frame.locator(".ms-Dialog-main")).toBeVisible({ timeout: 2000 });
// await expect(frame.locator(".ms-Dialog-main")).toContainText(onlineMigrationJobName);
// Verify cancellation confirmation dialog
await expect(frame.locator(".ms-Dialog-main")).toBeVisible({ timeout: 2000 });
await expect(frame.locator(".ms-Dialog-main")).toContainText(onlineMigrationJobName);
// const cancelDialogButton = frame.locator(".ms-Dialog-main").getByTestId("DialogButton:Cancel");
// await expect(cancelDialogButton).toBeVisible();
// await cancelDialogButton.click();
// await expect(frame.locator(".ms-Dialog-main")).not.toBeVisible();
const cancelDialogButton = frame.locator(".ms-Dialog-main").getByTestId("DialogButton:Cancel");
await expect(cancelDialogButton).toBeVisible();
await cancelDialogButton.click();
await expect(frame.locator(".ms-Dialog-main")).not.toBeVisible();
// actionMenuButton = wrapper.getByTestId(`CopyJobActionMenu/Button:${onlineMigrationJobName}`);
// await actionMenuButton.click();
// await frame.locator(".ms-ContextualMenu-list button:has-text('Cancel')").click();
actionMenuButton = wrapper.getByTestId(`CopyJobActionMenu/Button:${onlineMigrationJobName}`);
await actionMenuButton.click();
await frame.locator(".ms-ContextualMenu-list button:has-text('Cancel')").click();
// const confirmDialogButton = frame.locator(".ms-Dialog-main").getByTestId("DialogButton:Confirm");
// await expect(confirmDialogButton).toBeVisible();
// await confirmDialogButton.click();
const confirmDialogButton = frame.locator(".ms-Dialog-main").getByTestId("DialogButton:Confirm");
await expect(confirmDialogButton).toBeVisible();
await confirmDialogButton.click();
// // Verify final job status is cancelled
// jobRow = jobsListContainer.locator(".ms-DetailsRow", { hasText: onlineMigrationJobName });
// statusCell = jobRow.locator("[data-automationid='DetailsRowCell'][data-automation-key='CopyJobStatus']");
// await expect(statusCell).toContainText(/cancelled/i, { timeout: 5000 });
// });
// });
// Verify final job status is cancelled
jobRow = jobsListContainer.locator(".ms-DetailsRow", { hasText: onlineMigrationJobName });
statusCell = jobRow.locator("[data-automationid='DetailsRowCell'][data-automation-key='CopyJobStatus']");
await expect(statusCell).toContainText(/cancelled/i, { timeout: 5000 });
});
});

View File

@@ -136,7 +136,9 @@ test.describe.serial("Upload Item", () => {
if (existsSync(uploadDocumentDirPath)) {
rmdirSync(uploadDocumentDirPath);
}
await context?.dispose();
if (!process.env.CI) {
await context?.dispose();
}
});
test.afterEach("Close Upload Items panel if still open", async () => {

View File

@@ -30,9 +30,12 @@ test.beforeEach("Open new query tab", async ({ page }) => {
await explorer.frame.getByTestId("NotificationConsole/Contents").waitFor();
});
test.afterAll("Delete Test Database", async () => {
await context?.dispose();
});
// Delete database only if not running in CI
if (!process.env.CI) {
test.afterAll("Delete Test Database", async () => {
await context?.dispose();
});
}
test("Query results", async () => {
// Run the query and verify the results

View File

@@ -10,13 +10,11 @@ test.describe("Change Partition Key", () => {
let previousJobName: string | undefined;
test.beforeAll("Create Test Database", async () => {
context = await createTestSQLContainer({
testAccount: TestAccount.SQL2,
});
context = await createTestSQLContainer();
});
test.beforeEach("Open container settings", async ({ page }) => {
explorer = await DataExplorer.open(page, TestAccount.SQL2);
explorer = await DataExplorer.open(page, TestAccount.SQL);
// Click Scale & Settings and open Partition Key tab
await explorer.openScaleAndSettings(context);
@@ -25,9 +23,12 @@ test.describe("Change Partition Key", () => {
await PartitionKeyTab.click();
});
test.afterEach("Delete Test Database", async () => {
await context?.dispose();
});
// Delete database only if not running in CI
if (!process.env.CI) {
test.afterEach("Delete Test Database", async () => {
await context?.dispose();
});
}
test("Change partition key path", async ({ page }) => {
await expect(explorer.frame.getByText("/partitionKey")).toBeVisible();

View File

@@ -8,13 +8,11 @@ test.describe("Computed Properties", () => {
let explorer: DataExplorer = null!;
test.beforeAll("Create Test Database", async () => {
context = await createTestSQLContainer({
testAccount: TestAccount.SQL2,
});
context = await createTestSQLContainer();
});
test.beforeEach("Open Settings tab under Scale & Settings", async ({ page }) => {
explorer = await DataExplorer.open(page, TestAccount.SQL2);
explorer = await DataExplorer.open(page, TestAccount.SQL);
const containerNode = await explorer.waitForContainerNode(context.database.id, context.container.id);
await containerNode.expand();
@@ -24,7 +22,7 @@ test.describe("Computed Properties", () => {
await computedPropertiesTab.click();
});
test.afterEach("Delete Test Database", async () => {
test.afterAll("Delete Test Database", async () => {
await context?.dispose();
});

View File

@@ -118,5 +118,7 @@ async function openScaleTab(browser: Browser): Promise<SetupResult> {
}
async function cleanup({ context }: Partial<SetupResult>) {
await context?.dispose();
if (!process.env.CI) {
await context?.dispose();
}
}

View File

@@ -17,9 +17,12 @@ test.describe("Settings under Scale & Settings", () => {
await settingsTab.click();
});
test.afterEach("Delete Test Database", async () => {
await context?.dispose();
});
// Delete database only if not running in CI
if (!process.env.CI) {
test.afterAll("Delete Test Database", async () => {
await context?.dispose();
});
}
test("Update TTL to On (no default)", async () => {
const ttlOnNoDefaultRadioButton = explorer.frame.getByRole("radio", { name: "ttl-on-no-default-option" });

View File

@@ -7,16 +7,14 @@ test.describe("Stored Procedures", () => {
let explorer: DataExplorer = null!;
test.beforeAll("Create Test Database", async () => {
context = await createTestSQLContainer({
testAccount: TestAccount.SQL2,
});
context = await createTestSQLContainer();
});
test.beforeEach("Open container", async ({ page }) => {
explorer = await DataExplorer.open(page, TestAccount.SQL2);
explorer = await DataExplorer.open(page, TestAccount.SQL);
});
test.afterEach("Delete Test Database", async () => {
test.afterAll("Delete Test Database", async () => {
await context?.dispose();
});
@@ -45,7 +43,7 @@ test.describe("Stored Procedures", () => {
);
// Execute stored procedure
const executeButton = explorer.commandBarButton(CommandBarButton.Execute).first();
const executeButton = explorer.commandBarButton(CommandBarButton.Execute);
await executeButton.click();
const executeSidePanelButton = explorer.frame.getByTestId("Panel/OkButton");
await executeSidePanelButton.click();

View File

@@ -19,18 +19,18 @@ test.describe("Triggers", () => {
request.setBody(itemToCreate);
}`;
test.beforeAll("Create Test Database", async () => {
context = await createTestSQLContainer({
testAccount: TestAccount.SQL2,
});
context = await createTestSQLContainer();
});
test.beforeEach("Open container", async ({ page }) => {
explorer = await DataExplorer.open(page, TestAccount.SQL2);
explorer = await DataExplorer.open(page, TestAccount.SQL);
});
test.afterEach("Delete Test Database", async () => {
await context?.dispose();
});
if (!process.env.CI) {
test.afterAll("Delete Test Database", async () => {
await context?.dispose();
});
}
test("Add and delete trigger", async ({ page }, testInfo) => {
// Open container context menu and click New Trigger

View File

@@ -12,18 +12,18 @@ test.describe("User Defined Functions", () => {
}`;
test.beforeAll("Create Test Database", async () => {
context = await createTestSQLContainer({
testAccount: TestAccount.SQL2,
});
context = await createTestSQLContainer();
});
test.beforeEach("Open container", async ({ page }) => {
explorer = await DataExplorer.open(page, TestAccount.SQL2);
explorer = await DataExplorer.open(page, TestAccount.SQL);
});
test.afterEach("Delete Test Database", async () => {
await context?.dispose();
});
if (!process.env.CI) {
test.afterAll("Delete Test Database", async () => {
await context?.dispose();
});
}
test("Add, execute, and delete user defined function", async ({ page }, testInfo) => {
// Open container context menu and click New UDF

View File

@@ -86,14 +86,13 @@ type createTestSqlContainerConfig = {
includeTestData?: boolean;
partitionKey?: string;
databaseName?: string;
testAccount?: TestAccount;
};
type createMultipleTestSqlContainerConfig = {
containerCount?: number;
partitionKey?: string;
databaseName?: string;
accountType: TestAccount.SQLContainerCopyOnly | TestAccount.SQL | TestAccount.SQL2;
accountType: TestAccount.SQLContainerCopyOnly | TestAccount.SQL;
};
export async function createMultipleTestContainers({
@@ -115,7 +114,12 @@ export async function createMultipleTestContainers({
endpoint: account.documentEndpoint!,
};
const rbacToken = getRbacToken(accountType);
const rbacToken =
accountType === TestAccount.SQL
? process.env.NOSQL_TESTACCOUNT_TOKEN
: accountType === TestAccount.SQLContainerCopyOnly
? process.env.NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN
: "";
if (rbacToken) {
clientOptions.tokenProvider = async (): Promise<string> => {
const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
@@ -151,21 +155,20 @@ export async function createTestSQLContainer({
includeTestData = false,
partitionKey = "/partitionKey",
databaseName = "",
testAccount = TestAccount.SQL,
}: createTestSqlContainerConfig = {}) {
const databaseId = databaseName ? databaseName : generateUniqueName("db");
const containerId = "testcontainer"; // A unique container name isn't needed because the database is unique
const credentials = getAzureCLICredentials();
const adaptedCredentials = new AzureIdentityCredentialAdapter(credentials);
const armClient = new CosmosDBManagementClient(adaptedCredentials, subscriptionId);
const accountName = getAccountName(testAccount);
const accountName = getAccountName(TestAccount.SQL);
const account = await armClient.databaseAccounts.get(resourceGroupName, accountName);
const clientOptions: CosmosClientOptions = {
endpoint: account.documentEndpoint!,
};
const nosqlAccountRbacToken = getRbacToken(testAccount);
const nosqlAccountRbacToken = process.env.NOSQL_TESTACCOUNT_TOKEN;
if (nosqlAccountRbacToken) {
clientOptions.tokenProvider = async (): Promise<string> => {
const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
@@ -249,16 +252,3 @@ export async function retry<T>(fn: () => Promise<T>, retries = 3, delayMs = 1000
}
throw lastError;
}
function getRbacToken(accountType: TestAccount): string | undefined {
switch (accountType) {
case TestAccount.SQL:
return process.env.NOSQL_TESTACCOUNT_TOKEN;
case TestAccount.SQL2:
return process.env.NOSQL2_TESTACCOUNT_TOKEN;
case TestAccount.SQLContainerCopyOnly:
return process.env.NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN;
default:
return undefined;
}
}

View File

@@ -17,7 +17,6 @@ const nosqlRbacToken =
urlSearchParams.get("nosqlRbacToken") ||
(enablecontainercopy ? process.env.NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN : process.env.NOSQL_TESTACCOUNT_TOKEN) ||
"";
const nosql2RbacToken = urlSearchParams.get("nosql2RbacToken") || process.env.NOSQL2_TESTACCOUNT_TOKEN || "";
const nosqlReadOnlyRbacToken =
urlSearchParams.get("nosqlReadOnlyRbacToken") || process.env.NOSQL_READONLY_TESTACCOUNT_TOKEN || "";
const tableRbacToken = urlSearchParams.get("tableRbacToken") || process.env.TABLE_TESTACCOUNT_TOKEN || "";
@@ -44,9 +43,6 @@ const initTestExplorer = async (): Promise<void> => {
case "sql":
rbacToken = nosqlRbacToken;
break;
case "sql2":
rbacToken = nosql2RbacToken;
break;
case "sql-readonly":
rbacToken = nosqlReadOnlyRbacToken;
break;