diff --git a/src/test/common/DropdownMenu.test.tsx b/src/test/common/DropdownMenu.test.tsx new file mode 100644 index 0000000..8a0a900 --- /dev/null +++ b/src/test/common/DropdownMenu.test.tsx @@ -0,0 +1,70 @@ +import { render, waitFor, screen, fireEvent } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import DropdownMenu from '@ui/common/DropdownMenu'; +import userEvent from '@testing-library/user-event'; + +describe('DropdownMenu Component', () => { + const onMenuClick = jest.fn(); + const items = [ + { label: 'option1', onClick: onMenuClick }, + { label: 'option2', onClick: onMenuClick, disabled: true }, + ]; + + test('should render correctly', () => { + const wrapper = render(menu); + expect(() => wrapper.unmount()).not.toThrow(); + }); + + test('should contain a button', () => { + const { getByRole } = render( + menu, + ); + + const menuButton = getByRole('button', { name: /menu/i }); + expect(menuButton).not.toBeNull(); + }); + + test('should open the menu when button is clicked', async () => { + const { getByRole } = render( + menu, + ); + + const menuButton = getByRole('button', { name: /menu/i }); + expect(menuButton).toHaveAttribute('aria-expanded', 'false'); + expect(screen.queryByText(/option1/i)).toBeNull(); + + await userEvent.click(menuButton); + + await waitFor(() => { + expect(menuButton).toHaveAttribute('aria-expanded', 'true'); + expect(screen.getByText(/option1/i)).toBeInTheDocument(); + expect(screen.getByText(/option2/i)).toBeInTheDocument(); + }); + }); + + test('should call onClick event when menu item is clicked', async () => { + const { getByRole } = render( + menu, + ); + + const menuButton = getByRole('button', { name: /menu/i }); + await userEvent.click(menuButton); + + const option1 = await screen.findByText('option1'); + fireEvent.click(option1); + + expect(onMenuClick).toHaveBeenCalledTimes(1); + }); + + it('should have aria-disabled attribute for disabled menu item', async () => { + const { getByRole } = render( + menu, + ); + + const menuButton = getByRole('button', { name: /menu/i }); + await userEvent.click(menuButton); + + const disabledItem = await screen.findByText('option2'); + expect(disabledItem).toHaveAttribute('aria-disabled', 'true'); // Radix UI 스타일 확인 + }); +}); diff --git a/src/ui/trip/TripInfo.tsx b/src/ui/trip/TripInfo.tsx index 8db6bab..33a87ad 100644 --- a/src/ui/trip/TripInfo.tsx +++ b/src/ui/trip/TripInfo.tsx @@ -106,7 +106,7 @@ export default function TripInfo({ id }: TTripInfoProps) { } as React.CSSProperties } className={twMerge( - 'section-box relative min-h-[136px] overflow-hidden bg-cover bg-center bg-no-repeat', + 'section-box relative flex min-h-[136px] flex-row justify-between overflow-hidden bg-cover bg-center bg-no-repeat', // 'before:to--[#888888]/30 before:absolute before:inset-0 before:bg-gradient-to-r before:from-black before:opacity-50 before:content-[""]', // 'bg-[image:var(--bg-img)]', // backgroundImage && 'bg-[image:var(--bg-img)]', @@ -118,7 +118,7 @@ export default function TripInfo({ id }: TTripInfoProps) {
{dDay}
-
+