@splidejs/splide/src/js/components/Slides/test/add.test.ts

Splide is a lightweight, flexible and accessible slider/carousel. No dependencies, no Lighthouse errors.

import { init } from '../../../test';


describe( 'Slides#add()', () => {
  test( 'can append a new element to the slider.', () => {
    const splide = init();
    const { Slides } = splide.Components;
    const slide = document.createElement( 'div' );

    Slides.add( slide );

    expect( Slides.getAt( Slides.getLength() - 1 ).slide ).toBe( slide );
  } );

  test( 'can append elements to the slider.', () => {
    const splide = init();
    const { Slides } = splide.Components;
    const slide1 = document.createElement( 'div' );
    const slide2 = document.createElement( 'div' );

    Slides.add( [ slide1, slide2 ] );

    expect( Slides.getAt( Slides.getLength() - 2 ).slide ).toBe( slide1 );
    expect( Slides.getAt( Slides.getLength() - 1 ).slide ).toBe( slide2 );
  } );

  test( 'can append a new slide by HTML.', () => {
    const splide = init();
    const { add, getAt, getLength } = splide.Components.Slides;

    add( [ '<div class="slide1">' ] );

    expect( getAt( getLength() - 1 ).slide.classList.contains( 'slide1' ) ).toBe( true );
  } );

  test( 'can append new slides by HTML.', () => {
    const splide = init();
    const { add, getAt, getLength } = splide.Components.Slides;

    add( [ '<div class="slide1">', '<div class="slide2">' ] );

    expect( getAt( getLength() - 2 ).slide.classList.contains( 'slide1' ) ).toBe( true );
    expect( getAt( getLength() - 1 ).slide.classList.contains( 'slide2' ) ).toBe( true );
  } );

  test( 'can insert a new element at the specific index.', () => {
    const splide = init();
    const { Slides } = splide.Components;
    const slide = document.createElement( 'div' );

    Slides.add( slide, 1 );

    expect( Slides.getAt( 1 ).slide ).toBe( slide );
  } );

  test( 'can insert new elements at the specific index.', () => {
    const splide = init();
    const { Slides } = splide.Components;
    const slide1 = document.createElement( 'div' );
    const slide2 = document.createElement( 'div' );

    Slides.add( [ slide1, slide2 ], 1 );

    expect( Slides.getAt( 1 ).slide ).toBe( slide1 );
    expect( Slides.getAt( 2 ).slide ).toBe( slide2 );
  } );
} );