mirror of https://github.com/langgenius/dify.git
80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
import type { AppCategory } from '@/models/explore'
|
|
import { fireEvent, render, screen } from '@testing-library/react'
|
|
import Category from './category'
|
|
|
|
describe('Category', () => {
|
|
const allCategoriesEn = 'Recommended'
|
|
|
|
const renderComponent = (overrides: Partial<React.ComponentProps<typeof Category>> = {}) => {
|
|
const props: React.ComponentProps<typeof Category> = {
|
|
list: ['Writing', 'Recommended'] as AppCategory[],
|
|
value: allCategoriesEn,
|
|
onChange: vi.fn(),
|
|
allCategoriesEn,
|
|
...overrides,
|
|
}
|
|
return {
|
|
props,
|
|
...render(<Category {...props} />),
|
|
}
|
|
}
|
|
|
|
// Rendering: basic categories and all-categories button.
|
|
describe('Rendering', () => {
|
|
it('should render all categories item and translated categories', () => {
|
|
// Arrange
|
|
renderComponent()
|
|
|
|
// Assert
|
|
expect(screen.getByText('explore.apps.allCategories')).toBeInTheDocument()
|
|
expect(screen.getByText('explore.category.Writing')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should not render allCategoriesEn again inside the category list', () => {
|
|
// Arrange
|
|
renderComponent()
|
|
|
|
// Assert
|
|
const recommendedItems = screen.getAllByText('explore.apps.allCategories')
|
|
expect(recommendedItems).toHaveLength(1)
|
|
})
|
|
})
|
|
|
|
// Props: clicking items triggers onChange.
|
|
describe('Props', () => {
|
|
it('should call onChange with category value when category item is clicked', () => {
|
|
// Arrange
|
|
const { props } = renderComponent()
|
|
|
|
// Act
|
|
fireEvent.click(screen.getByText('explore.category.Writing'))
|
|
|
|
// Assert
|
|
expect(props.onChange).toHaveBeenCalledWith('Writing')
|
|
})
|
|
|
|
it('should call onChange with allCategoriesEn when all categories is clicked', () => {
|
|
// Arrange
|
|
const { props } = renderComponent({ value: 'Writing' })
|
|
|
|
// Act
|
|
fireEvent.click(screen.getByText('explore.apps.allCategories'))
|
|
|
|
// Assert
|
|
expect(props.onChange).toHaveBeenCalledWith(allCategoriesEn)
|
|
})
|
|
})
|
|
|
|
// Edge cases: handle values not in the list.
|
|
describe('Edge Cases', () => {
|
|
it('should treat unknown value as all categories selection', () => {
|
|
// Arrange
|
|
renderComponent({ value: 'Unknown' })
|
|
|
|
// Assert
|
|
const allCategoriesItem = screen.getByText('explore.apps.allCategories')
|
|
expect(allCategoriesItem.className).toContain('bg-components-main-nav-nav-button-bg-active')
|
|
})
|
|
})
|
|
})
|