kandev/apps/web/components/azure-devops/azure-devops-settings.test.tsx

import { cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { StateProvider } from "@/components/state-provider";
import { SettingsSaveProvider } from "@/components/settings/settings-save-provider";
import type { AzureDevOpsConfig } from "@/lib/types/azure-devops";

const mocks = vi.hoisted(() => ({
  deleteConfig: vi.fn(),
  getConfig: vi.fn(),
  setConfig: vi.fn(),
  testConnection: vi.fn(),
  toast: vi.fn(),
}));

vi.mock("@/components/toast-provider", () => ({
  useToast: () => ({ toast: mocks.toast }),
}));
vi.mock("@/hooks/domains/integrations/use-integration-availability", () => ({
  INTEGRATION_STATUS_REFRESH_MS: 100_000,
}));
vi.mock("@/hooks/domains/azure-devops/use-azure-devops-projects", () => ({
  useAzureDevOpsProjects: () => ({
    data: [{ id: "project-old", name: "Old project", url: "old" }],
    loading: false,
    error: null,
    refresh: vi.fn(),
  }),
}));
vi.mock("@/lib/api/domains/azure-devops-api", () => ({
  deleteAzureDevOpsConfig: mocks.deleteConfig,
  getAzureDevOpsConfig: mocks.getConfig,
  setAzureDevOpsConfig: mocks.setConfig,
  testAzureDevOpsConnection: mocks.testConnection,
}));
vi.mock("@/components/azure-devops/azure-devops-watch-settings", () => ({
  AzureDevOpsWatchSettings: () => (
    <>
      <section>
        <h3>Pull-request watches</h3>
      </section>
      <section>
        <h3>Work-item watches</h3>
      </section>
    </>
  ),
}));
vi.mock("@/components/azure-devops/azure-devops-quick-actions", () => ({
  AzureDevOpsQuickActionsSection: () => (
    <section>
      <h3>Quick actions</h3>
    </section>
  ),
}));
vi.mock("@/components/azure-devops/azure-devops-default-queries", () => ({
  AzureDevOpsDefaultQueriesSection: () => (
    <section>
      <h3>Default queries</h3>
    </section>
  ),
}));

import { AzureDevOpsConnectionSection, AzureDevOpsIntegrationPage } from "./azure-devops-settings";

const OLD_ORGANIZATION_URL = "https://dev.azure.com/old-org";

const config: AzureDevOpsConfig = {
  workspaceId: "workspace-a",
  organizationUrl: OLD_ORGANIZATION_URL,
  defaultProjectId: "project-old",
  defaultProjectName: "Old project",
  authMethod: "pat",
  hasSecret: true,
  lastOk: true,
  createdAt: "2026-07-18T00:00:00Z",
  updatedAt: "2026-07-18T00:00:00Z",
};

beforeEach(() => {
  vi.clearAllMocks();
  mocks.getConfig.mockResolvedValue(config);
  mocks.setConfig.mockResolvedValue({
    ...config,
    organizationUrl: "https://dev.azure.com/new-org",
    defaultProjectId: undefined,
    defaultProjectName: undefined,
  });
});

afterEach(cleanup);

describe("AzureDevOpsConnectionSection", () => {
  it("links to the organization PAT page and explains the required read scopes", async () => {
    render(<AzureDevOpsConnectionSection workspaceId="workspace-a" />);

    const patHelpButton = await screen.findByRole("button", {
      name: "How to create a personal access token",
    });
    expect(screen.queryByTestId("azure-devops-pat-help")).toBeNull();
    fireEvent.focus(patHelpButton);

    const patHelp = await screen.findByTestId("azure-devops-pat-help");
    const [createTokenLink] = within(patHelp).getAllByRole("link", {
      name: "Create personal access token",
    });

    expect(createTokenLink.getAttribute("href")).toBe(
      `${OLD_ORGANIZATION_URL}/_usersSettings/tokens`,
    );
    expect(patHelp.textContent).toContain("Custom defined");
    // The scope step is a `<Trans>` whose `<n>` indices address the JSX children
    // positionally, so a reflow of those children silently reassembles the
    // sentence into fragments. Assert the whole reconstructed clause, not just
    // that the two scope names appear somewhere.
    expect(patHelp.textContent).toContain("Under Work Items, check Read & write.");
    expect(patHelp.textContent).toContain("Under Code, check Read.");
    expect(patHelp.textContent).toContain("Leave all other scopes unchecked.");
  });

  it("does not create a token link from a non-Azure organization URL", async () => {
    render(<AzureDevOpsConnectionSection workspaceId="workspace-a" />);

    const organization = await screen.findByTestId("azure-devops-organization");
    await waitFor(() =>
      expect((organization as HTMLInputElement).value).toBe(OLD_ORGANIZATION_URL),
    );
    fireEvent.change(organization, { target: { value: "https://example.com/old-org" } });
    fireEvent.focus(screen.getByRole("button", { name: "How to create a personal access token" }));

    const patHelp = screen.getByTestId("azure-devops-pat-help");
    expect(
      within(patHelp).queryByRole("link", { name: "Create personal access token" }),
    ).toBeNull();
    expect(patHelp.textContent).toContain("Enter a valid organization URL");
  });

  it("removes trailing slashes before saving an organization URL", async () => {
    render(<AzureDevOpsConnectionSection workspaceId="workspace-a" />);
    const organization = await screen.findByTestId("azure-devops-organization");
    await waitFor(() =>
      expect((organization as HTMLInputElement).value).toBe(OLD_ORGANIZATION_URL),
    );

    fireEvent.change(organization, { target: { value: "https://dev.azure.com/old-org/" } });
    fireEvent.click(screen.getByTestId("azure-devops-save-button"));

    await waitFor(() => expect(mocks.setConfig).toHaveBeenCalledTimes(1));
    expect(mocks.setConfig).toHaveBeenCalledWith("workspace-a", {
      organizationUrl: OLD_ORGANIZATION_URL,
      defaultProjectId: "project-old",
      defaultProjectName: "Old project",
      authMethod: "pat",
      pat: undefined,
    });
  });

  it("omits a project selected for the previous organization", async () => {
    render(<AzureDevOpsConnectionSection workspaceId="workspace-a" />);
    const organization = await screen.findByTestId("azure-devops-organization");
    await waitFor(() =>
      expect((organization as HTMLInputElement).value).toBe(OLD_ORGANIZATION_URL),
    );

    fireEvent.change(organization, { target: { value: "https://dev.azure.com/new-org" } });
    fireEvent.change(screen.getByTestId("azure-devops-pat"), { target: { value: "new-pat" } });
    fireEvent.click(screen.getByTestId("azure-devops-save-button"));

    await waitFor(() => expect(mocks.setConfig).toHaveBeenCalledTimes(1));
    expect(mocks.setConfig).toHaveBeenCalledWith("workspace-a", {
      organizationUrl: "https://dev.azure.com/new-org",
      defaultProjectId: undefined,
      defaultProjectName: undefined,
      authMethod: "pat",
      pat: "new-pat",
    });
  });
});

describe("AzureDevOpsIntegrationPage", () => {
  it("matches GitHub's analogous section order and includes default queries", async () => {
    render(
      <StateProvider>
        <SettingsSaveProvider>
          <AzureDevOpsIntegrationPage workspaceId="workspace-a" />
        </SettingsSaveProvider>
      </StateProvider>,
    );

    await screen.findByText("Azure DevOps integration");
    const sectionTitles = screen
      .getAllByRole("heading")
      .map((heading) => heading.textContent)
      .filter((title) =>
        [
          "Azure DevOps integration",
          "Pull-request watches",
          "Work-item watches",
          "Quick actions",
          "Default queries",
        ].includes(title ?? ""),
      );
    expect(sectionTitles).toEqual([
      "Azure DevOps integration",
      "Pull-request watches",
      "Work-item watches",
      "Quick actions",
      "Default queries",
    ]);
  });
});