{param}
{
+ const mocks = createPartialFluentUIMock(['Link', 'Modal', 'IconButton', 'getTheme', 'FontWeights', 'mergeStyleSets']);
+ return {
+ ...mocks,
+ IIconProps: {},
+ IconNames: {
+ Cancel: 'Cancel',
+ }
+ };
+});
+
+describe("ComplexPropertyModal Component", () => {
+ const mockComplexData = {
+ stringProperty: "test string",
+ numberProperty: 42,
+ nestedObject: {
+ innerString: "inner value",
+ innerNumber: 123,
+ deepNested: {
+ deepProperty: "deep value",
+ },
+ },
+ arrayProperty: ["item1", "item2", "item3"],
+ };
+
+ it("renders the details link", () => {
+ render(
+
+ {component}
+
+
+ );
+};
+
+describe("ConfirmDeleteResource Component", () => {
+ const mockOnDismiss = vi.fn();
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+ mockAddUpdateOperation.mockReturnValue({ type: "operations/addUpdateOperation", payload: {} });
+ });
+
+ it("renders dialog with correct title and message", () => {
+ renderWithContext(
+
+ {component}
+
+ );
+};
+
+describe("ConfirmDisableEnableResource Component", () => {
+ const mockOnDismiss = vi.fn();
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("renders disable dialog for enabled resource", () => {
+ renderWithWorkspaceContext(
+
+ {component}
+
+ );
+};
+
+describe("ConfirmUpgradeResource Component", () => {
+ const mockOnDismiss = vi.fn();
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("renders upgrade dialog with correct title and content", () => {
+ renderWithWorkspaceContext(
+
+
+ {component}
+
+
+ );
+};
+
+describe("CostsTag Component", () => {
+ // Get a reference to the mock API call function
+ const mockApiCall = (globalThis as any).__mockApiCall;
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+ mockApiCall.mockReset();
+ });
+
+ it("shows shimmer while loading", async () => {
+ // Use a fresh mock for the API call
+ const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+ mockApiCall.mockImplementation(async () => {
+ await delay(100);
+ return { workspaceAuth: { scopeId: "scope" }, costs: [{ cost: 123.45, currency: "USD" }], id: "resource1", name: "Resource 1" };
+ });
+
+
+ // Provide a workspace with id: undefined to trigger loading state
+ const workspaceWithNoId = { ...mockWorkspace, id: undefined };
+ const workspaceContext = {
+ costs: undefined,
+ workspace: workspaceWithNoId,
+ workspaceApplicationIdURI: "test-app-id-uri",
+ roles: ["workspace_researcher"],
+ setCosts: vi.fn(),
+ setRoles: vi.fn(),
+ setWorkspace: vi.fn(),
+ } as any;
+ const costsContext = {
+ costs: undefined,
+ loadingState: LoadingState.Loading,
+ setCosts: vi.fn(),
+ setLoadingState: vi.fn(),
+ } as any;
+ render(
+
+
+
+
+ );
+
+ // Wait for shimmer to appear (async)
+ expect(await screen.findByTestId("shimmer")).toBeInTheDocument();
+ });
+
+ it("displays formatted cost when available in workspace context", async () => {
+ const workspaceCosts = [
+ {
+ id: "test-resource-id",
+ name: "Test Resource",
+ costs: [{ cost: 123.45, currency: "USD" }],
+ },
+ ];
+
+ renderWithContexts(
+ = (
useEffect(() => {
async function fetchCostData() {
let costs: CostResource[] = [];
- if (workspaceCtx.costs.length > 0) {
+ if (workspaceCtx.costs?.length > 0) {
costs = workspaceCtx.costs;
- } else if (costsCtx.costs.length > 0) {
+ } else if (costsCtx.costs?.length > 0) {
costs = costsCtx.costs;
}
@@ -41,7 +41,7 @@ export const CostsTag: React.FunctionComponent = (
return cost.id === props.resourceId;
});
- if (resourceCosts && resourceCosts.costs.length > 0) {
+ if (resourceCosts && resourceCosts?.costs?.length > 0) {
const formattedCost = new Intl.NumberFormat(undefined, {
style: "currency",
currency: resourceCosts?.costs[0].currency,
@@ -69,18 +69,21 @@ export const CostsTag: React.FunctionComponent = (
}
let baseMessage = "Month-to-date costs";
-
+
if (props.resourceType === ResourceType.Workspace) {
baseMessage += " (includes all workspace services and user resources)";
}
-
+
return baseMessage;
};
+ const showShimmer = loadingState === LoadingState.Loading ||
+ (costsCtx.loadingState === LoadingState.Loading && !formattedCost);
+
const costBadge = (
- {loadingState === LoadingState.Loading ? (
- = {}): APIError => {
+ const error = new APIError();
+ error.status = 500;
+ error.userMessage = "Test user message";
+ error.message = "Test error message";
+ error.endpoint = "/test/endpoint";
+ error.stack = "Error stack trace";
+ error.exception = "Test exception details";
+ return { ...error, ...overrides };
+ };
+
+ it("renders access denied message for 403 status", async () => {
+ const error = createMockError({
+ status: 403,
+ userMessage: "You don't have permission",
+ message: "Forbidden access"
+ });
+
+ await act(async () => {
+ render( createPartialFluentUIMock(['MessageBar', 'Link', 'Icon']));
+
+// Component that throws an error for testing
+const ThrowError = ({ shouldThrow }: { shouldThrow: boolean }) => {
+ if (shouldThrow) {
+ throw new Error("Test error");
+ }
+ return No error;
+};
+
+describe("GenericErrorBoundary Component", () => {
+ // Suppress console.error for tests since we're intentionally triggering errors
+ const originalConsoleError = console.error;
+ beforeEach(() => {
+ console.error = vi.fn();
+ });
+
+ afterEach(() => {
+ console.error = originalConsoleError;
+ });
+
+ it("renders children when there is no error", () => {
+ render(
+
+
+ );
+
+ expect(screen.getByTestId("success-content")).toBeInTheDocument();
+ expect(screen.getByText("No error")).toBeInTheDocument();
+ });
+
+ it("renders error message when child component throws", () => {
+ render(
+
+
+ );
+
+ expect(screen.getByTestId("message-bar")).toBeInTheDocument();
+ expect(screen.getByTestId("message-bar")).toHaveAttribute("data-type", "error");
+ expect(screen.getByText("Uh oh!")).toBeInTheDocument();
+ expect(screen.getByText(/This area encountered an error/)).toBeInTheDocument();
+ });
+
+ it("does not render children when error boundary is triggered", () => {
+ render(
+
+
+ );
+
+ expect(screen.queryByTestId("success-content")).not.toBeInTheDocument();
+ });
+
+ it("logs error to console when error is caught", () => {
+ const consoleErrorSpy = vi.spyOn(console, "error");
+
+ render(
+
+
+ );
+
+ expect(consoleErrorSpy).toHaveBeenCalledWith(
+ "UNHANDLED EXCEPTION",
+ expect.any(Error),
+ expect.any(Object)
+ );
+ });
+
+ it("shows helpful error message with debugging guidance", () => {
+ render(
+
+
+ );
+
+ expect(screen.getByText(/check your configuration and refresh/)).toBeInTheDocument();
+ expect(screen.getByText(/Further debugging details can be found in the browser console/)).toBeInTheDocument();
+ });
+
+ it("renders multiple children correctly when no error", () => {
+ render(
+
+ Child 1
+ Child 2
+
+ );
+
+ expect(screen.getByTestId("child-1")).toBeInTheDocument();
+ expect(screen.getByTestId("child-2")).toBeInTheDocument();
+ expect(screen.getByTestId("success-content")).toBeInTheDocument();
+ });
+
+ it("catches error from any child component", () => {
+ render(
+
+ Child 1
+
+ );
+
+ // Should show error boundary UI instead of children
+ expect(screen.getByTestId("message-bar")).toBeInTheDocument();
+ expect(screen.queryByTestId("child-1")).not.toBeInTheDocument();
+ expect(screen.queryByTestId("child-2")).not.toBeInTheDocument();
+ });
+});
diff --git a/ui/app/src/components/shared/PowerStateBadge.test.tsx b/ui/app/src/components/shared/PowerStateBadge.test.tsx
new file mode 100644
index 0000000000..5f9d50f4b1
--- /dev/null
+++ b/ui/app/src/components/shared/PowerStateBadge.test.tsx
@@ -0,0 +1,111 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { PowerStateBadge } from "./PowerStateBadge";
+import { VMPowerStates } from "../../models/resource";
+
+describe("PowerStateBadge Component", () => {
+ it("renders running state with correct class", () => {
+ render(
+ {component}
+
+ );
+};
+
+describe("ResourceBody Component", () => {
+ it("renders pivot with overview tab", () => {
+ renderWithWorkspaceContext(;
+ var __mockUseComponentManager: ReturnType;
+}
+
+globalThis.__mockNavigate = vi.fn();
+globalThis.__mockUseComponentManager = vi.fn();
+
+// *** ALL MOCK DECLARATIONS FIRST ***
+// Mock React Router - preserving original exports and overriding specific functions
+vi.mock("react-router-dom", async () => {
+ // Import the actual module to preserve exports like MemoryRouter that our tests need
+ const actual = await vi.importActual("react-router-dom");
+ return {
+ ...actual,
+ useNavigate: () => globalThis.__mockNavigate,
+ useParams: () => ({}),
+ useLocation: () => ({ pathname: '/test', search: '', hash: '', state: null })
+ };
+});
+
+// Mock useComponentManager hook
+vi.mock("../../hooks/useComponentManager", () => ({
+ useComponentManager: () => globalThis.__mockUseComponentManager,
+}));
+
+// Mock child components
+vi.mock("./ResourceContextMenu", () => ({
+ ResourceContextMenu: ({ resource }: any) => (
+ {resource.id}
+ ),
+}));
+
+vi.mock("./StatusBadge", () => ({
+ StatusBadge: ({ resource, status }: any) => (
+ {status}
+ ),
+}));
+
+vi.mock("./PowerStateBadge", () => ({
+ PowerStateBadge: ({ state }: any) => (
+ {state}
+ ),
+}));
+
+vi.mock("./CostsTag", () => ({
+ CostsTag: ({ resourceId }: any) => (
+ {resourceId}
+ ),
+}));
+
+vi.mock("./ConfirmCopyUrlToClipboard", () => ({
+ ConfirmCopyUrlToClipboard: ({ onDismiss }: any) => (
+
+ Copy URL Dialog
+
+ ),
+}));
+
+vi.mock("./SecuredByRole", () => ({
+ SecuredByRole: ({ element }: any) => element,
+}));
+
+vi.mock("moment", () => ({
+ default: {
+ unix: (timestamp: number) => ({
+ toDate: () => new Date(timestamp * 1000),
+ }),
+ },
+}));
+
+// Mock FluentUI components - Use async importActual to maintain all exports
+vi.mock("@fluentui/react", async () => {
+ const actual = await vi.importActual("@fluentui/react");
+
+ // Create custom mock components
+ const MockStack = ({ children, horizontal, styles, onClick }: any) => (
+
+ {children}
+
+ );
+
+ // Add Item property to Stack
+ MockStack.Item = ({ children, align, grow, styles }: any) => (
+
+ {children}
+
+ );
+
+ return {
+ ...actual,
+ Stack: MockStack,
+ PrimaryButton: ({ text, children, iconProps, styles, onClick, disabled }: any) => (
+
+ ),
+ Icon: ({ iconName }: any) => (
+ {iconName}
+ ),
+ IconButton: ({ onClick, title }: any) => (
+
+ ),
+ TooltipHost: ({ content, children }: any) => (
+ {children}
+ ),
+ Callout: ({ children, hidden }: any) =>
+ !hidden ? {children} : null,
+ Text: ({ children }: any) => {children},
+ Link: ({ children }: any) => {children},
+ Shimmer: ({ width, height }: any) => (
+ Loading...
+ ),
+ mergeStyleSets: (styles: any) => styles,
+ DefaultPalette: { white: "#ffffff" },
+ FontWeights: { semilight: 300 },
+ };
+});
+
+// *** NOW IMPORTS AFTER ALL MOCKS ***
+import React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import {
+ render,
+ screen,
+ fireEvent,
+ act
+} from "../../test-utils";
+import { ResourceCard } from "./ResourceCard";
+import { Resource, ComponentAction, VMPowerStates } from "../../models/resource";
+import { ResourceType } from "../../models/resourceType";
+import { RoleName } from "../../models/roleNames";
+import { CostResource } from "../../models/costs";
+
+// Access the mocks from the global variables
+const mockNavigate = globalThis.__mockNavigate;
+const mockUseComponentManager = globalThis.__mockUseComponentManager;
+
+const mockResource: Resource = {
+ id: "test-resource-id",
+ resourceType: ResourceType.WorkspaceService,
+ templateName: "test-template",
+ templateVersion: "1.0.0",
+ resourcePath: "/workspaces/test-workspace/workspace-services/test-resource-id",
+ resourceVersion: 1,
+ isEnabled: true,
+ properties: {
+ display_name: "Test Resource",
+ description: "Test resource description",
+ connection_uri: "https://test-connection.com",
+ },
+ _etag: "test-etag",
+ updatedWhen: 1640995200, // Unix timestamp
+ deploymentStatus: "deployed",
+ availableUpgrades: [],
+ history: [],
+ user: {
+ id: "test-user-id",
+ name: "Test User",
+ email: "test@example.com",
+ roleAssignments: [],
+ roles: ["workspace_researcher"],
+ },
+ azureStatus: {
+ powerState: VMPowerStates.Running,
+ },
+};
+
+const mockWorkspaceContext = {
+ costs: [] as CostResource[],
+ workspace: {
+ id: "test-workspace-id",
+ isEnabled: true,
+ resourcePath: "/workspaces/test-workspace-id",
+ resourceVersion: 1,
+ resourceType: ResourceType.Workspace,
+ templateName: "base",
+ templateVersion: "1.0.0",
+ availableUpgrades: [],
+ deploymentStatus: "deployed",
+ updatedWhen: Date.now(),
+ history: [],
+ _etag: "test-etag",
+ properties: {
+ display_name: "Test Workspace",
+ },
+ user: {
+ id: "test-user-id",
+ name: "Test User",
+ email: "test@example.com",
+ roleAssignments: [],
+ roles: ["workspace_owner"],
+ },
+ workspaceURL: "https://workspace.example.com",
+ },
+ workspaceApplicationIdURI: "test-app-id-uri",
+ roles: ["workspace_owner"],
+ setCosts: vi.fn(),
+ setRoles: vi.fn(),
+ setWorkspace: vi.fn(),
+};
+
+const mockAppRolesContext = {
+ roles: [RoleName.TREAdmin],
+ setAppRoles: vi.fn(),
+};
+
+const renderWithContexts = (
+ component: React.ReactElement,
+ workspaceContext = mockWorkspaceContext,
+ appRolesContext = mockAppRolesContext
+) => {
+ return render(component, {
+ // Use spread operator to include children property which is required by AllProvidersProps
+ children: component,
+ workspaceContext,
+ appRolesContext
+ });
+};
+
+describe("ResourceCard Component", () => {
+ const defaultProps = {
+ resource: mockResource,
+ itemId: 1,
+ onUpdate: vi.fn(),
+ onDelete: vi.fn(),
+ };
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+ mockUseComponentManager.mockReturnValue({
+ componentAction: ComponentAction.None,
+ operation: null,
+ });
+ });
+
+ it("renders resource card with basic information", () => {
+ renderWithContexts(
+
+ {component}
+
+
+ );
+};
+
+describe("SecuredByRole Component", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("renders secured content when user has required workspace role", () => {
+ renderWithContexts(
+
+
+
+
+ );
+
+ await waitFor(() => {
+ expect(mockApiCall).toHaveBeenCalledWith(
+ "/api/workspaces/test-workspace-id/scopeid",
+ "GET"
+ );
+ });
+
+ expect(mockApiCall).toHaveBeenCalledWith(
+ "/api/workspaces/test-workspace-id",
+ "GET",
+ "test-scope-id",
+ undefined,
+ "JSON",
+ expect.any(Function),
+ true
+ );
+ });
+
+ it("does not fetch workspace roles when they are already in context", () => {
+ renderWithContexts(
+
+ {component}
+
+ );
+};
+
+describe("SharedServiceItem Component", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ mockUseComponentManager.mockReturnValue({
+ componentAction: "none",
+ operation: null,
+ });
+ });
+
+ it("shows loading spinner initially", () => {
+ mockApiCall.mockImplementation(() => new Promise(() => { })); // Never resolves
+
+ renderWithRouter(
+ {component}
+
+ );
+};
+
+describe("TopNav Component", () => {
+ it("renders the navigation bar with all components", () => {
+ renderWithRouter(