test(deployments): add comprehensive frontend test suite for WXO deployments (#12535)

* test(deployments): add unit tests for all deployment API query and mutation hooks

16 test files covering deployment queries, mutations, provider accounts,
execution hooks, and env var detection (59 tests total).

* test(deployments): add stepper context create-mode tests and expand edit-mode/tool-naming coverage

Step 2 of the frontend deployment test plan — 63 new tests (93 total)
covering create-mode payload builders, step validation, provider
selection, multi-flow scenarios, partial update payloads, detach/re-attach
flows, and tool naming edge cases.

* test(deployments): add component rendering tests for Step 3 (163 tests, 10 files)

Covers tables, stepper steps, connection panel, and modals with data-testid additions to source components for reliable targeting.

* test(deployments): add custom hook unit tests for Step 4 (121 tests, 7 files)

Covers useErrorAlert, useProviderFilter, useNavigateToTest, useDeleteWithConfirmation,
useTestDeploymentModal, useDeploymentChat (polling, thread_id, timeouts, tool traces),
and watsonx-result-parsers (extractText, extractToolTraces, extractThreadId).

* test(deployments): add deploy button and choice dialog unit tests for Step 5 (76 tests, 3 files)

- deploy-button.test.tsx (12 tests): feature-flag rendering, disabled states
  (no flow/preparing/dialog open), handleDeploy click, animate-pulse on icon
- deploy-choice-dialog/index.test.tsx (30 tests): phase transitions
  (provider → deployments → review → update), auto-select single attachment,
  provider key mapping, patchSnapshot args, update/error flows, onUpdateComplete
- deploy-choice-dialog/hooks/use-prepare-deploy.test.ts (34 tests): handleDeploy
  save/snapshot/provider fetch, no-flow bail-out, deployModal vs choiceDialog
  branching, error handling, handleChooseNew, handleUpdateComplete, resetChoiceState

* test(deployments): add E2E Playwright tests for Step 6 (28 tests, 5 files)

- deployments-page.spec.ts: page nav, empty/loaded states (5 tests)
- deployment-create.spec.ts: full create wizard, POST, deploy status (6 tests)
- deployment-edit.spec.ts: edit mode, PATCH, cancel (5 tests)
- deployment-providers.spec.ts: add/delete providers, confirmation (6 tests)
- deployment-test-modal.spec.ts: chat, polling, multi-turn, reset (6 tests)

Add shared deployment-mocks.ts for mock data reuse across all specs.

Add data-testid to stepper modal title, add-provider modal title, and
test-deployment modal title to avoid strict-mode selector violations.

Add data-testid to provider radio items in step-provider.tsx.

Set LANGFLOW_FEATURE_WXO_DEPLOYMENTS=true in CI workflow env.

* fix(tests): update deployment E2E mocks for wxo-fe API changes

- provider_accounts field rename: { providers } → { provider_accounts }
- ProviderAccount.provider_url → ProviderAccount.url
- Execution endpoints moved to deployment-scoped URLs:
  POST /deployments/executions → /deployments/{id}/executions
  GET /deployments/executions/{exec_id} → /deployments/{id}/executions/{exec_id}
- Remove deployment_id from POST execution request body (now in URL path)

* fix(tests): update unit tests for wxo-fe API shape changes

- ProviderAccount: provider_url → url, removed provider_tenant_id
- Provider list response: { providers } → { provider_accounts }
- ProviderCredentials: provider_url → url
- Deployment payload: spec.{name,description,type} → top-level fields
- Provider data: operations → add_flows/upsert_flows/remove_flows
- Connections: raw_payloads[].environment_variables → connections[].credentials
- DeploymentConfigItem: { id, name } → { app_id, connection_id }

* fix(tests): align frontend tests with revised deployments API shape

Update unit tests, E2E mocks, and the ProviderAccountListResponse type
to match the API changes from the v1 deployments revision (#12478):
- execution endpoints now use deployment_id in URL path
- getExecution uses deployment_id + execution_id (no provider_id)
- provider accounts response key changed to provider_accounts
- deployment configs response wrapped in provider_data
- deploy-choice-dialog now uses useGetDeploymentAttachments

* fix(ci): read LANGFLOW_FEATURE_WXO_DEPLOYMENTS from process.env fallback

Vite config only read feature flags from the .env file via dotenv,
ignoring CI workflow environment variables. This caused all 28
deployment E2E tests to fail because the flag was never enabled.

* fix(tests): add missing resource_key to deployment mapper test mocks

The SimpleNamespace mocks in TestCreateResponse and TestMapperUpdateResult
were missing the resource_key attribute now required by the mapper.

* test(deployments): add E2E tests for type-to-confirm deployment deletion

Adds testid to the delete dropdown item and four Playwright tests covering:
- dialog opens on delete action
- confirm button disabled until name matches exactly
- confirming with correct name calls DELETE /api/v1/deployments/{id}
- cancel dismisses without calling DELETE

Author: viktoravelino

.github/workflows/typescript_test.yml

@@ -71,6 +71,7 @@ env:
   # This path is used for caching across workflows
   PLAYWRIGHT_BROWSERS_PATH: "ms-playwright"
   PLAYWRIGHT_VERSION: "1.57.0"
+  LANGFLOW_FEATURE_WXO_DEPLOYMENTS: "true"
 
 jobs:
   determine-test-suite:

src/backend/tests/unit/api/v1/test_deployment_description_and_type.py

@@ -126,6 +126,7 @@ def test_surfaces_description_from_db_row(self):
         provider_account_id = uuid4()
         row = SimpleNamespace(
             id=uuid4(),
+            resource_key="rk-1",
             deployment_provider_account_id=provider_account_id,
             name="deploy",
             description="my description",
@@ -145,6 +146,7 @@ def test_description_none_when_not_set(self):
         provider_account_id = uuid4()
         row = SimpleNamespace(
             id=uuid4(),
+            resource_key="rk-1",
             deployment_provider_account_id=provider_account_id,
             name="deploy",
             description=None,
@@ -164,6 +166,7 @@ def test_uses_enum_type_from_row(self):
         provider_account_id = uuid4()
         row = SimpleNamespace(
             id=uuid4(),
+            resource_key="rk-1",
             deployment_provider_account_id=provider_account_id,
             name="deploy",
             description=None,
@@ -190,6 +193,7 @@ def test_reads_description_from_row(self):
         provider_account_id = uuid4()
         row = SimpleNamespace(
             id=uuid4(),
+            resource_key="rk-1",
             deployment_provider_account_id=provider_account_id,
             name="deploy",
             description="persisted desc",
@@ -210,6 +214,7 @@ def test_description_none_from_row(self):
         provider_account_id = uuid4()
         row = SimpleNamespace(
             id=uuid4(),
+            resource_key="rk-1",
             deployment_provider_account_id=provider_account_id,
             name="deploy",
             description=None,

src/frontend/src/components/core/flowToolbarComponent/components/__tests__/deploy-button.test.tsx

@@ -0,0 +1,191 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+// ---------------------------------------------------------------------------
+// Mocks
+// ---------------------------------------------------------------------------
+
+let mockCurrentFlowId: string | undefined = "flow-1";
+let mockIsPreparingDeploy = false;
+let mockChoiceDialogOpen = false;
+let mockDeployModalOpen = false;
+const mockHandleDeploy = jest.fn();
+const mockSetChoiceDialogOpen = jest.fn();
+const mockSetDeployModalOpen = jest.fn();
+
+jest.mock("@/customization/feature-flags", () => ({
+  ENABLE_DEPLOYMENTS: true,
+}));
+
+jest.mock("../deploy-choice-dialog/hooks/use-prepare-deploy", () => ({
+  usePrepareDeploy: () => ({
+    currentFlowId: mockCurrentFlowId,
+    isPreparingDeploy: mockIsPreparingDeploy,
+    choiceDialogOpen: mockChoiceDialogOpen,
+    setChoiceDialogOpen: mockSetChoiceDialogOpen,
+    deployModalOpen: mockDeployModalOpen,
+    setDeployModalOpen: mockSetDeployModalOpen,
+    providers: [],
+    pendingSnapshotVersionId: "",
+    initialVersionByFlow: new Map(),
+    stepperInitialProvider: undefined,
+    stepperInitialInstance: undefined,
+    handleDeploy: mockHandleDeploy,
+    handleChooseNew: jest.fn(),
+    handleUpdateComplete: jest.fn(),
+    resetChoiceState: jest.fn(),
+  }),
+}));
+
+jest.mock(
+  "@/pages/MainPage/pages/deploymentsPage/hooks/use-navigate-to-test",
+  () => ({
+    useNavigateToTest: () => jest.fn(),
+  }),
+);
+
+jest.mock("../deploy-choice-dialog", () => ({
+  __esModule: true,
+  default: () => null,
+}));
+
+jest.mock(
+  "@/pages/MainPage/pages/deploymentsPage/components/deployment-stepper-modal",
+  () => ({
+    __esModule: true,
+    default: () => null,
+  }),
+);
+
+// Override global mock to forward className so animate-pulse can be tested
+jest.mock("@/components/common/genericIconComponent", () => ({
+  __esModule: true,
+  default: ({ name, className }: { name: string; className?: string }) => (
+    <span data-testid={`icon-${name}`} className={className ?? ""} />
+  ),
+}));
+
+import DeployButton from "../deploy-button";
+
+// ---------------------------------------------------------------------------
+// Setup
+// ---------------------------------------------------------------------------
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  mockCurrentFlowId = "flow-1";
+  mockIsPreparingDeploy = false;
+  mockChoiceDialogOpen = false;
+  mockDeployModalOpen = false;
+});
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe("DeployButton — rendering", () => {
+  it("renders the deploy button with data-testid", () => {
+    render(<DeployButton />);
+
+    expect(screen.getByTestId("deploy-btn-flow")).toBeInTheDocument();
+  });
+
+  it("renders Deploy text label", () => {
+    render(<DeployButton />);
+
+    expect(screen.getByText("Deploy")).toBeInTheDocument();
+  });
+
+  it("renders the Rocket icon", () => {
+    render(<DeployButton />);
+
+    expect(screen.getByTestId("icon-Rocket")).toBeInTheDocument();
+  });
+});
+
+describe("DeployButton — disabled states", () => {
+  it("is enabled when currentFlowId is set and nothing is busy", () => {
+    render(<DeployButton />);
+
+    expect(screen.getByTestId("deploy-btn-flow")).not.toBeDisabled();
+  });
+
+  it("is disabled when currentFlowId is undefined", () => {
+    mockCurrentFlowId = undefined;
+    render(<DeployButton />);
+
+    expect(screen.getByTestId("deploy-btn-flow")).toBeDisabled();
+  });
+
+  it("is disabled when isPreparingDeploy is true", () => {
+    mockIsPreparingDeploy = true;
+    render(<DeployButton />);
+
+    expect(screen.getByTestId("deploy-btn-flow")).toBeDisabled();
+  });
+
+  it("is disabled when choiceDialogOpen is true", () => {
+    mockChoiceDialogOpen = true;
+    render(<DeployButton />);
+
+    expect(screen.getByTestId("deploy-btn-flow")).toBeDisabled();
+  });
+
+  it("is disabled when deployModalOpen is true", () => {
+    mockDeployModalOpen = true;
+    render(<DeployButton />);
+
+    expect(screen.getByTestId("deploy-btn-flow")).toBeDisabled();
+  });
+});
+
+describe("DeployButton — click interaction", () => {
+  it("calls handleDeploy when button is clicked", async () => {
+    const user = userEvent.setup();
+    render(<DeployButton />);
+
+    await user.click(screen.getByTestId("deploy-btn-flow"));
+
+    expect(mockHandleDeploy).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not call handleDeploy when disabled with no currentFlowId", async () => {
+    const user = userEvent.setup();
+    mockCurrentFlowId = undefined;
+    render(<DeployButton />);
+
+    await user.click(screen.getByTestId("deploy-btn-flow"));
+
+    expect(mockHandleDeploy).not.toHaveBeenCalled();
+  });
+
+  it("does not call handleDeploy when disabled while preparing", async () => {
+    const user = userEvent.setup();
+    mockIsPreparingDeploy = true;
+    render(<DeployButton />);
+
+    await user.click(screen.getByTestId("deploy-btn-flow"));
+
+    expect(mockHandleDeploy).not.toHaveBeenCalled();
+  });
+});
+
+describe("DeployButton — loading pulse", () => {
+  it("applies animate-pulse to Rocket icon when isPreparingDeploy is true", () => {
+    mockIsPreparingDeploy = true;
+    render(<DeployButton />);
+
+    expect(screen.getByTestId("icon-Rocket").className).toContain(
+      "animate-pulse",
+    );
+  });
+
+  it("does not apply animate-pulse when isPreparingDeploy is false", () => {
+    mockIsPreparingDeploy = false;
+    render(<DeployButton />);
+
+    expect(screen.getByTestId("icon-Rocket").className).not.toContain(
+      "animate-pulse",
+    );
+  });
+});