test: 테스트 커버리지 작업

Author: 1ilsang

src/features/post/information/ProfileSection.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import type { FunctionComponent } from 'react';
 import { MyProfile } from '~/about/headline/data/profile';
-import { Avatar } from '~/shared/components/Avatar';
+import { Avatar } from '~/shared/components/Avatar/Container';
 
 export const ProfileSection: FunctionComponent = () => {
   return (

src/features/shared/components/Avatar.spec.tsx

@@ -0,0 +1,82 @@
+import { render, screen } from '@testing-library/react';
+import { Avatar } from './Container';
+import { MyProfile } from '~/about/headline/data/profile';
+
+describe('rendering', () => {
+  it('should visible', async () => {
+    render(<Avatar />);
+    expect(
+      screen.getByRole('img', { name: '1ilsang character' }),
+    ).toBeVisible();
+  });
+
+  it('should visible with nav prop', async () => {
+    render(<Avatar nav />);
+    expect(
+      screen.getByRole('img', { name: '1ilsang character' }),
+    ).toBeVisible();
+  });
+});
+
+describe('attr', () => {
+  it('should href be "/about"', async () => {
+    render(<Avatar />);
+    expect(screen.getByRole('link')).toHaveAttribute('href', '/about');
+  });
+
+  it('should same MyProfile', async () => {
+    render(<Avatar />);
+    const img = screen.getByAltText(MyProfile.personal.alt);
+    expect(img).toHaveAttribute('src', MyProfile.personal.imageSrc);
+  });
+});
+
+describe('styles', () => {
+  it('should have default styles when nav is false', async () => {
+    render(<Avatar />);
+    const container = screen.getByRole('img', { name: '1ilsang character' });
+    expect(container).toHaveClass('mr-2', 'w-9', 'h-9', 'md:w-12', 'md:h-12');
+
+    const img = screen.getByAltText(MyProfile.personal.alt);
+    expect(img).toHaveClass(
+      'border',
+      'border-solid',
+      'rounded-full',
+      'border-sub-blue',
+    );
+  });
+
+  it('should have nav styles when nav is true', async () => {
+    render(<Avatar nav />);
+    const container = screen.getByRole('img', { name: '1ilsang character' });
+    expect(container).toHaveClass('mr-2', 'w-8', 'h-8', 'mt-2');
+
+    const img = screen.getByAltText(MyProfile.personal.alt);
+    expect(img).toHaveClass(
+      'border',
+      'border-solid',
+      'rounded-full',
+      'border-white-blue',
+    );
+  });
+});
+
+describe('accessibility', () => {
+  it('should have proper ARIA attributes', async () => {
+    render(<Avatar />);
+    const container = screen.getByRole('img', { name: '1ilsang character' });
+    expect(container).toHaveAttribute('aria-label', '1ilsang character');
+  });
+
+  it('should have proper image alt text', async () => {
+    render(<Avatar />);
+    const img = screen.getByAltText(MyProfile.personal.alt);
+    expect(img).toBeInTheDocument();
+  });
+});
+
+describe('component', () => {
+  it('should have proper displayName', () => {
+    expect(Avatar.displayName).toBe('Avatar');
+  });
+});

src/features/shared/components/Avatar/Avatar.spec.tsx

@@ -1,5 +1,11 @@
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import ExternalLink, { highlighterClass } from './ExternalLink';
+import { ga } from '../helpers/logger';
+
+jest.mock('../helpers/logger', () => ({
+  ga: jest.fn(),
+}));
 
 describe('rendering', () => {
   it('should visible', async () => {
@@ -37,6 +43,23 @@ describe('rendering', () => {
       ...[highlighterClass, propClass],
     );
   });
+
+  it('should disable default CSS transition when prop is true', async () => {
+    render(<ExternalLink href="1ilsang.dev" disableDefaultCSSTransition />);
+    expect(screen.getByRole('link')).not.toHaveClass(highlighterClass);
+  });
+
+  it('should render with both label and children', async () => {
+    const label = 'My Link';
+    const childText = ' - Click here';
+    render(
+      <ExternalLink href="1ilsang.dev" label={label}>
+        {childText}
+      </ExternalLink>,
+    );
+    const link = screen.getByRole('link');
+    expect(link).toHaveTextContent(`${label}${childText}`);
+  });
 });
 
 describe('attr', () => {
@@ -59,3 +82,34 @@ describe('attr', () => {
     );
   });
 });
+
+describe('interactions', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should call ga tracking when clicked with href as value', async () => {
+    const href = 'https://example.com';
+    render(<ExternalLink href={href} />);
+
+    await userEvent.click(screen.getByRole('link'));
+
+    expect(ga).toHaveBeenCalledWith('linkClick', {
+      type: 'external-link',
+      value: href,
+    });
+  });
+
+  it('should call ga tracking when clicked with label as value', async () => {
+    const href = 'https://example.com';
+    const label = 'Example Site';
+    render(<ExternalLink href={href} label={label} />);
+
+    await userEvent.click(screen.getByRole('link'));
+
+    expect(ga).toHaveBeenCalledWith('linkClick', {
+      type: 'external-link',
+      value: label,
+    });
+  });
+});

