Write tests for updated CAspectRatioBox

Author: IHIutch

packages/chakra-ui-core/src/CAspectRatioBox/tests/CAspectRatioBox.test.js

@@ -6,7 +6,9 @@ const renderComponent = (props) => {
     components: { CAspectRatioBox, CBox },
     template: `
     <CAspectRatioBox maxW="400px" data-testid="aspectRatioBox" ${inlineAttrs}>
-      <CBox as="img" src="https://bit.ly/naruto-sage" alt="naruto" objectFit="cover" data-testid="image" />
+      <CBox data-testid="child">
+        <CBox as="img" src="https://bit.ly/naruto-sage" alt="naruto" objectFit="cover" h="100%" w="100%" data-testid="image" />
+      </CBox>
     </CAspectRatioBox>
     `,
     ...props
@@ -22,35 +24,50 @@ it('should render correctly', () => {
   const [emotionClassName] = [...screen.getByTestId('aspectRatioBox').classList]
   const pseudoStyles = getElementStyles(`.${emotionClassName}:before`)
 
-  expect(pseudoStyles).toContain(`
+  expect(pseudoStyles).toContain(
+    `
     padding-bottom: 100%
-  `.trim())
+  `.trim()
+  )
 })
 
 it('should have correct styles', () => {
   const inlineAttrs = ':ratio="2"'
   renderComponent({ inlineAttrs })
   const image = screen.getByTestId('image')
   const aspectRatioBox = screen.getByTestId('aspectRatioBox')
+  const child = screen.getByTestId('child')
 
   const [emotionClassName] = [...aspectRatioBox.classList] // second className has the pseudo styles
   const pseudoStyles = getElementStyles(`.${emotionClassName}:before`)
 
-  expect(pseudoStyles).toContain(`
+  expect(pseudoStyles).toContain(
+    `
     padding-bottom: 50%
-  `.trim())
+  `.trim()
+  )
 
   expect(aspectRatioBox).toHaveStyle(`
     max-width: 400px;
     position: relative;
   `)
 
-  expect(image).toHaveStyle(`
-    object-fit: cover;
+  // aspectRatioBox should contain exactly 1 immediate child
+  expect(aspectRatioBox.childElementCount).toEqual(1)
+
+  expect(child).toHaveStyle(`
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0px;
     left: 0px;
   `)
+
+  expect(child).not.toBeEmpty()
+
+  expect(image).toHaveStyle(`
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  `)
 })

packages/chakra-ui-core/src/CAspectRatioBox/tests/__snapshots__/CAspectRatioBox.test.js.snap

@@ -7,13 +7,19 @@ exports[`should render correctly 1`] = `
     data-chakra-component="CAspectRatioBox"
     data-testid="aspectRatioBox"
   >
-    <img
-      alt="naruto"
-      class="css-1mlkgdx"
+    <div
+      class="css-k57fb3"
       data-chakra-component="CBox"
-      data-testid="image"
-      src="https://bit.ly/naruto-sage"
-    />
+      data-testid="child"
+    >
+      <img
+        alt="naruto"
+        class="css-ygtapu"
+        data-chakra-component="CBox"
+        data-testid="image"
+        src="https://bit.ly/naruto-sage"
+      />
+    </div>
   </div>
 </DocumentFragment>
 `;