@calcom/atoms 2.7.2 → 2.8.1

package/src/event-types/__tests__/event-type-list-item.test.tsx

@@ -1,196 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { vi } from "vitest";
-import { EventTypeListItem } from "../components/event-type-list-item";
-import type { AtomEventTypeListItem } from "../types";
-
-// Mock auto-animate
-vi.mock("@formkit/auto-animate/react", () => ({
-  useAutoAnimate: () => [null],
-}));
-
-// Mock Next.js Link
-vi.mock("next/link", () => ({
-  __esModule: true,
-  default: ({ children, href }: { children: React.ReactNode; href: string }) => <a href={href}>{children}</a>,
-}));
-
-// Mock useLocale
-vi.mock("../../lib/useLocale", () => ({
-  useLocale: () => ({
-    t: (key: string) => key,
-  }),
-}));
-
-// Mock toast
-vi.mock("../../src/components/ui/show-toast", () => ({
-  showToast: vi.fn(),
-}));
-
-// Mock dialog components
-vi.mock("../../src/components/ui/dialog", () => ({
-  Dialog: ({ children, open }: { children: React.ReactNode; open: boolean }) =>
-    open ? <div data-testid="dialog">{children}</div> : null,
-}));
-
-vi.mock("../../src/components/ui/confirmation-dialog-content", () => ({
-  ConfirmationDialogContent: ({
-    children,
-    onConfirm,
-  }: {
-    children: React.ReactNode;
-    onConfirm: () => void;
-  }) => (
-    <div data-testid="confirmation-dialog">
-      {children}
-      <button onClick={onConfirm} data-testid="confirm-delete">
-        Confirm
-      </button>
-    </div>
-  ),
-}));
-
-describe("EventTypeListItem", () => {
-  const mockEventType: AtomEventTypeListItem = {
-    id: 1,
-    title: "30 Min Meeting",
-    slug: "30min",
-    description: "Quick meeting",
-    length: 30,
-    locations: null,
-    logo: "/test-logo.svg",
-  };
-
-  const mockDeleteFunction = vi.fn();
-
-  const renderComponent = ({
-    eventType = mockEventType,
-    deleteFunction = mockDeleteFunction,
-    isDeletable = true,
-    getEventTypeUrl,
-  }: {
-    eventType?: typeof mockEventType;
-    deleteFunction?: typeof mockDeleteFunction;
-    isDeletable?: boolean;
-    getEventTypeUrl?: (id: number) => string;
-  } = {}) => {
-    return render(
-      <EventTypeListItem
-        eventType={eventType}
-        deleteFunction={deleteFunction}
-        isDeletable={isDeletable}
-        getEventTypeUrl={getEventTypeUrl}
-      />
-    );
-  };
-
-  it("should render event type details correctly", () => {
-    renderComponent();
-
-    expect(screen.getByText("30 Min Meeting")).toBeInTheDocument();
-    expect(screen.getByText("Quick meeting")).toBeInTheDocument();
-    expect(screen.getByText(/30m/)).toBeInTheDocument();
-  });
-
-  it("should render as link when getEventTypeUrl is provided", () => {
-    const getEventTypeUrl = (id: number) => `/event-types/${id}`;
-    renderComponent({ getEventTypeUrl });
-
-    const link = screen.getByRole("link", { name: /30 Min Meeting/i });
-    expect(link).toHaveAttribute("href", "/event-types/1");
-  });
-
-  it("should render without link when getEventTypeUrl is not provided", () => {
-    renderComponent();
-
-    const links = screen.queryAllByRole("link");
-    expect(links.length).toBe(0);
-  });
-
-  it("should display event type without description when description is null", () => {
-    renderComponent({
-      eventType: { ...mockEventType, description: null },
-    });
-
-    expect(screen.getByText("30 Min Meeting")).toBeInTheDocument();
-    expect(screen.queryByText("Quick meeting")).not.toBeInTheDocument();
-    expect(screen.getByText(/30m/)).toBeInTheDocument();
-  });
-
-  it("should render dropdown menu trigger", () => {
-    renderComponent();
-
-    const dropdownTrigger = screen.getByTestId("event-type-options-1");
-    expect(dropdownTrigger).toBeInTheDocument();
-  });
-
-  it("should render with unique data-testid based on event type ID", () => {
-    const customEventType = {
-      ...mockEventType,
-      id: 999,
-    };
-
-    renderComponent({ eventType: customEventType });
-
-    const dropdownTrigger = screen.getByTestId("event-type-options-999");
-    expect(dropdownTrigger).toBeInTheDocument();
-  });
-
-  it("should display different event durations correctly", () => {
-    const shortEvent = { ...mockEventType, length: 15 };
-    const { rerender } = renderComponent({ eventType: shortEvent });
-
-    expect(screen.getByText(/15m/)).toBeInTheDocument();
-
-    const longEvent = { ...mockEventType, length: 120 };
-    rerender(
-      <EventTypeListItem eventType={longEvent} deleteFunction={mockDeleteFunction} isDeletable={true} />
-    );
-
-    expect(screen.getByText(/2h/)).toBeInTheDocument();
-  });
-
-  it("should render event type with long title without breaking layout", () => {
-    const longTitleEvent = {
-      ...mockEventType,
-      title: "This is a very long event type title that should be truncated properly in the UI",
-    };
-
-    renderComponent({ eventType: longTitleEvent });
-
-    expect(
-      screen.getByText("This is a very long event type title that should be truncated properly in the UI")
-    ).toBeInTheDocument();
-    expect(screen.getByText("Quick meeting")).toBeInTheDocument();
-  });
-
-  it("should render with locations as null", () => {
-    const eventType: AtomEventTypeListItem = {
-      ...mockEventType,
-      locations: null,
-    };
-
-    renderComponent({ eventType });
-    expect(screen.getByText("30 Min Meeting")).toBeInTheDocument();
-  });
-
-  it("should render without logo", () => {
-    const eventType: AtomEventTypeListItem = {
-      ...mockEventType,
-      logo: undefined,
-    };
-
-    renderComponent({ eventType });
-    expect(screen.getByText("30 Min Meeting")).toBeInTheDocument();
-  });
-
-  it("should render with locations object", () => {
-    const eventType: AtomEventTypeListItem = {
-      ...mockEventType,
-      locations: [{ type: "integrations:zoom" }],
-      logo: "/app-store/zoomvideo/icon.svg",
-    };
-
-    renderComponent({ eventType });
-    expect(screen.getByText("30 Min Meeting")).toBeInTheDocument();
-  });
-});

