From 1714dbac41a9a7f727121e1e1a51a891f7fd2041 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gromit=20=28=EC=A0=84=EB=AF=BC=EC=9E=AC=29?=
 <64779472+ssi02014@users.noreply.github.com>
Date: Wed, 20 Nov 2024 15:25:34 +0900
Subject: [PATCH] =?UTF-8?q?test:=20aspectRatio=20=ED=85=8C=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95=20(#598)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: type error

* fix: aspectRatio 테스트 코드 수정
---
 .../AspectRatio/AspectRatio.spec.tsx          | 47 +++----------------
 .../src/components/AspectRatio/index.tsx      |  2 +-
 2 files changed, 7 insertions(+), 42 deletions(-)

diff --git a/packages/react/src/components/AspectRatio/AspectRatio.spec.tsx b/packages/react/src/components/AspectRatio/AspectRatio.spec.tsx
index 1b474a521..f2bae18cf 100644
--- a/packages/react/src/components/AspectRatio/AspectRatio.spec.tsx
+++ b/packages/react/src/components/AspectRatio/AspectRatio.spec.tsx
@@ -2,51 +2,16 @@ import { render, screen } from '@testing-library/react';
 import { describe, it, expect } from 'vitest';
 import { AspectRatio } from '.';
 
-describe('AspectRatio component', () => {
-  it('기본적으로 div 태그를 부모 요소로 두고 자식 요소를 렌더링하며, div 태그에 aspect-ratio 설정이 적용되어야 합니다.', () => {
+describe('AspectRatio', () => {
+  it('자식 요소에 aspect-ratio 설정이 적용되어야 합니다.', () => {
     render(
-      <AspectRatio ratio={16 / 9} role="wrapper">
-        <p>Content</p>
+      <AspectRatio ratio={16 / 9}>
+        <p role="paragraph">Content</p>
       </AspectRatio>
     );
 
-    const wrapper = screen.getByRole('wrapper');
+    const paragraph = screen.getByRole('paragraph');
 
-    expect(wrapper).toHaveStyle(
-      'padding-top: calc(100% * (1 / 1.7777777777777777))'
-    );
-    expect(wrapper.tagName).toBe('DIV');
-  });
-
-  it('asChild 속성이 true라면 aspect-ratio 설정이 자식 요소에 적용됩니다.', () => {
-    const { container } = render(
-      <AspectRatio ratio={16 / 9} asChild>
-        <section role="wrapper">Content</section>
-      </AspectRatio>
-    );
-
-    const divWrapper = container.querySelector('div');
-
-    expect(divWrapper).not.toBeInTheDocument();
-
-    const wrapper = screen.getByRole('wrapper');
-
-    expect(wrapper).toHaveStyle(
-      'padding-top: calc(100% * (1 / 1.7777777777777777))'
-    );
-    expect(wrapper.tagName).toBe('SECTION');
-  });
-
-  it('하나 이상의 하위 요소가 있을 때 오류를 발생시켜야 합니다.', () => {
-    const renderComponent = () => {
-      render(
-        <AspectRatio ratio={4 / 3}>
-          <div>Child 1</div>
-          <div>Child 2</div>
-        </AspectRatio>
-      );
-    };
-
-    expect(renderComponent).toThrow();
+    expect(paragraph).toHaveStyle('aspect-ratio: 1.7777777777777777');
   });
 });
diff --git a/packages/react/src/components/AspectRatio/index.tsx b/packages/react/src/components/AspectRatio/index.tsx
index 4ac1d4d9a..07edd5ef3 100644
--- a/packages/react/src/components/AspectRatio/index.tsx
+++ b/packages/react/src/components/AspectRatio/index.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import styles from './AspectRatio.module.css';
 import { Slot } from '../Slot';
-import { CSSProperties, Children, PropsWithChildren, useMemo } from 'react';
+import { CSSProperties, Children, useMemo } from 'react';
 
 interface AspectRatioProps {
   children: JSX.Element;