feat: add e2e tests

Author: mario99logic

e2e/project/triggers/triggerTimezone.spec.ts

@@ -0,0 +1,69 @@
+import type { Page } from "@playwright/test";
+
+import { expect, test } from "../../fixtures";
+
+const TRIGGER_NAME = "timezone_trigger";
+const DEFAULT_TIMEZONE = "Etc/GMT";
+
+async function createTrigger(page: Page, name: string, cronExpression: string, fileName: string, functionName: string) {
+	await page.getByRole("button", { name: "Add Triggers" }).click();
+	await page.getByRole("textbox", { name: "Name", exact: true }).fill(name);
+	await page.getByTestId("select-trigger-type").click();
+	await page.getByRole("option", { name: "Scheduler" }).click();
+	await page.getByRole("textbox", { name: "Cron expression" }).fill(cronExpression);
+	await page.getByTestId("select-file").click();
+	await page.getByRole("option", { name: fileName }).click();
+	await page.getByRole("textbox", { name: "Function name" }).fill(functionName);
+	await page.getByRole("button", { name: "Save", exact: true }).click();
+}
+
+async function returnToTriggersList(page: Page) {
+	await page.getByRole("button", { name: "Return back" }).click();
+}
+
+async function hoverTriggerInfo(page: Page, triggerName: string) {
+	await page.locator(`button[aria-label='Trigger information for "${triggerName}"']`).hover();
+}
+
+async function selectTimezone(page: Page, searchTerm: string, optionName: RegExp) {
+	await page.getByRole("combobox", { name: DEFAULT_TIMEZONE }).click();
+	await page.keyboard.type(searchTerm);
+	await page.getByRole("option", { name: optionName }).click();
+}
+
+test.describe("Trigger Timezone Features", () => {
+	test.beforeEach(async ({ dashboardPage }) => {
+		await dashboardPage.createProjectFromMenu();
+	});
+
+	test("Trigger shows default UTC timezone in info popover", async ({ page }) => {
+		await createTrigger(page, TRIGGER_NAME, "5 4 * * *", "program.py", "on_trigger");
+		await returnToTriggersList(page);
+
+		await hoverTriggerInfo(page, TRIGGER_NAME);
+
+		await expect(page.getByTestId("trigger-detail-timezone")).toHaveText("UTC");
+	});
+
+	test("Edit trigger timezone and verify change in info popover", async ({ page }) => {
+		await createTrigger(page, TRIGGER_NAME, "5 4 * * *", "program.py", "on_trigger");
+		await returnToTriggersList(page);
+
+		await page.getByText(TRIGGER_NAME).click();
+		await selectTimezone(page, "jeru", /Jerusalem/);
+		await page.getByRole("button", { name: "Save", exact: true }).click();
+
+		await hoverTriggerInfo(page, TRIGGER_NAME);
+
+		await expect(page.getByTestId("trigger-detail-timezone")).toHaveText("Asia/Jerusalem");
+	});
+
+	test("Invalid timezone input retains original value", async ({ page }) => {
+		await createTrigger(page, TRIGGER_NAME, "5 4 * * *", "program.py", "on_trigger");
+
+		await page.getByRole("combobox", { name: DEFAULT_TIMEZONE }).fill("invalid_timezone");
+		await page.getByRole("textbox", { name: "Cron expression" }).click();
+
+		await expect(page.getByRole("combobox", { name: DEFAULT_TIMEZONE })).toBeVisible();
+	});
+});

src/components/organisms/configuration/triggers/add.tsx

@@ -8,7 +8,7 @@ import { NameAndConnectionFields, SchedulerFields, SchedulerInfo, WebhookFields
 import { TriggerSpecificFields } from "./formParts/fileAndFunction";
 import { SelectOption } from "@interfaces/components";
 import { LoggerService, TriggersService } from "@services";
-import { namespaces } from "@src/constants";
+import { defaultTimezoneValue, namespaces } from "@src/constants";
 import { emptySelectItem } from "@src/constants/forms";
 import { TriggerTypes } from "@src/enums";
 import { TriggerFormIds } from "@src/enums/components";
@@ -51,7 +51,7 @@ export const AddTrigger = () => {
 			filter: "",
 			isDurable: false,
 			isSync: false,
-			timezone: "UTC",
+			timezone: defaultTimezoneValue,
 		},
 		resolver: triggerResolver,
 	});

src/components/organisms/configuration/triggers/edit.tsx

@@ -8,7 +8,7 @@ import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { NameAndConnectionFields, SchedulerFields, SchedulerInfo, WebhookFields } from "./formParts";
 import { TriggerSpecificFields } from "./formParts/fileAndFunction";
 import { TriggersService } from "@services";
