Files
calendar/apps/web/modules/test-setup.ts
T
Rajiv SahalGitHubDevin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>Peer RichelsenHariom Balhara
8c39210a12 fix: scroll issues in Embed (#26583)
* chore: add new view for two step slot selection for embed

* fix: make sure two step slot selection is false by default

* chore: update embed playground to showcase two step slot selection

* chore: add tests

* chore: update embed snippet generator code to include two step slot selection

* chore: update docs

* fix: back button styling

* chore: implement feedback from cubic

* fix: add missing isEnableTwoStepSlotSelectionVisible properties to test mock store

Co-Authored-By: unknown <>

* chore: implement PR feedback

* chore: update slot selection modal

* chore: add prop to hide available times header

* fix: scope two-step slot selection visibility to mobile only

Restores the isMobile check in the timeslot visibility guard to ensure
desktop embeds continue to show the booking UI when two-step slot
selection is enabled. The feature should only hide the timeslot list
on mobile devices.

Addresses Cubic AI review feedback (confidence 9/10).

Co-Authored-By: unknown <>

* fixup: use translations for loading instead of actual word

* fix: type check

* fix: add window.matchMedia mock for jsdom test environment

Co-Authored-By: [email protected] <[email protected]>

* fix: add window.matchMedia mock to packages/testing/src/setupVitest.ts

Co-Authored-By: [email protected] <[email protected]>

* fix: unit tests failing

* add a width style to the two-step slot selection embed container.

* refactor: rename enableTwoStepSlotSelection to useSlotsViewOnSmallScreen

- Rename external-facing embed config option from enableTwoStepSlotSelection to useSlotsViewOnSmallScreen
- Update URL parameter parsing in embed-iframe.ts
- Update type definitions in types.ts and index.d.ts
- Update internal variable names to slotsViewOnSmallScreen for consistency
- Update documentation, playground examples, and tests

Co-Authored-By: [email protected] <[email protected]>

* Add config to prefill all booking fields so that slot has confirm button along with it

* chore: implement PR feedback

* fix: move twoStepSlotSelection embed outside misc-embeds div to fix e2e test

The e2e test was failing because the misc-embeds div content was
intercepting pointer events on mobile viewport. This follows the same
pattern used for skeletonDemo - the embed is now outside misc-embeds
and the div is hidden when testing this namespace.

Co-Authored-By: [email protected] <[email protected]>

* fix: prevent pointer event interception in twoStepSlotSelection embed

Hide heading and note elements and set pointer-events: none on container
elements while keeping pointer-events: auto on the iframe container.
This prevents the container from intercepting clicks on the iframe
during mobile viewport e2e tests.

Co-Authored-By: [email protected] <[email protected]>

* fix: hide all non-essential content for twoStepSlotSelection e2e test

Co-Authored-By: [email protected] <[email protected]>

* fix: disable pointer-events on body for twoStepSlotSelection e2e test

Co-Authored-By: [email protected] <[email protected]>

* fix: remove pointer-events: auto on container to let clicks pass through to iframe

Co-Authored-By: [email protected] <[email protected]>

* fix: explicitly set pointer-events: none on container and inline-embed-container

Co-Authored-By: [email protected] <[email protected]>

* fix: also set pointer-events: none on html element to prevent interception

Co-Authored-By: [email protected] <[email protected]>

* fix: make .place div fill viewport for twoStepSlotSelection e2e test

Co-Authored-By: [email protected] <[email protected]>

* fix: failing embed tests

* fixup

* fixup fixup

* fix: failing tests

* fix: update checks for verifying prefilled date

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Peer Richelsen <[email protected]>
Co-authored-by: Hariom Balhara <[email protected]>
2026-01-21 15:44:33 -03:00

218 lines
4.6 KiB
TypeScript

import matchers from "@testing-library/jest-dom/matchers";
import React from "react";
import ResizeObserver from "resize-observer-polyfill";
import { vi, afterEach, expect } from "vitest";
global.React = React;
global.ResizeObserver = ResizeObserver;
expect.extend(matchers);
Object.defineProperty(window, "matchMedia", {
writable: true,
value: vi.fn().mockImplementation((query: string) => ({
matches: false,
media: query,
onchange: null,
addListener: vi.fn(),
removeListener: vi.fn(),
addEventListener: vi.fn(),
removeEventListener: vi.fn(),
dispatchEvent: vi.fn(),
})),
});
afterEach(() => {
vi.resetAllMocks();
});
// Mock all modules that are used in multiple tests for modules
// We don't intend to provide the mock implementation here. They should be provided by respective tests.
// But it makes it super easy to start testing any module view without worrying about mocking the dependencies.
vi.mock("next-auth/react", () => ({
useSession: vi.fn(),
}));
vi.mock("next/navigation", () => ({
useRouter: vi.fn().mockReturnValue({
replace: vi.fn(),
}),
usePathname: vi.fn().mockReturnValue("/settings/billing"),
}));
vi.mock("@calcom/app-store/BookingPageTagManager", () => ({
default: vi.fn(),
}));
vi.mock("@calcom/app-store/locations", () => ({
DailyLocationType: "daily",
guessEventLocationType: vi.fn(),
getSuccessPageLocationMessage: vi.fn(),
}));
vi.mock("@calcom/app-store/utils", () => ({
getEventTypeAppData: vi.fn(),
}));
vi.mock("@calcom/features/eventtypes/lib/eventNaming", () => ({
getEventName: vi.fn(),
}));
vi.mock("@calcom/ee/organizations/lib/orgDomains", () => ({
getOrgFullOrigin: vi.fn(),
}));
vi.mock("@calcom/web/modules/event-types/components", () => ({
EventTypeDescriptionLazy: vi.fn(),
}));
vi.mock("@calcom/embed-core/embed-iframe", () => {
return {
useIsBackgroundTransparent: vi.fn(),
useIsEmbed: vi.fn(),
useEmbedNonStylesConfig: vi.fn(),
useEmbedStyles: vi.fn(),
};
});
vi.mock("@calcom/web/modules/bookings/components/event-meta/Price", () => {
return {};
});
vi.mock("@calcom/lib/bookings/SystemField", () => {
return {};
});
vi.mock("@calcom/lib/constants", () => {
return {
DEFAULT_LIGHT_BRAND_COLOR: "DEFAULT_LIGHT_BRAND_COLOR",
DEFAULT_DARK_BRAND_COLOR: "DEFAULT_DARK_BRAND_COLOR",
BOOKER_NUMBER_OF_DAYS_TO_LOAD: 1,
};
});
vi.mock("@calcom/lib/dayjs", () => {
return {};
});
vi.mock("@calcom/lib/getBrandColours", () => {
return {
default: vi.fn(),
};
});
vi.mock("@calcom/lib/hooks/useCompatSearchParams", () => {
return {
useCompatSearchParams: vi.fn(),
};
});
vi.mock("@calcom/lib/hooks/useLocale", () => {
return {
useLocale: () => ({
t: (text: string) => text,
i18n: {
language: "en",
},
}),
};
});
vi.mock("@calcom/lib/hooks/useRouterQuery", () => {
return {
useRouterQuery: vi.fn(),
};
});
vi.mock("@calcom/lib/hooks/useTheme", () => {
return {
default: vi.fn(),
};
});
vi.mock("@calcom/lib/recurringStrings", () => {
return {};
});
vi.mock("@calcom/lib/recurringStrings", () => {
return {};
});
vi.mock("@calcom/prisma/zod-utils", () => ({
BookerLayouts: {
MONTH_VIEW: "month",
},
EventTypeMetaDataSchema: {
parse: vi.fn(),
},
bookingMetadataSchema: {
parse: vi.fn(),
},
}));
vi.mock("@calcom/app-store/zod-utils", () => ({
eventTypeMetaDataSchemaWithTypedApps: {
parse: vi.fn(),
},
}));
vi.mock("@calcom/trpc/react", () => ({
trpc: {
viewer: {
public: {
submitRating: {
useMutation: vi.fn(),
},
markHostAsNoShow: {
useMutation: vi.fn(),
},
},
},
},
}));
vi.mock("@calcom/ui/styles", () => ({
useCalcomTheme: vi.fn(),
}));
vi.mock("@calcom/ui/components/icon", () => ({
Icon: vi.fn(),
}));
vi.mock("@calcom/ui/components/unpublished-entity", () => ({
UnpublishedEntity: vi.fn(),
}));
vi.mock("@calcom/ui/components/avatar", () => ({
UserAvatar: vi.fn(),
Avatar: () => null,
}));
vi.mock("@calcom/web/components/PageWrapper", () => ({
default: vi.fn(),
}));
vi.mock("@calcom/web/components/booking/CancelBooking", () => ({}));
vi.mock("@calcom/web/components/schemas/EventReservationSchema", () => ({
default: vi.fn(),
}));
vi.mock("@calcom/web/lib/clock", () => ({
timeZone: vi.fn(),
}));
vi.mock("./bookings-single-view.getServerSideProps", () => ({}));
vi.mock("@calcom/lib/webstorage", () => ({
localStorage: {
getItem: vi.fn(),
setItem: vi.fn(),
},
}));
vi.mock("@calcom/lib/timeFormat", () => ({
detectBrowserTimeFormat: vi.fn(),
isBrowserLocale24h: vi.fn(),
getIs24hClockFromLocalStorage: vi.fn(),
}));