src/features/shared/components/Avatar.tsx …s/shared/components/Avatar/Container.tsxsrc/features/shared/components/Avatar.tsx renamed to src/features/shared/components/Avatar/Container.tsx src/features/shared/components/Avatar.tsx renamed to src/features/shared/components/Avatar/Container.tsx

@@ -160,6 +160,39 @@ describe('Typography Component', () => {
       expect(screen.getByRole('paragraph')).toBeInTheDocument();
     });
 
+    it('isValidElement가 false인 경우를 처리해야 한다', () => {
+      const invalidElement = 'string content';
+      render(<Typography>{invalidElement}</Typography>);
+
+      expect(screen.getByText('string content')).toBeInTheDocument();
+    });
+
+    it('children이 없는 요소를 처리해야 한다', () => {
+      const ElementWithoutChildren = ({ ...props }) => <span {...props} />;
+      render(
+        <Typography>
+          <ElementWithoutChildren />
+        </Typography>,
+      );
+
+      // 에러 없이 렌더링되어야 함
+      const paragraph = screen.getByRole('paragraph');
+      expect(paragraph).toBeInTheDocument();
+    });
+
+    it('props가 undefined인 요소를 처리해야 한다', () => {
+      // processChild 함수를 직접 테스트할 수 없으므로,
+      // 실제 시나리오와 가까운 테스트를 작성
+      render(
+        <Typography>
+          <span />
+        </Typography>,
+      );
+
+      const paragraph = screen.getByRole('paragraph');
+      expect(paragraph).toBeInTheDocument();
+    });
+
     it('매우 깊은 중첩 구조에서 최대 깊이 제한을 적용해야 한다', () => {
       // 15단계 깊이의 중첩 구조 생성 (최대 10단계로 제한됨)
       let nestedElement = <span>깊은 텍스트</span>;
@@ -213,5 +246,39 @@ describe('Typography Component', () => {
       expect(pElement?.textContent).toContain('일반 텍스트');
       expect(pElement?.textContent).toContain('더 많은 텍스트');
     });
+
+    it('children이 배열인 경우를 처리해야 한다', () => {
+      const arrayChildren = ['첫 번째', '두 번째'];
+
+      render(
+        <Typography>
+          <span>{arrayChildren}</span>
+        </Typography>,
+      );
+
+      expect(screen.getByText('첫 번째두 번째')).toBeInTheDocument();
+    });
+
+    it('복잡한 React 요소 배열을 처리해야 한다', () => {
+      const complexChildren = [
+        <span key="1">첫 번째 span</span>,
+        '텍스트',
+        <span key="2">두 번째 span</span>,
+      ];
+
+      render(
+        <Typography>
+          <span>{complexChildren}</span>
+        </Typography>,
+      );
+
+      // 각각의 텍스트가 존재하는지 확인
+      expect(screen.getByText(/첫 번째 span/)).toBeInTheDocument();
+      expect(screen.getByText(/두 번째 span/)).toBeInTheDocument();
+    });
+
+    it('displayName이 올바르게 설정되어 있어야 한다', () => {
+      expect(Typography.displayName).toBe('Typography');
+    });
   });
 });

src/features/shared/components/ExternalLink.spec.tsx

@@ -5,7 +5,7 @@ import { usePathname } from 'next/navigation';
 import type { FunctionComponent } from 'react';
 import { memo, useEffect, useMemo, useState } from 'react';
 import classNames from 'classnames';
-import { Avatar } from '../Avatar';
+import { Avatar } from '../Avatar/Container';
 import { usePrint } from '~/shared/hooks/usePrint';
 
 interface NavTextProps {