package/src/event-types/__tests__/format-event-type-duration.test.ts

@@ -1,47 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { formatEventTypeDuration } from "../lib/format-event-type-duration";
-
-describe("formatEventTypeDuration", () => {
-  it("should format single digit minutes", () => {
-    expect(formatEventTypeDuration(5)).toBe("5m");
-  });
-
-  it("should format double digit minutes", () => {
-    expect(formatEventTypeDuration(15)).toBe("15m");
-    expect(formatEventTypeDuration(30)).toBe("30m");
-    expect(formatEventTypeDuration(45)).toBe("45m");
-  });
-
-  it("should format edge case at 59 minutes", () => {
-    expect(formatEventTypeDuration(59)).toBe("59m");
-  });
-
-  it("should handle edge case at 61 minutes", () => {
-    expect(formatEventTypeDuration(61)).toBe("1h 1m");
-  });
-
-  it("should format single hour", () => {
-    expect(formatEventTypeDuration(60)).toBe("1h");
-  });
-
-  it("should format multiple hours", () => {
-    expect(formatEventTypeDuration(120)).toBe("2h");
-    expect(formatEventTypeDuration(180)).toBe("3h");
-    expect(formatEventTypeDuration(240)).toBe("4h");
-  });
-
-  it("should format hours with minutes", () => {
-    expect(formatEventTypeDuration(75)).toBe("1h 15m");
-    expect(formatEventTypeDuration(150)).toBe("2h 30m");
-    expect(formatEventTypeDuration(195)).toBe("3h 15m");
-  });
-
-  it("should handle 1 minute", () => {
-    expect(formatEventTypeDuration(1)).toBe("1m");
-  });
-
-  it("should handle zero minutes", () => {
-    expect(formatEventTypeDuration(0)).toBe("0m");
-  });
-});

