audiobookshelf/client/cypress/tests/components/cards/ItemSlider.cy.js

import ItemSlider from '@/components/widgets/ItemSlider.vue'
import NarratorCard from '@/components/cards/NarratorCard.vue'
import AuthorCard from '@/components/cards/AuthorCard.vue'

function createMountOptions(shelftype) {
  const items = {
    narrators: [
      { name: 'John Doe', numBooks: 5 },
      { name: 'Jane Doe', numBooks: 3 },
      { name: 'Jack Doe', numBooks: 1 },
      { name: 'Jill Doe', numBooks: 7 }
    ],
    authors: [
      { id: 1, name: 'John Doe', numBooks: 5 },
      { id: 2, name: 'Jane Doe', numBooks: 3 },
      { id: 3, name: 'Jack Doe', numBooks: 1 },
      { id: 4, name: 'Jill Doe', numBooks: 7 }
    ]
  }
  const propsData = {
    items: items[shelftype],
    shelfId: 'shelf-123',
    type: shelftype
  }
  const stubs = {
    'cards-narrator-card': NarratorCard,
    'cards-author-card': AuthorCard
  }
  const mocks = {
    $store: {
      getters: {
        'user/getUserCanUpdate': true,
        'user/getSizeMultiplier': 1,
        'globals/getIsBatchSelectingMediaItems': false
      },
      state: {
        libraries: {
          currentLibraryId: 'library-123'
        }
      }
    },
    $eventBus: {
      $on: () => {},
      $off: () => {}
    }
  }
  const slots = {
    default: `<p class="font-semibold text-gray-100">${shelftype}</p>`
  }

  return { propsData, stubs, mocks, slots }
}

describe('ItemSlider', () => {
  let mountOptions = null

  beforeEach(() => {})

  it('renders a narrators slider', () => {
    mountOptions = createMountOptions('narrators')
    cy.mount(ItemSlider, mountOptions)

    cy.get('&item').should('have.length', 4)
    cy.get('&leftScrollButton').should('be.visible').and('not.have.class', 'text-gray-300')
    cy.get('&rightScrollButton').should('be.visible').and('have.class', 'text-gray-300')
  })

  it('renders an authors slider', () => {
    mountOptions = createMountOptions('authors')
    cy.mount(ItemSlider, mountOptions)

    cy.get('&item').should('have.length', 4)
    cy.get('&leftScrollButton').should('be.visible').and('not.have.class', 'text-gray-300')
    cy.get('&rightScrollButton').should('be.visible').and('have.class', 'text-gray-300')
  })

  it('hides the scroll button when all items are visible', () => {
    mountOptions = createMountOptions('narrators')
    mountOptions.propsData.items = mountOptions.propsData.items.slice(0, 2)
    cy.mount(ItemSlider, mountOptions)

    cy.get('&leftScrollButton').should('not.exist')
    cy.get('&rightScrollButton').should('not.exist')
  })
})