Carina WollendorferGitHubCarinaWollialannnckodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: alannnc <alannnc@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
351 lines
13 KiB
TypeScript
351 lines
13 KiB
TypeScript
import { expect, Page } from "@playwright/test";
|
|
|
|
import { Fixtures, test } from "@calcom/web/playwright/lib/fixtures";
|
|
|
|
async function gotoRoutingLink(page: Page, formId: string) {
|
|
await page.goto(`/forms/${formId}`);
|
|
// HACK: There seems to be some issue with the inputs to the form getting reset if we don't wait.
|
|
await new Promise((resolve) => setTimeout(resolve, 500));
|
|
}
|
|
|
|
async function addForm(page: Page) {
|
|
await page.click('[data-testid="new-routing-form"]');
|
|
await page.fill("input[name]", "Test Form Name");
|
|
await page.click('[data-testid="add-form"]');
|
|
await page.waitForSelector('[data-testid="add-field"]');
|
|
const url = page.url();
|
|
const formId = new URL(url).pathname.split("/").at(-1);
|
|
if (!formId) {
|
|
throw new Error("Form ID couldn't be determined from url");
|
|
}
|
|
return formId;
|
|
}
|
|
|
|
async function verifySelectOptions(
|
|
selector: { selector: string; nth: number },
|
|
expectedOptions: string[],
|
|
page: Page
|
|
) {
|
|
await page.locator(selector.selector).nth(selector.nth).click();
|
|
const selectOptions = await page
|
|
.locator(selector.selector)
|
|
.nth(selector.nth)
|
|
.locator('[id*="react-select-"][aria-disabled]')
|
|
.allInnerTexts();
|
|
|
|
const sortedSelectOptions = [...selectOptions].sort();
|
|
const sortedExpectedOptions = [...expectedOptions].sort();
|
|
expect(sortedSelectOptions).toEqual(sortedExpectedOptions);
|
|
return {
|
|
optionsInUi: selectOptions,
|
|
};
|
|
}
|
|
|
|
async function fillForm(
|
|
page: Page,
|
|
form: { description: string; field?: { typeIndex: number; label: string } }
|
|
) {
|
|
await page.click('[data-testid="add-field"]');
|
|
await page.fill('[data-testid="description"]', form.description);
|
|
|
|
// Verify all Options of SelectBox
|
|
const { optionsInUi: types } = await verifySelectOptions(
|
|
{ selector: ".data-testid-field-type", nth: 0 },
|
|
["Email", "Long Text", "MultiSelect", "Number", "Phone", "Select", "Short Text"],
|
|
page
|
|
);
|
|
|
|
if (form.field) {
|
|
await page.fill('[name="fields.0.label"]', form.field.label);
|
|
await page.click(".data-testid-field-type");
|
|
await page.locator('[id*="react-select-"][aria-disabled]').nth(form.field.typeIndex).click();
|
|
}
|
|
await page.click('[data-testid="update-form"]');
|
|
await page.waitForSelector(".data-testid-toast-success");
|
|
return {
|
|
types,
|
|
};
|
|
}
|
|
|
|
test.describe("Routing Forms", () => {
|
|
test.afterEach(async ({ users }) => {
|
|
// This also delete forms on cascade
|
|
await users.deleteAll();
|
|
});
|
|
test.describe("Zero State Routing Forms", () => {
|
|
test.beforeEach(async ({ page, users }) => {
|
|
const user = await users.create({ username: "routing-forms" });
|
|
await user.login();
|
|
// Install app
|
|
await page.goto(`/apps/routing-forms`);
|
|
await page.click('[data-testid="install-app-button"]');
|
|
await page.waitForNavigation({
|
|
url: (url) => url.pathname === `/apps/routing-forms/forms`,
|
|
});
|
|
});
|
|
|
|
test("should be able to add a new form and view it", async ({ page }) => {
|
|
await page.waitForSelector('[data-testid="empty-screen"]');
|
|
|
|
const formId = await addForm(page);
|
|
|
|
await page.click('[href="/apps/routing-forms/forms"]');
|
|
// TODO: Workaround for bug in https://github.com/calcom/cal.com/issues/3410
|
|
await page.click('[href="/apps/routing-forms/forms"]');
|
|
|
|
await page.waitForSelector('[data-testid="routing-forms-list"]');
|
|
// Ensure that it's visible in forms list
|
|
expect(await page.locator('[data-testid="routing-forms-list"] > li').count()).toBe(1);
|
|
|
|
await gotoRoutingLink(page, formId);
|
|
await page.isVisible("text=Test Form Name");
|
|
|
|
await page.goto(`apps/routing-forms/route-builder/${formId}`);
|
|
await page.click('[data-testid="toggle-form"] [value="on"]');
|
|
await gotoRoutingLink(page, formId);
|
|
await page.isVisible("text=ERROR 404");
|
|
});
|
|
|
|
test("should be able to edit the form", async ({ page }) => {
|
|
await addForm(page);
|
|
const description = "Test Description";
|
|
|
|
const field = {
|
|
label: "Test Label",
|
|
typeIndex: 1,
|
|
};
|
|
|
|
const { types } = await fillForm(page, {
|
|
description,
|
|
field: field,
|
|
});
|
|
|
|
await page.reload();
|
|
|
|
expect(await page.inputValue(`[data-testid="description"]`), description);
|
|
expect(await page.locator('[data-testid="field"]').count()).toBe(1);
|
|
expect(await page.inputValue('[name="fields.0.label"]')).toBe(field.label);
|
|
expect(await page.locator(".data-testid-field-type").first().locator("div").nth(1).innerText()).toBe(
|
|
types[field.typeIndex]
|
|
);
|
|
|
|
await page.click('[href*="/apps/routing-forms/route-builder/"]');
|
|
await page.click('[data-testid="add-route"]');
|
|
await page.click('[data-testid="add-rule"]');
|
|
await verifySelectOptions(
|
|
{
|
|
selector: ".rule-container .data-testid-field-select",
|
|
nth: 0,
|
|
},
|
|
[field.label],
|
|
page
|
|
);
|
|
});
|
|
});
|
|
|
|
test.describe("Seeded Routing Form ", () => {
|
|
const createUserAndLoginAndInstallApp = async function ({
|
|
users,
|
|
page,
|
|
}: {
|
|
users: Fixtures["users"];
|
|
page: Page;
|
|
}) {
|
|
const user = await users.create({ username: "routing-forms" }, { seedRoutingForms: true });
|
|
await user.login();
|
|
// Install app
|
|
await page.goto(`/apps/routing-forms`);
|
|
await page.click('[data-testid="install-app-button"]');
|
|
await page.waitForNavigation({
|
|
url: (url) => url.pathname === `/apps/routing-forms/forms`,
|
|
});
|
|
return user;
|
|
};
|
|
|
|
test("Routing Link - Reporting and CSV Download ", async ({ page, users }) => {
|
|
const user = await createUserAndLoginAndInstallApp({ users, page });
|
|
const routingForm = user.routingForms[0];
|
|
test.setTimeout(120000);
|
|
// Fill form when you are logged out
|
|
await users.logout();
|
|
|
|
await fillSeededForm(page, routingForm.id);
|
|
|
|
// Log back in to view form responses.
|
|
await user.login();
|
|
|
|
await page.goto(`/apps/routing-forms/reporting/${routingForm.id}`);
|
|
// Can't keep waiting forever. So, added a timeout of 5000ms
|
|
await page.waitForResponse((response) => response.url().includes("viewer.appRoutingForms.report"), {
|
|
timeout: 5000,
|
|
});
|
|
const headerEls = page.locator("[data-testid='reporting-header'] th");
|
|
// Once the response is there, React would soon render it, so 500ms is enough
|
|
await headerEls.first().waitFor({
|
|
timeout: 500,
|
|
});
|
|
const numHeaderEls = await headerEls.count();
|
|
const headers = [];
|
|
for (let i = 0; i < numHeaderEls; i++) {
|
|
headers.push(await headerEls.nth(i).innerText());
|
|
}
|
|
|
|
const responses = [];
|
|
const responseRows = page.locator("[data-testid='reporting-row']");
|
|
const numResponseRows = await responseRows.count();
|
|
for (let i = 0; i < numResponseRows; i++) {
|
|
const rowLocator = responseRows.nth(i).locator("td");
|
|
const numRowEls = await rowLocator.count();
|
|
const rowResponses = [];
|
|
for (let j = 0; j < numRowEls; j++) {
|
|
rowResponses.push(await rowLocator.nth(j).innerText());
|
|
}
|
|
responses.push(rowResponses);
|
|
}
|
|
|
|
expect(headers).toEqual(["Test field", "Multi Select"]);
|
|
expect(responses).toEqual([
|
|
["event-routing", ""],
|
|
["external-redirect", ""],
|
|
["custom-page", ""],
|
|
]);
|
|
|
|
const [download] = await Promise.all([
|
|
// Start waiting for the download
|
|
page.waitForEvent("download"),
|
|
// Perform the action that initiates download
|
|
page.click('[data-testid="download-responses"]'),
|
|
]);
|
|
const downloadStream = await download.createReadStream();
|
|
expect(download.suggestedFilename()).toEqual(`${routingForm.name}-${routingForm.id}.csv`);
|
|
const csv: string = await new Promise((resolve) => {
|
|
let body = "";
|
|
downloadStream?.on("data", (chunk) => {
|
|
body += chunk;
|
|
});
|
|
downloadStream?.on("end", () => {
|
|
resolve(body);
|
|
});
|
|
});
|
|
const csvRows = csv.trim().split("\n");
|
|
const csvHeaderRow = csvRows[0];
|
|
expect(csvHeaderRow).toEqual("Test field,Multi Select,Submission Time");
|
|
|
|
const firstResponseCells = csvRows[1].split(",");
|
|
const secondResponseCells = csvRows[2].split(",");
|
|
const thirdResponseCells = csvRows[3].split(",");
|
|
|
|
expect(firstResponseCells.slice(0, -1).join(",")).toEqual("event-routing,");
|
|
expect(new Date(firstResponseCells.at(-1)).getDay()).toEqual(new Date().getDay());
|
|
|
|
expect(secondResponseCells.slice(0, -1).join(",")).toEqual("external-redirect,");
|
|
expect(new Date(secondResponseCells.at(-1)).getDay()).toEqual(new Date().getDay());
|
|
|
|
expect(thirdResponseCells.slice(0, -1).join(",")).toEqual("custom-page,");
|
|
expect(new Date(thirdResponseCells.at(-1)).getDay()).toEqual(new Date().getDay());
|
|
});
|
|
|
|
test("Router URL should work", async ({ page, users }) => {
|
|
const user = await createUserAndLoginAndInstallApp({ users, page });
|
|
const routingForm = user.routingForms[0];
|
|
|
|
// Router should be publicly accessible
|
|
await users.logout();
|
|
page.goto(`/router?form=${routingForm.id}&Test field=event-routing`);
|
|
await page.waitForNavigation({
|
|
url(url) {
|
|
return url.pathname.endsWith("/pro/30min");
|
|
},
|
|
});
|
|
|
|
page.goto(`/router?form=${routingForm.id}&Test field=external-redirect`);
|
|
await page.waitForNavigation({
|
|
url(url) {
|
|
return url.hostname.includes("google.com");
|
|
},
|
|
});
|
|
|
|
await page.goto(`/router?form=${routingForm.id}&Test field=custom-page`);
|
|
await page.isVisible("text=Custom Page Result");
|
|
|
|
await page.goto(`/router?form=${routingForm.id}&Test field=doesntmatter&multi=Option-2`);
|
|
await page.isVisible("text=Multiselect chosen");
|
|
});
|
|
|
|
test("Routing Link should validate fields", async ({ page, users }) => {
|
|
const user = await createUserAndLoginAndInstallApp({ users, page });
|
|
const routingForm = user.routingForms[0];
|
|
await gotoRoutingLink(page, routingForm.id);
|
|
page.click('button[type="submit"]');
|
|
const firstInputMissingValue = await page.evaluate(() => {
|
|
return document.querySelectorAll("input")[0].validity.valueMissing;
|
|
});
|
|
expect(firstInputMissingValue).toBe(true);
|
|
expect(await page.locator('button[type="submit"][disabled]').count()).toBe(0);
|
|
});
|
|
|
|
test("Test preview should return correct route", async ({ page, users }) => {
|
|
const user = await createUserAndLoginAndInstallApp({ users, page });
|
|
const routingForm = user.routingForms[0];
|
|
page.goto(`apps/routing-forms/form-edit/${routingForm.id}`);
|
|
await page.click('[data-testid="test-preview"]');
|
|
|
|
// //event redirect
|
|
await page.fill('[data-testid="form-field"]', "event-routing");
|
|
await page.click('[data-testid="test-routing"]');
|
|
let routingType = await page.locator('[data-testid="test-routing-result-type"]').innerText();
|
|
let route = await page.locator('[data-testid="test-routing-result"]').innerText();
|
|
await expect(routingType).toBe("Event Redirect");
|
|
await expect(route).toBe("pro/30min");
|
|
|
|
//custom page
|
|
await page.fill('[data-testid="form-field"]', "custom-page");
|
|
await page.click('[data-testid="test-routing"]');
|
|
routingType = await page.locator('[data-testid="test-routing-result-type"]').innerText();
|
|
route = await page.locator('[data-testid="test-routing-result"]').innerText();
|
|
await expect(routingType).toBe("Custom Page");
|
|
await expect(route).toBe("Custom Page Result");
|
|
|
|
//external redirect
|
|
await page.fill('[data-testid="form-field"]', "external-redirect");
|
|
await page.click('[data-testid="test-routing"]');
|
|
routingType = await page.locator('[data-testid="test-routing-result-type"]').innerText();
|
|
route = await page.locator('[data-testid="test-routing-result"]').innerText();
|
|
await expect(routingType).toBe("External Redirect");
|
|
await expect(route).toBe("https://google.com");
|
|
|
|
//fallback route
|
|
await page.fill('[data-testid="form-field"]', "fallback");
|
|
await page.click('[data-testid="test-routing"]');
|
|
routingType = await page.locator('[data-testid="test-routing-result-type"]').innerText();
|
|
route = await page.locator('[data-testid="test-routing-result"]').innerText();
|
|
await expect(routingType).toBe("Custom Page");
|
|
await expect(route).toBe("Fallback Message");
|
|
});
|
|
});
|
|
});
|
|
async function fillSeededForm(page: Page, routingFormId: string) {
|
|
await gotoRoutingLink(page, routingFormId);
|
|
await page.fill('[data-testid="form-field"]', "event-routing");
|
|
page.click('button[type="submit"]');
|
|
await page.waitForNavigation({
|
|
url(url) {
|
|
return url.pathname.endsWith("/pro/30min");
|
|
},
|
|
});
|
|
|
|
await gotoRoutingLink(page, routingFormId);
|
|
await page.fill('[data-testid="form-field"]', "external-redirect");
|
|
page.click('button[type="submit"]');
|
|
await page.waitForNavigation({
|
|
url(url) {
|
|
return url.hostname.includes("google.com");
|
|
},
|
|
});
|
|
|
|
await gotoRoutingLink(page, routingFormId);
|
|
await page.fill('[data-testid="form-field"]', "custom-page");
|
|
await page.click('button[type="submit"]');
|
|
await page.isVisible("text=Custom Page Result");
|
|
}
|