From 2e01b67fcecbc74488aecced3567b868a65572be Mon Sep 17 00:00:00 2001
From: Angelo Ashmore <angeloashmore@users.noreply.github.com>
Date: Wed, 10 May 2023 15:46:13 -1000
Subject: [PATCH] fix(PrismicNextImage): log error if no alternative text is
 available (only in non-production environments) (#68)

---
 src/PrismicNextImage.tsx       | 24 +++++++++++++++++-------
 src/lib/__PRODUCTION__.ts      |  7 -------
 test/PrismicNextImage.test.tsx | 24 ++++++++++++++++++++++++
 3 files changed, 41 insertions(+), 14 deletions(-)
 delete mode 100644 src/lib/__PRODUCTION__.ts

diff --git a/src/PrismicNextImage.tsx b/src/PrismicNextImage.tsx
index 4dea1a4..b0fa0b2 100644
--- a/src/PrismicNextImage.tsx
+++ b/src/PrismicNextImage.tsx
@@ -4,7 +4,6 @@ import Image, { ImageProps } from "next/image";
 import { buildURL, ImgixURLParams } from "imgix-url-builder";
 import * as prismic from "@prismicio/client";
 
-import { __PRODUCTION__ } from "./lib/__PRODUCTION__";
 import { devMsg } from "./lib/devMsg";
 
 import { imgixLoader } from "./imgixLoader";
@@ -86,7 +85,7 @@ export const PrismicNextImage = ({
 	fallback = null,
 	...restProps
 }: PrismicNextImageProps): JSX.Element => {
-	if (!__PRODUCTION__) {
+	if (process.env.NODE_ENV !== "production") {
 		if (typeof alt === "string" && alt !== "") {
 			console.warn(
 				`[PrismicNextImage] The "alt" prop can only be used to declare an image as decorative by passing an empty string (alt="") but was provided a non-empty string. You can resolve this warning by removing the "alt" prop or changing it to alt="". For more details, see ${devMsg(
@@ -121,16 +120,27 @@ export const PrismicNextImage = ({
 			resolvedWidth = castedHeight * ar;
 		}
 
+		// A non-null assertion is required since we can't statically
+		// know if an alt attribute is available.
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		const resolvedAlt = (alt ?? (field.alt || fallbackAlt))!;
+
+		if (
+			process.env.NODE_ENV !== "production" &&
+			typeof resolvedAlt !== "string"
+		) {
+			console.error(
+				`[PrismicNextImage] The following image is missing an "alt" property. Please add Alternative Text to the image in Prismic. To mark the image as decorative instead, add one of \`alt=""\` or \`fallbackAlt=""\`.`,
+				src,
+			);
+		}
+
 		return (
 			<Image
 				src={src}
 				width={fill ? undefined : resolvedWidth}
 				height={fill ? undefined : resolvedHeight}
-				// A non-null assertion is required since we
-				// can't statically know if an alt attribute is
-				// available.
-				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-				alt={(alt ?? (field.alt || fallbackAlt))!}
+				alt={resolvedAlt}
 				fill={fill}
 				loader={imgixLoader}
 				{...restProps}
diff --git a/src/lib/__PRODUCTION__.ts b/src/lib/__PRODUCTION__.ts
deleted file mode 100644
index 0818787..0000000
--- a/src/lib/__PRODUCTION__.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * `true` if in the production environment, `false` otherwise.
- *
- * This boolean can be used to perform actions only in development environments,
- * such as logging.
- */
-export const __PRODUCTION__ = process.env.NODE_ENV === "production";
diff --git a/test/PrismicNextImage.test.tsx b/test/PrismicNextImage.test.tsx
index aac5efa..8163dc9 100644
--- a/test/PrismicNextImage.test.tsx
+++ b/test/PrismicNextImage.test.tsx
@@ -157,9 +157,15 @@ test("alt is undefined if the field does not have an alt value", (ctx) => {
 	const field = ctx.mock.value.image();
 	field.alt = null;
 
+	const consoleErrorSpy = vi
+		.spyOn(console, "error")
+		.mockImplementation(() => void 0);
+
 	const img = renderJSON(<PrismicNextImage field={field} />);
 
 	expect(img?.props.alt).toBe(undefined);
+
+	consoleErrorSpy.mockRestore();
 });
 
 test("supports an explicit decorative fallback alt value if given", (ctx) => {
@@ -227,6 +233,24 @@ test("warns if a non-decorative alt value is given", (ctx) => {
 	consoleWarnSpy.mockRestore();
 });
 
+test("logs error if no alt text is available", (ctx) => {
+	const field = ctx.mock.value.image();
+	field.alt = null;
+
+	const consoleErrorSpy = vi
+		.spyOn(console, "error")
+		.mockImplementation(() => void 0);
+
+	renderJSON(<PrismicNextImage field={field} />);
+
+	expect(consoleErrorSpy).toHaveBeenCalledWith(
+		expect.stringMatching(/missing an "alt" property/),
+		field.url,
+	);
+
+	consoleErrorSpy.mockRestore();
+});
+
 test("supports the fill prop", (ctx) => {
 	const field = ctx.mock.value.image();