From b5cfdfbd47be08ba8a6082fa0283ed4217129d0c Mon Sep 17 00:00:00 2001
From: Yisroel Baum <yisroel.d.baum@gmail.com>
Date: Sat, 13 Jun 2026 21:36:21 +0300
Subject: [PATCH] test sponsor carousel

---
 frontend/rabbi_gerzi/cypress/e2e/home.cy.ts | 52 ++++++++++++++++++++-
 1 file changed, 50 insertions(+), 2 deletions(-)

diff --git a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts
index 1b2adae..016a24a 100644
--- a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts
+++ b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts
@@ -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)
+      })
     })
   })
 })