79 lines
3.5 KiB
TypeScript
79 lines
3.5 KiB
TypeScript
|
import { describe, it, expect, vi } from 'vitest'
|
||
|
|
import { render, screen, fireEvent, act } from '@testing-library/react'
|
||
|
|
import { NoteIcon } from './NoteIcon'
|
||
|
|
|
||
|
|
describe('NoteIcon', () => {
|
||
|
|
it('shows add button when no icon is set', () => {
|
||
|
|
render(<NoteIcon icon={null} onSetIcon={() => {}} onRemoveIcon={() => {}} />)
|
||
|
|
expect(screen.getByTestId('note-icon-add')).toBeInTheDocument()
|
||
|
|
expect(screen.queryByTestId('note-icon-display')).not.toBeInTheDocument()
|
||
|
|
})
|
||
|
|
|
||
|
|
it('displays the emoji when icon is set', () => {
|
||
|
|
render(<NoteIcon icon="🎯" onSetIcon={() => {}} onRemoveIcon={() => {}} />)
|
||
|
|
expect(screen.getByTestId('note-icon-display')).toHaveTextContent('🎯')
|
||
|
|
expect(screen.queryByTestId('note-icon-add')).not.toBeInTheDocument()
|
||
|
|
})
|
||
|
|
|
||
|
|
it('does not display Phosphor icon names as emoji', () => {
|
||
|
|
render(<NoteIcon icon="rocket" onSetIcon={() => {}} onRemoveIcon={() => {}} />)
|
||
|
|
// Phosphor icon name is not an emoji → shows add button
|
||
|
|
expect(screen.getByTestId('note-icon-add')).toBeInTheDocument()
|
||
|
|
})
|
||
|
|
|
||
|
|
it('opens emoji picker when add button is clicked', () => {
|
||
|
|
render(<NoteIcon icon={null} onSetIcon={() => {}} onRemoveIcon={() => {}} />)
|
||
|
|
fireEvent.click(screen.getByTestId('note-icon-add'))
|
||
|
|
expect(screen.getByTestId('emoji-picker')).toBeInTheDocument()
|
||
|
|
})
|
||
|
|
|
||
|
|
it('shows change/remove menu when existing icon is clicked', () => {
|
||
|
|
render(<NoteIcon icon="🔥" onSetIcon={() => {}} onRemoveIcon={() => {}} />)
|
||
|
|
fireEvent.click(screen.getByTestId('note-icon-display'))
|
||
|
|
expect(screen.getByTestId('note-icon-menu')).toBeInTheDocument()
|
||
|
|
expect(screen.getByTestId('note-icon-change')).toBeInTheDocument()
|
||
|
|
expect(screen.getByTestId('note-icon-remove')).toBeInTheDocument()
|
||
|
|
})
|
||
|
|
|
||
|
|
it('calls onRemoveIcon when Remove is clicked', () => {
|
||
|
|
const onRemove = vi.fn()
|
||
|
|
render(<NoteIcon icon="🔥" onSetIcon={() => {}} onRemoveIcon={onRemove} />)
|
||
|
|
fireEvent.click(screen.getByTestId('note-icon-display'))
|
||
|
|
fireEvent.click(screen.getByTestId('note-icon-remove'))
|
||
|
|
expect(onRemove).toHaveBeenCalledOnce()
|
||
|
|
})
|
||
|
|
|
||
|
|
it('opens picker when Change is clicked from menu', () => {
|
||
|
|
render(<NoteIcon icon="🔥" onSetIcon={() => {}} onRemoveIcon={() => {}} />)
|
||
|
|
fireEvent.click(screen.getByTestId('note-icon-display'))
|
||
|
|
fireEvent.click(screen.getByTestId('note-icon-change'))
|
||
|
|
expect(screen.getByTestId('emoji-picker')).toBeInTheDocument()
|
||
|
|
})
|
||
|
|
|
||
|
|
it('calls onSetIcon when emoji is selected from picker', () => {
|
||
|
|
const onSet = vi.fn()
|
||
|
|
render(<NoteIcon icon={null} onSetIcon={onSet} onRemoveIcon={() => {}} />)
|
||
|
|
fireEvent.click(screen.getByTestId('note-icon-add'))
|
||
|
|
const emojiButtons = screen.getAllByTestId('emoji-option')
|
||
|
|
fireEvent.click(emojiButtons[0])
|
||
|
|
expect(onSet).toHaveBeenCalledOnce()
|
||
|
|
})
|
||
|
|
|
||
|
|
it('hides add button when not editable', () => {
|
||
|
|
render(<NoteIcon icon={null} editable={false} onSetIcon={() => {}} onRemoveIcon={() => {}} />)
|
||
|
|
expect(screen.queryByTestId('note-icon-add')).not.toBeInTheDocument()
|
||
|
|
})
|
||
|
|
|
||
|
|
it('disables icon click when not editable', () => {
|
||
|
|
render(<NoteIcon icon="🎯" editable={false} onSetIcon={() => {}} onRemoveIcon={() => {}} />)
|
||
|
|
const display = screen.getByTestId('note-icon-display')
|
||
|
|
expect(display).toBeDisabled()
|
||
|
|
})
|
||
|
|
|
||
|
|
it('opens picker on laputa:open-icon-picker event', () => {
|
||
|
|
render(<NoteIcon icon={null} onSetIcon={() => {}} onRemoveIcon={() => {}} />)
|
||
|
|
act(() => { window.dispatchEvent(new CustomEvent('laputa:open-icon-picker')) })
|
||
|
|
expect(screen.getByTestId('emoji-picker')).toBeInTheDocument()
|
||
|
|
})
|
||
|
|
})
|