test sponsor carousel

This commit is contained in:
Yisroel Baum 2026-06-13 21:36:21 +03:00
parent d7ad8a395f
commit b5cfdfbd47
Signed by: yisroelbaum
GPG key ID: 0FA60884F75520A9

View file

@ -401,11 +401,10 @@ describe('homepage sponsor strip', () => {
cy.visit('/')
})
it('renders the heading and all seven partner logos', () => {
it('renders the heading and all seven partner logos in a carousel', () => {
cy.get('[data-cy="sponsors"]').within(() => {
cy.contains('h2', 'Organizations Rabbi Gerzi has Worked With')
.should('be.visible')
cy.get('[data-cy="sponsor-logo"]').should('have.length', 7)
const expectedAlts = [
'SHARE',
'U of Israel',
@ -415,10 +414,59 @@ describe('homepage sponsor strip', () => {
'Aish HaTorah',
'Yeshivat Lev HaTorah',
]
cy.get('[data-cy="sponsor-logo"]').should('have.length', 7)
expectedAlts.forEach((altText) => {
cy.get(`[data-cy="sponsor-logo"][alt="${altText}"]`)
.should('be.visible')
})
cy.get('[data-cy="sponsor-logo-duplicate"]')
.should('have.length', 7)
cy.get('[data-cy="sponsor-logo-duplicate"][alt=""]')
.should('have.length', 7)
cy.get('[data-cy="sponsor-logo-group-duplicate"]')
.should('have.attr', 'aria-hidden', 'true')
})
})
it('centers the carousel with side buffers and edge fades', () => {
cy.viewport(1200, 900)
cy.get('[data-cy="sponsors"]').within(() => {
cy.get('[data-cy="sponsor-carousel"]').then((carouselElements) => {
const carouselElement = carouselElements[0]
const sponsorInnerElement = carouselElement.parentElement
if (sponsorInnerElement === null) {
throw new Error('Sponsor inner element is missing')
}
const carouselBounds = carouselElement.getBoundingClientRect()
const sponsorInnerBounds =
sponsorInnerElement.getBoundingClientRect()
const leftBuffer = carouselBounds.left - sponsorInnerBounds.left
const rightBuffer = sponsorInnerBounds.right - carouselBounds.right
const carouselRatio = carouselBounds.width / sponsorInnerBounds.width
const carouselStyle = getComputedStyle(carouselElement)
const maskImage =
carouselStyle.maskImage || carouselStyle.webkitMaskImage
expect(carouselRatio).to.be.closeTo(0.6, 0.02)
expect(leftBuffer).to.be.closeTo(rightBuffer, 1)
expect(maskImage).to.contain('50px')
})
})
})
it('scrolls the sponsor logos from right to left', () => {
cy.get('[data-cy="sponsor-track"]').then((trackElements) => {
const startingLeft = trackElements[0].getBoundingClientRect().left
cy.wait(750)
cy.get('[data-cy="sponsor-track"]').then((laterTrackElements) => {
const laterLeft =
laterTrackElements[0].getBoundingClientRect().left
expect(startingLeft).to.be.greaterThan(laterLeft)
})
})
})
})