test: typography 테스트 케이스 추가

Author: jaem1n207

src/shared/ui/__tests__/typography.test.tsx

@@ -5,18 +5,44 @@ import { describe, expect, it } from 'vitest';
 import { Title } from '~/shared/ui/typography';
 
 describe('typography component', () => {
-  it('should render title', () => {
-    render(<Title size="h1">Hello World</Title>);
-    const titleElement = screen.getByText('Hello World');
-    expect(titleElement).toBeInTheDocument();
+  it('should render a h1 element by default', () => {
+    render(<Title>Hello World</Title>);
+    const heading = screen.getByRole('heading');
+    expect(heading.tagName).toBe('H1');
   });
-  it('should render h2 element', () => {
+  it('should apply the correct variant classes', () => {
+    render(<Title variant="primary">Hello World</Title>);
+    const heading = screen.getByRole('heading');
+    expect(heading).toHaveClass('text-primary');
+  });
+  it('should apply the correct size classes', () => {
+    render(<Title size="h2">Hello World</Title>);
+    const heading = screen.getByRole('heading');
+    expect(heading).toHaveClass('tracking-tight font-semibold text-3xl md:text-4xl');
+  });
+  it('should render as a child component with a custom tag', () => {
     render(
       <Title asChild size="h2">
         <h2>Hello World</h2>
       </Title>,
     );
-    const titleElement = screen.getByText('Hello World');
-    expect(titleElement.tagName).toBe('H2');
+    const heading = screen.getByRole('heading');
+    expect(heading.tagName).toBe('H2');
+  });
+  it('should apply additional class names', () => {
+    render(
+      <Title variant="primary" size="h1" className="text-center text-secondary">
+        Hello World
+      </Title>,
+    );
+    const heading = screen.getByRole('heading');
+    expect(heading).toHaveClass(
+      'tracking-tight font-extrabold text-4xl md:text-5xl text-center text-secondary',
+    );
+  });
+  it('should forward a ref to the DOM element', () => {
+    const ref = createRef<HTMLHeadingElement>();
+    render(<Title ref={ref}>Hello World</Title>);
+    expect(ref.current).toBeInstanceOf(HTMLHeadingElement);
   });
 });

src/shared/ui/typography.tsx

@@ -11,8 +11,8 @@ const titleVariants = cva(null, {
       primary: 'text-primary',
     },
     size: {
-      h1: 'leading-tight tracking-tight font-extrabold text-4xl md:text-5xl',
-      h2: 'leading-tight tracking-tight font-semibold text-3xl md:text-4xl',
+      h1: 'tracking-tight font-extrabold text-4xl md:text-5xl',
+      h2: 'tracking-tight font-semibold text-3xl md:text-4xl',
       h3: 'tracking-tight font-semibold text-2xl md:text-3xl',
       h4: 'font-semibold text-xl md:text-2xl',
     },