-import { extraTriggerTypes, featureFlags } from "@src/constants";
+import { defaultTimezoneValue, extraTriggerTypes, featureFlags } from "@src/constants";
 import { emptySelectItem } from "@src/constants/forms";
 import { TriggerTypes } from "@src/enums";
 import { TriggerFormIds } from "@src/enums/components";
@@ -64,7 +64,7 @@ export const EditTrigger = ({
 			cron: "",
 			eventTypeSelect: emptySelectItem,
 			filter: "",
-			timezone: "UTC",
+			timezone: defaultTimezoneValue,
 			isDurable: false,
 			isSync: false,
 		},
@@ -120,7 +120,7 @@ export const EditTrigger = ({
 			filePath: { label: trigger?.path, value: trigger?.path },
 			entryFunction: trigger?.entryFunction,
 			cron: trigger?.schedule,
-			timezone: trigger?.timezone || "UTC",
+			timezone: trigger?.timezone || defaultTimezoneValue,
 			eventTypeSelect: { label: trigger?.eventType, value: trigger?.eventType },
 			filter: trigger?.filter,
 			isDurable: trigger?.isDurable || false,

src/components/organisms/configuration/triggers/formParts/scheduler.tsx

@@ -3,6 +3,7 @@ import React, { useEffect } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
+import { defaultTimezoneValue } from "@src/constants";
 import { TriggerForm } from "@src/types/models";
 
 import { ErrorMessage, Input } from "@components/atoms";
@@ -18,13 +19,20 @@ export const SchedulerFields = () => {
 	} = useFormContext<TriggerForm>();
 
 	const cronValue = useWatch({ control, name: "cron" });
+	const timezoneValue = useWatch({ control, name: "timezone" });
 
 	useEffect(() => {
 		if (cronValue) {
 			setValue("cron", cronValue);
 		}
 	}, [cronValue, setValue]);
 
+	useEffect(() => {
+		if (!timezoneValue) {
+			setValue("timezone", defaultTimezoneValue);
+		}
+	}, [timezoneValue, setValue]);
+
 	return (
 		<div className="flex flex-col gap-6">
 			<div className="relative">
@@ -46,6 +54,7 @@ export const SchedulerFields = () => {
 					name="timezone"
 					render={({ field: { onChange, value } }) => (
 						<TimezoneSelect
+							aria-label={value}
 							isError={!!errors.timezone}
 							onChange={(selectedOption) => onChange(selectedOption?.value)}
 							value={value}

src/components/organisms/configuration/triggers/triggerInfoPopover.tsx

@@ -3,6 +3,7 @@ import React, { ComponentType, useCallback, useEffect, useMemo, useState } from
 import { useTranslation } from "react-i18next";
 
 import { IntegrationsService } from "@services/integrations.service";
+import { defaultTimezoneValue } from "@src/constants";
 import { TriggerTypes } from "@src/enums";
 import { IntegrationsMap } from "@src/enums/components/connection.enum";
 import { useCacheStore } from "@src/store";
@@ -37,7 +38,12 @@ export const TriggerInfoPopover = ({ triggerId }: { triggerId: string }) => {
 	const configureTriggerDisplay = useCallback(
 		async (trigger: Trigger) => {
 			if (trigger.sourceType === TriggerTypes.schedule) {
-				setScheduleDetails([{ label: t("cron"), value: trigger.schedule }, ...baseDetails]);
+				const timezoneDisplay = trigger.timezone === defaultTimezoneValue ? "UTC" : trigger.timezone;
+				setScheduleDetails([
+					{ label: t("cron"), value: trigger.schedule },
+					{ label: t("timezone"), value: timezoneDisplay },
+					...baseDetails,
+				]);
 				return;
 			}
 

src/constants/global.constants.ts

@@ -46,3 +46,4 @@ export const systemCookies = {
 };
 export const defaultManifestFileName = "autokitteh.yaml";
 export const optionalManifestFileName = "autokitteh.yaml.user";
+export const defaultTimezoneValue = "Etc/GMT";

src/constants/index.ts

@@ -35,6 +35,7 @@ export {
 	optionalManifestFileName,
 	msClarityId,
 	appMode,
+	defaultTimezoneValue,
 } from "@constants/global.constants";
 export { integrationToEditComponent } from "@constants/connections/editComponentsMapping.constants";
 export { formsPerIntegrationsMapping } from "@constants/connections/formsPerIntegrationsMapping.constants";