simplify variantWidths interface, add unit test

app/components/BoxWithImage.tsx

@@ -4,38 +4,32 @@ import RichText from "./RichText";
 
 export type BoxWithImageProps = {
   image: ImageProps;
-  variant?: keyof typeof variantWidths;
+  variant?: Variant;
   identifier?: string;
   heading?: HeadingProps;
   content?: string;
 };
 
-const variantWidths = {
-  // TODO: Remove after variant implementation
-  default: {
-    imageMaxWidth: "max-w-[120px]",
-  },
-  ImgMTextL: {
-    imageMaxWidth: "max-w-[280px]",
-  },
-  XS: {
-    imageMaxWidth: "max-w-[80px]",
-  },
-  S: {
-    imageMaxWidth: "max-w-[120px]",
-  },
-  M: {
-    imageMaxWidth: "max-w-[280px]",
-  },
-  L: {
-    imageMaxWidth: "max-w-[400px]",
-  },
-  XL: {
-    imageMaxWidth: "max-w-[630px]",
-  },
-  XXL: {
-    imageMaxWidth: "max-w-[848px]",
-  },
+export type Variant =
+  | "default"
+  | "ImgMTextL"
+  | "XS"
+  | "S"
+  | "M"
+  | "L"
+  | "XL"
+  | "XXL";
+
+export const variantWidths: Record<Variant, string> = {
+  // TODO: Remove after new variant implementation
+  default: "max-w-[120px]",
+  ImgMTextL: "max-w-[280px]",
+  XS: "max-w-[80px]",
+  S: "max-w-[120px]",
+  M: "max-w-[280px]",
+  L: "max-w-[400px]",
+  XL: "max-w-[630px]",
+  XXL: "max-w-[848px]",
 };
 
 const BoxWithImage = ({
@@ -52,7 +46,7 @@ const BoxWithImage = ({
       className={`flex flex-wrap ${shouldWrapByDefault ? "md:flex-wrap" : "sm:flex-nowrap"} items-start gap-24 text-base`}
     >
       <div
-        className={`lg:shrink-0 overflow-hidden ${content ? variantWidths[variant].imageMaxWidth : "max-w-full"}`}
+        className={`lg:shrink-0 overflow-hidden ${content ? variantWidths[variant] : "max-w-full"}`}
       >
         <Image {...image} />
       </div>

app/components/__test__/BoxWithImage.test.tsx

@@ -0,0 +1,46 @@
+import { render } from "@testing-library/react";
+import type { Variant } from "~/components/BoxWithImage";
+import BoxWithImage, { variantWidths } from "~/components/BoxWithImage";
+
+describe("BoxWithImage", () => {
+  const imageAltText = "Alt text";
+  it("should render", () => {
+    const imageText = "A beautiful image";
+    const headerText = "Some title description";
+    const { getByText, getByAltText } = render(
+      <BoxWithImage
+        image={{ alternativeText: imageAltText, url: "image.png" }}
+        content={imageText}
+        heading={{ text: headerText }}
+      />,
+    );
+    expect(getByText(imageText)).toBeInTheDocument();
+    expect(getByText(headerText)).toBeInTheDocument();
+    expect(getByAltText(imageAltText)).toBeInTheDocument();
+  });
+
+  it.each(
+    Object.entries(variantWidths).map(([key, value]) => [
+      key as Variant,
+      value,
+    ]),
+  )(
+    "image variant %s should have proper styling",
+    (imageVariant, expectedStyle) => {
+      const { getByAltText } = render(
+        <BoxWithImage
+          variant={imageVariant}
+          image={{ url: "image.png", alternativeText: imageAltText }}
+          content="Wow great image!"
+        />,
+      );
+      const imageContainer = getByAltText(imageAltText).parentElement;
+      const shouldWrap = imageVariant === "XL" || imageVariant === "XXL";
+      const flexContainer = imageContainer?.parentElement;
+      expect(flexContainer).toHaveClass(
+        shouldWrap ? "md:flex-wrap" : "sm:flex-nowrap",
+      );
+      expect(imageContainer).toHaveClass(expectedStyle);
+    },
+  );
+});