@amsterdam/design-system-react
Version:
All React components from the Amsterdam Design System. Use it to compose pages in your website or application.
90 lines (89 loc) • 4.69 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
/**
* @license EUPL-1.2+
* Copyright Gemeente Amsterdam
*/
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, expect, it, vi } from 'vitest';
import { ImageSliderThumbnails } from './ImageSliderThumbnails';
const thumbnails = [
{ alt: 'One', src: 'https://picsum.photos/id/122/320/180' },
{ alt: 'Two', src: 'https://picsum.photos/id/101/320/180' },
{ alt: 'Three', src: 'https://picsum.photos/id/153/320/180' },
];
const defaultProps = { currentSlideId: 0, scrollToSlide: vi.fn(), thumbnails: thumbnails };
describe('ImageSliderThumbnails', () => {
it('renders', () => {
const { container } = render(_jsx(ImageSliderThumbnails, { ...defaultProps }));
const component = container.querySelector(':only-child');
expect(component).toBeInTheDocument();
expect(component).toBeVisible();
});
it('renders thumbnails', () => {
const { container } = render(_jsx(ImageSliderThumbnails, { ...defaultProps }));
const thumbs = container.querySelectorAll('.ams-image-slider__thumbnail');
expect(thumbs).toHaveLength(thumbnails.length);
});
it('renders a design system BEM class name', () => {
const { container } = render(_jsx(ImageSliderThumbnails, { ...defaultProps }));
const component = container.querySelector(':only-child');
expect(component).toHaveClass('ams-image-slider__thumbnails');
});
it('calls scrollToSlide on ArrowRight keydown', async () => {
const scrollToSlide = vi.fn();
const user = userEvent.setup();
const { container } = render(_jsx(ImageSliderThumbnails, { ...defaultProps, scrollToSlide: scrollToSlide }));
const component = container.querySelector(':only-child');
const firstThumbnail = component.children[0];
firstThumbnail.focus();
await user.keyboard('{ArrowRight}');
expect(scrollToSlide).toHaveBeenCalledWith(1);
});
it('does not call scrollToSlide on ArrowRight keydown when at end', async () => {
const scrollToSlide = vi.fn();
const user = userEvent.setup();
const { container } = render(_jsx(ImageSliderThumbnails, { ...defaultProps, currentSlideId: thumbnails.length - 1, scrollToSlide: scrollToSlide }));
const component = container.querySelector(':only-child');
const lastThumbnail = component.children[thumbnails.length - 1];
lastThumbnail.focus();
await user.keyboard('{ArrowRight}');
expect(scrollToSlide).not.toHaveBeenCalled();
});
it('calls scrollToSlide on ArrowLeft keydown', async () => {
const scrollToSlide = vi.fn();
const user = userEvent.setup();
const { container } = render(_jsx(ImageSliderThumbnails, { ...defaultProps, currentSlideId: 1, scrollToSlide: scrollToSlide }));
const component = container.querySelector(':only-child');
const secondThumbnail = component.children[1];
secondThumbnail.focus();
await user.keyboard('{ArrowLeft}');
expect(scrollToSlide).toHaveBeenCalledWith(0);
});
it('does not call scrollToSlide on ArrowLeft keydown when at start', async () => {
const scrollToSlide = vi.fn();
const user = userEvent.setup();
const { container } = render(_jsx(ImageSliderThumbnails, { ...defaultProps, currentSlideId: 0, scrollToSlide: scrollToSlide }));
const component = container.querySelector(':only-child');
const firstThumbnail = component.children[0];
firstThumbnail.focus();
await user.keyboard('{ArrowLeft}');
expect(scrollToSlide).not.toHaveBeenCalled();
});
it('calls scrollToSlide on thumbnail click', async () => {
const scrollToSlide = vi.fn();
const user = userEvent.setup();
const { container } = render(_jsx(ImageSliderThumbnails, { ...defaultProps, scrollToSlide: scrollToSlide }));
const component = container.querySelector(':only-child');
const secondThumbnail = component.children[1];
await user.click(secondThumbnail);
expect(scrollToSlide).toHaveBeenCalledWith(1);
});
it('passes additional props', () => {
const { container } = render(_jsx(ImageSliderThumbnails, { "aria-hidden": "false", "data-test": "data-test", id: "id", ...defaultProps }));
const component = container.querySelector(':only-child');
expect(component).toHaveAttribute('aria-hidden', 'false');
expect(component).toHaveAttribute('id', 'id');
expect(component).toHaveAttribute('data-test', 'data-test');
});
});