test: added tests for some base components (#32370)

This commit is contained in:
Saumya Talwani
2026-02-24 13:52:43 +05:30
committed by GitHub
parent 9819f7d69c
commit 0eaae4f573
8 changed files with 98 additions and 39 deletions

View File

@ -1,7 +1,6 @@
import type { Mock } from 'vitest'
import { act, fireEvent, render, screen } from '@testing-library/react'
import useEmblaCarousel from 'embla-carousel-react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { Carousel, useCarousel } from './index'
vi.mock('embla-carousel-react', () => ({
@ -52,7 +51,9 @@ const createMockEmblaApi = (): MockEmblaApi => ({
})
const emitEmblaEvent = (event: EmblaEventName, api: MockEmblaApi | undefined = mockApi) => {
listeners[event].forEach(callback => callback(api))
listeners[event].forEach((callback) => {
callback(api)
})
}
const renderCarouselWithControls = (orientation: 'horizontal' | 'vertical' = 'horizontal') => {
@ -60,6 +61,8 @@ const renderCarouselWithControls = (orientation: 'horizontal' | 'vertical' = 'ho
<Carousel orientation={orientation}>
<Carousel.Content data-testid="carousel-content">
<Carousel.Item>Slide 1</Carousel.Item>
<Carousel.Item>Slide 2</Carousel.Item>
<Carousel.Item>Slide 3</Carousel.Item>
</Carousel.Content>
<Carousel.Previous>Prev</Carousel.Previous>
<Carousel.Next>Next</Carousel.Next>
@ -68,6 +71,13 @@ const renderCarouselWithControls = (orientation: 'horizontal' | 'vertical' = 'ho
)
}
const mockPlugin = () => ({
name: 'mock',
options: {},
init: vi.fn(),
destroy: vi.fn(),
})
describe('Carousel', () => {
beforeEach(() => {
vi.clearAllMocks()
@ -90,22 +100,25 @@ describe('Carousel', () => {
expect(screen.getByRole('region')).toHaveAttribute('aria-roledescription', 'carousel')
expect(screen.getByTestId('carousel-content')).toHaveClass('flex')
expect(screen.getByRole('group')).toHaveAttribute('aria-roledescription', 'slide')
screen.getAllByRole('group').forEach((slide) => {
expect(slide).toHaveAttribute('aria-roledescription', 'slide')
})
})
})
// Props should be translated into Embla options and visible layout.
describe('Props', () => {
it('should configure embla with horizontal axis when orientation is omitted', () => {
const plugin = mockPlugin()
render(
<Carousel opts={{ loop: true }} plugins={['plugin-marker' as unknown as never]}>
<Carousel opts={{ loop: true }} plugins={[plugin]}>
<Carousel.Content />
</Carousel>,
)
expect(mockedUseEmblaCarousel).toHaveBeenCalledWith(
{ loop: true, axis: 'x' },
['plugin-marker'],
[plugin],
)
})