Fix E2E tests

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(
 				{

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,

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 ? (

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();

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

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/);