improve tests

Author: joshfarrant

packages/react/src/Image/Image.features.stories.tsx

@@ -33,9 +33,9 @@ export const BorderRadius: StoryFn<typeof Image> = () => (
       <Image
         key={borderRadius}
         src={placeholderImage}
-        alt="placeholder, blank area with an off-white background color"
         width={200}
         height={200}
+        alt="placeholder, blank area with an off-white background color"
         borderRadius={borderRadius}
       />
     ))}

packages/react/src/Image/Image.test.tsx

@@ -3,7 +3,7 @@ import {render} from '@testing-library/react'
 import '@testing-library/jest-dom'
 import {axe, toHaveNoViolations} from 'jest-axe'
 
-import {Image, ImageBorderRadiusOptions} from './'
+import {Image, ImageAspectRatio, ImageBorderRadiusOptions} from './'
 
 expect.extend(toHaveNoViolations)
 
@@ -17,7 +17,7 @@ describe('Image', () => {
     expect(results).toHaveNoViolations()
   })
 
-  it('should render an img element', async () => {
+  it('should render an img element', () => {
     const {getByAltText} = render(
       <Image src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png" alt="alternative text" />,
     )
@@ -28,7 +28,7 @@ describe('Image', () => {
     expect(imageElement.tagName).toBe('IMG')
   })
 
-  it('should apply animation styles when `animate` is provided', async () => {
+  it('should apply animation styles when `animate` is provided', () => {
     const {getByRole} = render(
       <Image src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png" alt="alternative text" animate="scale-in" />,
     )
@@ -39,7 +39,7 @@ describe('Image', () => {
     expect(imageElement).toHaveClass('Animation--scale-in')
   })
 
-  it('should forward the `className` prop to the image', async () => {
+  it('should forward the `className` prop to the image', () => {
     const testClass = 'test'
 
     const {getByRole} = render(
@@ -53,7 +53,7 @@ describe('Image', () => {
     expect(getByRole('img')).toHaveClass(testClass)
   })
 
-  it('should forward the `style` prop to the image', async () => {
+  it('should forward the `style` prop to the image', () => {
     const {getByRole} = render(
       <Image
         src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png"
@@ -65,18 +65,36 @@ describe('Image', () => {
     expect(getByRole('img')).toHaveStyle({background: 'red'})
   })
 
-  it('should forward the `alt` prop to the image', async () => {
+  it('should forward the `alt` prop to the image', () => {
     const {getByAltText} = render(
       <Image src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png" alt="alternative text" />,
     )
 
     expect(getByAltText('alternative text')).toBeInTheDocument()
   })
 
-  it.each(ImageBorderRadiusOptions)('should add the appropriate class when `borderRadius="%s"`', async size => {
+  it.each(ImageBorderRadiusOptions)('should add the appropriate class when `borderRadius="%s"`', size => {
     const {getByRole} = render(
       <Image src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png" alt="alternative text" borderRadius={size} />,
     )
     expect(getByRole('img')).toHaveClass(`Image--borderRadius-${size}`)
   })
+
+  it.each<{aspectRatio: ImageAspectRatio; classSuffix: string}>([
+    {aspectRatio: '1:1', classSuffix: '1-1'},
+    {aspectRatio: '16:9', classSuffix: '16-9'},
+    {aspectRatio: '16:10', classSuffix: '16-10'},
+    {aspectRatio: '4:3', classSuffix: '4-3'},
+    {aspectRatio: 'custom', classSuffix: 'custom'},
+  ])('should add the appropriate class when `aspectRatio="$aspectRatio"`', ({aspectRatio, classSuffix}) => {
+    const {getByRole} = render(
+      <Image
+        src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png"
+        alt="alternative text"
+        aspectRatio={aspectRatio}
+      />,
+    )
+
+    expect(getByRole('img')).toHaveClass(`Image--aspectRatio-${classSuffix}`)
+  })
 })

packages/react/src/Image/Image.tsx

@@ -5,7 +5,8 @@ import {AnimateProps, useAnimation} from '../animation'
 
 export const ImageBorderRadiusOptions = ['small', 'medium', 'large', 'xlarge', 'full'] as const
 export type ImageBorderRadiusOptions = (typeof ImageBorderRadiusOptions)[number]
-export type ImageAspectRatio = '1:1' | '16:9' | '16:10' | '4:3' | 'custom'
+export const ImageAspectRatios = ['1:1', '16:9', '16:10', '4:3', 'custom']
+export type ImageAspectRatio = (typeof ImageAspectRatios)[number]
 
 export type ImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
   alt: string