From dea05356f13648bdbef4b96ccf7c372914b8fbf4 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Thu, 7 Nov 2024 14:33:47 +0100
Subject: [PATCH] Test all aspect ratio classes on Image

---
 packages/react/src/Image/Image.test.tsx | 19 +++++++------------
 packages/react/src/common/types.ts      |  3 ++-
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/packages/react/src/Image/Image.test.tsx b/packages/react/src/Image/Image.test.tsx
index 6224efb8ed..5f830066be 100644
--- a/packages/react/src/Image/Image.test.tsx
+++ b/packages/react/src/Image/Image.test.tsx
@@ -1,6 +1,7 @@
 import { render } from '@testing-library/react'
 import { createRef } from 'react'
 import { Image } from './Image'
+import { aspectRatioOptions } from '../common/types'
 import '@testing-library/jest-dom'
 
 describe('Image', () => {
@@ -29,20 +30,14 @@ describe('Image', () => {
     expect(component).toHaveClass('ams-image extra')
   })
 
-  it('renders class names to display the image in a given aspect ratio', () => {
-    const { container } = render(<Image aspectRatio="x-tall" />)
+  aspectRatioOptions.forEach((aspectRatio) => {
+    it(`renders class names to display the image in the ${aspectRatio} aspect ratio`, () => {
+      const { container } = render(<Image aspectRatio={aspectRatio} />)
 
-    const component = container.querySelector(':only-child')
-
-    expect(component).toHaveClass('ams-aspect-ratio--x-tall')
-  })
-
-  it('renders class names to display the image with the default aspect ratio', () => {
-    const { container } = render(<Image />)
-
-    const component = container.querySelector(':only-child')
+      const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('ams-aspect-ratio--wide')
+      expect(component).toHaveClass(`ams-aspect-ratio--${aspectRatio}`)
+    })
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/common/types.ts b/packages/react/src/common/types.ts
index 3a294b70a9..d18a01116b 100644
--- a/packages/react/src/common/types.ts
+++ b/packages/react/src/common/types.ts
@@ -1,6 +1,7 @@
+export const aspectRatioOptions = ['x-tall', 'tall', 'square', 'wide', 'x-wide', '2x-wide'] as const
 export type AspectRatioProps = {
   /** The aspect ratio to display media content in. */
-  aspectRatio?: 'x-tall' | 'tall' | 'square' | 'wide' | 'x-wide' | '2x-wide'
+  aspectRatio?: (typeof aspectRatioOptions)[number]
 }
 
 export const crossAlignOptions = ['start', 'center', 'baseline', 'end'] as const