kopia lustrzana https://github.com/shoelace-style/shoelace
602 wiersze
20 KiB
TypeScript
602 wiersze
20 KiB
TypeScript
import { expect, fixture, html, oneEvent } from '@open-wc/testing';
|
|
import sinon from 'sinon';
|
|
import { clickOnElement } from '../../internal/test';
|
|
import type SlCarousel from './carousel';
|
|
|
|
describe('<sl-carousel>', () => {
|
|
it('should render a carousel with default configuration', async () => {
|
|
// Arrange
|
|
const el = await fixture(html`
|
|
<sl-carousel>
|
|
<sl-carousel-item>Node 1</sl-carousel-item>
|
|
<sl-carousel-item>Node 2</sl-carousel-item>
|
|
<sl-carousel-item>Node 3</sl-carousel-item>
|
|
</sl-carousel>
|
|
`);
|
|
|
|
// Assert
|
|
expect(el).to.exist;
|
|
expect(el).to.have.attribute('role', 'region');
|
|
expect(el).to.have.attribute('aria-roledescription', 'carousel');
|
|
expect(el.shadowRoot!.querySelector('.carousel__navigation')).not.to.exist;
|
|
expect(el.shadowRoot!.querySelector('.carousel__pagination')).not.to.exist;
|
|
});
|
|
|
|
describe('when `autoplay` attribute is provided', () => {
|
|
let clock: sinon.SinonFakeTimers;
|
|
|
|
beforeEach(() => {
|
|
clock = sinon.useFakeTimers({
|
|
now: new Date()
|
|
});
|
|
});
|
|
|
|
afterEach(() => {
|
|
clock.restore();
|
|
});
|
|
|
|
it('should scroll forwards every `autoplay-interval` milliseconds', async () => {
|
|
// Arrange
|
|
const el = await fixture<SlCarousel>(html`
|
|
<sl-carousel autoplay autoplay-interval="10">
|
|
<sl-carousel-item>Node 1</sl-carousel-item>
|
|
<sl-carousel-item>Node 2</sl-carousel-item>
|
|
<sl-carousel-item>Node 3</sl-carousel-item>
|
|
</sl-carousel>
|
|
`);
|
|
sinon.stub(el, 'next');
|
|
|
|
await el.updateComplete;
|
|
|
|
// Act
|
|
clock.next();
|
|
clock.next();
|
|
|
|
// Assert
|
|
expect(el.next).to.have.been.calledTwice;
|
|
});
|
|
|
|
it('should pause the autoplay while the user is interacting', async () => {
|
|
// Arrange
|
|
const el = await fixture<SlCarousel>(html`
|
|
<sl-carousel autoplay autoplay-interval="10">
|
|
<sl-carousel-item>Node 1</sl-carousel-item>
|
|
<sl-carousel-item>Node 2</sl-carousel-item>
|
|
<sl-carousel-item>Node 3</sl-carousel-item>
|
|
</sl-carousel>
|
|
`);
|
|
sinon.stub(el, 'next');
|
|
|
|
await el.updateComplete;
|
|
|
|
// Act
|
|
el.dispatchEvent(new Event('mouseenter'));
|
|
await el.updateComplete;
|
|
clock.next();
|
|
clock.next();
|
|
|
|
// Assert
|
|
expect(el.next).not.to.have.been.called;
|
|
});
|
|
});
|
|
|
|
describe('when `loop` attribute is provided', () => {
|
|
it('should create clones of the first and last slides', async () => {
|
|
// Arrange
|
|
const el = await fixture<SlCarousel>(html`
|
|
<sl-carousel loop>
|
|
<sl-carousel-item>Node 1</sl-carousel-item>
|
|
<sl-carousel-item>Node 2</sl-carousel-item>
|
|
<sl-carousel-item>Node 3</sl-carousel-item>
|
|
</sl-carousel>
|
|
`);
|
|
|
|
// Act
|
|
await el.updateComplete;
|
|
|
|
// Assert
|
|
expect(el.firstElementChild).to.have.attribute('data-clone', '2');
|
|
expect(el.lastElementChild).to.have.attribute('data-clone', '0');
|
|
});
|
|
|
|
describe('and `slides-per-page` is provided', () => {
|
|
it('should create multiple clones', async () => {
|
|
// Arrange
|
|
const el = await fixture<SlCarousel>(html`
|
|
<sl-carousel loop slides-per-page="2">
|
|
<sl-carousel-item>Node 1</sl-carousel-item>
|
|
<sl-carousel-item>Node 2</sl-carousel-item>
|
|
<sl-carousel-item>Node 3</sl-carousel-item>
|
|
</sl-carousel>
|
|
`);
|
|
|
|
// Act
|
|
await el.updateComplete;
|
|
const clones = [...el.children].filter(child => child.hasAttribute('data-clone'));
|
|
|
|
// Assert
|
|
expect(clones).to.have.lengthOf(4);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('when `pagination` attribute is provided', () => {
|
|
it('should render pagination controls', async () => {
|
|
// Arrange
|
|
const el = await fixture(html`
|
|
<sl-carousel pagination>
|
|
<sl-carousel-item>Node 1</sl-carousel-item>
|
|
<sl-carousel-item>Node 2</sl-carousel-item>
|
|
<sl-carousel-item>Node 3</sl-carousel-item>
|
|
</sl-carousel>
|
|
`);
|
|
|
|
// Assert
|
|
expect(el).to.exist;
|
|
expect(el.shadowRoot!.querySelector('.carousel__navigation')).not.to.exist;
|
|
expect(el.shadowRoot!.querySelector('.carousel__pagination')).to.exist;
|
|
});
|
|
|
|
describe('and user clicks on a pagination button', () => {
|
|
it('should scroll the carousel to the nth slide', async () => {
|
|
// Arrange
|
|
const el = await fixture<SlCarousel>(html`
|
|
<sl-carousel pagination>
|
|
<sl-carousel-item>Node 1</sl-carousel-item>
|
|
<sl-carousel-item>Node 2</sl-carousel-item>
|
|
<sl-carousel-item>Node 3</sl-carousel-item>
|
|
</sl-carousel>
|
|
`);
|
|
sinon.stub(el, 'goToSlide');
|
|
await el.updateComplete;
|
|
|
|
// Act
|
|
const paginationItem = el.shadowRoot!.querySelectorAll('.carousel__pagination-item')[2] as HTMLElement;
|
|
await clickOnElement(paginationItem);
|
|
|
|
expect(el.goToSlide).to.have.been.calledWith(2);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('when `navigation` attribute is provided', () => {
|
|
it('should render navigation controls', async () => {
|
|
// Arrange
|
|
const el = await fixture(html`
|
|
<sl-carousel navigation>
|
|
<sl-carousel-item>Node 1</sl-carousel-item>
|
|
<sl-carousel-item>Node 2</sl-carousel-item>
|
|
<sl-carousel-item>Node 3</sl-carousel-item>
|
|
</sl-carousel>
|
|
`);
|
|
|
|
// Assert
|
|
expect(el).to.exist;
|
|
expect(el.shadowRoot!.querySelector('.carousel__navigation')).to.exist;
|
|
expect(el.shadowRoot!.querySelector('.carousel__pagination')).not.to.exist;
|
|
});
|
|
});
|
|
|
|
describe('when `slides-per-page` attribute is provided', () => {
|
|
it('should show multiple slides at a given time', async () => {
|
|
// Arrange
|
|
const el = await fixture<SlCarousel>(html`
|
|
<sl-carousel slides-per-page="2">
|
|
<sl-carousel-item>Node 1</sl-carousel-item>
|
|
<sl-carousel-item>Node 2</sl-carousel-item>
|
|
<sl-carousel-item>Node 3</sl-carousel-item>
|
|
</sl-carousel>
|
|
`);
|
|
|
|
// Act
|
|
await el.updateComplete;
|
|
|
|
// Assert
|
|
expect(el.scrollContainer.style.getPropertyValue('--slides-per-page')).to.be.equal('2');
|
|
});
|
|
});
|
|
|
|
describe('when `slides-per-move` attribute is provided', () => {
|
|
it('should set the granularity of snapping', async () => {
|
|
// Arrange
|
|
const expectedSnapGranularity = 2;
|
|
const el = await fixture<SlCarousel>(html`
|
|
<sl-carousel slides-per-move="${expectedSnapGranularity}">
|
|
<sl-carousel-item>Node 1</sl-carousel-item>
|
|
<sl-carousel-item>Node 2</sl-carousel-item>
|
|
<sl-carousel-item>Node 3</sl-carousel-item>
|
|
<sl-carousel-item>Node 4</sl-carousel-item>
|
|
</sl-carousel>
|
|
`);
|
|
|
|
// Act
|
|
await el.updateComplete;
|
|
|
|
// Assert
|
|
for (let i = 0; i < el.children.length; i++) {
|
|
const child = el.children[i] as HTMLElement;
|
|
|
|
if (i % expectedSnapGranularity === 0) {
|
|
expect(child.style.getPropertyValue('scroll-snap-align')).to.be.equal('');
|
|
} else {
|
|
expect(child.style.getPropertyValue('scroll-snap-align')).to.be.equal('none');
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
describe('when `orientation` attribute is provided', () => {
|
|
describe('and value is `vertical`', () => {
|
|
it('should make the scrollable along the y-axis', async () => {
|
|
// Arrange
|
|
const el = await fixture<SlCarousel>(html`
|
|
<sl-carousel orientation="vertical" style="height: 100px">
|
|
<sl-carousel-item>Node 1</sl-carousel-item>
|
|
<sl-carousel-item>Node 2</sl-carousel-item>
|
|
</sl-carousel>
|
|
`);
|
|
|
|
// Act
|
|
await el.updateComplete;
|
|
|
|
// Assert
|
|
expect(el.scrollContainer.scrollWidth).to.be.equal(el.scrollContainer.clientWidth);
|
|
expect(el.scrollContainer.scrollHeight).to.be.greaterThan(el.scrollContainer.clientHeight);
|
|
});
|
|
});
|
|
|
|
describe('and value is `horizontal`', () => {
|
|
it('should make the scrollable along the x-axis', async () => {
|
|
// Arrange
|
|
const el = await fixture<SlCarousel>(html`
|
|
<sl-carousel orientation="horizontal" style="height: 100px">
|
|
<sl-carousel-item>Node 1</sl-carousel-item>
|
|
<sl-carousel-item>Node 2</sl-carousel-item>
|
|
</sl-carousel>
|
|
`);
|
|
|
|
// Act
|
|
await el.updateComplete;
|
|
|
|
// Assert
|
|
expect(el.scrollContainer.scrollWidth).to.be.greaterThan(el.scrollContainer.clientWidth);
|
|
expect(el.scrollContainer.scrollHeight).to.be.equal(el.scrollContainer.clientHeight);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('Navigation controls', () => {
|
|
describe('when the user clicks the next button', () => {
|
|
it('should scroll to the next slide', async () => {
|
|
// Arrange
|
|
const el = await fixture<SlCarousel>(html`
|
|
<sl-carousel navigation>
|
|
<sl-carousel-item>Node 1</sl-carousel-item>
|
|
<sl-carousel-item>Node 2</sl-carousel-item>
|
|
<sl-carousel-item>Node 3</sl-carousel-item>
|
|
</sl-carousel>
|
|
`);
|
|
const nextButton: HTMLElement = el.shadowRoot!.querySelector('.carousel__navigation-button--next')!;
|
|
sinon.stub(el, 'next');
|
|
|
|
await el.updateComplete;
|
|
|
|
// Act
|
|
await clickOnElement(nextButton);
|
|
await el.updateComplete;
|
|
|
|
// Assert
|
|
expect(el.next).to.have.been.calledOnce;
|
|
});
|
|
|
|
describe('and carousel is positioned on the last slide', () => {
|
|
it('should not scroll', async () => {
|
|
// Arrange
|
|
const el = await fixture<SlCarousel>(html`
|
|
<sl-carousel navigation>
|
|
<sl-carousel-item>Node 1</sl-carousel-item>
|
|
<sl-carousel-item>Node 2</sl-carousel-item>
|
|
<sl-carousel-item>Node 3</sl-carousel-item>
|
|
</sl-carousel>
|
|
`);
|
|
const nextButton: HTMLElement = el.shadowRoot!.querySelector('.carousel__navigation-button--next')!;
|
|
sinon.stub(el, 'next');
|
|
|
|
el.goToSlide(2, 'auto');
|
|
await oneEvent(el.scrollContainer, 'scrollend');
|
|
await el.updateComplete;
|
|
|
|
// Act
|
|
await clickOnElement(nextButton);
|
|
await el.updateComplete;
|
|
|
|
// Assert
|
|
expect(nextButton).to.have.attribute('aria-disabled', 'true');
|
|
expect(el.next).not.to.have.been.called;
|
|
});
|
|
|
|
describe('and `loop` attribute is provided', () => {
|
|
it('should scroll to the first slide', async () => {
|
|
// Arrange
|
|
const el = await fixture<SlCarousel>(html`
|
|
<sl-carousel navigation loop>
|
|
<sl-carousel-item>Node 1</sl-carousel-item>
|
|
<sl-carousel-item>Node 2</sl-carousel-item>
|
|
<sl-carousel-item>Node 3</sl-carousel-item>
|
|
</sl-carousel>
|
|
`);
|
|
const nextButton: HTMLElement = el.shadowRoot!.querySelector('.carousel__navigation-button--next')!;
|
|
|
|
el.goToSlide(2, 'auto');
|
|
await oneEvent(el.scrollContainer, 'scrollend');
|
|
await el.updateComplete;
|
|
|
|
// Act
|
|
await clickOnElement(nextButton);
|
|
|
|
// wait first scroll to clone
|
|
await oneEvent(el.scrollContainer, 'scrollend');
|
|
// wait scroll to actual item
|
|
await oneEvent(el.scrollContainer, 'scrollend');
|
|
|
|
// Assert
|
|
expect(nextButton).to.have.attribute('aria-disabled', 'false');
|
|
expect(el.activeSlide).to.be.equal(0);
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('and clicks the previous button', () => {
|
|
it('should scroll to the previous slide', async () => {
|
|
// Arrange
|
|
const el = await fixture<SlCarousel>(html`
|
|
<sl-carousel navigation>
|
|
<sl-carousel-item>Node 1</sl-carousel-item>
|
|
<sl-carousel-item>Node 2</sl-carousel-item>
|
|
<sl-carousel-item>Node 3</sl-carousel-item>
|
|
</sl-carousel>
|
|
`);
|
|
|
|
// Go to the second slide so that the previous button will be enabled
|
|
el.goToSlide(1, 'auto');
|
|
await oneEvent(el.scrollContainer, 'scrollend');
|
|
await el.updateComplete;
|
|
|
|
const previousButton: HTMLElement = el.shadowRoot!.querySelector('.carousel__navigation-button--previous')!;
|
|
sinon.stub(el, 'previous');
|
|
|
|
await el.updateComplete;
|
|
|
|
// Act
|
|
await clickOnElement(previousButton);
|
|
await el.updateComplete;
|
|
|
|
// Assert
|
|
expect(el.previous).to.have.been.calledOnce;
|
|
});
|
|
|
|
describe('and carousel is positioned on the first slide', () => {
|
|
it('should not scroll', async () => {
|
|
// Arrange
|
|
const el = await fixture<SlCarousel>(html`
|
|
<sl-carousel navigation>
|
|
<sl-carousel-item>Node 1</sl-carousel-item>
|
|
<sl-carousel-item>Node 2</sl-carousel-item>
|
|
<sl-carousel-item>Node 3</sl-carousel-item>
|
|
</sl-carousel>
|
|
`);
|
|
|
|
const previousButton: HTMLElement = el.shadowRoot!.querySelector('.carousel__navigation-button--previous')!;
|
|
sinon.stub(el, 'previous');
|
|
await el.updateComplete;
|
|
|
|
// Act
|
|
await clickOnElement(previousButton);
|
|
await el.updateComplete;
|
|
|
|
// Assert
|
|
expect(previousButton).to.have.attribute('aria-disabled', 'true');
|
|
expect(el.previous).not.to.have.been.called;
|
|
});
|
|
|
|
describe('and `loop` attribute is provided', () => {
|
|
it('should scroll to the last slide', async () => {
|
|
// Arrange
|
|
const el = await fixture<SlCarousel>(html`
|
|
<sl-carousel navigation loop>
|
|
<sl-carousel-item>Node 1</sl-carousel-item>
|
|
<sl-carousel-item>Node 2</sl-carousel-item>
|
|
<sl-carousel-item>Node 3</sl-carousel-item>
|
|
</sl-carousel>
|
|
`);
|
|
|
|
const previousButton: HTMLElement = el.shadowRoot!.querySelector('.carousel__navigation-button--previous')!;
|
|
await el.updateComplete;
|
|
|
|
// Act
|
|
await clickOnElement(previousButton);
|
|
|
|
// wait first scroll to clone
|
|
await oneEvent(el.scrollContainer, 'scrollend');
|
|
// wait scroll to actual item
|
|
await oneEvent(el.scrollContainer, 'scrollend');
|
|
|
|
// Assert
|
|
expect(previousButton).to.have.attribute('aria-disabled', 'false');
|
|
expect(el.activeSlide).to.be.equal(2);
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('API', () => {
|
|
describe('#next', () => {
|
|
it('should scroll the carousel to the next slide', async () => {
|
|
// Arrange
|
|
const el = await fixture<SlCarousel>(html`
|
|
<sl-carousel slides-per-move="2">
|
|
<sl-carousel-item>Node 1</sl-carousel-item>
|
|
<sl-carousel-item>Node 2</sl-carousel-item>
|
|
<sl-carousel-item>Node 3</sl-carousel-item>
|
|
</sl-carousel>
|
|
`);
|
|
sinon.stub(el, 'goToSlide');
|
|
await el.updateComplete;
|
|
|
|
// Act
|
|
el.next();
|
|
|
|
expect(el.goToSlide).to.have.been.calledWith(2);
|
|
});
|
|
});
|
|
|
|
describe('#previous', () => {
|
|
it('should scroll the carousel to the previous slide', async () => {
|
|
// Arrange
|
|
const el = await fixture<SlCarousel>(html`
|
|
<sl-carousel slides-per-move="2">
|
|
<sl-carousel-item>Node 1</sl-carousel-item>
|
|
<sl-carousel-item>Node 2</sl-carousel-item>
|
|
<sl-carousel-item>Node 3</sl-carousel-item>
|
|
</sl-carousel>
|
|
`);
|
|
sinon.stub(el, 'goToSlide');
|
|
await el.updateComplete;
|
|
|
|
// Act
|
|
el.previous();
|
|
|
|
expect(el.goToSlide).to.have.been.calledWith(-2);
|
|
});
|
|
});
|
|
|
|
describe('#goToSlide', () => {
|
|
it('should scroll the carousel to the nth slide', async () => {
|
|
// Arrange
|
|
const el = await fixture<SlCarousel>(html`
|
|
<sl-carousel>
|
|
<sl-carousel-item>Node 1</sl-carousel-item>
|
|
<sl-carousel-item>Node 2</sl-carousel-item>
|
|
<sl-carousel-item>Node 3</sl-carousel-item>
|
|
</sl-carousel>
|
|
`);
|
|
await el.updateComplete;
|
|
|
|
// Act
|
|
el.goToSlide(2);
|
|
await oneEvent(el.scrollContainer, 'scrollend');
|
|
await el.updateComplete;
|
|
|
|
// Assert
|
|
expect(el.activeSlide).to.be.equal(2);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('Accessibility', () => {
|
|
it('should pass accessibility tests', async () => {
|
|
// Arrange
|
|
const el = await fixture<SlCarousel>(html`
|
|
<sl-carousel navigation pagination>
|
|
<sl-carousel-item>Node 1</sl-carousel-item>
|
|
<sl-carousel-item>Node 2</sl-carousel-item>
|
|
<sl-carousel-item>Node 3</sl-carousel-item>
|
|
</sl-carousel>
|
|
`);
|
|
const pagination = el.shadowRoot!.querySelector('.carousel__pagination')!;
|
|
const navigation = el.shadowRoot!.querySelector('.carousel__navigation')!;
|
|
await el.updateComplete;
|
|
|
|
// Assert
|
|
expect(el.scrollContainer).to.have.attribute('aria-busy', 'false');
|
|
expect(el.scrollContainer).to.have.attribute('aria-live', 'polite');
|
|
expect(el.scrollContainer).to.have.attribute('aria-atomic', 'true');
|
|
|
|
expect(pagination).to.have.attribute('role', 'tablist');
|
|
expect(pagination).to.have.attribute('aria-controls', el.scrollContainer.id);
|
|
for (const paginationItem of pagination.querySelectorAll('.carousel__pagination-item')) {
|
|
expect(paginationItem).to.have.attribute('role', 'tab');
|
|
expect(paginationItem).to.have.attribute('aria-selected');
|
|
expect(paginationItem).to.have.attribute('aria-label');
|
|
}
|
|
|
|
for (const navigationItem of navigation.querySelectorAll('.carousel__navigation-item')) {
|
|
expect(navigationItem).to.have.attribute('aria-controls', el.scrollContainer.id);
|
|
expect(navigationItem).to.have.attribute('aria-disabled');
|
|
expect(navigationItem).to.have.attribute('aria-label');
|
|
}
|
|
|
|
await expect(el).to.be.accessible();
|
|
});
|
|
|
|
describe('when scrolling', () => {
|
|
it('should update aria-busy attribute', async () => {
|
|
// Arrange
|
|
const el = await fixture<SlCarousel>(html`
|
|
<sl-carousel autoplay>
|
|
<sl-carousel-item>Node 1</sl-carousel-item>
|
|
<sl-carousel-item>Node 2</sl-carousel-item>
|
|
<sl-carousel-item>Node 3</sl-carousel-item>
|
|
</sl-carousel>
|
|
`);
|
|
|
|
await el.updateComplete;
|
|
|
|
// Act
|
|
el.goToSlide(2, 'smooth');
|
|
await oneEvent(el.scrollContainer, 'scroll');
|
|
await el.updateComplete;
|
|
|
|
// Assert
|
|
expect(el.scrollContainer).to.have.attribute('aria-busy', 'true');
|
|
|
|
await oneEvent(el.scrollContainer, 'scrollend');
|
|
await el.updateComplete;
|
|
expect(el.scrollContainer).to.have.attribute('aria-busy', 'false');
|
|
});
|
|
});
|
|
|
|
describe('when autoplay is active', () => {
|
|
it('should disable live announcement', async () => {
|
|
// Arrange
|
|
const el = await fixture<SlCarousel>(html`
|
|
<sl-carousel autoplay>
|
|
<sl-carousel-item>Node 1</sl-carousel-item>
|
|
<sl-carousel-item>Node 2</sl-carousel-item>
|
|
<sl-carousel-item>Node 3</sl-carousel-item>
|
|
</sl-carousel>
|
|
`);
|
|
|
|
await el.updateComplete;
|
|
|
|
// Assert
|
|
expect(el.scrollContainer).to.have.attribute('aria-live', 'off');
|
|
});
|
|
|
|
describe('and user is interacting with the carousel', () => {
|
|
it('should enable live announcement', async () => {
|
|
// Arrange
|
|
const el = await fixture<SlCarousel>(html`
|
|
<sl-carousel autoplay>
|
|
<sl-carousel-item>Node 1</sl-carousel-item>
|
|
<sl-carousel-item>Node 2</sl-carousel-item>
|
|
<sl-carousel-item>Node 3</sl-carousel-item>
|
|
</sl-carousel>
|
|
`);
|
|
|
|
await el.updateComplete;
|
|
|
|
// Act
|
|
el.dispatchEvent(new Event('focusin'));
|
|
await el.updateComplete;
|
|
|
|
// Assert
|
|
expect(el.scrollContainer).to.have.attribute('aria-live', 'polite');
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|