package/src/event-types/components/__tests__/children-event-type-select.test.tsx

@@ -1,291 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-import { render, screen } from "@testing-library/react";
-import React from "react";
-import { describe, expect, it, vi } from "vitest";
-
-import { MembershipRole } from "../../../contracts";
-import type { ChildrenEventType } from "../children-event-type-select";
-
-// --- Mocks ---
-// ChildrenEventTypeSelect imports atoms-internal UI primitives (./src/components/ui/*),
-// not @calcom/ui. We mock the atoms-internal modules directly so the test exercises
-// the component's logic without dragging in real Radix/auto-animate dependencies.
-
-vi.mock("@formkit/auto-animate/react", () => ({
-  useAutoAnimate: () => [React.createRef()],
-}));
-
-vi.mock("../../../hooks/use-atoms-locale", () => ({
-  useAtomsLocale: () => ({ t: (key: string) => key }),
-}));
-
-vi.mock("../../../vendor/booker-url", () => ({
-  getBookerBaseUrlSync: () => "https://cal.com",
-}));
-
-vi.mock("../../../src/components/ui/avatar", () => ({
-  Avatar: ({ alt }: { alt: string }) => <span data-testid="avatar">{alt}</span>,
-}));
-
-vi.mock("../../../src/components/ui/badge", () => ({
-  Badge: ({ children }: { children: React.ReactNode }) => <span data-testid="badge">{children}</span>,
-}));
-
-vi.mock("../../../src/components/ui/button", () => ({
-  Button: ({
-    children,
-    onClick,
-    StartIcon,
-    href,
-    "data-testid": dataTestId,
-  }: {
-    children?: React.ReactNode;
-    onClick?: () => void;
-    StartIcon?: string;
-    href?: string;
-    "data-testid"?: string;
-  }) => (
-    <button onClick={onClick} data-testid={dataTestId || `btn-${StartIcon}`} data-href={href}>
-      {children}
-    </button>
-  ),
-}));
-
-vi.mock("../../../src/components/ui/button-group", () => ({
-  ButtonGroup: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-}));
-
-vi.mock("../../../src/components/ui/select", () => ({
-  Select: ({ value, onChange }: { value: unknown[]; onChange: (val: unknown[], meta: unknown) => void }) => (
-    <button
-      type="button"
-      data-testid="mock-select"
-      data-value-count={Array.isArray(value) ? value.length : 0}
-      onClick={() => {
-        onChange([], {
-          action: "select-option",
-          option: makeChild(999, { name: "New Child", email: "new@test.com" }),
-        });
-      }}
-    />
-  ),
-}));
-
-vi.mock("../../../src/components/ui/switch", () => ({
-  Switch: ({
-    checked,
-    onCheckedChange,
-    name,
-  }: {
-    checked: boolean;
-    onCheckedChange: (val: boolean) => void;
-    name: string;
-  }) => (
-    <input
-      type="checkbox"
-      data-testid={`switch-${name}`}
-      checked={checked}
-      onChange={(e) => onCheckedChange(e.target.checked)}
-    />
-  ),
-}));
-
-vi.mock("../../../src/components/ui/tooltip", () => ({
-  Tooltip: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-}));
-
-vi.mock("../../../src/lib/utils", () => ({
-  cn: (...args: unknown[]) => args.filter(Boolean).join(" "),
-}));
-
-// --- Helpers ---
-
-function makeChild(
-  id: number,
-  overrides?: Partial<{ name: string; email: string; username: string; hidden: boolean; created: boolean }>
-): ChildrenEventType {
-  return {
-    value: `child-${id}`,
-    label: overrides?.name ?? `Child ${id}`,
-    created: overrides?.created ?? true,
-    owner: {
-      avatar: `avatar-${id}.png`,
-      id,
-      email: overrides?.email ?? `child${id}@test.com`,
-      name: overrides?.name ?? `Child ${id}`,
-      username: overrides?.username ?? `child${id}`,
-      membership: MembershipRole.MEMBER,
-      eventTypeSlugs: ["meeting"],
-      profile: { username: null, id: null, organizationId: null, organization: null, upId: "" },
-    },
-    slug: "meeting",
-    hidden: overrides?.hidden ?? false,
-  };
-}
-
-function makeChildren(count: number): ChildrenEventType[] {
-  return Array.from({ length: count }, (_, i) => makeChild(i));
-}
-
-// --- Tests ---
-
-describe("ChildrenEventTypeSelect", () => {
-  const loadComponent = async () => {
-    const mod = await import("../children-event-type-select");
-    return mod.ChildrenEventTypeSelect;
-  };
-
-  it("renders all child names", async () => {
-    const ChildrenEventTypeSelect = await loadComponent();
-    const items = [makeChild(1), makeChild(2), makeChild(3)];
-
-    render(<ChildrenEventTypeSelect value={items} onChange={() => {}} />);
-
-    expect(screen.getAllByText("Child 1").length).toBeGreaterThanOrEqual(1);
-    expect(screen.getAllByText("Child 2").length).toBeGreaterThanOrEqual(1);
-    expect(screen.getAllByText("Child 3").length).toBeGreaterThanOrEqual(1);
-  });
-
-  it("renders avatar for each child", async () => {
-    const ChildrenEventTypeSelect = await loadComponent();
-    const items = makeChildren(3);
-
-    const { container } = render(<ChildrenEventTypeSelect value={items} onChange={() => {}} />);
-
-    expect(container.querySelectorAll('[data-testid="avatar"]').length).toBe(3);
-  });
-
-  it("renders event URL slug for children with username", async () => {
-    const ChildrenEventTypeSelect = await loadComponent();
-    const items = [makeChild(1, { username: "alice" })];
-
-    render(<ChildrenEventTypeSelect value={items} onChange={() => {}} />);
-
-    expect(screen.getByText("/alice/meeting")).toBeDefined();
-  });
-
-  it("shows 'owner' badge for OWNER membership", async () => {
-    const ChildrenEventTypeSelect = await loadComponent();
-    const child = makeChild(1);
-    child.owner.membership = MembershipRole.OWNER;
-
-    render(<ChildrenEventTypeSelect value={[child]} onChange={() => {}} />);
-
-    expect(screen.getByText("owner")).toBeDefined();
-  });
-
-  it("shows 'member' badge for non-OWNER membership", async () => {
-    const ChildrenEventTypeSelect = await loadComponent();
-    const child = makeChild(1);
-    child.owner.membership = MembershipRole.MEMBER;
-
-    render(<ChildrenEventTypeSelect value={[child]} onChange={() => {}} />);
-
-    expect(screen.getByText("member")).toBeDefined();
-  });
-
-  it("shows 'hidden' badge when child is hidden", async () => {
-    const ChildrenEventTypeSelect = await loadComponent();
-    const items = [makeChild(1, { hidden: true })];
-
-    render(<ChildrenEventTypeSelect value={items} onChange={() => {}} />);
-
-    expect(screen.getByText("hidden")).toBeDefined();
-  });
-
-  it("does not show 'hidden' badge when child is not hidden", async () => {
-    const ChildrenEventTypeSelect = await loadComponent();
-    const items = [makeChild(1, { hidden: false })];
-
-    render(<ChildrenEventTypeSelect value={items} onChange={() => {}} />);
-
-    expect(screen.queryByText("hidden")).toBeNull();
-  });
-
-  it("calls onChange with child removed when delete button is clicked", async () => {
-    const ChildrenEventTypeSelect = await loadComponent();
-    const items = [makeChild(1), makeChild(2), makeChild(3)];
-    const onChange = vi.fn();
-
-    const { container } = render(<ChildrenEventTypeSelect value={items} onChange={onChange} />);
-
-    const deleteButtons = container.querySelectorAll('[data-testid="btn-x"]');
-    expect(deleteButtons.length).toBe(3);
-    (deleteButtons[1] as HTMLElement).click();
-
-    expect(onChange).toHaveBeenCalledTimes(1);
-    const result = onChange.mock.calls[0][0];
-    expect(result.length).toBe(2);
-    expect(result.find((c: ChildrenEventType) => c.owner.id === 2)).toBeUndefined();
-  });
-
-  it("calls onChange with new child appended on select", async () => {
-    const ChildrenEventTypeSelect = await loadComponent();
-    const items = [makeChild(1)];
-    const onChange = vi.fn();
-
-    render(<ChildrenEventTypeSelect value={items} onChange={onChange} />);
-
-    screen.getByTestId("mock-select").click();
-
-    expect(onChange).toHaveBeenCalledTimes(1);
-    const result = onChange.mock.calls[0][0];
-    expect(result.length).toBe(2);
-    expect(result.some((c: ChildrenEventType) => c.owner.id === 999)).toBe(true);
-  });
-
-  it("deduplicates children by owner.id on select", async () => {
-    const ChildrenEventTypeSelect = await loadComponent();
-    const onChange = vi.fn();
-    const items = [makeChild(1), makeChild(999, { name: "Existing 999" })];
-
-    render(<ChildrenEventTypeSelect value={items} onChange={onChange} />);
-
-    screen.getByTestId("mock-select").click();
-
-    expect(onChange).toHaveBeenCalledTimes(1);
-    const result = onChange.mock.calls[0][0];
-    const id999Entries = result.filter((c: ChildrenEventType) => c.owner.id === 999);
-    expect(id999Entries.length).toBe(1);
-  });
-
-  it("renders empty list when value is empty", async () => {
-    const ChildrenEventTypeSelect = await loadComponent();
-
-    const { container } = render(<ChildrenEventTypeSelect value={[]} onChange={() => {}} />);
-
-    expect(container.querySelectorAll("li").length).toBe(0);
-  });
-
-  it("renders without errors for large item counts", async () => {
-    const ChildrenEventTypeSelect = await loadComponent();
-    const items = makeChildren(200);
-
-    expect(() => {
-      render(<ChildrenEventTypeSelect value={items} onChange={() => {}} />);
-    }).not.toThrow();
-  });
-
-  it("toggles hidden state via Switch", async () => {
-    const ChildrenEventTypeSelect = await loadComponent();
-    const items = [makeChild(1, { hidden: false }), makeChild(2, { hidden: true })];
-    const onChange = vi.fn();
-
-    const { container } = render(<ChildrenEventTypeSelect value={items} onChange={onChange} />);
-
-    const switches = container.querySelectorAll('[data-testid="switch-Hidden"]');
-    expect(switches.length).toBe(2);
-
-    const firstSwitch = switches[0] as HTMLInputElement;
-    firstSwitch.click();
-
-    expect(onChange).toHaveBeenCalledTimes(1);
-    const result = onChange.mock.calls[0][0];
-    const child1 = result.find((c: ChildrenEventType) => c.owner.id === 1);
-    expect(child1.hidden).toBe(true);
-    const child2 = result.find((c: ChildrenEventType) => c.owner.id === 2);
-    expect(child2.hidden).toBe(true);
-  });
-});

