(undefined);
export const WizardProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
- // __INITIAL_STATE__ is a global variable that can be set by the server-side rendering process
- // as a way to pass initial data to the client.
- const initialState = window.__INITIAL_STATE__ || {};
- const target: WizardTarget = initialState.installTarget as WizardTarget;
+ const { title, installTarget } = useInitialState();
const mode = "install"; // TODO: get mode from initial state
-
- const { title } = useBranding();
- const isLinux = target === "linux";
+ const isLinux = installTarget === "linux";
const text = getTextVariations(isLinux, title)[mode];
- return {children};
+ return {children};
};
export const useWizard = (): WizardModeContextType => {
diff --git a/web/src/contexts/tests/InitialStateContext.test.tsx b/web/src/contexts/tests/InitialStateContext.test.tsx
new file mode 100644
index 0000000000..a39e0b5fea
--- /dev/null
+++ b/web/src/contexts/tests/InitialStateContext.test.tsx
@@ -0,0 +1,258 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { InitialStateContext, useInitialState, InitialStateProvider } from "../InitialStateContext";
+import { InstallationTarget } from "../../types/installation-target";
+
+type CustomWindow = typeof window & {
+ __INITIAL_STATE__?: unknown;
+}
+
+describe("InitialStateContext", () => {
+ const originalWindow = global.window;
+
+ beforeEach(() => {
+ // Reset window mock before each test
+ global.window = {
+ ...originalWindow,
+ __INITIAL_STATE__: undefined,
+ } as CustomWindow;
+ });
+
+ afterEach(() => {
+ // Restore original window
+ global.window = originalWindow;
+ vi.clearAllMocks();
+ });
+
+ describe("useInitialState hook", () => {
+ it("returns context value when used within provider", () => {
+ const mockContext = {
+ title: "Test App",
+ icon: "test-icon.png",
+ installTarget: "linux" as InstallationTarget,
+ };
+
+ const TestComponent = () => {
+ const state = useInitialState();
+ return {state.title}
;
+ };
+
+ render(
+
+
+
+ );
+
+ expect(screen.getByText("Test App")).toBeInTheDocument();
+ });
+ });
+
+ describe("parseInstallationTarget function", () => {
+ it("linux is a valid installation target", () => {
+
+ const TestComponent = () => {
+ const state = useInitialState();
+ return {state.installTarget}
;
+ };
+
+ // Set up window.__INITIAL_STATE__ with valid target
+ global.window.__INITIAL_STATE__ = {
+ installTarget: "linux",
+ };
+
+ render(
+
+
+
+ );
+
+ expect(screen.getByText("linux")).toBeInTheDocument();
+ });
+
+ it("kubernetes is a valid installation target", () => {
+
+ const TestComponent = () => {
+ const state = useInitialState();
+ return {state.installTarget}
;
+ };
+
+ // Set up window.__INITIAL_STATE__ with valid target
+ global.window.__INITIAL_STATE__ = {
+ installTarget: "kubernetes",
+ };
+
+ render(
+
+
+
+ );
+
+ expect(screen.getByText("kubernetes")).toBeInTheDocument();
+ });
+
+ it("throws error for invalid installation target", () => {
+
+ // Set up window.__INITIAL_STATE__ with invalid target
+ global.window.__INITIAL_STATE__ = {
+ installTarget: "invalid-target",
+ };
+
+ // Mock console.error to prevent error output in tests
+ const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => { });
+
+ expect(() => {
+ render(
+
+ Test
+
+ );
+ }).toThrow("Invalid installation target: invalid-target");
+
+ consoleSpy.mockRestore();
+ });
+ });
+
+ describe("InitialStateProvider", () => {
+ it("provides default values when window.__INITIAL_STATE__ is not available", () => {
+
+ const TestComponent = () => {
+ const state = useInitialState();
+ return (
+
+ {state.title}
+ {state.icon || "no-icon"}
+ {state.installTarget}
+
+ );
+ };
+
+ render(
+
+
+
+ );
+
+ expect(screen.getByTestId("title")).toHaveTextContent("My App");
+ expect(screen.getByTestId("icon")).toHaveTextContent("no-icon");
+ expect(screen.getByTestId("target")).toHaveTextContent("linux");
+ });
+
+ it("uses values from window.__INITIAL_STATE__ when available", () => {
+
+ global.window.__INITIAL_STATE__ = {
+ title: "Custom App Title",
+ icon: "custom-icon.png",
+ installTarget: "kubernetes",
+ };
+
+ const TestComponent = () => {
+ const state = useInitialState();
+ return (
+
+ {state.title}
+ {state.icon}
+ {state.installTarget}
+
+ );
+ };
+
+ render(
+
+
+
+ );
+
+ expect(screen.getByTestId("title")).toHaveTextContent("Custom App Title");
+ expect(screen.getByTestId("icon")).toHaveTextContent("custom-icon.png");
+ expect(screen.getByTestId("target")).toHaveTextContent("kubernetes");
+ });
+
+ it("falls back to defaults for missing properties", () => {
+
+ global.window.__INITIAL_STATE__ = {
+ title: "Partial Config",
+ // icon and installTarget are missing
+ };
+
+ const TestComponent = () => {
+ const state = useInitialState();
+ return (
+
+ {state.title}
+ {state.icon || "no-icon"}
+ {state.installTarget}
+
+ );
+ };
+
+ render(
+
+
+
+ );
+
+ expect(screen.getByTestId("title")).toHaveTextContent("Partial Config");
+ expect(screen.getByTestId("icon")).toHaveTextContent("no-icon");
+ expect(screen.getByTestId("target")).toHaveTextContent("linux");
+ });
+
+ it("handles empty window.__INITIAL_STATE__ object", () => {
+
+ global.window.__INITIAL_STATE__ = {};
+
+ const TestComponent = () => {
+ const state = useInitialState();
+ return (
+
+ {state.title}
+ {state.icon || "no-icon"}
+ {state.installTarget}
+
+ );
+ };
+
+ render(
+
+
+
+ );
+
+ expect(screen.getByTestId("title")).toHaveTextContent("My App");
+ expect(screen.getByTestId("icon")).toHaveTextContent("no-icon");
+ expect(screen.getByTestId("target")).toHaveTextContent("linux");
+ });
+
+ it("renders children correctly", () => {
+
+ render(
+
+ Child Component
+
+ );
+
+ expect(screen.getByTestId("child")).toHaveTextContent("Child Component");
+ });
+ });
+
+ describe("InitialStateContext default value", () => {
+ it("has correct default values", () => {
+ const TestComponent = () => {
+ return (
+
+ {(value) => (
+
+ {value.title}
+ {value.installTarget}
+
+ )}
+
+ );
+ };
+
+ render();
+
+ expect(screen.getByTestId("title")).toHaveTextContent("My App");
+ expect(screen.getByTestId("target")).toHaveTextContent("linux");
+ });
+ });
+});
diff --git a/web/src/global.d.ts b/web/src/global.d.ts
index e67927c531..65b7616a82 100644
--- a/web/src/global.d.ts
+++ b/web/src/global.d.ts
@@ -1,15 +1,15 @@
// src/global.d.ts
export { };
+// Initial state is how the server can pass initial data to the client.
+interface InitialState {
+ icon?: string;
+ title?: string;
+ installTarget?: string;
+}
+
declare global {
interface Window {
__INITIAL_STATE__?: InitialState;
}
-
- // Initial state is how the server can pass initial data to the client.
- interface InitialState {
- icon?: string;
- title?: string;
- installTarget?: string;
- }
}
diff --git a/web/src/test/setup.tsx b/web/src/test/setup.tsx
index 05b705eee3..ee616551c3 100644
--- a/web/src/test/setup.tsx
+++ b/web/src/test/setup.tsx
@@ -3,13 +3,16 @@ import { QueryClientProvider } from "@tanstack/react-query";
import { render, RenderOptions } from "@testing-library/react";
import { createMemoryRouter, RouterProvider, RouteObject } from "react-router-dom";
import { vi } from "vitest";
+import { JSX } from "react/jsx-runtime";
+import { InitialState } from "../types";
+import { InstallationTarget } from "../types/installation-target";
import { createQueryClient } from "../query-client";
import { LinuxConfigContext, LinuxConfig } from "../contexts/LinuxConfigContext";
import { KubernetesConfigContext, KubernetesConfig } from "../contexts/KubernetesConfigContext";
import { SettingsContext, Settings } from "../contexts/SettingsContext";
-import { WizardContext, WizardMode, WizardTarget } from "../contexts/WizardModeContext";
-import { BrandingContext } from "../contexts/BrandingContext";
+import { WizardContext, WizardMode } from "../contexts/WizardModeContext";
+import { InitialStateContext } from "../contexts/InitialStateContext";
import { AuthContext } from "../contexts/AuthContext";
// Mock localStorage for tests
@@ -30,10 +33,7 @@ interface MockProviderProps {
children: React.ReactNode;
queryClient: ReturnType;
contexts: {
- brandingContext: {
- title: string;
- icon?: string;
- };
+ initialStateContext: InitialState
linuxConfigContext: {
config: LinuxConfig;
updateConfig: (newConfig: Partial) => void;
@@ -49,7 +49,7 @@ interface MockProviderProps {
updateSettings: (newSettings: Partial) => void;
};
wizardModeContext: {
- target: WizardTarget;
+ target: InstallationTarget;
mode: WizardMode;
text: {
title: string;
@@ -87,19 +87,19 @@ const MockProvider = ({ children, queryClient, contexts }: MockProviderProps) =>
}, [contexts.authContext.token]);
return (
-
-
-
-
-
-
+
+
+
+
+
+
{children}
-
-
-
-
-
-
+
+
+
+
+
+
);
};
@@ -111,7 +111,7 @@ interface RenderWithProvidersOptions extends RenderOptions {
routePath?: string;
authenticated?: boolean;
authToken?: string;
- target?: WizardTarget;
+ target?: InstallationTarget;
};
wrapper?: React.ComponentType<{ children: React.ReactNode }>;
}
@@ -121,7 +121,7 @@ export const renderWithProviders = (
options: RenderWithProvidersOptions = {},
) => {
const defaultContextValues: MockProviderProps["contexts"] = {
- brandingContext: { title: "My App" },
+ initialStateContext: { title: "My App", installTarget: options.wrapperProps?.target || "linux" },
linuxConfigContext: {
config: {
adminConsolePort: 8800,
@@ -174,7 +174,7 @@ export const renderWithProviders = (
};
const mergedContextValues: MockProviderProps["contexts"] = {
- brandingContext: { ...defaultContextValues.brandingContext, ...options.wrapperProps?.contextValues?.brandingContext },
+ initialStateContext: { ...defaultContextValues.initialStateContext, ...options.wrapperProps?.contextValues?.initialStateContext },
linuxConfigContext: { ...defaultContextValues.linuxConfigContext, ...options.wrapperProps?.contextValues?.linuxConfigContext },
kubernetesConfigContext: { ...defaultContextValues.kubernetesConfigContext, ...options.wrapperProps?.contextValues?.kubernetesConfigContext },
settingsContext: { ...defaultContextValues.settingsContext, ...options.wrapperProps?.contextValues?.settingsContext },
diff --git a/web/src/types/index.ts b/web/src/types/index.ts
index 8262d1cc43..79d3da7a46 100644
--- a/web/src/types/index.ts
+++ b/web/src/types/index.ts
@@ -1,3 +1,11 @@
+import { InstallationTarget } from './installation-target';
+
+export interface InitialState {
+ title: string;
+ icon?: string;
+ installTarget: InstallationTarget;
+}
+
export interface InfraStatusResponse {
components: InfraComponent[];
status: InfraStatus;
diff --git a/web/src/types/installation-target.ts b/web/src/types/installation-target.ts
new file mode 100644
index 0000000000..e8acab3a23
--- /dev/null
+++ b/web/src/types/installation-target.ts
@@ -0,0 +1,7 @@
+export const installationTargets = ['linux', 'kubernetes'] as const;
+
+export type InstallationTarget = typeof installationTargets[number];
+
+export function isInstallationTarget(value: string): value is InstallationTarget {
+ return (installationTargets as readonly string[]).includes(value);
+}