youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-26 03:47:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): name emoji picker actions

Browse Source
This commit is contained in:
yyh
2026-05-10 23:24:54 +08:00
parent 5a90b72b02
commit fdd2fe51a3
4 changed files with 56 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/app/components/base/app-icon-picker/__tests__/index.spec.tsx
View File

@ -195,10 +195,10 @@ describe('AppIconPicker', () => {
const { onSelect } = renderPicker()
await waitFor(() => {
expect(screen.queryAllByTestId(/emoji-container-/i).length).toBeGreaterThan(0)
expect(document.querySelector('em-emoji')?.closest('button'))!.toBeInTheDocument()
})
const firstEmoji = screen.queryAllByTestId(/emoji-container-/i)[0]
const firstEmoji = document.querySelector('em-emoji')?.closest('button')
if (!firstEmoji)
throw new Error('Could not find emoji option')

58
web/app/components/base/emoji-picker/Inner.tsx
View File

@ -57,6 +57,7 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
const [searchedEmojis, setSearchedEmojis] = useState<string[]>([])
const [isSearching, setIsSearching] = useState(false)
const styleColorsLabelId = React.useId()
React.useEffect(() => {
if (selectedEmoji) {
@ -101,18 +102,20 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
<div className="grid h-full w-full grid-cols-8 gap-1">
{searchedEmojis.map((emoji: string, index: number) => {
return (
<div
<button
type="button"
key={`emoji-search-${index}`}
className="inline-flex h-10 w-10 items-center justify-center rounded-lg"
aria-label={emoji}
className="inline-flex h-10 w-10 items-center justify-center rounded-lg border-none bg-transparent p-0"
onClick={() => {
setSelectedEmoji(emoji)
setShowStyleColors(true)
}}
>
<div className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg p-1 ring-components-input-border-hover ring-offset-1 hover:ring-1" data-testid={`emoji-search-result-${emoji}`}>
<span className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg p-1 ring-components-input-border-hover ring-offset-1 hover:ring-1">
<em-emoji id={emoji} />
</div>
</div>
</span>
</button>
)
})}
</div>
@ -127,18 +130,20 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
<div className="grid h-full w-full grid-cols-8 gap-1">
{category.emojis.map((emoji, index: number) => {
return (
<div
<button
type="button"
key={`emoji-${index}`}
className="inline-flex h-10 w-10 items-center justify-center rounded-lg"
aria-label={emoji}
className="inline-flex h-10 w-10 items-center justify-center rounded-lg border-none bg-transparent p-0"
onClick={() => {
setSelectedEmoji(emoji)
setShowStyleColors(true)
}}
>
<div className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg p-1 ring-components-input-border-hover ring-offset-1 hover:ring-1" data-testid={`emoji-container-${emoji}`}>
<span className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg p-1 ring-components-input-border-hover ring-offset-1 hover:ring-1">
<em-emoji id={emoji} />
</div>
</div>
</span>
</button>
)
})}
@ -150,20 +155,39 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
{/* Color Select */}
<div className={cn('flex items-center justify-between p-3 pb-0')}>
<p className="mb-2 system-xs-medium-uppercase text-text-primary">Choose Style</p>
<p id={styleColorsLabelId} className="mb-2 system-xs-medium-uppercase text-text-primary">Choose Style</p>
{showStyleColors
? <span className="i-heroicons-chevron-down h-4 w-4 cursor-pointer text-text-quaternary" onClick={() => setShowStyleColors(!showStyleColors)} data-testid="toggle-colors" />
: <span className="i-heroicons-chevron-up h-4 w-4 cursor-pointer text-text-quaternary" onClick={() => setShowStyleColors(!showStyleColors)} data-testid="toggle-colors" />}
? (
<button
type="button"
aria-labelledby={styleColorsLabelId}
aria-expanded="true"
className="i-heroicons-chevron-down h-4 w-4 cursor-pointer border-none bg-transparent p-0 text-text-quaternary"
onClick={() => setShowStyleColors(!showStyleColors)}
/>
)
: (
<button
type="button"
aria-labelledby={styleColorsLabelId}
aria-expanded="false"
className="i-heroicons-chevron-up h-4 w-4 cursor-pointer border-none bg-transparent p-0 text-text-quaternary"
onClick={() => setShowStyleColors(!showStyleColors)}
/>
)}
</div>
{showStyleColors && (
<div className="grid w-full grid-cols-8 gap-1 px-3">
{backgroundColors.map((color) => {
return (
<div
<button
type="button"
key={color}
aria-label={color}
className={
cn(
'cursor-pointer',
'border-none bg-transparent p-0',
'ring-offset-1 hover:ring-1',
'inline-flex h-10 w-10 items-center justify-center rounded-lg',
color === selectedBackground ? 'ring-1 ring-components-input-border-hover' : '',
@ -173,15 +197,15 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
setSelectedBackground(color)
}}
>
<div
<span
className={cn(
'flex h-8 w-8 items-center justify-center rounded-lg p-1',
)}
style={{ background: color }}
>
{selectedEmoji !== '' && <em-emoji id={selectedEmoji} />}
</div>
</div>
</span>
</button>
)
})}
</div>

24
web/app/components/base/emoji-picker/__tests__/Inner.spec.tsx
View File

@ -75,10 +75,10 @@ describe('EmojiPickerInner', () => {
it('updates selected emoji and calls onSelect when an emoji is clicked', async () => {
render(<EmojiPickerInner onSelect={mockOnSelect} />)
const emojiContainers = screen.getAllByTestId(/^emoji-container-/)
const emojiButton = screen.getByRole('button', { name: 'rabbit' })
await act(async () => {
fireEvent.click(emojiContainers[0]!)
fireEvent.click(emojiButton)
})
expect(mockOnSelect).toHaveBeenCalledWith('rabbit', expect.any(String))
@ -89,7 +89,7 @@ describe('EmojiPickerInner', () => {
expect(screen.queryByText('#FFEAD5')).not.toBeInTheDocument()
const toggleButton = screen.getByTestId('toggle-colors')
const toggleButton = screen.getByRole('button', { name: 'Choose Style' })
expect(toggleButton)!.toBeInTheDocument()
await act(async () => {
@ -104,21 +104,21 @@ describe('EmojiPickerInner', () => {
it('updates background color and calls onSelect when a color is clicked', async () => {
render(<EmojiPickerInner onSelect={mockOnSelect} />)
const toggleButton = screen.getByTestId('toggle-colors')
const toggleButton = screen.getByRole('button', { name: 'Choose Style' })
await act(async () => {
fireEvent.click(toggleButton!)
})
const emojiContainers = screen.getAllByTestId(/^emoji-container-/)
const emojiButton = screen.getByRole('button', { name: 'rabbit' })
await act(async () => {
fireEvent.click(emojiContainers[0]!)
fireEvent.click(emojiButton)
})
mockOnSelect.mockClear()
const colorOptions = document.querySelectorAll('[style^="background:"]')
const colorOptions = screen.getAllByRole('button', { name: /^#/ })
await act(async () => {
fireEvent.click(colorOptions[1]!.parentElement!)
fireEvent.click(colorOptions[1]!)
})
expect(mockOnSelect).toHaveBeenCalledWith('rabbit', '#E4FBCC')
@ -134,9 +134,9 @@ describe('EmojiPickerInner', () => {
await screen.findByText('Search')
const searchEmojis = screen.getAllByTestId(/^emoji-search-result-/)
const searchEmoji = screen.getByRole('button', { name: 'dog' })
await act(async () => {
fireEvent.click(searchEmojis![0]!)
fireEvent.click(searchEmoji)
})
expect(mockOnSelect).toHaveBeenCalledWith('dog', expect.any(String))
@ -145,7 +145,7 @@ describe('EmojiPickerInner', () => {
it('toggles style colors display back and forth', async () => {
render(<EmojiPickerInner onSelect={mockOnSelect} />)
const toggleButton = screen.getByTestId('toggle-colors')
const toggleButton = screen.getByRole('button', { name: 'Choose Style' })
await act(async () => {
fireEvent.click(toggleButton!)
@ -153,7 +153,7 @@ describe('EmojiPickerInner', () => {
expect(screen.getByText('Choose Style'))!.toBeInTheDocument()
await act(async () => {
fireEvent.click(screen.getByTestId('toggle-colors')!) // It should be the other icon now
fireEvent.click(screen.getByRole('button', { name: 'Choose Style' }))
})
expect(screen.queryByText('#FFEAD5')).not.toBeInTheDocument()
})

4
web/app/components/base/emoji-picker/__tests__/index.spec.tsx
View File

@ -81,10 +81,8 @@ describe('EmojiPicker', () => {
)
})
const emojiWrappers = screen.getAllByTestId(/^emoji-container-/)
expect(emojiWrappers.length).toBeGreaterThan(0)
await act(async () => {
fireEvent.click(emojiWrappers[0]!)
fireEvent.click(screen.getByRole('button', { name: 'emoji1' }))
})
const okButton = screen.getByText(/OK/i)