From 04369eac5bfb47eb7ccf9f58164f39d980890e7a Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Tue, 28 Jul 2026 18:10:47 +0300
Subject: [PATCH] Fix edit art E2E test

---
 app/features/art/components/ArtGrid.tsx | 24 +++++++++++++-----------
 e2e/art.spec.ts                         | 12 +++++++-----
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/app/features/art/components/ArtGrid.tsx b/app/features/art/components/ArtGrid.tsx
index 98d0435f2..dd697042a 100644
--- a/app/features/art/components/ArtGrid.tsx
+++ b/app/features/art/components/ArtGrid.tsx
@@ -89,7 +89,7 @@ export function ArtGrid({
 }
 
 function BigImageDialog({ close, art }: { close: () => void; art: ListedArt }) {
-	const [imageLoaded, setImageLoaded] = React.useState(false);
+	const [imageSettled, setImageSettled] = React.useState(false);
 	const { formatter } = useDateTimeFormat({
 		year: "numeric",
 		month: "numeric",
@@ -107,11 +107,12 @@ function BigImageDialog({ close, art }: { close: () => void; art: ListedArt }) {
 				src={art.url}
 				loading="lazy"
 				className={styles.dialogImg}
-				onLoad={() => setImageLoaded(true)}
+				onLoad={() => setImageSettled(true)}
+				onError={() => setImageSettled(true)}
 			/>
 			{art.tags || art.linkedUsers ? (
 				<div
-					className={clsx(styles.tagsContainer, { invisible: !imageLoaded })}
+					className={clsx(styles.tagsContainer, { invisible: !imageSettled })}
 				>
 					{art.linkedUsers?.map((user) => (
 						<Link
@@ -136,7 +137,7 @@ function BigImageDialog({ close, art }: { close: () => void; art: ListedArt }) {
 			{art.description ? (
 				<div
 					className={clsx(styles.dialogDescription, {
-						invisible: !imageLoaded,
+						invisible: !imageSettled,
 					})}
 				>
 					{art.description}
@@ -167,7 +168,7 @@ function ImagePreview({
 	canEdit?: boolean;
 	showUploadDate?: boolean;
 }) {
-	const [imageLoaded, setImageLoaded] = React.useState(false);
+	const [imageSettled, setImageSettled] = React.useState(false);
 	const { t } = useTranslation(["common", "art"]);
 	const formatDistanceToNow = useFormatDistanceToNow();
 
@@ -178,7 +179,8 @@ function ImagePreview({
 			src={previewUrl(art.url)}
 			loading="lazy"
 			onClick={onClick}
-			onLoad={() => setImageLoaded(true)}
+			onLoad={() => setImageSettled(true)}
+			onError={() => setImageSettled(true)}
 			className={enablePreview ? styles.thumbnail : undefined}
 		/>
 	);
@@ -189,7 +191,7 @@ function ImagePreview({
 				{img}
 				<div
 					className={clsx("stack horizontal justify-between mt-2", {
-						invisible: !imageLoaded,
+						invisible: !imageSettled,
 					})}
 				>
 					<LinkButton
@@ -234,7 +236,7 @@ function ImagePreview({
 					<Link
 						to={userArtPage(art.author, "MADE-BY")}
 						className={clsx("stack sm horizontal text-xs items-center mt-1", {
-							invisible: !imageLoaded,
+							invisible: !imageSettled,
 						})}
 					>
 						<Avatar user={art.author} size="xxs" />
@@ -243,7 +245,7 @@ function ImagePreview({
 					{uploadDateText ? (
 						<div
 							className={clsx("text-xs text-lighter", {
-								invisible: !imageLoaded,
+								invisible: !imageSettled,
 							})}
 						>
 							{uploadDateText}
@@ -278,7 +280,7 @@ function ImagePreview({
 			<div className="stack horizontal justify-between">
 				<div
 					className={clsx("stack sm horizontal text-xs items-center mt-1", {
-						invisible: !imageLoaded,
+						invisible: !imageSettled,
 					})}
 				>
 					<Avatar user={art.author} size="xxs" />
@@ -287,7 +289,7 @@ function ImagePreview({
 				{uploadDateText ? (
 					<div
 						className={clsx("text-xxs mt-1 text-lighter", {
-							invisible: !imageLoaded,
+							invisible: !imageSettled,
 						})}
 					>
 						{uploadDateText}
diff --git a/e2e/art.spec.ts b/e2e/art.spec.ts
index b68dafbd3..9d2b3fe3c 100644
--- a/e2e/art.spec.ts
+++ b/e2e/art.spec.ts
@@ -61,13 +61,15 @@ test.describe("Art", () => {
 		await navigate({ page, url: "/u/nzap/art" });
 
 		const form = createFormHelpers(page, artFormSchema);
-		const editNewestArt = () =>
-			page.locator('a[href^="/art/new?art="]').first().click();
 
-		await editNewestArt();
+		await page.locator('a[href^="/art/new?art="]').first().click();
+		await expect(page).toHaveURL(/\/art\/new\?art=\d+/);
+		const artId = new URL(page.url()).searchParams.get("art");
 
 		// the already uploaded image is shown but can't be swapped
-		await expect(page.locator('form img[src*="-small."]')).toBeVisible();
+		// only rendering is asserted as seeded art images are not available
+		// in every environment
+		await expect(page.locator('form img[src*="-small."]')).toBeAttached();
 		await expect(page.locator('input[type="file"]')).toHaveCount(0);
 
 		await form.fill("description", "Squid drawing");
@@ -75,7 +77,7 @@ test.describe("Art", () => {
 
 		await expect(page).toHaveURL(/\/u\/.*\/art/);
 
-		await editNewestArt();
+		await page.locator(`a[href="/art/new?art=${artId}"]`).click();
 
 		await expect(page.getByLabel(form.getLabel("description"))).toHaveValue(
 			"Squid drawing",