test sponsor carousel
This commit is contained in:
parent
d7ad8a395f
commit
b5cfdfbd47
1 changed files with 50 additions and 2 deletions
|
|
@ -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)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue