Merge pull request #220 from ITBooster-practice/feature/test-widgets

feat(web): добавлены тесты для widgets

Author: Khimish009

apps/web/test/unit/entities/task/task-badges.spec.tsx

@@ -0,0 +1,85 @@
+import { cleanup, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { TaskPriorityBadge } from '@/entities/task/ui/task-priority-badge'
+import { TaskStatusBadge } from '@/entities/task/ui/task-status-badge'
+import { TaskTypeBadge } from '@/entities/task/ui/task-type-badge'
+
+// ─── Мок: @repo/ui ───────────────────────────────────────────────
+// Tooltip рендерит контент сразу (без hover), чтобы тест мог проверить label.
+vi.mock('@repo/ui', () => ({
+	Badge: ({
+		children,
+		className,
+	}: React.PropsWithChildren<{ variant?: string; className?: string }>) => (
+		<span className={className}>{children}</span>
+	),
+	cn: (...args: unknown[]) => args.filter(Boolean).join(' '),
+	Tooltip: ({ children }: React.PropsWithChildren) => <>{children}</>,
+	TooltipContent: ({ children }: React.PropsWithChildren) => (
+		<div data-testid='tooltip-content'>{children}</div>
+	),
+	TooltipProvider: ({ children }: React.PropsWithChildren) => <>{children}</>,
+	TooltipTrigger: ({
+		children,
+	}: React.PropsWithChildren<{ asChild?: boolean; className?: string }>) => (
+		<div data-testid='tooltip-trigger'>{children}</div>
+	),
+}))
+
+vi.mock('@repo/ui/icons', () => ({
+	AlertTriangle: () => <span data-testid='icon-alert' />,
+	ArrowDown: () => <span data-testid='icon-arrow-down' />,
+	ArrowUp: () => <span data-testid='icon-arrow-up' />,
+	Minus: () => <span data-testid='icon-minus' />,
+}))
+
+afterEach(cleanup)
+
+// ─── TaskStatusBadge ─────────────────────────────────────────────
+describe('TaskStatusBadge', () => {
+	it.each([
+		['TODO', 'К выполнению'],
+		['IN_PROGRESS', 'В работе'],
+		['IN_REVIEW', 'Ревью'],
+		['DONE', 'Готово'],
+	] as const)('статус %s → отображает "%s"', (status, label) => {
+		render(<TaskStatusBadge status={status} />)
+
+		expect(screen.getByText(label)).toBeDefined()
+
+		cleanup()
+	})
+})
+
+// ─── TaskTypeBadge ───────────────────────────────────────────────
+describe('TaskTypeBadge', () => {
+	it.each(['Эпик', 'Стори', 'Баг', 'Тех. долг', 'Задача'] as const)(
+		'тип "%s" → рендерит текст типа',
+		(type) => {
+			render(<TaskTypeBadge type={type} />)
+
+			expect(screen.getByText(type)).toBeDefined()
+
+			cleanup()
+		},
+	)
+})
+
+// ─── TaskPriorityBadge ───────────────────────────────────────────
+describe('TaskPriorityBadge', () => {
+	it.each([
+		['LOW', 'icon-arrow-down', 'Низкий'],
+		['MEDIUM', 'icon-minus', 'Средний'],
+		['HIGH', 'icon-arrow-up', 'Высокий'],
+		['CRITICAL', 'icon-alert', 'Критичный'],
+	] as const)('приоритет %s → иконка %s и тултип "%s"', (priority, iconTestId, label) => {
+		render(<TaskPriorityBadge priority={priority} />)
+
+		expect(screen.getByTestId(iconTestId)).toBeDefined()
+		expect(screen.getByTestId('tooltip-content')).toBeDefined()
+		expect(screen.getByText(label)).toBeDefined()
+
+		cleanup()
+	})
+})

apps/web/test/unit/widgets/main-layout/layout-and-header.spec.tsx

@@ -0,0 +1,119 @@
+import { cleanup, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { Header } from '@/widgets/main-layout/ui/header/header'
+import { Layout } from '@/widgets/main-layout/ui/layout'
+import { MainLayout } from '@/widgets/main-layout/ui/main-layout'
+
+// ─── Мок: sub-компоненты Header ──────────────────────────────────
+vi.mock('@/widgets/main-layout/ui/header/mobile-sidebar-trigger', () => ({
+	MobileSidebarTrigger: () => <div data-testid='mobile-trigger' />,
+}))
+
+vi.mock('@/widgets/main-layout/ui/header/profile-menu', () => ({
+	ProfileMenu: () => <div data-testid='profile-menu' />,
+}))
+
+vi.mock('@/widgets/main-layout/ui/header/sidebar-toggle', () => ({
+	SidebarToggle: () => <div data-testid='sidebar-toggle' />,
+}))
+
+// ─── Мок: sub-компоненты MainLayout ──────────────────────────────
+vi.mock('@/widgets/main-layout/ui/sidebar', () => ({
+	Sidebar: () => <div data-testid='sidebar' />,
+}))
+
+vi.mock('@/widgets/main-layout/ui/header', () => ({
+	Header: () => <div data-testid='header' />,
+}))
+
+vi.mock('@/widgets/main-layout/ui/layout', () => ({
+	Layout: ({
+		sidebar,
+		header,
+		children,
+	}: {
+		sidebar: React.ReactNode
+		header: React.ReactNode
+		children: React.ReactNode
+	}) => (
+		<div>
+			<div data-testid='slot-sidebar'>{sidebar}</div>
+			<div data-testid='slot-header'>{header}</div>
+			<div data-testid='slot-children'>{children}</div>
+		</div>
+	),
+}))
+
+// ─── Мок: @repo/ui ───────────────────────────────────────────────
+vi.mock('@repo/ui', () => ({
+	Button: ({
+		children,
+		...props
+	}: React.PropsWithChildren<React.ButtonHTMLAttributes<HTMLButtonElement>>) => (
+		<button {...props}>{children}</button>
+	),
+	Input: (props: React.InputHTMLAttributes<HTMLInputElement>) => <input {...props} />,
+}))
+
+vi.mock('@repo/ui/icons', () => ({
+	Bell: () => <span data-testid='icon-bell' />,
+}))
+
+afterEach(cleanup)
+
+// ─── Layout ──────────────────────────────────────────────────────
+describe('Layout', () => {
+	it('рендерит sidebar, header и children слоты', () => {
+		const { unmount } = render(
+			<Layout
+				sidebar={<div data-testid='test-sidebar' />}
+				header={<div data-testid='test-header' />}
+			>
+				<div data-testid='test-content'>Контент</div>
+			</Layout>,
+		)
+
+		expect(screen.getByTestId('test-sidebar')).toBeDefined()
+		expect(screen.getByTestId('test-header')).toBeDefined()
+		expect(screen.getByTestId('test-content')).toBeDefined()
+
+		unmount()
+	})
+})
+
+// ─── Header ──────────────────────────────────────────────────────
+describe('Header', () => {
+	it('рендерит поле поиска', () => {
+		render(<Header />)
+
+		expect(screen.getByPlaceholderText('Поиск (пока не реализовано)')).toBeDefined()
+	})
+
+	it('рендерит кнопку уведомлений', () => {
+		render(<Header />)
+
+		expect(screen.getByRole('button', { name: 'Уведомления (заглушка)' })).toBeDefined()
+	})
+
+	it('рендерит вложенные компоненты навигации', () => {
+		render(<Header />)
+
+		expect(screen.getByTestId('mobile-trigger')).toBeDefined()
+		expect(screen.getByTestId('profile-menu')).toBeDefined()
+	})
+})
+
+// ─── MainLayout ──────────────────────────────────────────────────
+describe('MainLayout', () => {
+	it('рендерит children в нужном слоте', () => {
+		render(
+			<MainLayout>
+				<div data-testid='page-content'>Страница</div>
+			</MainLayout>,
+		)
+
+		expect(screen.getByTestId('slot-children')).toBeDefined()
+		expect(screen.getByTestId('page-content')).toBeDefined()
+	})
+})

apps/web/test/unit/widgets/main-layout/sidebar-component.spec.tsx

@@ -0,0 +1,169 @@
+import { cleanup, render, screen } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useSideBarStore } from '@/widgets/main-layout/model/sidebar'
+import { Sidebar } from '@/widgets/main-layout/ui/sidebar'
+
+// ─── Мок: next/link ──────────────────────────────────────────────
+vi.mock('next/link', () => ({
+	default: ({
+		href,
+		children,
+		className,
+		onClick,
+	}: React.PropsWithChildren<{
+		href: string
+		className?: string
+		onClick?: () => void
+	}>) => (
+		<a href={href} className={className} onClick={onClick}>
+			{children}
+		</a>
+	),
+}))
+
+// ─── Мок: usePathname, useParams ─────────────────────────────────
+const mockUsePathname = vi.fn()
+const mockUseParams = vi.fn()
+
+vi.mock('next/navigation', () => ({
+	usePathname: () => mockUsePathname(),
+	useParams: () => mockUseParams(),
+}))
+
+// ─── Мок: ThemeToggle ────────────────────────────────────────────
+vi.mock('@/features/theme', () => ({
+	ThemeToggle: () => <button data-testid='theme-toggle' />,
+}))
+
+// ─── Мок: useTeamsList ───────────────────────────────────────────
+const mockUseTeamsList = vi.fn()
+
+vi.mock('@/shared/api/use-teams', () => ({
+	useTeamsList: () => mockUseTeamsList(),
+}))
+
+// ─── Мок: shared/config ──────────────────────────────────────────
+vi.mock('@/shared/config', () => ({
+	getSidebarRouteId: () => null,
+	ROUTES: { home: '/' },
+}))
+
+// ─── Мок: shared/lib/projects ────────────────────────────────────
+vi.mock('@/shared/lib/projects', () => ({
+	buildTeamProjectHref: (teamId: string, projectId: string) =>
+		`/teams/${teamId}/projects/${projectId}`,
+	projectCatalog: [],
+}))
+
+// ─── Мок: model/sidebar ──────────────────────────────────────────
+vi.mock('@/widgets/main-layout/model/sidebar', async (importOriginal) => {
+	const original =
+		await importOriginal<typeof import('@/widgets/main-layout/model/sidebar')>()
+
+	return {
+		...original,
+		getSidebarSections: () => [
+			{
+				title: 'Работа',
+				items: [
+					{
+						title: 'Проекты',
+						href: '/teams/team-1/projects',
+						routeId: 'team.projects',
+						icon: () => <span />,
+					},
+				],
+			},
+		],
+		sidebarWorkspace: { title: 'Tracker Task', subtitle: 'Product Team' },
+		sidebarCurrentUser: { initials: 'AI', name: 'Алексей Иванов', role: 'Owner' },
+		sidebarProjects: [],
+	}
+})
+
+// ─── Мок: SidebarMenuItem / SidebarProjectItem ───────────────────
+vi.mock('@/widgets/main-layout/ui/sidebar/sidebar-menu-item', () => ({
+	SidebarMenuItem: ({
+		title,
+		isActive,
+	}: {
+		title: string
+		isActive: boolean
+		isOpen: boolean
+		href: string
+		onNavigate?: () => void
+	}) => (
+		<div data-testid='menu-item' data-active={String(isActive)}>
+			{title}
+		</div>
+	),
+}))
+
+vi.mock('@/widgets/main-layout/ui/sidebar/sidebar-project-item', () => ({
+	SidebarProjectItem: ({
+		title,
+	}: {
+		title: string
+		href: string
+		isActive: boolean
+		isOpen: boolean
+	}) => <div data-testid='project-item'>{title}</div>,
+}))
+
+// ─── Мок: UI-компоненты ──────────────────────────────────────────
+vi.mock('@repo/ui', () => ({
+	Avatar: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+	AvatarFallback: ({ children }: React.PropsWithChildren) => <span>{children}</span>,
+	cn: (...args: unknown[]) => args.filter(Boolean).join(' '),
+}))
+
+vi.mock('@repo/ui/icons', () => ({
+	KanbanSquare: () => <span data-testid='kanban-icon' />,
+}))
+
+describe('Sidebar', () => {
+	beforeEach(() => {
+		vi.clearAllMocks()
+		mockUsePathname.mockReturnValue('/')
+		mockUseParams.mockReturnValue({})
+		mockUseTeamsList.mockReturnValue({ data: [] })
+		useSideBarStore.setState({ isOpen: true })
+	})
+
+	afterEach(cleanup)
+
+	it('развёрнутый (forceOpen=true) — показывает заголовок workspace', () => {
+		render(<Sidebar forceOpen={true} />)
+
+		expect(screen.getByText('Tracker Task')).toBeDefined()
+	})
+
+	it('свёрнутый (forceOpen=false) — скрывает заголовок workspace', () => {
+		render(<Sidebar forceOpen={false} />)
+
+		expect(screen.queryByText('Tracker Task')).toBeNull()
+	})
+
+	it('показывает имя текущей команды под заголовком когда sidebar открыт', () => {
+		mockUseParams.mockReturnValue({ id: 'team-1' })
+		mockUseTeamsList.mockReturnValue({
+			data: [
+				{
+					id: 'team-1',
+					name: 'Design Team',
+					description: null,
+					avatarUrl: null,
+					membersCount: 5,
+					currentUserRole: 'MEMBER',
+					createdAt: '2024-01-01',
+					updatedAt: '2024-01-01',
+				},
+			],
+		})
+
+		render(<Sidebar forceOpen={true} />)
+
+		expect(screen.getByText('Design Team')).toBeDefined()
+	})
+})