298 lines
9.0 KiB
TypeScript
298 lines
9.0 KiB
TypeScript
import type { Frame, PlaywrightTestConfig } from "@playwright/test";
|
|
import { devices, expect } from "@playwright/test";
|
|
import dotEnv from "dotenv";
|
|
import * as os from "os";
|
|
import * as path from "path";
|
|
|
|
dotEnv.config({ path: ".env" });
|
|
|
|
const outputDir = path.join(__dirname, "test-results");
|
|
|
|
// Dev Server on local can be slow to start up and process requests. So, keep timeouts really high on local, so that tests run reliably locally
|
|
|
|
// So, if not in CI, keep the timers high, if the test is stuck somewhere and there is unnecessary wait developer can see in browser that it's stuck
|
|
const DEFAULT_NAVIGATION_TIMEOUT = process.env.CI ? 30000 : 120000;
|
|
const DEFAULT_EXPECT_TIMEOUT = process.env.CI ? 30000 : 120000;
|
|
|
|
// Test Timeout can hit due to slow expect, slow navigation.
|
|
// So, it should me much higher than sum of expect and navigation timeouts as there can be many async expects and navigations in a single test
|
|
const DEFAULT_TEST_TIMEOUT = process.env.CI ? 60000 : 240000;
|
|
|
|
const headless = !!process.env.CI || !!process.env.PLAYWRIGHT_HEADLESS;
|
|
|
|
const IS_EMBED_TEST = process.argv.some((a) => a.startsWith("--project=@calcom/embed-core"));
|
|
const IS_EMBED_REACT_TEST = process.argv.some((a) => a.startsWith("--project=@calcom/embed-react"));
|
|
|
|
const webServer: PlaywrightTestConfig["webServer"] = [
|
|
{
|
|
command:
|
|
"NEXT_PUBLIC_IS_E2E=1 NODE_OPTIONS='--dns-result-order=ipv4first' yarn workspace @calcom/web start -p 3000",
|
|
port: 3000,
|
|
timeout: 60_000,
|
|
reuseExistingServer: !process.env.CI,
|
|
},
|
|
];
|
|
|
|
if (IS_EMBED_TEST) {
|
|
ensureAppServerIsReadyToServeEmbed(webServer[0]);
|
|
|
|
webServer.push({
|
|
command: "yarn workspace @calcom/embed-core dev",
|
|
port: 3100,
|
|
timeout: 60_000,
|
|
reuseExistingServer: !process.env.CI,
|
|
});
|
|
}
|
|
|
|
if (IS_EMBED_REACT_TEST) {
|
|
ensureAppServerIsReadyToServeEmbed(webServer[0]);
|
|
|
|
webServer.push({
|
|
command: "yarn workspace @calcom/embed-react dev",
|
|
port: 3101,
|
|
timeout: 60_000,
|
|
reuseExistingServer: !process.env.CI,
|
|
});
|
|
}
|
|
|
|
const DEFAULT_CHROMIUM = {
|
|
...devices["Desktop Chrome"],
|
|
timezoneId: "Europe/London",
|
|
locale: "en-US",
|
|
/** If navigation takes more than this, then something's wrong, let's fail fast. */
|
|
navigationTimeout: DEFAULT_NAVIGATION_TIMEOUT,
|
|
};
|
|
|
|
const config: PlaywrightTestConfig = {
|
|
forbidOnly: !!process.env.CI,
|
|
retries: process.env.CI ? 2 : 0,
|
|
// While debugging it should be focussed mode
|
|
// eslint-disable-next-line turbo/no-undeclared-env-vars
|
|
workers: process.env.PWDEBUG ? 1 : os.cpus().length,
|
|
timeout: DEFAULT_TEST_TIMEOUT,
|
|
maxFailures: headless ? 10 : undefined,
|
|
fullyParallel: true,
|
|
reporter: [
|
|
[process.env.CI ? "github" : "list"],
|
|
["@deploysentinel/playwright"],
|
|
["html", { outputFolder: "./test-results/reports/playwright-html-report", open: "never" }],
|
|
["junit", { outputFile: "./test-results/reports/results.xml" }],
|
|
],
|
|
outputDir: path.join(outputDir, "results"),
|
|
webServer,
|
|
use: {
|
|
baseURL: process.env.NEXT_PUBLIC_WEBAPP_URL,
|
|
locale: "en-US",
|
|
trace: "retain-on-failure",
|
|
headless,
|
|
},
|
|
projects: [
|
|
{
|
|
name: "@calcom/web",
|
|
testDir: "./apps/web/playwright",
|
|
testMatch: /.*\.e2e\.tsx?/,
|
|
expect: {
|
|
timeout: DEFAULT_EXPECT_TIMEOUT,
|
|
},
|
|
use: DEFAULT_CHROMIUM,
|
|
},
|
|
{
|
|
name: "@calcom/app-store",
|
|
testDir: "./packages/app-store/",
|
|
testMatch: /.*\.e2e\.tsx?/,
|
|
expect: {
|
|
timeout: DEFAULT_EXPECT_TIMEOUT,
|
|
},
|
|
use: DEFAULT_CHROMIUM,
|
|
},
|
|
{
|
|
name: "@calcom/embed-core",
|
|
testDir: "./packages/embeds/embed-core/",
|
|
testMatch: /.*\.e2e\.tsx?/,
|
|
expect: {
|
|
timeout: DEFAULT_EXPECT_TIMEOUT,
|
|
},
|
|
use: {
|
|
...devices["Desktop Chrome"],
|
|
locale: "en-US",
|
|
baseURL: "http://localhost:3100/",
|
|
},
|
|
},
|
|
{
|
|
name: "@calcom/embed-react",
|
|
testDir: "./packages/embeds/embed-react/",
|
|
expect: {
|
|
timeout: DEFAULT_EXPECT_TIMEOUT,
|
|
},
|
|
testMatch: /.*\.e2e\.tsx?/,
|
|
use: {
|
|
...DEFAULT_CHROMIUM,
|
|
baseURL: "http://localhost:3101/",
|
|
},
|
|
},
|
|
{
|
|
name: "@calcom/embed-core--firefox",
|
|
testDir: "./packages/embeds/",
|
|
testMatch: /.*\.e2e\.tsx?/,
|
|
expect: {
|
|
timeout: DEFAULT_EXPECT_TIMEOUT,
|
|
},
|
|
use: { ...devices["Desktop Firefox"] },
|
|
},
|
|
{
|
|
name: "@calcom/embed-core--webkit",
|
|
testDir: "./packages/embeds/",
|
|
testMatch: /.*\.e2e\.tsx?/,
|
|
expect: {
|
|
timeout: DEFAULT_EXPECT_TIMEOUT,
|
|
},
|
|
use: { ...devices["Desktop Safari"] },
|
|
},
|
|
],
|
|
};
|
|
|
|
export type ExpectedUrlDetails = {
|
|
searchParams?: Record<string, string | string[]>;
|
|
pathname?: string;
|
|
origin?: string;
|
|
};
|
|
|
|
expect.extend({
|
|
async toBeEmbedCalLink(
|
|
iframe: Frame,
|
|
calNamespace: string,
|
|
//TODO: Move it to testUtil, so that it doesn't need to be passed
|
|
// eslint-disable-next-line
|
|
getActionFiredDetails: (a: { calNamespace: string; actionType: string }) => Promise<any>,
|
|
expectedUrlDetails: ExpectedUrlDetails = {},
|
|
isPrerendered?: boolean
|
|
) {
|
|
if (!iframe || !iframe.url) {
|
|
return {
|
|
pass: false,
|
|
message: () => `Expected to provide an iframe, got ${iframe}`,
|
|
};
|
|
}
|
|
|
|
const u = new URL(iframe.url());
|
|
|
|
const pathname = u.pathname;
|
|
const expectedPathname = `${expectedUrlDetails.pathname}/embed`;
|
|
if (expectedPathname && expectedPathname !== pathname) {
|
|
return {
|
|
pass: false,
|
|
message: () => `Expected pathname to be ${expectedPathname} but got ${pathname}`,
|
|
};
|
|
}
|
|
|
|
const origin = u.origin;
|
|
const expectedOrigin = expectedUrlDetails.origin;
|
|
if (expectedOrigin && expectedOrigin !== origin) {
|
|
return {
|
|
pass: false,
|
|
message: () => `Expected origin to be ${expectedOrigin} but got ${origin}`,
|
|
};
|
|
}
|
|
|
|
const searchParams = u.searchParams;
|
|
const expectedSearchParams = expectedUrlDetails.searchParams || {};
|
|
for (const [expectedKey, expectedValue] of Object.entries(expectedSearchParams)) {
|
|
const value = searchParams.get(expectedKey);
|
|
if (value !== expectedValue) {
|
|
return {
|
|
message: () => `${expectedKey} should have value ${expectedValue} but got value ${value}`,
|
|
pass: false,
|
|
};
|
|
}
|
|
}
|
|
|
|
const frameElement = await iframe.frameElement();
|
|
|
|
if (isPrerendered) {
|
|
if (await frameElement.isVisible()) {
|
|
return {
|
|
pass: false,
|
|
message: () => `Expected prerender iframe to be not visible`,
|
|
};
|
|
}
|
|
return {
|
|
pass: true,
|
|
message: () => `is prerendered`,
|
|
};
|
|
}
|
|
|
|
const iframeReadyEventDetail = await new Promise(async (resolve) => {
|
|
const iframeReadyCheckInterval = setInterval(async () => {
|
|
const iframeReadyEventDetail = await getActionFiredDetails({
|
|
calNamespace,
|
|
actionType: "linkReady",
|
|
});
|
|
if (iframeReadyEventDetail) {
|
|
clearInterval(iframeReadyCheckInterval);
|
|
resolve(iframeReadyEventDetail);
|
|
}
|
|
}, 500);
|
|
});
|
|
|
|
if (!(await frameElement.isVisible())) {
|
|
return {
|
|
pass: false,
|
|
message: () => `Expected iframe to be visible`,
|
|
};
|
|
}
|
|
|
|
//At this point we know that window.initialBodyVisibility would be set as DOM would already have been ready(because linkReady event can only fire after that)
|
|
const {
|
|
visibility: visibilityBefore,
|
|
background: backgroundBefore,
|
|
initialValuesSet,
|
|
} = await iframe.evaluate(() => {
|
|
return {
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
//@ts-ignore
|
|
visibility: window.initialBodyVisibility,
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
//@ts-ignore
|
|
background: window.initialBodyBackground,
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
//@ts-ignore
|
|
initialValuesSet: window.initialValuesSet,
|
|
};
|
|
});
|
|
expect(initialValuesSet).toBe(true);
|
|
expect(visibilityBefore).toBe("hidden");
|
|
expect(backgroundBefore).toBe("transparent");
|
|
|
|
const { visibility: visibilityAfter, background: backgroundAfter } = await iframe.evaluate(() => {
|
|
return {
|
|
visibility: document.body.style.visibility,
|
|
background: document.body.style.background,
|
|
};
|
|
});
|
|
|
|
expect(visibilityAfter).toBe("visible");
|
|
expect(backgroundAfter).toBe("transparent");
|
|
if (!iframeReadyEventDetail) {
|
|
return {
|
|
pass: false,
|
|
message: () => `Iframe not ready to communicate with parent`,
|
|
};
|
|
}
|
|
|
|
return {
|
|
pass: true,
|
|
message: () => `passed`,
|
|
};
|
|
},
|
|
});
|
|
|
|
export default config;
|
|
|
|
function ensureAppServerIsReadyToServeEmbed(webServer: { port?: number; url?: string }) {
|
|
// We should't depend on an embed dependency for App's tests. So, conditionally modify App webServer.
|
|
// Only one of port or url can be specified, so remove port.
|
|
delete webServer.port;
|
|
webServer.url = `${process.env.NEXT_PUBLIC_WEBAPP_URL}/embed/embed.js`;
|
|
console.log("Ensuring that /embed/embed.js is 200 before starting tests");
|
|
}
|