diff --git a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts index 16ab7c6..a9ab336 100644 --- a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts +++ b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts @@ -227,6 +227,64 @@ describe('homepage testimonials carousel', () => { }) }) + 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('hides side previews on narrow screens', () => { cy.viewport(390, 800) cy.get('[data-cy="testimonials"]').within(() => {