* 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: rajiv@cal.com <sahalrajiv6900@gmail.com> * fix: add window.matchMedia mock to packages/testing/src/setupVitest.ts Co-Authored-By: rajiv@cal.com <sahalrajiv6900@gmail.com> * 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: hariom@cal.com <hariombalhara@gmail.com> * 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: rajiv@cal.com <sahalrajiv6900@gmail.com> * 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: rajiv@cal.com <sahalrajiv6900@gmail.com> * fix: hide all non-essential content for twoStepSlotSelection e2e test Co-Authored-By: rajiv@cal.com <sahalrajiv6900@gmail.com> * fix: disable pointer-events on body for twoStepSlotSelection e2e test Co-Authored-By: rajiv@cal.com <sahalrajiv6900@gmail.com> * fix: remove pointer-events: auto on container to let clicks pass through to iframe Co-Authored-By: rajiv@cal.com <sahalrajiv6900@gmail.com> * fix: explicitly set pointer-events: none on container and inline-embed-container Co-Authored-By: rajiv@cal.com <sahalrajiv6900@gmail.com> * fix: also set pointer-events: none on html element to prevent interception Co-Authored-By: rajiv@cal.com <sahalrajiv6900@gmail.com> * fix: make .place div fill viewport for twoStepSlotSelection e2e test Co-Authored-By: rajiv@cal.com <sahalrajiv6900@gmail.com> * 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 <peeroke@gmail.com> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>
218 lines
4.6 KiB
TypeScript
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(),
|
|
}));
|