544 lines
19 KiB
TypeScript
544 lines
19 KiB
TypeScript
describe('homepage hero', () => {
|
|
beforeEach(() => {
|
|
cy.visit('/')
|
|
})
|
|
|
|
it('renders the header navigation', () => {
|
|
cy.get('header.site-header').within(() => {
|
|
cy.contains('Torah Media').should('be.visible')
|
|
cy.contains('About').should('be.visible')
|
|
cy.contains('Contact').should('be.visible')
|
|
cy.contains('Donate').should('be.visible')
|
|
})
|
|
})
|
|
|
|
it('opens the Torah Media page from the header navigation', () => {
|
|
cy.contains('header.site-header a', 'Torah Media').click()
|
|
|
|
cy.location('pathname').should('eq', '/media')
|
|
cy.get('header.site-header').within(() => {
|
|
cy.contains('Torah Media').should('be.visible')
|
|
cy.contains('About').should('be.visible')
|
|
cy.contains('Contact').should('be.visible')
|
|
cy.contains('Donate').should('be.visible')
|
|
})
|
|
cy.contains('h1', 'Torah Media').should('be.visible')
|
|
})
|
|
|
|
it('renders the hero headline with italic emphasis', () => {
|
|
cy.get('[data-cy="hero"]').within(() => {
|
|
cy.contains('upgrade our lives').should('be.visible')
|
|
cy.contains('em', 'healthy').should('be.visible')
|
|
cy.contains('em', 'integrated').should('be.visible')
|
|
cy.contains('em', 'balanced').should('be.visible')
|
|
cy.contains('Torah existence').should('be.visible')
|
|
cy.contains('Rabbi Yehoshua Gerzi').should('be.visible')
|
|
})
|
|
})
|
|
|
|
it('renders the rabbi portrait image', () => {
|
|
cy.get('[data-cy="hero-portrait"]')
|
|
.should('be.visible')
|
|
.and('have.attr', 'alt')
|
|
.and('match', /Rabbi Yehoshua Gerzi/i)
|
|
})
|
|
|
|
it('lets the rabbi portrait rise above the circular frame', () => {
|
|
cy.get<HTMLImageElement>('[data-cy="hero-portrait"]').then(
|
|
(portraitElements) => {
|
|
const portraitImage = portraitElements[0]
|
|
const frameElement = portraitImage.parentElement
|
|
|
|
if (frameElement === null) {
|
|
throw new Error('Portrait frame is missing')
|
|
}
|
|
|
|
const frameStyle = getComputedStyle(frameElement)
|
|
|
|
expect(frameStyle.overflowX).to.equal('visible')
|
|
expect(frameStyle.overflowY).to.equal('visible')
|
|
expect(portraitImage.getBoundingClientRect().top).to.be.lessThan(
|
|
frameElement.getBoundingClientRect().top,
|
|
)
|
|
},
|
|
)
|
|
})
|
|
|
|
it('extends the circular background to the portrait base edges', () => {
|
|
cy.get<HTMLImageElement>('[data-cy="hero-portrait"]').then(
|
|
(portraitElements) => {
|
|
const portraitImage = portraitElements[0]
|
|
const frameElement = portraitImage.parentElement
|
|
|
|
if (frameElement === null) {
|
|
throw new Error('Portrait frame is missing')
|
|
}
|
|
|
|
const portraitBounds = portraitImage.getBoundingClientRect()
|
|
const frameBounds = frameElement.getBoundingClientRect()
|
|
const backgroundStyle = getComputedStyle(frameElement, '::before')
|
|
const backgroundWidth = Number.parseFloat(backgroundStyle.width)
|
|
const backgroundLeft =
|
|
frameBounds.left + (frameBounds.width - backgroundWidth) / 2
|
|
const backgroundRight = backgroundLeft + backgroundWidth
|
|
|
|
expect(backgroundStyle.content).to.not.equal('none')
|
|
expect(backgroundWidth).to.be.closeTo(portraitBounds.width, 1)
|
|
expect(backgroundLeft).to.be.closeTo(portraitBounds.left, 1)
|
|
expect(backgroundRight).to.be.closeTo(portraitBounds.right, 1)
|
|
},
|
|
)
|
|
})
|
|
})
|
|
|
|
describe('homepage discover path section', () => {
|
|
beforeEach(() => {
|
|
cy.visit('/')
|
|
})
|
|
|
|
it('renders the heading and body copy', () => {
|
|
cy.get('[data-cy="discover-path"]').within(() => {
|
|
cy.contains('h2', 'Discover a Path to a Holistically Engaged Life')
|
|
.should('be.visible')
|
|
cy.contains('Rabbi Yehoshua Gerzi has dedicated his life')
|
|
.should('be.visible')
|
|
cy.contains('Healthy, Integrated and Balanced Torah Living')
|
|
.should('be.visible')
|
|
cy.contains('Ramat Beit Shemesh').should('be.visible')
|
|
cy.contains('Pilzno Institute of Higher Learning').should('be.visible')
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('homepage core teachings grid', () => {
|
|
beforeEach(() => {
|
|
cy.visit('/')
|
|
})
|
|
|
|
it('renders the heading and six teaching tiles', () => {
|
|
cy.get('[data-cy="core-teachings"]').within(() => {
|
|
cy.contains('h2', 'Baderech HaAvodah').should('be.visible')
|
|
cy.contains('Core Teachings').should('be.visible')
|
|
cy.contains('1) Introduction').should('be.visible')
|
|
cy.contains('2) Foundations').should('be.visible')
|
|
cy.contains('3) Divine Plan').should('be.visible')
|
|
cy.contains('4) Architecture of the Soul').should('be.visible')
|
|
cy.contains('5) Arba Yesodot').should('be.visible')
|
|
cy.contains('6) Fluid Integration').should('be.visible')
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('homepage unique voice section', () => {
|
|
beforeEach(() => {
|
|
cy.visit('/')
|
|
})
|
|
|
|
it('renders heading body and cta button', () => {
|
|
cy.get('[data-cy="unique-voice"]').within(() => {
|
|
cy.contains('h2', 'A Unique Voice for the Generation')
|
|
.should('be.visible')
|
|
cy.contains('wholly unique and much needed perspective')
|
|
.should('be.visible')
|
|
cy.contains('practically engaged positivity').should('be.visible')
|
|
cy.contains('button', /Learn about Rabbi Gerzi.s Approach/)
|
|
.should('be.visible')
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('homepage testimonials carousel', () => {
|
|
beforeEach(() => {
|
|
cy.visit('/')
|
|
})
|
|
|
|
it('renders the heading and the active testimonial', () => {
|
|
cy.get('[data-cy="testimonials"]').within(() => {
|
|
cy.contains('h2', 'What People Are Saying').should('be.visible')
|
|
cy.get('[data-cy="testimonial-active"]').within(() => {
|
|
cy.contains('Nathaniel M').should('be.visible')
|
|
cy.contains('best Jewish day schools').should('be.visible')
|
|
})
|
|
})
|
|
})
|
|
|
|
it('shows faded half-card previews beside the active testimonial', () => {
|
|
cy.viewport(1200, 800)
|
|
cy.get('[data-cy="testimonials"]').within(() => {
|
|
cy.get('[data-cy="testimonial-active"]').as('activeCard')
|
|
cy.get('[data-cy="testimonial-previous-preview"]').as(
|
|
'previousPreview',
|
|
)
|
|
cy.get('[data-cy="testimonial-next-preview"]').as('nextPreview')
|
|
cy.get('[data-cy="testimonials-stage"]').as('testimonialStage')
|
|
})
|
|
|
|
cy.get('@activeCard').should('be.visible')
|
|
cy.get('@previousPreview').should('be.visible')
|
|
cy.get('@nextPreview').should('be.visible')
|
|
|
|
cy.get('@activeCard').then((activeCardElements) => {
|
|
const activeOpacity = Number(
|
|
getComputedStyle(activeCardElements[0]).opacity,
|
|
)
|
|
|
|
cy.get('@previousPreview').then((previousPreviewElements) => {
|
|
const previousPreview = previousPreviewElements[0]
|
|
const previousOpacity = Number(
|
|
getComputedStyle(previousPreview).opacity,
|
|
)
|
|
|
|
cy.wrap(previousOpacity).should('be.lessThan', activeOpacity)
|
|
})
|
|
|
|
cy.get('@nextPreview').then((nextPreviewElements) => {
|
|
const nextPreview = nextPreviewElements[0]
|
|
const nextOpacity = Number(getComputedStyle(nextPreview).opacity)
|
|
|
|
cy.wrap(nextOpacity).should('be.lessThan', activeOpacity)
|
|
})
|
|
})
|
|
|
|
cy.get('@testimonialStage').then((testimonialStageElements) => {
|
|
const stageBounds = testimonialStageElements[0].getBoundingClientRect()
|
|
|
|
cy.get('@previousPreview').then((previousPreviewElements) => {
|
|
const previousBounds =
|
|
previousPreviewElements[0].getBoundingClientRect()
|
|
const previousVisibleWidth = previousBounds.right - stageBounds.left
|
|
|
|
cy.wrap(previousVisibleWidth).should(
|
|
'be.closeTo',
|
|
previousBounds.width / 2,
|
|
1,
|
|
)
|
|
})
|
|
|
|
cy.get('@nextPreview').then((nextPreviewElements) => {
|
|
const nextBounds = nextPreviewElements[0].getBoundingClientRect()
|
|
const nextVisibleWidth = stageBounds.right - nextBounds.left
|
|
|
|
cy.wrap(nextVisibleWidth).should(
|
|
'be.closeTo',
|
|
nextBounds.width / 2,
|
|
1,
|
|
)
|
|
})
|
|
})
|
|
})
|
|
|
|
it('keeps desktop cards equal sized and separated', () => {
|
|
const expectedCardGap = 24
|
|
const expectedControlsGap = 12
|
|
|
|
cy.viewport(1200, 800)
|
|
cy.get('[data-cy="testimonials"]').within(() => {
|
|
cy.get('[data-cy="testimonial-active"]').as('activeCard')
|
|
cy.get('[data-cy="testimonial-previous-preview"]').as(
|
|
'previousPreview',
|
|
)
|
|
cy.get('[data-cy="testimonial-next-preview"]').as('nextPreview')
|
|
cy.get('[data-cy="testimonial-prev"]')
|
|
.parent()
|
|
.as('testimonialControls')
|
|
})
|
|
|
|
cy.get('@activeCard').then((activeCardElements) => {
|
|
const activeBounds = activeCardElements[0].getBoundingClientRect()
|
|
|
|
cy.get('@previousPreview').then((previousPreviewElements) => {
|
|
const previousBounds =
|
|
previousPreviewElements[0].getBoundingClientRect()
|
|
const previousGap = activeBounds.left - previousBounds.right
|
|
|
|
cy.wrap(previousBounds.height).should(
|
|
'be.closeTo',
|
|
activeBounds.height,
|
|
1,
|
|
)
|
|
cy.wrap(previousGap).should('be.closeTo', expectedCardGap, 1)
|
|
})
|
|
|
|
cy.get('@nextPreview').then((nextPreviewElements) => {
|
|
const nextBounds = nextPreviewElements[0].getBoundingClientRect()
|
|
const nextGap = nextBounds.left - activeBounds.right
|
|
|
|
cy.wrap(nextBounds.height).should(
|
|
'be.closeTo',
|
|
activeBounds.height,
|
|
1,
|
|
)
|
|
cy.wrap(nextGap).should('be.closeTo', expectedCardGap, 1)
|
|
})
|
|
|
|
cy.get('@testimonialControls').then((testimonialControlsElements) => {
|
|
const controlsBounds =
|
|
testimonialControlsElements[0].getBoundingClientRect()
|
|
const controlsGap = controlsBounds.top - activeBounds.bottom
|
|
|
|
cy.wrap(controlsGap).should(
|
|
'be.closeTo',
|
|
expectedControlsGap,
|
|
1,
|
|
)
|
|
})
|
|
})
|
|
})
|
|
|
|
it('rounds the outer corners of clipped preview cards', () => {
|
|
cy.viewport(1200, 800)
|
|
cy.get('[data-cy="testimonials"]').within(() => {
|
|
cy.get('[data-cy="testimonials-stage"]').as('testimonialStage')
|
|
cy.get('[data-cy="testimonial-active"]').as('activeCard')
|
|
})
|
|
|
|
cy.get('@activeCard').then((activeCardElements) => {
|
|
const activeCardStyle = getComputedStyle(activeCardElements[0])
|
|
|
|
cy.get('@testimonialStage').then((testimonialStageElements) => {
|
|
const testimonialStageStyle = getComputedStyle(
|
|
testimonialStageElements[0],
|
|
)
|
|
|
|
expect(testimonialStageStyle.borderTopLeftRadius).to.equal(
|
|
activeCardStyle.borderTopLeftRadius,
|
|
)
|
|
expect(testimonialStageStyle.borderTopRightRadius).to.equal(
|
|
activeCardStyle.borderTopRightRadius,
|
|
)
|
|
expect(testimonialStageStyle.borderBottomLeftRadius).to.equal(
|
|
activeCardStyle.borderBottomLeftRadius,
|
|
)
|
|
expect(testimonialStageStyle.borderBottomRightRadius).to.equal(
|
|
activeCardStyle.borderBottomRightRadius,
|
|
)
|
|
})
|
|
})
|
|
})
|
|
|
|
it('brings entering side previews in from the clicked direction', () => {
|
|
const transitionSampleDelay = 100
|
|
const transitionSettleDelay = 1100
|
|
|
|
cy.viewport(1200, 800)
|
|
cy.get('[data-cy="testimonials"]').within(() => {
|
|
cy.get('[data-cy="testimonial-prev"]').click()
|
|
cy.get('[data-cy="testimonial-previous-preview"]').as(
|
|
'enteringPreviousPreview',
|
|
)
|
|
})
|
|
|
|
cy.wait(transitionSampleDelay)
|
|
cy.get('@enteringPreviousPreview').then((previousPreviewElements) => {
|
|
const earlyPreviousLeft =
|
|
previousPreviewElements[0].getBoundingClientRect().left
|
|
|
|
cy.wait(transitionSettleDelay)
|
|
cy.get('@enteringPreviousPreview').then((finalPreviewElements) => {
|
|
const finalPreviousLeft =
|
|
finalPreviewElements[0].getBoundingClientRect().left
|
|
|
|
expect(earlyPreviousLeft).to.be.lessThan(finalPreviousLeft)
|
|
})
|
|
})
|
|
|
|
cy.visit('/')
|
|
cy.viewport(1200, 800)
|
|
cy.get('[data-cy="testimonials"]').within(() => {
|
|
cy.get('[data-cy="testimonial-next"]').click()
|
|
cy.get('[data-cy="testimonial-next-preview"]').as(
|
|
'enteringNextPreview',
|
|
)
|
|
})
|
|
|
|
cy.wait(transitionSampleDelay)
|
|
cy.get('@enteringNextPreview').then((nextPreviewElements) => {
|
|
const earlyNextLeft =
|
|
nextPreviewElements[0].getBoundingClientRect().left
|
|
|
|
cy.wait(transitionSettleDelay)
|
|
cy.get('@enteringNextPreview').then((finalPreviewElements) => {
|
|
const finalNextLeft =
|
|
finalPreviewElements[0].getBoundingClientRect().left
|
|
|
|
expect(earlyNextLeft).to.be.greaterThan(finalNextLeft)
|
|
})
|
|
})
|
|
})
|
|
|
|
it('hides side previews on narrow screens', () => {
|
|
cy.viewport(390, 800)
|
|
cy.get('[data-cy="testimonials"]').within(() => {
|
|
cy.get('[data-cy="testimonial-active"]').should('be.visible')
|
|
cy.get('[data-cy="testimonial-previous-preview"]')
|
|
.should('not.be.visible')
|
|
cy.get('[data-cy="testimonial-next-preview"]').should('not.be.visible')
|
|
})
|
|
})
|
|
|
|
it('advances to the next testimonial when next is clicked', () => {
|
|
cy.get('[data-cy="testimonials"]').within(() => {
|
|
cy.get('[data-cy="testimonial-active"]')
|
|
.should('contain.text', 'Nathaniel M')
|
|
cy.get('[data-cy="testimonial-next"]').click()
|
|
cy.get('[data-cy="testimonial-active"]')
|
|
.should('not.contain.text', 'Nathaniel M')
|
|
})
|
|
})
|
|
|
|
it('goes back to the previous testimonial when prev is clicked', () => {
|
|
cy.get('[data-cy="testimonials"]').within(() => {
|
|
cy.get('[data-cy="testimonial-next"]').click()
|
|
cy.get('[data-cy="testimonial-prev"]').click()
|
|
cy.get('[data-cy="testimonial-active"]')
|
|
.should('contain.text', 'Nathaniel M')
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('homepage sponsor strip', () => {
|
|
beforeEach(() => {
|
|
cy.visit('/')
|
|
})
|
|
|
|
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')
|
|
const expectedAlts = [
|
|
'SHARE',
|
|
'U of Israel',
|
|
'Mayberg Foundation',
|
|
'JLE UK',
|
|
'Yeshivat Reishit',
|
|
'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)
|
|
})
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('homepage projects grid', () => {
|
|
beforeEach(() => {
|
|
cy.visit('/')
|
|
})
|
|
|
|
it('renders the heading and four project cards', () => {
|
|
cy.get('[data-cy="projects"]').within(() => {
|
|
cy.contains('h2', 'Projects').should('be.visible')
|
|
cy.get('[data-cy="project-card"]').should('have.length', 4)
|
|
cy.contains('h3', 'Chaburot').should('be.visible')
|
|
cy.contains('group learning sessions').should('be.visible')
|
|
cy.contains('h3', 'Pilzno Work Inspired').should('be.visible')
|
|
cy.contains('healthy relationship to work').should('be.visible')
|
|
cy.contains('h3', 'Shul').should('be.visible')
|
|
cy.contains('Pilzno Beis Dovid').should('be.visible')
|
|
cy.contains('h3', 'New Building').should('be.visible')
|
|
cy.contains('Beit Shemesh municipality').should('be.visible')
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('homepage start your journey ctas', () => {
|
|
beforeEach(() => {
|
|
cy.visit('/')
|
|
})
|
|
|
|
it('renders both journey CTAs with their headings and bodies', () => {
|
|
cy.get('[data-cy="journey"]').within(() => {
|
|
cy.contains('h2', 'Start Your Journey').should('be.visible')
|
|
cy.get('[data-cy="journey-media"]').within(() => {
|
|
cy.contains('Access').should('be.visible')
|
|
cy.contains('Torah Media').should('be.visible')
|
|
cy.contains('wealth of video, audio and written content')
|
|
.should('be.visible')
|
|
})
|
|
cy.get('[data-cy="journey-baderech"]').within(() => {
|
|
cy.contains('Explore').should('be.visible')
|
|
cy.contains('Baderech HaAvodah').should('be.visible')
|
|
cy.contains('transformative principles').should('be.visible')
|
|
})
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('homepage get involved and footer', () => {
|
|
beforeEach(() => {
|
|
cy.visit('/')
|
|
})
|
|
|
|
it('renders the newsletter signup form', () => {
|
|
cy.get('[data-cy="get-involved"]').within(() => {
|
|
cy.contains('h2', 'Get Involved').should('be.visible')
|
|
cy.contains(
|
|
'Subscribe for updates as we release new content',
|
|
).should('be.visible')
|
|
cy.get('input[name="fullName"]').should('be.visible')
|
|
cy.get('input[name="email"]').should('be.visible')
|
|
cy.contains('button', 'Submit').should('be.visible')
|
|
})
|
|
})
|
|
|
|
it('renders the footer with links and copyright', () => {
|
|
cy.get('[data-cy="footer"]').within(() => {
|
|
cy.contains('Torah Media').should('be.visible')
|
|
cy.contains('About').should('be.visible')
|
|
cy.contains('Donate').should('be.visible')
|
|
cy.contains('Contact').should('be.visible')
|
|
cy.contains(/Rabbi Gerzi 2025/).should('be.visible')
|
|
})
|
|
})
|
|
})
|