package/src/event-types/components/assign-all-team-members.tsx

@@ -1,46 +0,0 @@
-// @ts-nocheck — loose FormValues + SettingsToggleClassNames contracts
-"use client";
-
-import { Controller } from "react-hook-form";
-import { SettingsToggle } from "../../components/ui/settings-toggle";
-import type { FormValues } from "../../contracts";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import { cn } from "../../lib/utils";
-
-type SettingsToggleClassNamesLoose = {
-  container?: string;
-  label?: string;
-  children?: string;
-  description?: string;
-};
-
-const AssignAllTeamMembers = ({
-  assignAllTeamMembers,
-  setAssignAllTeamMembers,
-  customClassNames,
-}: {
-  assignAllTeamMembers: boolean;
-  setAssignAllTeamMembers: (active: boolean) => void;
-  customClassNames?: SettingsToggleClassNamesLoose;
-}) => {
-  const { t } = useLocale();
-
-  return (
-    <Controller<FormValues>
-      name="assignAllTeamMembers"
-      render={() => (
-        <SettingsToggle
-          data-testid="assign-all-team-members-toggle"
-          title={t("automatically_add_all_team_members")}
-          labelClassName={cn("mt-[3px] text-sm", customClassNames?.label)}
-          switchContainerClassName={customClassNames?.container}
-          checked={assignAllTeamMembers}
-          onCheckedChange={setAssignAllTeamMembers}
-        />
-      )}
-    />
-  );
-};
-
-export default AssignAllTeamMembers;
-export { AssignAllTeamMembers };