diff --git a/frontend/rabbi_gerzi/cypress/e2e/contact.cy.ts b/frontend/rabbi_gerzi/cypress/e2e/contact.cy.ts new file mode 100644 index 0000000..ad066b2 --- /dev/null +++ b/frontend/rabbi_gerzi/cypress/e2e/contact.cy.ts @@ -0,0 +1,119 @@ +describe('contact page', () => { + beforeEach(() => { + cy.visit('/contact') + }) + + it('renders the header and contact intro', () => { + 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.get('[data-cy="contact-hero"]').within(() => { + cy.contains('h1', 'Contact').should('be.visible') + cy.contains('Rabbi Gerzi receives numerous messages each week') + .should('be.visible') + cy.contains('get back to you').should('be.visible') + }) + }) + + it('renders the copied message form fields', () => { + cy.get('[data-cy="contact-form"]').within(() => { + cy.contains('h2', 'Send Rabbi Gerzi a Message').should('be.visible') + cy.get('input[name="firstName"]').should('be.visible') + cy.get('input[name="lastName"]').should('be.visible') + cy.get('input[name="city"]').should('be.visible') + cy.get('input[name="country"]').should('be.visible') + cy.get('input[name="email"]') + .should('be.visible') + .and('have.attr', 'type', 'email') + cy.get('textarea[name="message"]').should('be.visible') + cy.contains('button', 'Submit').should('be.visible') + }) + }) + + it('clears the static contact form when submitted', () => { + cy.get('[data-cy="contact-form"]').within(() => { + cy.get('input[name="firstName"]').type('Yehuda') + cy.get('input[name="lastName"]').type('Cohen') + cy.get('input[name="city"]').type('Ramat Beit Shemesh') + cy.get('input[name="country"]').type('Israel') + cy.get('input[name="email"]').type('yehuda@example.com') + cy.get('textarea[name="message"]').type('Please send details.') + cy.contains('button', 'Submit').click() + + cy.get('input[name="firstName"]').should('have.value', '') + cy.get('input[name="lastName"]').should('have.value', '') + cy.get('input[name="city"]').should('have.value', '') + cy.get('input[name="country"]').should('have.value', '') + cy.get('input[name="email"]').should('have.value', '') + cy.get('textarea[name="message"]').should('have.value', '') + }) + }) + + it('renders social media links', () => { + cy.get('[data-cy="contact-social"]').within(() => { + cy.contains('h2', 'Follow Rabbi Gerzi on Social Media') + .should('be.visible') + cy.contains('a', 'YouTube') + .should('be.visible') + .and('have.attr', 'href', 'https://www.youtube.com/@rabbigerzi') + .and('have.attr', 'target', '_blank') + cy.contains('a', 'Spotify') + .should('be.visible') + .and( + 'have.attr', + 'href', + 'https://open.spotify.com/show/49H1X9A7KZWAnnIbcoQXQR?si=6253691f23be44ad', + ) + .and('have.attr', 'target', '_blank') + }) + }) + + it('keeps the page readable on mobile', () => { + cy.viewport(390, 900) + + cy.get('[data-cy="contact-hero"]').should('be.visible') + cy.get('[data-cy="contact-form"]').should('be.visible') + cy.get('[data-cy="contact-social"]').should('be.visible') + }) + + it('centers the subscribe card vertically in its section', () => { + cy.get('[data-cy="get-involved"]').then((sectionElements) => { + const sectionElement = sectionElements[0] + const cardElement = sectionElement.querySelector('.get-involved__card') + + if (cardElement === null) { + throw new Error('Get involved card is missing') + } + + const sectionBounds = sectionElement.getBoundingClientRect() + const cardBounds = cardElement.getBoundingClientRect() + const topBuffer = cardBounds.top - sectionBounds.top + const bottomBuffer = sectionBounds.bottom - cardBounds.bottom + + expect(topBuffer).to.be.closeTo(bottomBuffer, 1) + }) + }) + + it('renders the get involved form and footer', () => { + 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="newsletterEmail"]').should('be.visible') + cy.contains('button', 'Submit').should('be.visible') + }) + + 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') + }) + }) +}) diff --git a/frontend/rabbi_gerzi/src/router/index.ts b/frontend/rabbi_gerzi/src/router/index.ts index 683e051..2ea2c76 100644 --- a/frontend/rabbi_gerzi/src/router/index.ts +++ b/frontend/rabbi_gerzi/src/router/index.ts @@ -1,6 +1,7 @@ import { createRouter, createWebHistory } from 'vue-router' import HomePage from '@/views/HomePage.vue' import AboutPage from '@/views/AboutPage.vue' +import ContactPage from '@/views/ContactPage.vue' import LoginPage from '@/views/LoginPage.vue' import MediaPage from '@/views/MediaPage.vue' import ElementPage from '@/views/ElementPage.vue' @@ -25,6 +26,11 @@ const router = createRouter({ name: 'about', component: AboutPage, }, + { + path: '/contact', + name: 'contact', + component: ContactPage, + }, { path: '/media', name: 'media', diff --git a/frontend/rabbi_gerzi/src/views/ContactPage.vue b/frontend/rabbi_gerzi/src/views/ContactPage.vue new file mode 100644 index 0000000..b1e2e1c --- /dev/null +++ b/frontend/rabbi_gerzi/src/views/ContactPage.vue @@ -0,0 +1,551 @@ + + + + +