73 lines
3.5 KiB
TypeScript
73 lines
3.5 KiB
TypeScript
// @vitest-environment jsdom
|
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
|
import '@testing-library/jest-dom/vitest';
|
|
import { render, screen, fireEvent, cleanup } from '@testing-library/react';
|
|
import { NotebookList } from '../../src/renderer/inbox/components/NotebookList';
|
|
|
|
const notebooks = [
|
|
{ id: 'nb-1', name: '기본', color: null, createdAt: 't', updatedAt: 't', noteCount: 3 },
|
|
{ id: 'nb-2', name: '회사', color: '#0a4b80', createdAt: 't', updatedAt: 't', noteCount: 7 }
|
|
];
|
|
|
|
describe('NotebookList', () => {
|
|
beforeEach(cleanup);
|
|
|
|
it('노트북 이름 + count 렌더링', () => {
|
|
render(<NotebookList notebooks={notebooks} selectedId="nb-1" onSelect={() => {}} onCreate={() => {}} />);
|
|
expect(screen.getByText('기본')).toBeInTheDocument();
|
|
expect(screen.getByText('3')).toBeInTheDocument();
|
|
expect(screen.getByText('회사')).toBeInTheDocument();
|
|
expect(screen.getByText('7')).toBeInTheDocument();
|
|
});
|
|
|
|
it('클릭 시 onSelect 호출', () => {
|
|
const onSelect = vi.fn();
|
|
render(<NotebookList notebooks={notebooks} selectedId="nb-1" onSelect={onSelect} onCreate={() => {}} />);
|
|
fireEvent.click(screen.getByText('회사'));
|
|
expect(onSelect).toHaveBeenCalledWith('nb-2');
|
|
});
|
|
|
|
it('+ 새 노트북 클릭 시 onCreate 호출', () => {
|
|
const onCreate = vi.fn();
|
|
render(<NotebookList notebooks={notebooks} selectedId="nb-1" onSelect={() => {}} onCreate={onCreate} />);
|
|
fireEvent.click(screen.getByRole('button', { name: /새 노트북/ }));
|
|
expect(onCreate).toHaveBeenCalled();
|
|
});
|
|
|
|
it('selected notebook 의 background 가 다름', () => {
|
|
render(<NotebookList notebooks={notebooks} selectedId="nb-1" onSelect={() => {}} onCreate={() => {}} />);
|
|
const btn1 = screen.getByText('기본').closest('button')!;
|
|
const btn2 = screen.getByText('회사').closest('button')!;
|
|
expect(btn1.style.background).not.toBe('transparent');
|
|
expect(btn2.style.background).toBe('transparent');
|
|
});
|
|
|
|
it('hover 시 ↑↓ 버튼 노출', () => {
|
|
const { container } = render(<NotebookList notebooks={notebooks} selectedId="nb-1" onSelect={() => {}} onCreate={() => {}} onReorder={async () => {}} />);
|
|
// 기본 상태: ↑↓ 미노출
|
|
expect(screen.queryByLabelText(/위로/)).not.toBeInTheDocument();
|
|
// hover 후 보임 — position:relative 인 row div 선택
|
|
const row = container.querySelector('div[style*="position: relative"]') as HTMLElement;
|
|
fireEvent.mouseEnter(row);
|
|
expect(screen.getAllByLabelText(/위로/).length).toBeGreaterThan(0);
|
|
});
|
|
|
|
it('↑ 클릭 시 onReorder up 호출', () => {
|
|
const onReorder = vi.fn();
|
|
const { container } = render(<NotebookList notebooks={notebooks} selectedId="nb-2" onSelect={() => {}} onCreate={() => {}} onReorder={onReorder} />);
|
|
const rows = container.querySelectorAll('div[style*="position: relative"]');
|
|
// 두번째 row (nb-2) hover → 위로 클릭
|
|
fireEvent.mouseEnter(rows[1] as Element);
|
|
fireEvent.click(screen.getByLabelText('회사 위로'));
|
|
expect(onReorder).toHaveBeenCalledWith('nb-2', 'up');
|
|
});
|
|
|
|
it('첫 row 의 ↑ 는 disabled', () => {
|
|
const { container } = render(<NotebookList notebooks={notebooks} selectedId="nb-1" onSelect={() => {}} onCreate={() => {}} onReorder={async () => {}} />);
|
|
const rows = container.querySelectorAll('div[style*="position: relative"]');
|
|
fireEvent.mouseEnter(rows[0] as Element);
|
|
const upBtn = screen.getByLabelText('기본 위로');
|
|
expect(upBtn).toBeDisabled();
|
|
});
|
|
});
|