mirror of
https://github.com/langgenius/dify.git
synced 2026-04-22 19:57:40 +08:00
test: add comprehensive tests for banner components with 95%+ coverage
Add automated tests for all components in the explore/banner folder: - banner.tsx: 100% coverage - banner-item.tsx: 98.24% statement coverage - indicator-button.tsx: 97.05% statement coverage Tests cover: - Loading, error, and empty states for Banner component - Hover and resize behaviors with debounce - Responsive layout behavior - Animation and progress indicator functionality - Click handling and navigation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
CodingOnStar
483
web/app/components/explore/banner/banner-item.spec.tsx
Normal file
483
web/app/components/explore/banner/banner-item.spec.tsx
Normal file
@ -0,0 +1,483 @@
|
||||
import type { Banner } from '@/models/app'
|
||||
import { cleanup, fireEvent, render, screen } from '@testing-library/react'
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { BannerItem } from './banner-item'
|
||||
|
||||
const mockScrollTo = vi.fn()
|
||||
const mockSlideNodes = vi.fn()
|
||||
|
||||
vi.mock('@/app/components/base/carousel', () => ({
|
||||
useCarousel: () => ({
|
||||
api: {
|
||||
scrollTo: mockScrollTo,
|
||||
slideNodes: mockSlideNodes,
|
||||
},
|
||||
selectedIndex: 0,
|
||||
}),
|
||||
}))
|
||||
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string) => {
|
||||
const translations: Record<string, string> = {
|
||||
'banner.viewMore': 'View More',
|
||||
}
|
||||
return translations[key] || key
|
||||
},
|
||||
}),
|
||||
}))
|
||||
|
||||
const createMockBanner = (overrides: Partial<Banner> = {}): Banner => ({
|
||||
id: 'banner-1',
|
||||
status: 'enabled',
|
||||
link: 'https://example.com',
|
||||
content: {
|
||||
'category': 'Featured',
|
||||
'title': 'Test Banner Title',
|
||||
'description': 'Test banner description text',
|
||||
'img-src': 'https://example.com/image.png',
|
||||
},
|
||||
...overrides,
|
||||
} as Banner)
|
||||
|
||||
// Mock ResizeObserver methods declared at module level and initialized
|
||||
const mockResizeObserverObserve = vi.fn()
|
||||
const mockResizeObserverDisconnect = vi.fn()
|
||||
|
||||
// Create mock class outside of describe block for proper hoisting
|
||||
class MockResizeObserver {
|
||||
constructor(_callback: ResizeObserverCallback) {
|
||||
// Store callback if needed
|
||||
}
|
||||
|
||||
observe(...args: Parameters<ResizeObserver['observe']>) {
|
||||
mockResizeObserverObserve(...args)
|
||||
}
|
||||
|
||||
disconnect() {
|
||||
mockResizeObserverDisconnect()
|
||||
}
|
||||
|
||||
unobserve() {
|
||||
// No-op
|
||||
}
|
||||
}
|
||||
|
||||
describe('BannerItem', () => {
|
||||
let mockWindowOpen: ReturnType<typeof vi.spyOn>
|
||||
|
||||
beforeEach(() => {
|
||||
mockWindowOpen = vi.spyOn(window, 'open').mockImplementation(() => null)
|
||||
mockSlideNodes.mockReturnValue([{}, {}, {}]) // 3 slides
|
||||
|
||||
vi.stubGlobal('ResizeObserver', MockResizeObserver)
|
||||
|
||||
// Mock window.innerWidth for responsive tests
|
||||
Object.defineProperty(window, 'innerWidth', {
|
||||
writable: true,
|
||||
configurable: true,
|
||||
value: 1400, // Above RESPONSIVE_BREAKPOINT (1200)
|
||||
})
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
cleanup()
|
||||
vi.clearAllMocks()
|
||||
vi.unstubAllGlobals()
|
||||
mockWindowOpen.mockRestore()
|
||||
})
|
||||
|
||||
describe('basic rendering', () => {
|
||||
it('renders banner category', () => {
|
||||
const banner = createMockBanner()
|
||||
render(
|
||||
<BannerItem
|
||||
banner={banner}
|
||||
autoplayDelay={5000}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(screen.getByText('Featured')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders banner title', () => {
|
||||
const banner = createMockBanner()
|
||||
render(
|
||||
<BannerItem
|
||||
banner={banner}
|
||||
autoplayDelay={5000}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(screen.getByText('Test Banner Title')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders banner description', () => {
|
||||
const banner = createMockBanner()
|
||||
render(
|
||||
<BannerItem
|
||||
banner={banner}
|
||||
autoplayDelay={5000}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(screen.getByText('Test banner description text')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders banner image with correct src and alt', () => {
|
||||
const banner = createMockBanner()
|
||||
render(
|
||||
<BannerItem
|
||||
banner={banner}
|
||||
autoplayDelay={5000}
|
||||
/>,
|
||||
)
|
||||
|
||||
const image = screen.getByRole('img')
|
||||
expect(image).toHaveAttribute('src', 'https://example.com/image.png')
|
||||
expect(image).toHaveAttribute('alt', 'Test Banner Title')
|
||||
})
|
||||
|
||||
it('renders view more text', () => {
|
||||
const banner = createMockBanner()
|
||||
render(
|
||||
<BannerItem
|
||||
banner={banner}
|
||||
autoplayDelay={5000}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(screen.getByText('View More')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
describe('click handling', () => {
|
||||
it('opens banner link in new tab when clicked', () => {
|
||||
const banner = createMockBanner({ link: 'https://test-link.com' })
|
||||
render(
|
||||
<BannerItem
|
||||
banner={banner}
|
||||
autoplayDelay={5000}
|
||||
/>,
|
||||
)
|
||||
|
||||
const bannerElement = screen.getByText('Test Banner Title').closest('div[class*="cursor-pointer"]')
|
||||
fireEvent.click(bannerElement!)
|
||||
|
||||
expect(mockWindowOpen).toHaveBeenCalledWith(
|
||||
'https://test-link.com',
|
||||
'_blank',
|
||||
'noopener,noreferrer',
|
||||
)
|
||||
})
|
||||
|
||||
it('does not open window when banner has no link', () => {
|
||||
const banner = createMockBanner({ link: '' })
|
||||
render(
|
||||
<BannerItem
|
||||
banner={banner}
|
||||
autoplayDelay={5000}
|
||||
/>,
|
||||
)
|
||||
|
||||
const bannerElement = screen.getByText('Test Banner Title').closest('div[class*="cursor-pointer"]')
|
||||
fireEvent.click(bannerElement!)
|
||||
|
||||
expect(mockWindowOpen).not.toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
|
||||
describe('slide indicators', () => {
|
||||
it('renders correct number of indicator buttons', () => {
|
||||
mockSlideNodes.mockReturnValue([{}, {}, {}])
|
||||
const banner = createMockBanner()
|
||||
render(
|
||||
<BannerItem
|
||||
banner={banner}
|
||||
autoplayDelay={5000}
|
||||
/>,
|
||||
)
|
||||
|
||||
const buttons = screen.getAllByRole('button')
|
||||
expect(buttons).toHaveLength(3)
|
||||
})
|
||||
|
||||
it('renders indicator buttons with correct numbers', () => {
|
||||
mockSlideNodes.mockReturnValue([{}, {}, {}])
|
||||
const banner = createMockBanner()
|
||||
render(
|
||||
<BannerItem
|
||||
banner={banner}
|
||||
autoplayDelay={5000}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(screen.getByText('01')).toBeInTheDocument()
|
||||
expect(screen.getByText('02')).toBeInTheDocument()
|
||||
expect(screen.getByText('03')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('calls scrollTo when indicator is clicked', () => {
|
||||
mockSlideNodes.mockReturnValue([{}, {}, {}])
|
||||
const banner = createMockBanner()
|
||||
render(
|
||||
<BannerItem
|
||||
banner={banner}
|
||||
autoplayDelay={5000}
|
||||
/>,
|
||||
)
|
||||
|
||||
const secondIndicator = screen.getByText('02').closest('button')
|
||||
fireEvent.click(secondIndicator!)
|
||||
|
||||
expect(mockScrollTo).toHaveBeenCalledWith(1)
|
||||
})
|
||||
|
||||
it('renders no indicators when no slides', () => {
|
||||
mockSlideNodes.mockReturnValue([])
|
||||
const banner = createMockBanner()
|
||||
render(
|
||||
<BannerItem
|
||||
banner={banner}
|
||||
autoplayDelay={5000}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(screen.queryByRole('button')).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
describe('isPaused prop', () => {
|
||||
it('defaults isPaused to false', () => {
|
||||
const banner = createMockBanner()
|
||||
render(
|
||||
<BannerItem
|
||||
banner={banner}
|
||||
autoplayDelay={5000}
|
||||
/>,
|
||||
)
|
||||
|
||||
// Component should render without issues
|
||||
expect(screen.getByText('Test Banner Title')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('accepts isPaused prop', () => {
|
||||
const banner = createMockBanner()
|
||||
render(
|
||||
<BannerItem
|
||||
banner={banner}
|
||||
autoplayDelay={5000}
|
||||
isPaused={true}
|
||||
/>,
|
||||
)
|
||||
|
||||
// Component should render with isPaused
|
||||
expect(screen.getByText('Test Banner Title')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
describe('responsive behavior', () => {
|
||||
it('sets up ResizeObserver on mount', () => {
|
||||
const banner = createMockBanner()
|
||||
render(
|
||||
<BannerItem
|
||||
banner={banner}
|
||||
autoplayDelay={5000}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(mockResizeObserverObserve).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('adds resize event listener on mount', () => {
|
||||
const addEventListenerSpy = vi.spyOn(window, 'addEventListener')
|
||||
const banner = createMockBanner()
|
||||
render(
|
||||
<BannerItem
|
||||
banner={banner}
|
||||
autoplayDelay={5000}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(addEventListenerSpy).toHaveBeenCalledWith('resize', expect.any(Function))
|
||||
addEventListenerSpy.mockRestore()
|
||||
})
|
||||
|
||||
it('removes resize event listener on unmount', () => {
|
||||
const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener')
|
||||
const banner = createMockBanner()
|
||||
const { unmount } = render(
|
||||
<BannerItem
|
||||
banner={banner}
|
||||
autoplayDelay={5000}
|
||||
/>,
|
||||
)
|
||||
|
||||
unmount()
|
||||
|
||||
expect(removeEventListenerSpy).toHaveBeenCalledWith('resize', expect.any(Function))
|
||||
removeEventListenerSpy.mockRestore()
|
||||
})
|
||||
|
||||
it('sets maxWidth when window width is below breakpoint', () => {
|
||||
// Set window width below RESPONSIVE_BREAKPOINT (1200)
|
||||
Object.defineProperty(window, 'innerWidth', {
|
||||
writable: true,
|
||||
configurable: true,
|
||||
value: 1000,
|
||||
})
|
||||
|
||||
const banner = createMockBanner()
|
||||
render(
|
||||
<BannerItem
|
||||
banner={banner}
|
||||
autoplayDelay={5000}
|
||||
/>,
|
||||
)
|
||||
|
||||
// Component should render and apply responsive styles
|
||||
expect(screen.getByText('Test Banner Title')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('applies responsive styles when below breakpoint', () => {
|
||||
// Set window width below RESPONSIVE_BREAKPOINT (1200)
|
||||
Object.defineProperty(window, 'innerWidth', {
|
||||
writable: true,
|
||||
configurable: true,
|
||||
value: 800,
|
||||
})
|
||||
|
||||
const banner = createMockBanner()
|
||||
render(
|
||||
<BannerItem
|
||||
banner={banner}
|
||||
autoplayDelay={5000}
|
||||
/>,
|
||||
)
|
||||
|
||||
// The component should render even with responsive mode
|
||||
expect(screen.getByText('View More')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
describe('content variations', () => {
|
||||
it('renders long category text', () => {
|
||||
const banner = createMockBanner({
|
||||
content: {
|
||||
'category': 'Very Long Category Name',
|
||||
'title': 'Title',
|
||||
'description': 'Description',
|
||||
'img-src': 'https://example.com/img.png',
|
||||
},
|
||||
} as Partial<Banner>)
|
||||
render(
|
||||
<BannerItem
|
||||
banner={banner}
|
||||
autoplayDelay={5000}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(screen.getByText('Very Long Category Name')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders long title with truncation class', () => {
|
||||
const banner = createMockBanner({
|
||||
content: {
|
||||
'category': 'Category',
|
||||
'title': 'A Very Long Title That Should Be Truncated Eventually',
|
||||
'description': 'Description',
|
||||
'img-src': 'https://example.com/img.png',
|
||||
},
|
||||
} as Partial<Banner>)
|
||||
render(
|
||||
<BannerItem
|
||||
banner={banner}
|
||||
autoplayDelay={5000}
|
||||
/>,
|
||||
)
|
||||
|
||||
const titleElement = screen.getByText('A Very Long Title That Should Be Truncated Eventually')
|
||||
expect(titleElement).toHaveClass('line-clamp-2')
|
||||
})
|
||||
|
||||
it('renders long description with truncation class', () => {
|
||||
const banner = createMockBanner({
|
||||
content: {
|
||||
'category': 'Category',
|
||||
'title': 'Title',
|
||||
'description': 'A very long description that should be limited to a certain number of lines for proper display in the banner component.',
|
||||
'img-src': 'https://example.com/img.png',
|
||||
},
|
||||
} as Partial<Banner>)
|
||||
render(
|
||||
<BannerItem
|
||||
banner={banner}
|
||||
autoplayDelay={5000}
|
||||
/>,
|
||||
)
|
||||
|
||||
const descriptionElement = screen.getByText(/A very long description/)
|
||||
expect(descriptionElement).toHaveClass('line-clamp-4')
|
||||
})
|
||||
})
|
||||
|
||||
describe('slide calculation', () => {
|
||||
it('calculates next index correctly for first slide', () => {
|
||||
mockSlideNodes.mockReturnValue([{}, {}, {}])
|
||||
const banner = createMockBanner()
|
||||
render(
|
||||
<BannerItem
|
||||
banner={banner}
|
||||
autoplayDelay={5000}
|
||||
/>,
|
||||
)
|
||||
|
||||
// With selectedIndex=0 and 3 slides, nextIndex should be 1
|
||||
// The second indicator button should show the "next slide" state
|
||||
const buttons = screen.getAllByRole('button')
|
||||
expect(buttons).toHaveLength(3)
|
||||
})
|
||||
|
||||
it('handles single slide case', () => {
|
||||
mockSlideNodes.mockReturnValue([{}])
|
||||
const banner = createMockBanner()
|
||||
render(
|
||||
<BannerItem
|
||||
banner={banner}
|
||||
autoplayDelay={5000}
|
||||
/>,
|
||||
)
|
||||
|
||||
const buttons = screen.getAllByRole('button')
|
||||
expect(buttons).toHaveLength(1)
|
||||
})
|
||||
})
|
||||
|
||||
describe('wrapper styling', () => {
|
||||
it('has cursor-pointer class', () => {
|
||||
const banner = createMockBanner()
|
||||
const { container } = render(
|
||||
<BannerItem
|
||||
banner={banner}
|
||||
autoplayDelay={5000}
|
||||
/>,
|
||||
)
|
||||
|
||||
const wrapper = container.firstChild as HTMLElement
|
||||
expect(wrapper).toHaveClass('cursor-pointer')
|
||||
})
|
||||
|
||||
it('has rounded-2xl class', () => {
|
||||
const banner = createMockBanner()
|
||||
const { container } = render(
|
||||
<BannerItem
|
||||
banner={banner}
|
||||
autoplayDelay={5000}
|
||||
/>,
|
||||
)
|
||||
|
||||
const wrapper = container.firstChild as HTMLElement
|
||||
expect(wrapper).toHaveClass('rounded-2xl')
|
||||
})
|
||||
})
|
||||
})
|
||||
472
web/app/components/explore/banner/banner.spec.tsx
Normal file
472
web/app/components/explore/banner/banner.spec.tsx
Normal file
@ -0,0 +1,472 @@
|
||||
import type * as React from 'react'
|
||||
import type { Banner as BannerType } from '@/models/app'
|
||||
import { cleanup, fireEvent, render, screen } from '@testing-library/react'
|
||||
import { act } from 'react'
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import Banner from './banner'
|
||||
|
||||
const mockUseGetBanners = vi.fn()
|
||||
|
||||
vi.mock('@/service/use-explore', () => ({
|
||||
useGetBanners: (...args: unknown[]) => mockUseGetBanners(...args),
|
||||
}))
|
||||
|
||||
vi.mock('@/context/i18n', () => ({
|
||||
useLocale: () => 'en-US',
|
||||
}))
|
||||
|
||||
vi.mock('@/app/components/base/carousel', () => ({
|
||||
Carousel: Object.assign(
|
||||
({ children, onMouseEnter, onMouseLeave, className }: {
|
||||
children: React.ReactNode
|
||||
onMouseEnter?: () => void
|
||||
onMouseLeave?: () => void
|
||||
className?: string
|
||||
}) => (
|
||||
<div
|
||||
data-testid="carousel"
|
||||
className={className}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
),
|
||||
{
|
||||
Content: ({ children }: { children: React.ReactNode }) => (
|
||||
<div data-testid="carousel-content">{children}</div>
|
||||
),
|
||||
Item: ({ children }: { children: React.ReactNode }) => (
|
||||
<div data-testid="carousel-item">{children}</div>
|
||||
),
|
||||
Plugin: {
|
||||
Autoplay: (config: Record<string, unknown>) => ({ type: 'autoplay', ...config }),
|
||||
},
|
||||
},
|
||||
),
|
||||
useCarousel: () => ({
|
||||
api: {
|
||||
scrollTo: vi.fn(),
|
||||
slideNodes: () => [],
|
||||
},
|
||||
selectedIndex: 0,
|
||||
}),
|
||||
}))
|
||||
|
||||
vi.mock('./banner-item', () => ({
|
||||
BannerItem: ({ banner, autoplayDelay, isPaused }: {
|
||||
banner: BannerType
|
||||
autoplayDelay: number
|
||||
isPaused?: boolean
|
||||
}) => (
|
||||
<div
|
||||
data-testid="banner-item"
|
||||
data-banner-id={banner.id}
|
||||
data-autoplay-delay={autoplayDelay}
|
||||
data-is-paused={isPaused}
|
||||
>
|
||||
BannerItem:
|
||||
{' '}
|
||||
{banner.content.title}
|
||||
</div>
|
||||
),
|
||||
}))
|
||||
|
||||
const createMockBanner = (id: string, status: string = 'enabled', title: string = 'Test Banner'): BannerType => ({
|
||||
id,
|
||||
status,
|
||||
link: 'https://example.com',
|
||||
content: {
|
||||
'category': 'Featured',
|
||||
title,
|
||||
'description': 'Test description',
|
||||
'img-src': 'https://example.com/image.png',
|
||||
},
|
||||
} as BannerType)
|
||||
|
||||
describe('Banner', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers()
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
cleanup()
|
||||
vi.clearAllMocks()
|
||||
vi.useRealTimers()
|
||||
})
|
||||
|
||||
describe('loading state', () => {
|
||||
it('renders loading state when isLoading is true', () => {
|
||||
mockUseGetBanners.mockReturnValue({
|
||||
data: null,
|
||||
isLoading: true,
|
||||
isError: false,
|
||||
})
|
||||
|
||||
render(<Banner />)
|
||||
|
||||
// Loading component renders a spinner
|
||||
const loadingWrapper = document.querySelector('[style*="min-height"]')
|
||||
expect(loadingWrapper).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shows loading indicator with correct minimum height', () => {
|
||||
mockUseGetBanners.mockReturnValue({
|
||||
data: null,
|
||||
isLoading: true,
|
||||
isError: false,
|
||||
})
|
||||
|
||||
render(<Banner />)
|
||||
|
||||
const loadingWrapper = document.querySelector('[style*="min-height: 168px"]')
|
||||
expect(loadingWrapper).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
describe('error state', () => {
|
||||
it('returns null when isError is true', () => {
|
||||
mockUseGetBanners.mockReturnValue({
|
||||
data: null,
|
||||
isLoading: false,
|
||||
isError: true,
|
||||
})
|
||||
|
||||
const { container } = render(<Banner />)
|
||||
|
||||
expect(container.firstChild).toBeNull()
|
||||
})
|
||||
})
|
||||
|
||||
describe('empty state', () => {
|
||||
it('returns null when banners array is empty', () => {
|
||||
mockUseGetBanners.mockReturnValue({
|
||||
data: [],
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
})
|
||||
|
||||
const { container } = render(<Banner />)
|
||||
|
||||
expect(container.firstChild).toBeNull()
|
||||
})
|
||||
|
||||
it('returns null when all banners are disabled', () => {
|
||||
mockUseGetBanners.mockReturnValue({
|
||||
data: [
|
||||
createMockBanner('1', 'disabled'),
|
||||
createMockBanner('2', 'disabled'),
|
||||
],
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
})
|
||||
|
||||
const { container } = render(<Banner />)
|
||||
|
||||
expect(container.firstChild).toBeNull()
|
||||
})
|
||||
|
||||
it('returns null when data is undefined', () => {
|
||||
mockUseGetBanners.mockReturnValue({
|
||||
data: undefined,
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
})
|
||||
|
||||
const { container } = render(<Banner />)
|
||||
|
||||
expect(container.firstChild).toBeNull()
|
||||
})
|
||||
})
|
||||
|
||||
describe('successful render', () => {
|
||||
it('renders carousel when enabled banners exist', () => {
|
||||
mockUseGetBanners.mockReturnValue({
|
||||
data: [createMockBanner('1', 'enabled')],
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
})
|
||||
|
||||
render(<Banner />)
|
||||
|
||||
expect(screen.getByTestId('carousel')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders only enabled banners', () => {
|
||||
mockUseGetBanners.mockReturnValue({
|
||||
data: [
|
||||
createMockBanner('1', 'enabled', 'Enabled Banner 1'),
|
||||
createMockBanner('2', 'disabled', 'Disabled Banner'),
|
||||
createMockBanner('3', 'enabled', 'Enabled Banner 2'),
|
||||
],
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
})
|
||||
|
||||
render(<Banner />)
|
||||
|
||||
const bannerItems = screen.getAllByTestId('banner-item')
|
||||
expect(bannerItems).toHaveLength(2)
|
||||
expect(screen.getByText('BannerItem: Enabled Banner 1')).toBeInTheDocument()
|
||||
expect(screen.getByText('BannerItem: Enabled Banner 2')).toBeInTheDocument()
|
||||
expect(screen.queryByText('BannerItem: Disabled Banner')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('passes correct autoplayDelay to BannerItem', () => {
|
||||
mockUseGetBanners.mockReturnValue({
|
||||
data: [createMockBanner('1', 'enabled')],
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
})
|
||||
|
||||
render(<Banner />)
|
||||
|
||||
const bannerItem = screen.getByTestId('banner-item')
|
||||
expect(bannerItem).toHaveAttribute('data-autoplay-delay', '5000')
|
||||
})
|
||||
|
||||
it('renders carousel with correct class', () => {
|
||||
mockUseGetBanners.mockReturnValue({
|
||||
data: [createMockBanner('1', 'enabled')],
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
})
|
||||
|
||||
render(<Banner />)
|
||||
|
||||
expect(screen.getByTestId('carousel')).toHaveClass('rounded-2xl')
|
||||
})
|
||||
})
|
||||
|
||||
describe('hover behavior', () => {
|
||||
it('sets isPaused to true on mouse enter', () => {
|
||||
mockUseGetBanners.mockReturnValue({
|
||||
data: [createMockBanner('1', 'enabled')],
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
})
|
||||
|
||||
render(<Banner />)
|
||||
|
||||
const carousel = screen.getByTestId('carousel')
|
||||
fireEvent.mouseEnter(carousel)
|
||||
|
||||
const bannerItem = screen.getByTestId('banner-item')
|
||||
expect(bannerItem).toHaveAttribute('data-is-paused', 'true')
|
||||
})
|
||||
|
||||
it('sets isPaused to false on mouse leave', () => {
|
||||
mockUseGetBanners.mockReturnValue({
|
||||
data: [createMockBanner('1', 'enabled')],
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
})
|
||||
|
||||
render(<Banner />)
|
||||
|
||||
const carousel = screen.getByTestId('carousel')
|
||||
|
||||
// Enter and then leave
|
||||
fireEvent.mouseEnter(carousel)
|
||||
fireEvent.mouseLeave(carousel)
|
||||
|
||||
const bannerItem = screen.getByTestId('banner-item')
|
||||
expect(bannerItem).toHaveAttribute('data-is-paused', 'false')
|
||||
})
|
||||
})
|
||||
|
||||
describe('resize behavior', () => {
|
||||
it('pauses animation during resize', () => {
|
||||
mockUseGetBanners.mockReturnValue({
|
||||
data: [createMockBanner('1', 'enabled')],
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
})
|
||||
|
||||
render(<Banner />)
|
||||
|
||||
// Trigger resize event
|
||||
act(() => {
|
||||
window.dispatchEvent(new Event('resize'))
|
||||
})
|
||||
|
||||
const bannerItem = screen.getByTestId('banner-item')
|
||||
expect(bannerItem).toHaveAttribute('data-is-paused', 'true')
|
||||
})
|
||||
|
||||
it('resumes animation after resize debounce delay', () => {
|
||||
mockUseGetBanners.mockReturnValue({
|
||||
data: [createMockBanner('1', 'enabled')],
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
})
|
||||
|
||||
render(<Banner />)
|
||||
|
||||
// Trigger resize event
|
||||
act(() => {
|
||||
window.dispatchEvent(new Event('resize'))
|
||||
})
|
||||
|
||||
// Wait for debounce delay (50ms)
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(50)
|
||||
})
|
||||
|
||||
const bannerItem = screen.getByTestId('banner-item')
|
||||
expect(bannerItem).toHaveAttribute('data-is-paused', 'false')
|
||||
})
|
||||
|
||||
it('resets debounce timer on multiple resize events', () => {
|
||||
mockUseGetBanners.mockReturnValue({
|
||||
data: [createMockBanner('1', 'enabled')],
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
})
|
||||
|
||||
render(<Banner />)
|
||||
|
||||
// Trigger first resize event
|
||||
act(() => {
|
||||
window.dispatchEvent(new Event('resize'))
|
||||
})
|
||||
|
||||
// Wait partial time
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(30)
|
||||
})
|
||||
|
||||
// Trigger second resize event
|
||||
act(() => {
|
||||
window.dispatchEvent(new Event('resize'))
|
||||
})
|
||||
|
||||
// Wait another 30ms (total 60ms from second resize but only 30ms after)
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(30)
|
||||
})
|
||||
|
||||
// Should still be paused (debounce resets)
|
||||
let bannerItem = screen.getByTestId('banner-item')
|
||||
expect(bannerItem).toHaveAttribute('data-is-paused', 'true')
|
||||
|
||||
// Wait remaining time
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(20)
|
||||
})
|
||||
|
||||
bannerItem = screen.getByTestId('banner-item')
|
||||
expect(bannerItem).toHaveAttribute('data-is-paused', 'false')
|
||||
})
|
||||
})
|
||||
|
||||
describe('cleanup', () => {
|
||||
it('removes resize event listener on unmount', () => {
|
||||
const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener')
|
||||
|
||||
mockUseGetBanners.mockReturnValue({
|
||||
data: [createMockBanner('1', 'enabled')],
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
})
|
||||
|
||||
const { unmount } = render(<Banner />)
|
||||
unmount()
|
||||
|
||||
expect(removeEventListenerSpy).toHaveBeenCalledWith('resize', expect.any(Function))
|
||||
removeEventListenerSpy.mockRestore()
|
||||
})
|
||||
|
||||
it('clears resize timer on unmount', () => {
|
||||
const clearTimeoutSpy = vi.spyOn(globalThis, 'clearTimeout')
|
||||
|
||||
mockUseGetBanners.mockReturnValue({
|
||||
data: [createMockBanner('1', 'enabled')],
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
})
|
||||
|
||||
const { unmount } = render(<Banner />)
|
||||
|
||||
// Trigger resize to create timer
|
||||
act(() => {
|
||||
window.dispatchEvent(new Event('resize'))
|
||||
})
|
||||
|
||||
unmount()
|
||||
|
||||
expect(clearTimeoutSpy).toHaveBeenCalled()
|
||||
clearTimeoutSpy.mockRestore()
|
||||
})
|
||||
})
|
||||
|
||||
describe('hook calls', () => {
|
||||
it('calls useGetBanners with correct locale', () => {
|
||||
mockUseGetBanners.mockReturnValue({
|
||||
data: [],
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
})
|
||||
|
||||
render(<Banner />)
|
||||
|
||||
expect(mockUseGetBanners).toHaveBeenCalledWith('en-US')
|
||||
})
|
||||
})
|
||||
|
||||
describe('multiple banners', () => {
|
||||
it('renders all enabled banners in carousel items', () => {
|
||||
mockUseGetBanners.mockReturnValue({
|
||||
data: [
|
||||
createMockBanner('1', 'enabled', 'Banner 1'),
|
||||
createMockBanner('2', 'enabled', 'Banner 2'),
|
||||
createMockBanner('3', 'enabled', 'Banner 3'),
|
||||
],
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
})
|
||||
|
||||
render(<Banner />)
|
||||
|
||||
const carouselItems = screen.getAllByTestId('carousel-item')
|
||||
expect(carouselItems).toHaveLength(3)
|
||||
})
|
||||
|
||||
it('preserves banner order', () => {
|
||||
mockUseGetBanners.mockReturnValue({
|
||||
data: [
|
||||
createMockBanner('1', 'enabled', 'First Banner'),
|
||||
createMockBanner('2', 'enabled', 'Second Banner'),
|
||||
createMockBanner('3', 'enabled', 'Third Banner'),
|
||||
],
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
})
|
||||
|
||||
render(<Banner />)
|
||||
|
||||
const bannerItems = screen.getAllByTestId('banner-item')
|
||||
expect(bannerItems[0]).toHaveAttribute('data-banner-id', '1')
|
||||
expect(bannerItems[1]).toHaveAttribute('data-banner-id', '2')
|
||||
expect(bannerItems[2]).toHaveAttribute('data-banner-id', '3')
|
||||
})
|
||||
})
|
||||
|
||||
describe('React.memo behavior', () => {
|
||||
it('renders as memoized component', () => {
|
||||
mockUseGetBanners.mockReturnValue({
|
||||
data: [createMockBanner('1', 'enabled')],
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
})
|
||||
|
||||
const { rerender } = render(<Banner />)
|
||||
|
||||
// Re-render with same props
|
||||
rerender(<Banner />)
|
||||
|
||||
// Component should still be present (memo doesn't break rendering)
|
||||
expect(screen.getByTestId('carousel')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
})
|
||||
448
web/app/components/explore/banner/indicator-button.spec.tsx
Normal file
448
web/app/components/explore/banner/indicator-button.spec.tsx
Normal file
@ -0,0 +1,448 @@
|
||||
import { cleanup, fireEvent, render, screen } from '@testing-library/react'
|
||||
import { act } from 'react'
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { IndicatorButton } from './indicator-button'
|
||||
|
||||
describe('IndicatorButton', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers()
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
cleanup()
|
||||
vi.clearAllMocks()
|
||||
vi.useRealTimers()
|
||||
})
|
||||
|
||||
describe('basic rendering', () => {
|
||||
it('renders button with correct index number', () => {
|
||||
const mockOnClick = vi.fn()
|
||||
render(
|
||||
<IndicatorButton
|
||||
index={0}
|
||||
selectedIndex={0}
|
||||
isNextSlide={false}
|
||||
autoplayDelay={5000}
|
||||
resetKey={0}
|
||||
isPaused={false}
|
||||
onClick={mockOnClick}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(screen.getByRole('button')).toBeInTheDocument()
|
||||
expect(screen.getByText('01')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders two-digit index numbers', () => {
|
||||
const mockOnClick = vi.fn()
|
||||
render(
|
||||
<IndicatorButton
|
||||
index={9}
|
||||
selectedIndex={0}
|
||||
isNextSlide={false}
|
||||
autoplayDelay={5000}
|
||||
resetKey={0}
|
||||
isPaused={false}
|
||||
onClick={mockOnClick}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(screen.getByText('10')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('pads single digit index numbers with leading zero', () => {
|
||||
const mockOnClick = vi.fn()
|
||||
render(
|
||||
<IndicatorButton
|
||||
index={4}
|
||||
selectedIndex={0}
|
||||
isNextSlide={false}
|
||||
autoplayDelay={5000}
|
||||
resetKey={0}
|
||||
isPaused={false}
|
||||
onClick={mockOnClick}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(screen.getByText('05')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
describe('active state', () => {
|
||||
it('applies active styles when index equals selectedIndex', () => {
|
||||
const mockOnClick = vi.fn()
|
||||
render(
|
||||
<IndicatorButton
|
||||
index={2}
|
||||
selectedIndex={2}
|
||||
isNextSlide={false}
|
||||
autoplayDelay={5000}
|
||||
resetKey={0}
|
||||
isPaused={false}
|
||||
onClick={mockOnClick}
|
||||
/>,
|
||||
)
|
||||
|
||||
const button = screen.getByRole('button')
|
||||
expect(button).toHaveClass('bg-text-primary')
|
||||
})
|
||||
|
||||
it('applies inactive styles when index does not equal selectedIndex', () => {
|
||||
const mockOnClick = vi.fn()
|
||||
render(
|
||||
<IndicatorButton
|
||||
index={1}
|
||||
selectedIndex={0}
|
||||
isNextSlide={false}
|
||||
autoplayDelay={5000}
|
||||
resetKey={0}
|
||||
isPaused={false}
|
||||
onClick={mockOnClick}
|
||||
/>,
|
||||
)
|
||||
|
||||
const button = screen.getByRole('button')
|
||||
expect(button).toHaveClass('bg-components-panel-on-panel-item-bg')
|
||||
})
|
||||
})
|
||||
|
||||
describe('click handling', () => {
|
||||
it('calls onClick when button is clicked', () => {
|
||||
const mockOnClick = vi.fn()
|
||||
render(
|
||||
<IndicatorButton
|
||||
index={0}
|
||||
selectedIndex={0}
|
||||
isNextSlide={false}
|
||||
autoplayDelay={5000}
|
||||
resetKey={0}
|
||||
isPaused={false}
|
||||
onClick={mockOnClick}
|
||||
/>,
|
||||
)
|
||||
|
||||
fireEvent.click(screen.getByRole('button'))
|
||||
expect(mockOnClick).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
it('stops event propagation when clicked', () => {
|
||||
const mockOnClick = vi.fn()
|
||||
const mockParentClick = vi.fn()
|
||||
|
||||
render(
|
||||
<div onClick={mockParentClick}>
|
||||
<IndicatorButton
|
||||
index={0}
|
||||
selectedIndex={0}
|
||||
isNextSlide={false}
|
||||
autoplayDelay={5000}
|
||||
resetKey={0}
|
||||
isPaused={false}
|
||||
onClick={mockOnClick}
|
||||
/>
|
||||
</div>,
|
||||
)
|
||||
|
||||
fireEvent.click(screen.getByRole('button'))
|
||||
expect(mockOnClick).toHaveBeenCalledTimes(1)
|
||||
expect(mockParentClick).not.toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
|
||||
describe('progress indicator', () => {
|
||||
it('does not show progress indicator when not next slide', () => {
|
||||
const mockOnClick = vi.fn()
|
||||
const { container } = render(
|
||||
<IndicatorButton
|
||||
index={0}
|
||||
selectedIndex={0}
|
||||
isNextSlide={false}
|
||||
autoplayDelay={5000}
|
||||
resetKey={0}
|
||||
isPaused={false}
|
||||
onClick={mockOnClick}
|
||||
/>,
|
||||
)
|
||||
|
||||
// Check for conic-gradient style which indicates progress indicator
|
||||
const progressIndicator = container.querySelector('[style*="conic-gradient"]')
|
||||
expect(progressIndicator).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shows progress indicator when isNextSlide is true and not active', () => {
|
||||
const mockOnClick = vi.fn()
|
||||
const { container } = render(
|
||||
<IndicatorButton
|
||||
index={1}
|
||||
selectedIndex={0}
|
||||
isNextSlide={true}
|
||||
autoplayDelay={5000}
|
||||
resetKey={0}
|
||||
isPaused={false}
|
||||
onClick={mockOnClick}
|
||||
/>,
|
||||
)
|
||||
|
||||
const progressIndicator = container.querySelector('[style*="conic-gradient"]')
|
||||
expect(progressIndicator).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('does not show progress indicator when isNextSlide but also active', () => {
|
||||
const mockOnClick = vi.fn()
|
||||
const { container } = render(
|
||||
<IndicatorButton
|
||||
index={0}
|
||||
selectedIndex={0}
|
||||
isNextSlide={true}
|
||||
autoplayDelay={5000}
|
||||
resetKey={0}
|
||||
isPaused={false}
|
||||
onClick={mockOnClick}
|
||||
/>,
|
||||
)
|
||||
|
||||
const progressIndicator = container.querySelector('[style*="conic-gradient"]')
|
||||
expect(progressIndicator).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
describe('animation behavior', () => {
|
||||
it('starts progress from 0 when isNextSlide becomes true', () => {
|
||||
const mockOnClick = vi.fn()
|
||||
const { container, rerender } = render(
|
||||
<IndicatorButton
|
||||
index={1}
|
||||
selectedIndex={0}
|
||||
isNextSlide={false}
|
||||
autoplayDelay={5000}
|
||||
resetKey={0}
|
||||
isPaused={false}
|
||||
onClick={mockOnClick}
|
||||
/>,
|
||||
)
|
||||
|
||||
// Initially no progress indicator
|
||||
expect(container.querySelector('[style*="conic-gradient"]')).not.toBeInTheDocument()
|
||||
|
||||
// Rerender with isNextSlide=true
|
||||
rerender(
|
||||
<IndicatorButton
|
||||
index={1}
|
||||
selectedIndex={0}
|
||||
isNextSlide={true}
|
||||
autoplayDelay={5000}
|
||||
resetKey={0}
|
||||
isPaused={false}
|
||||
onClick={mockOnClick}
|
||||
/>,
|
||||
)
|
||||
|
||||
// Now progress indicator should be visible
|
||||
expect(container.querySelector('[style*="conic-gradient"]')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('resets progress when resetKey changes', () => {
|
||||
const mockOnClick = vi.fn()
|
||||
const { rerender, container } = render(
|
||||
<IndicatorButton
|
||||
index={1}
|
||||
selectedIndex={0}
|
||||
isNextSlide={true}
|
||||
autoplayDelay={5000}
|
||||
resetKey={0}
|
||||
isPaused={false}
|
||||
onClick={mockOnClick}
|
||||
/>,
|
||||
)
|
||||
|
||||
// Progress indicator should be present
|
||||
const progressIndicator = container.querySelector('[style*="conic-gradient"]')
|
||||
expect(progressIndicator).toBeInTheDocument()
|
||||
|
||||
// Rerender with new resetKey - this should reset the progress animation
|
||||
rerender(
|
||||
<IndicatorButton
|
||||
index={1}
|
||||
selectedIndex={0}
|
||||
isNextSlide={true}
|
||||
autoplayDelay={5000}
|
||||
resetKey={1}
|
||||
isPaused={false}
|
||||
onClick={mockOnClick}
|
||||
/>,
|
||||
)
|
||||
|
||||
const newProgressIndicator = container.querySelector('[style*="conic-gradient"]')
|
||||
// The progress indicator should still be present after reset
|
||||
expect(newProgressIndicator).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('stops animation when isPaused is true', () => {
|
||||
const mockOnClick = vi.fn()
|
||||
const mockRequestAnimationFrame = vi.spyOn(window, 'requestAnimationFrame')
|
||||
|
||||
render(
|
||||
<IndicatorButton
|
||||
index={1}
|
||||
selectedIndex={0}
|
||||
isNextSlide={true}
|
||||
autoplayDelay={5000}
|
||||
resetKey={0}
|
||||
isPaused={true}
|
||||
onClick={mockOnClick}
|
||||
/>,
|
||||
)
|
||||
|
||||
// The component should still render but animation should be paused
|
||||
// requestAnimationFrame might still be called for polling but progress won't update
|
||||
expect(screen.getByRole('button')).toBeInTheDocument()
|
||||
mockRequestAnimationFrame.mockRestore()
|
||||
})
|
||||
|
||||
it('cancels animation frame on unmount', () => {
|
||||
const mockOnClick = vi.fn()
|
||||
const mockCancelAnimationFrame = vi.spyOn(window, 'cancelAnimationFrame')
|
||||
|
||||
const { unmount } = render(
|
||||
<IndicatorButton
|
||||
index={1}
|
||||
selectedIndex={0}
|
||||
isNextSlide={true}
|
||||
autoplayDelay={5000}
|
||||
resetKey={0}
|
||||
isPaused={false}
|
||||
onClick={mockOnClick}
|
||||
/>,
|
||||
)
|
||||
|
||||
// Trigger animation frame
|
||||
act(() => {
|
||||
vi.advanceTimersToNextTimer()
|
||||
})
|
||||
|
||||
unmount()
|
||||
|
||||
expect(mockCancelAnimationFrame).toHaveBeenCalled()
|
||||
mockCancelAnimationFrame.mockRestore()
|
||||
})
|
||||
|
||||
it('cancels animation frame when isNextSlide becomes false', () => {
|
||||
const mockOnClick = vi.fn()
|
||||
const mockCancelAnimationFrame = vi.spyOn(window, 'cancelAnimationFrame')
|
||||
|
||||
const { rerender } = render(
|
||||
<IndicatorButton
|
||||
index={1}
|
||||
selectedIndex={0}
|
||||
isNextSlide={true}
|
||||
autoplayDelay={5000}
|
||||
resetKey={0}
|
||||
isPaused={false}
|
||||
onClick={mockOnClick}
|
||||
/>,
|
||||
)
|
||||
|
||||
// Trigger animation frame
|
||||
act(() => {
|
||||
vi.advanceTimersToNextTimer()
|
||||
})
|
||||
|
||||
// Change isNextSlide to false - this should cancel the animation frame
|
||||
rerender(
|
||||
<IndicatorButton
|
||||
index={1}
|
||||
selectedIndex={0}
|
||||
isNextSlide={false}
|
||||
autoplayDelay={5000}
|
||||
resetKey={0}
|
||||
isPaused={false}
|
||||
onClick={mockOnClick}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(mockCancelAnimationFrame).toHaveBeenCalled()
|
||||
mockCancelAnimationFrame.mockRestore()
|
||||
})
|
||||
|
||||
it('continues polling when document is hidden', () => {
|
||||
const mockOnClick = vi.fn()
|
||||
const mockRequestAnimationFrame = vi.spyOn(window, 'requestAnimationFrame')
|
||||
|
||||
// Mock document.hidden to be true
|
||||
Object.defineProperty(document, 'hidden', {
|
||||
writable: true,
|
||||
configurable: true,
|
||||
value: true,
|
||||
})
|
||||
|
||||
render(
|
||||
<IndicatorButton
|
||||
index={1}
|
||||
selectedIndex={0}
|
||||
isNextSlide={true}
|
||||
autoplayDelay={5000}
|
||||
resetKey={0}
|
||||
isPaused={false}
|
||||
onClick={mockOnClick}
|
||||
/>,
|
||||
)
|
||||
|
||||
// Component should still render
|
||||
expect(screen.getByRole('button')).toBeInTheDocument()
|
||||
|
||||
// Reset document.hidden
|
||||
Object.defineProperty(document, 'hidden', {
|
||||
writable: true,
|
||||
configurable: true,
|
||||
value: false,
|
||||
})
|
||||
|
||||
mockRequestAnimationFrame.mockRestore()
|
||||
})
|
||||
})
|
||||
|
||||
describe('isPaused prop default', () => {
|
||||
it('defaults isPaused to false when not provided', () => {
|
||||
const mockOnClick = vi.fn()
|
||||
const { container } = render(
|
||||
<IndicatorButton
|
||||
index={1}
|
||||
selectedIndex={0}
|
||||
isNextSlide={true}
|
||||
autoplayDelay={5000}
|
||||
resetKey={0}
|
||||
onClick={mockOnClick}
|
||||
/>,
|
||||
)
|
||||
|
||||
// Progress indicator should be visible (animation running)
|
||||
expect(container.querySelector('[style*="conic-gradient"]')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
describe('button styling', () => {
|
||||
it('has correct base classes', () => {
|
||||
const mockOnClick = vi.fn()
|
||||
render(
|
||||
<IndicatorButton
|
||||
index={0}
|
||||
selectedIndex={1}
|
||||
isNextSlide={false}
|
||||
autoplayDelay={5000}
|
||||
resetKey={0}
|
||||
isPaused={false}
|
||||
onClick={mockOnClick}
|
||||
/>,
|
||||
)
|
||||
|
||||
const button = screen.getByRole('button')
|
||||
expect(button).toHaveClass('relative')
|
||||
expect(button).toHaveClass('flex')
|
||||
expect(button).toHaveClass('items-center')
|
||||
expect(button).toHaveClass('justify-center')
|
||||
expect(button).toHaveClass('rounded-[7px]')
|
||||
expect(button).toHaveClass('border')
|
||||
expect(button).toHaveClass('transition-colors')
|
||||
})
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user