Add E2E tests for timezones
This commit is contained in:
commit
1965f24241
|
@ -0,0 +1,86 @@
|
||||||
|
import { expect } from "@playwright/test";
|
||||||
|
|
||||||
|
import { login } from "../fixtures/users";
|
||||||
|
import { test } from "../lib/fixtures";
|
||||||
|
import { loginUser } from "./utils/bookingUtils.e2e";
|
||||||
|
|
||||||
|
test.describe("Test the timezone behavior in specific cases", () => {
|
||||||
|
test("Change timezone in settings", async ({ page, users }) => {
|
||||||
|
loginUser(page, users);
|
||||||
|
const settingsPage = page;
|
||||||
|
await settingsPage.getByRole("link", { name: "Settings" }).click();
|
||||||
|
await settingsPage.getByTestId("vertical-tab-General").click();
|
||||||
|
await settingsPage.locator("#timezone svg").click();
|
||||||
|
await settingsPage.getByTestId("select-option-America/New_York").click();
|
||||||
|
await settingsPage.getByRole("button", { name: "Update" }).click();
|
||||||
|
await settingsPage.getByRole("button", { name: "Don't update" }).click();
|
||||||
|
await expect(settingsPage.locator("div").filter({ hasText: "America/New York" }).nth(1)).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("Change timezone in booking page", async ({ page }) => {
|
||||||
|
await login({ username: "pro", email: "pro@example.com", password: "pro" }, page);
|
||||||
|
await page.goto("/event-types");
|
||||||
|
const eventTypesPage = page;
|
||||||
|
|
||||||
|
// eslint-disable-next-line playwright/no-conditional-in-test
|
||||||
|
if (await eventTypesPage.getByRole("button", { name: "Update timezone" }).isVisible()) {
|
||||||
|
eventTypesPage.getByRole("button", { name: "Update timezone" }).click();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create a new event type
|
||||||
|
await eventTypesPage.getByTestId("new-event-type").click();
|
||||||
|
await eventTypesPage.getByPlaceholder("Quick Chat").click();
|
||||||
|
await eventTypesPage.getByPlaceholder("Quick Chat").fill("15 min test timezone");
|
||||||
|
await eventTypesPage.getByRole("button", { name: "Continue" }).click();
|
||||||
|
await eventTypesPage.getByTestId("update-eventtype").click();
|
||||||
|
|
||||||
|
// Schedule a booking changing the timezone to America/New_York
|
||||||
|
await eventTypesPage.getByTestId("preview-button").click();
|
||||||
|
const bookingPagePromise = eventTypesPage.waitForEvent("popup");
|
||||||
|
const bookingPage = await bookingPagePromise;
|
||||||
|
await bookingPage.locator("span").filter({ hasText: "/" }).locator("svg").first().click();
|
||||||
|
await bookingPage.getByTestId("select-option-America/New_York").click();
|
||||||
|
await expect(bookingPage.locator("div").filter({ hasText: "America/New York" }).first()).toBeVisible();
|
||||||
|
await bookingPage.getByTestId("time").first().click();
|
||||||
|
|
||||||
|
// Check if the correct timezone is displayed
|
||||||
|
await expect(bookingPage.getByText("America/New_York")).toBeVisible();
|
||||||
|
await bookingPage.getByTestId("confirm-book-button").click();
|
||||||
|
|
||||||
|
// Check if the meeting was scheduled successfully
|
||||||
|
await expect(bookingPage.getByText("This meeting is scheduled")).toBeVisible();
|
||||||
|
|
||||||
|
await bookingPage.getByRole("link", { name: "Back to bookings" }).click();
|
||||||
|
const upcomingBookingsPage = bookingPage;
|
||||||
|
|
||||||
|
// Check if the icon globe is displayed in the bookings page and if the correct timezone is displayed when we click on it
|
||||||
|
await upcomingBookingsPage.getByRole("link", { name: "m - " }).first().hover();
|
||||||
|
await upcomingBookingsPage.getByRole("link", { name: "m - " }).first().getByRole("button").click();
|
||||||
|
await expect(upcomingBookingsPage.getByText("America/New_York")).toBeVisible();
|
||||||
|
|
||||||
|
// Delete the event-type
|
||||||
|
await upcomingBookingsPage.getByRole("link", { name: "Event Types" }).click();
|
||||||
|
|
||||||
|
await upcomingBookingsPage
|
||||||
|
.getByRole("link", { name: "15 min test timezone/pro/15-min-test-timezone 15m" })
|
||||||
|
.click();
|
||||||
|
await upcomingBookingsPage
|
||||||
|
.locator("header")
|
||||||
|
.filter({ hasText: "15 min test timezoneSave" })
|
||||||
|
.getByRole("button")
|
||||||
|
.nth(2)
|
||||||
|
.click();
|
||||||
|
await upcomingBookingsPage.getByRole("button", { name: "Yes, delete" }).click();
|
||||||
|
|
||||||
|
// Cancel the meeting in upcoming bookings page
|
||||||
|
await upcomingBookingsPage.getByRole("link", { name: "Bookings" }).click();
|
||||||
|
await upcomingBookingsPage
|
||||||
|
.getByRole("row", {
|
||||||
|
name: " 15 min test timezone between Pro Example and Pro Example You and Pro Example Cancel Edit",
|
||||||
|
})
|
||||||
|
.getByTestId("cancel")
|
||||||
|
.first()
|
||||||
|
.click();
|
||||||
|
await upcomingBookingsPage.getByTestId("confirm_cancel").click();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,250 @@
|
||||||
|
import { expect, type Page } from "@playwright/test";
|
||||||
|
|
||||||
|
import type { Fixtures } from "@calcom/web/playwright/lib/fixtures";
|
||||||
|
|
||||||
|
const EMAIL = "test@test.com";
|
||||||
|
const EMAIL2 = "test2@test.com";
|
||||||
|
const PHONE = "+55 (32) 983289947";
|
||||||
|
const scheduleSuccessfullyText = "This meeting is scheduled";
|
||||||
|
const reschedulePlaceholderText = "Let others know why you need to reschedule";
|
||||||
|
|
||||||
|
interface QuestionActions {
|
||||||
|
[key: string]: () => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
type BookingOptions = {
|
||||||
|
hasPlaceholder?: boolean;
|
||||||
|
isReschedule?: boolean;
|
||||||
|
isRequired?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
type customLocators = {
|
||||||
|
shouldChangeSelectLocator: boolean;
|
||||||
|
shouldUseLastRadioGroupLocator: boolean;
|
||||||
|
shouldUseFirstRadioGroupLocator: boolean;
|
||||||
|
shouldChangeMultiSelectLocator: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const loginUser = async (page: Page, users: Fixtures["users"]) => {
|
||||||
|
const pro = await users.create({ name: "testuser" });
|
||||||
|
await pro.apiLogin();
|
||||||
|
await page.goto("/event-types");
|
||||||
|
};
|
||||||
|
|
||||||
|
const fillQuestion = async (eventTypePage: Page, questionType: string, customLocators: customLocators) => {
|
||||||
|
const questionActions: QuestionActions = {
|
||||||
|
phone: async () => {
|
||||||
|
await eventTypePage.locator('input[name="phone-test"]').clear();
|
||||||
|
await eventTypePage.locator('input[name="phone-test"]').fill(PHONE);
|
||||||
|
},
|
||||||
|
multiemail: async () => {
|
||||||
|
await eventTypePage.getByRole("button", { name: `${questionType} test` }).click();
|
||||||
|
await eventTypePage.getByPlaceholder(`${questionType} test`).fill(EMAIL);
|
||||||
|
await eventTypePage.getByTestId("add-another-guest").last().click();
|
||||||
|
await eventTypePage.getByPlaceholder(`${questionType} test`).last().fill(EMAIL2);
|
||||||
|
},
|
||||||
|
checkbox: async () => {
|
||||||
|
if (customLocators.shouldUseLastRadioGroupLocator || customLocators.shouldChangeMultiSelectLocator) {
|
||||||
|
await eventTypePage.getByLabel("Option 1").last().click();
|
||||||
|
await eventTypePage.getByLabel("Option 2").last().click();
|
||||||
|
} else if (customLocators.shouldUseFirstRadioGroupLocator) {
|
||||||
|
await eventTypePage.getByLabel("Option 1").first().click();
|
||||||
|
await eventTypePage.getByLabel("Option 2").first().click();
|
||||||
|
} else {
|
||||||
|
await eventTypePage.getByLabel("Option 1").click();
|
||||||
|
await eventTypePage.getByLabel("Option 2").click();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
multiselect: async () => {
|
||||||
|
if (customLocators.shouldChangeMultiSelectLocator) {
|
||||||
|
await eventTypePage.locator("form svg").nth(1).click();
|
||||||
|
await eventTypePage.getByTestId("select-option-Option 1").click();
|
||||||
|
} else {
|
||||||
|
await eventTypePage.locator("form svg").last().click();
|
||||||
|
await eventTypePage.getByTestId("select-option-Option 1").click();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
boolean: async () => {
|
||||||
|
await eventTypePage.getByLabel(`${questionType} test`).check();
|
||||||
|
},
|
||||||
|
radio: async () => {
|
||||||
|
await eventTypePage.locator('[id="radio-test\\.option\\.0\\.radio"]').click();
|
||||||
|
},
|
||||||
|
select: async () => {
|
||||||
|
if (customLocators.shouldChangeSelectLocator) {
|
||||||
|
await eventTypePage.locator("form svg").nth(1).click();
|
||||||
|
await eventTypePage.getByTestId("select-option-Option 1").click();
|
||||||
|
} else {
|
||||||
|
await eventTypePage.locator("form svg").last().click();
|
||||||
|
await eventTypePage.getByTestId("select-option-Option 1").click();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
number: async () => {
|
||||||
|
await eventTypePage.getByPlaceholder(`${questionType} test`).click();
|
||||||
|
await eventTypePage.getByPlaceholder(`${questionType} test`).fill("123");
|
||||||
|
},
|
||||||
|
address: async () => {
|
||||||
|
await eventTypePage.getByPlaceholder(`${questionType} test`).click();
|
||||||
|
await eventTypePage.getByPlaceholder(`${questionType} test`).fill("address test");
|
||||||
|
},
|
||||||
|
textarea: async () => {
|
||||||
|
await eventTypePage.getByPlaceholder(`${questionType} test`).click();
|
||||||
|
await eventTypePage.getByPlaceholder(`${questionType} test`).fill("textarea test");
|
||||||
|
},
|
||||||
|
text: async () => {
|
||||||
|
await eventTypePage.getByPlaceholder(`${questionType} test`).click();
|
||||||
|
await eventTypePage.getByPlaceholder(`${questionType} test`).fill("text test");
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
if (questionActions[questionType]) {
|
||||||
|
await questionActions[questionType]();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const fillAndConfirmBooking = async (
|
||||||
|
eventTypePage: Page,
|
||||||
|
placeholderText: string,
|
||||||
|
question: string,
|
||||||
|
fillText: string,
|
||||||
|
secondQuestion: string,
|
||||||
|
options: BookingOptions
|
||||||
|
) => {
|
||||||
|
const confirmButton = options.isReschedule ? "confirm-reschedule-button" : "confirm-book-button";
|
||||||
|
|
||||||
|
await expect(eventTypePage.getByText(`${secondQuestion} test`).first()).toBeVisible();
|
||||||
|
await eventTypePage.getByPlaceholder(placeholderText).fill(fillText);
|
||||||
|
|
||||||
|
// Change the selector for specifics cases related to select question
|
||||||
|
const shouldChangeSelectLocator = (question: string, secondQuestion: string): boolean =>
|
||||||
|
question === "select" && ["multiemail", "multiselect"].includes(secondQuestion);
|
||||||
|
|
||||||
|
const shouldUseLastRadioGroupLocator = (question: string, secondQuestion: string): boolean =>
|
||||||
|
question === "radio" && secondQuestion === "checkbox";
|
||||||
|
|
||||||
|
const shouldUseFirstRadioGroupLocator = (question: string, secondQuestion: string): boolean =>
|
||||||
|
question === "checkbox" && secondQuestion === "radio";
|
||||||
|
|
||||||
|
const shouldChangeMultiSelectLocator = (question: string, secondQuestion: string): boolean =>
|
||||||
|
question === "multiselect" && ["address", "checkbox", "multiemail", "select"].includes(secondQuestion);
|
||||||
|
|
||||||
|
const customLocators = {
|
||||||
|
shouldChangeSelectLocator: shouldChangeSelectLocator(question, secondQuestion),
|
||||||
|
shouldUseLastRadioGroupLocator: shouldUseLastRadioGroupLocator(question, secondQuestion),
|
||||||
|
shouldUseFirstRadioGroupLocator: shouldUseFirstRadioGroupLocator(question, secondQuestion),
|
||||||
|
shouldChangeMultiSelectLocator: shouldChangeMultiSelectLocator(question, secondQuestion),
|
||||||
|
};
|
||||||
|
|
||||||
|
// Fill the first question
|
||||||
|
await fillQuestion(eventTypePage, question, customLocators);
|
||||||
|
|
||||||
|
// Fill the second question if is required
|
||||||
|
options.isRequired && (await fillQuestion(eventTypePage, secondQuestion, customLocators));
|
||||||
|
|
||||||
|
await eventTypePage.getByTestId(confirmButton).click();
|
||||||
|
const scheduleSuccessfullyPage = eventTypePage.getByText(scheduleSuccessfullyText);
|
||||||
|
await scheduleSuccessfullyPage.waitFor({ state: "visible" });
|
||||||
|
await expect(scheduleSuccessfullyPage).toBeVisible();
|
||||||
|
};
|
||||||
|
|
||||||
|
export const initialCommonSteps = async (
|
||||||
|
bookingPage: Page,
|
||||||
|
question: string,
|
||||||
|
users: Fixtures["users"],
|
||||||
|
secondQuestion: string,
|
||||||
|
message: string,
|
||||||
|
options: BookingOptions
|
||||||
|
) => {
|
||||||
|
const firstQuestionHasPlaceholder = [
|
||||||
|
"address",
|
||||||
|
"textarea",
|
||||||
|
"multiemail",
|
||||||
|
"number",
|
||||||
|
"text",
|
||||||
|
"phone",
|
||||||
|
].includes(question);
|
||||||
|
|
||||||
|
//Logs in a test user and navigates to the event types page.
|
||||||
|
loginUser(bookingPage, users);
|
||||||
|
|
||||||
|
// Go to event type settings
|
||||||
|
await bookingPage.getByRole("link", { name: "30 min" }).click();
|
||||||
|
|
||||||
|
// Go to advanced tab
|
||||||
|
await bookingPage.getByTestId("vertical-tab-event_advanced_tab_title").click();
|
||||||
|
|
||||||
|
// Add first and second question and fill both
|
||||||
|
await bookingPage.getByTestId("add-field").click();
|
||||||
|
await bookingPage.locator("#test-field-type > .bg-default > div > div:nth-child(2)").first().click();
|
||||||
|
await bookingPage.getByTestId(`select-option-${question}`).click();
|
||||||
|
await bookingPage.getByLabel("Identifier").dblclick();
|
||||||
|
await bookingPage.getByLabel("Identifier").fill(`${question}-test`);
|
||||||
|
await bookingPage.getByLabel("Label").click();
|
||||||
|
await bookingPage.getByLabel("Label").fill(`${question} test`);
|
||||||
|
|
||||||
|
// Fill the placeholder if the question has one
|
||||||
|
if (firstQuestionHasPlaceholder) {
|
||||||
|
await bookingPage.getByLabel("Placeholder").click();
|
||||||
|
await bookingPage.getByLabel("Placeholder").fill(`${question} test`);
|
||||||
|
}
|
||||||
|
await bookingPage.getByTestId("field-add-save").click();
|
||||||
|
await bookingPage.getByTestId("add-field").click();
|
||||||
|
await bookingPage.locator("#test-field-type > .bg-default > div > div:nth-child(2)").first().click();
|
||||||
|
await bookingPage.getByTestId(`select-option-${secondQuestion}`).click();
|
||||||
|
await bookingPage.getByLabel("Identifier").dblclick();
|
||||||
|
await bookingPage.getByLabel("Identifier").fill(`${secondQuestion}-test`);
|
||||||
|
await bookingPage.getByLabel("Label").click();
|
||||||
|
await bookingPage.getByLabel("Label").fill(`${secondQuestion} test`);
|
||||||
|
if (options.hasPlaceholder) {
|
||||||
|
await bookingPage.getByLabel("Placeholder").dblclick();
|
||||||
|
await bookingPage.getByLabel("Placeholder").fill(`${secondQuestion} test`);
|
||||||
|
}
|
||||||
|
if (!options.isRequired) {
|
||||||
|
await bookingPage.getByRole("radio", { name: "No" }).click();
|
||||||
|
}
|
||||||
|
await bookingPage.getByTestId("field-add-save").click();
|
||||||
|
await expect(bookingPage.getByTestId(`field-${question}-test`)).toBeVisible();
|
||||||
|
await expect(bookingPage.getByTestId(`field-${secondQuestion}-test`)).toBeVisible();
|
||||||
|
await bookingPage.getByTestId("update-eventtype").click();
|
||||||
|
|
||||||
|
// Go to booking page
|
||||||
|
const eventtypePromise = bookingPage.waitForEvent("popup");
|
||||||
|
await bookingPage.getByTestId("preview-button").click();
|
||||||
|
const eventTypePage = await eventtypePromise;
|
||||||
|
|
||||||
|
while (await bookingPage.getByRole("button", { name: "View next" }).isVisible()) {
|
||||||
|
await bookingPage.getByRole("button", { name: "View next" }).click();
|
||||||
|
}
|
||||||
|
|
||||||
|
await eventTypePage.getByTestId("time").first().click();
|
||||||
|
fillAndConfirmBooking(
|
||||||
|
eventTypePage,
|
||||||
|
"Please share anything that will help prepare for our meeting.",
|
||||||
|
question,
|
||||||
|
message,
|
||||||
|
secondQuestion,
|
||||||
|
options
|
||||||
|
);
|
||||||
|
|
||||||
|
// Go to final steps
|
||||||
|
await rescheduleAndCancel(eventTypePage);
|
||||||
|
};
|
||||||
|
const rescheduleAndCancel = async (eventTypePage: Page) => {
|
||||||
|
await eventTypePage.getByText("Reschedule").click();
|
||||||
|
while (await eventTypePage.getByRole("button", { name: "View next" }).isVisible()) {
|
||||||
|
await eventTypePage.getByRole("button", { name: "View next" }).click();
|
||||||
|
}
|
||||||
|
await eventTypePage.getByTestId("time").first().click();
|
||||||
|
await eventTypePage.getByPlaceholder(reschedulePlaceholderText).click();
|
||||||
|
await eventTypePage.getByPlaceholder(reschedulePlaceholderText).fill("Test reschedule");
|
||||||
|
await eventTypePage.getByTestId("confirm-reschedule-button").click();
|
||||||
|
|
||||||
|
// Check if the rescheduled page is visible
|
||||||
|
await expect(eventTypePage.getByText(scheduleSuccessfullyText)).toBeVisible();
|
||||||
|
await eventTypePage.getByTestId("cancel").click();
|
||||||
|
await eventTypePage.getByTestId("cancel_reason").fill("Test cancel");
|
||||||
|
await eventTypePage.getByTestId("confirm_cancel").click();
|
||||||
|
|
||||||
|
// Check if the cancelled page is visible
|
||||||
|
await expect(eventTypePage.getByTestId("cancelled-headline")).toBeVisible();
|
||||||
|
};
|
|
@ -64,11 +64,11 @@ const MeetingTimeInTimezones = ({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Popover.Root>
|
<Popover.Root>
|
||||||
<Popover.Trigger
|
<div onClick={preventBubbling} className="inline-flex">
|
||||||
onClick={preventBubbling}
|
<Popover.Trigger className="popover-button text-emphasis hover:bg-emphasis focus:bg-emphasis invisible ml-2 inline-flex h-5 w-5 items-center justify-center rounded-sm transition-colors group-hover:visible">
|
||||||
className="popover-button text-emphasis hover:bg-emphasis focus:bg-emphasis invisible ml-2 inline-flex h-5 w-5 items-center justify-center rounded-sm transition-colors group-hover:visible">
|
|
||||||
<Globe className="h-3.5 w-3.5" />
|
<Globe className="h-3.5 w-3.5" />
|
||||||
</Popover.Trigger>
|
</Popover.Trigger>
|
||||||
|
</div>
|
||||||
<Popover.Portal>
|
<Popover.Portal>
|
||||||
<Popover.Content
|
<Popover.Content
|
||||||
onClick={preventBubbling}
|
onClick={preventBubbling}
|
||||||
|
@ -101,6 +101,7 @@ MeetingTimeInTimezones.displayName = "MeetingTimeInTimezones";
|
||||||
// detaill page.
|
// detaill page.
|
||||||
const preventBubbling = (event: React.MouseEvent) => {
|
const preventBubbling = (event: React.MouseEvent) => {
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
event.preventDefault();
|
||||||
};
|
};
|
||||||
|
|
||||||
export default MeetingTimeInTimezones;
|
export default MeetingTimeInTimezones;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user