From 9c39f1fb9b5d989d1d2dfeaaecc35153ab9c51d5 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Thu, 18 Jun 2026 15:39:10 +0300
Subject: [PATCH] Fix E2E tests

---
 app/components/LocaleTime.tsx             |  4 ++++
 app/components/LocaleTimeRange.tsx        |  4 ++++
 app/features/calendar/routes/calendar.tsx |  2 ++
 e2e/calendar.spec.ts                      |  4 +---
 e2e/navigation.spec.ts                    | 10 ++++++++--
 e2e/settings.spec.ts                      |  4 +---
 6 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/app/components/LocaleTime.tsx b/app/components/LocaleTime.tsx
index 75a593e43..230369574 100644
--- a/app/components/LocaleTime.tsx
+++ b/app/components/LocaleTime.tsx
@@ -11,6 +11,8 @@ interface LocaleTimeProps {
 	className?: string;
 	/** When `true`, renders inline; otherwise the element is displayed as a block. Defaults to block. */
 	inline?: boolean;
+	/** Optional test id forwarded to the rendered `<time>` element. */
+	"data-testid"?: string;
 }
 
 /**
@@ -25,6 +27,7 @@ export function LocaleTime({
 	options,
 	className,
 	inline,
+	"data-testid": testId,
 }: LocaleTimeProps) {
 	const { formatter, isLoaded } = useDateTimeFormat(options);
 
@@ -33,6 +36,7 @@ export function LocaleTime({
 
 	return (
 		<time
+			data-testid={testId}
 			dateTime={dateObject.toISOString()}
 			className={clsx(
 				{
diff --git a/app/components/LocaleTimeRange.tsx b/app/components/LocaleTimeRange.tsx
index c27e1eebb..d94ea4d01 100644
--- a/app/components/LocaleTimeRange.tsx
+++ b/app/components/LocaleTimeRange.tsx
@@ -13,6 +13,8 @@ interface LocaleTimeRangeProps {
 	className?: string;
 	/** When `true`, renders inline; otherwise the element is displayed as a block. Defaults to block. */
 	inline?: boolean;
+	/** Optional test id forwarded to the rendered element. */
+	"data-testid"?: string;
 }
 
 /**
@@ -29,6 +31,7 @@ export function LocaleTimeRange({
 	options,
 	className,
 	inline,
+	"data-testid": testId,
 }: LocaleTimeRangeProps) {
 	const { formatter, isLoaded } = useDateTimeFormat(options);
 
@@ -38,6 +41,7 @@ export function LocaleTimeRange({
 
 	return (
 		<span
+			data-testid={testId}
 			className={clsx(
 				{
 					block: !inline,
diff --git a/app/features/calendar/routes/calendar.tsx b/app/features/calendar/routes/calendar.tsx
index 172d5f5e9..4994b0ce9 100644
--- a/app/features/calendar/routes/calendar.tsx
+++ b/app/features/calendar/routes/calendar.tsx
@@ -308,6 +308,7 @@ function ClockHeader({
 						className={clsx({
 							"text-lighter italic": isInThePast,
 						})}
+						data-testid="clock-header-time"
 					/>
 				) : (
 					<LocaleTime
@@ -316,6 +317,7 @@ function ClockHeader({
 						})}
 						date={date}
 						options={timeOptions}
+						data-testid="clock-header-time"
 					/>
 				)}
 				{hiddenEventsCount > 0 ? (
diff --git a/e2e/calendar.spec.ts b/e2e/calendar.spec.ts
index acac94edd..157118197 100644
--- a/e2e/calendar.spec.ts
+++ b/e2e/calendar.spec.ts
@@ -127,9 +127,7 @@ test.describe("Calendar", () => {
 			await navigate({ page: gb.page, url: calendarPage() });
 
 			const firstClockText = (page: Page) =>
-				page
-					.locator("[class*='clockHeader'] [class*='reserve-one-lb']")
-					.first();
+				page.getByTestId("clock-header-time").first();
 
 			const caTime = await firstClockText(ca.page).textContent();
 			const gbTime = await firstClockText(gb.page).textContent();
diff --git a/e2e/navigation.spec.ts b/e2e/navigation.spec.ts
index d49d62b40..eb51e388a 100644
--- a/e2e/navigation.spec.ts
+++ b/e2e/navigation.spec.ts
@@ -108,7 +108,10 @@ test.describe("Navigation", () => {
 		await expect(
 			mobileMenu.getByRole("link", { name: "SendouQ" }),
 		).not.toBeVisible();
-		const friendsViewAll = page.getByRole("link", { name: /View all/ });
+		const friendsViewAll = page.getByRole("link", {
+			name: "View all",
+			exact: true,
+		});
 		await expect(friendsViewAll).toBeVisible();
 
 		// Switch to You panel via ghost tab (nth(4) = "you")
@@ -124,7 +127,10 @@ test.describe("Navigation", () => {
 			.locator("[class*='ghostTab']:not([class*='ghostTabBar'])")
 			.nth(2)
 			.dispatchEvent("click");
-		const tourneysViewAll = page.getByRole("link", { name: /View all/ });
+		const tourneysViewAll = page.getByRole("link", {
+			name: "View all",
+			exact: true,
+		});
 		await expect(tourneysViewAll).toBeVisible();
 
 		// Close panel via X button
diff --git a/e2e/settings.spec.ts b/e2e/settings.spec.ts
index 78a727ba6..b32d8962e 100644
--- a/e2e/settings.spec.ts
+++ b/e2e/settings.spec.ts
@@ -67,9 +67,7 @@ test.describe("Settings", () => {
 			url: CALENDAR_PAGE,
 		});
 
-		const clockTime = page
-			.locator("[class*='clockHeader'] [class*='reserve-one-lb']")
-			.first();
+		const clockTime = page.getByTestId("clock-header-time").first();
 		const initialTime = await clockTime.textContent();
 
 		expect(initialTime).toMatch(/AM|PM/);