test(auth): E2E-AUTH-005 — Invite Request CTA

[Sakshamk17]

Summary

Fixes issue #397 .
This PR introduces Playwright end-to-end test coverage for the invite request CTA at /auths/request-access, covering both the happy path (successful submission) and the duplicate handling path. It also resolves a blocking semantic issue in PageContent.tsx where the form lacked a proper <form> element, and adds the data-testid selectors required for stable test targeting.

---

Changes Implemented

Fixes & Enhancements

• Refactored the invite request submission in PageContent.tsx from an unstable div + onClick setup to a semantic <form onSubmit>, enabling native Enter key submission and proper form accessibility
• Added data-testid attributes across PageContent.tsx and PersonalForm.tsx per the selectors specified in the issue:
  • invite-request-form
  • invite-email-input
  • invite-submit-button
  • invite-duplicate-message
  • invite-success-message

Test Implementation

• Added two new test scenarios to e2e/auth.spec.ts under the Invite Request CTA (E2E-AUTH-005) describe block:
  • Success path — mocks checkDuplicateEmail (empty) and requestUserAccess (success), verifies the "Thank you for joining us" confirmation renders
  • Duplicate path — mocks checkDuplicateEmail (existing record), verifies "This email already exists" message appears and the success state does not render
• Introduced mockGraphQLOperation() helper to intercept Apollo GraphQL requests by operation name, avoiding any dependency on a live backend
• Both scenarios verified across Desktop Chrome and Mobile Chrome (Pixel 7) Playwright projects

Bug Fix — Jest/ts-jest version mismatch

• The upstream merge introduced jest@30 while ts-jest is still on v29 — these are incompatible and caused Jest's globals (describe, jest, it) to stop being injected, breaking the entire unit test suite
• Downgraded jest and jest-environment-jsdom from 30.x → 29.7.0 to restore compatibility with ts-jest@29.4.11

---

Verification

Check	Result
Playwright — Desktop Chrome	✅ 3/3 passing
Playwright — Mobile Chrome	✅ 3/3 passing
Jest unit suite	✅ 154/155 suites passing
TypeScript	✅ No errors

The one failing Jest suite (SettingsContent › handles very long input values) is a pre-existing timing flake that reproduces consistently independent of this branch. The ProfileHeaderCover › linear-gradient failure was introduced by the upstream merge and is also unrelated to this change.

---

Notes for Reviewers

• Both GraphQL operations (checkDuplicateEmail query and requestUserAccess mutation) are mocked at the network layer via page.route() since no real backend is required for this test to be meaningful. Operation names match the camelCase definitions in src/graphql/queries.ts and src/graphql/mutations.ts exactly.

• page.keyboard.type() is used instead of Playwright's fill() for the email input. This is intentional — react-hook-form with zodResolver requires real keyboard events to trigger validation and enable the submit button. fill() bypasses React's synthetic event system and leaves the button permanently disabled.

• The SettingsContent timeout flake and ProfileHeaderCover assertion failure are both pre-existing upstream issues introduced before this branch and are not caused by these changes.

[vercel]

@Sakshamk17 is attempting to deploy a commit to the Louis Girifalco's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Copilot]

Pull request overview

Adds Playwright E2E coverage for the invite request CTA flow at /auths/request-access, and updates the request-access UI to be more semantic/testable via stable data-testid selectors. It also adjusts Jest versions to restore unit test compatibility after an upstream Jest major bump.

Changes:

• Refactors the request-access CTA from a div-driven submit to a semantic <form onSubmit> and adds data-testid selectors for E2E targeting.
• Introduces Playwright E2E scenarios for invite request success + duplicate handling, with GraphQL operation mocking by operation name.
• Downgrades Jest to 29.x (and updates ts-jest) to address a Jest/ts-jest compatibility break.

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
quotevote-frontend/src/components/RequestAccess/PersonalForm/PersonalForm.tsx	Adds invite-success-message selector to support success-state assertions.
quotevote-frontend/src/app/auths/request-access/PageContent.tsx	Converts CTA into a form and adds test ids for form/input/button and error message.
quotevote-frontend/e2e/auth.spec.ts	Adds E2E-AUTH-005 invite request tests and a GraphQL operation mocking helper.
quotevote-frontend/package.json	Downgrades Jest and bumps ts-jest to restore unit test compatibility.
quotevote-frontend/pnpm-lock.yaml	Updates lockfile to reflect Jest/ts-jest dependency changes.

Files not reviewed (1)

• quotevote-frontend/pnpm-lock.yaml: Generated file

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Sakshamk17]

Note on CI Failure — ProfileHeaderCover

The ProfileHeaderCover › defaults another user's cover to the brand green zigzag failure is pre-existing on main and was not introduced by this PR.

Verified by checking out main locally and running the test in isolation — same failure reproduces identically:

FAIL src/__tests__/components/Profile/ProfileHeaderCover.test.tsx
  ● ProfileHeader — cover banner background › defaults another user's cover to the brand green zigzag

    expect(received).toContain(expected) // indexOf

    Expected substring: "linear-gradient"
    Received string:    "background-color: rgb(82, 178, 116); background-size: 28px 28px; background-repeat: repeat;"

       98 |     // #52b274 → rgb(82, 178, 116) in jsdom
       99 |     expect(cover).toHaveStyle({ backgroundColor: 'rgb(82, 178, 116)' });
    > 100 |     expect(cover.getAttribute('style')).toContain('linear-gradient');
           |                                         ^

The test asserts linear-gradient in the element's style attribute, but the component renders the zigzag pattern using background-size and background-repeat without a gradient — the test expectation does not match the current component implementation.

All files changed in this PR have been verified clean. This failure is unrelated to the invite request CTA changes.

[motirebuma]

Nice work @Sakshamk17. Clean and well-scoped -- the E2E spec covers both the happy path and the duplicate handling path, the mockGraphQLOperation helper is reusable, and the <form onSubmit> refactor in PageContent.tsx is a good accessibility improvement. The note about page.keyboard.type() vs fill() for react-hook-form compatibility is a helpful detail for future contributors.

The Jest 30 → 29 downgrade to fix the ts-jest incompatibility is the right call given the broken state on main. Good catch documenting that in the PR description.

One minor thing: the <button onClick={onSubmit}> in PageContent.tsx still has the old onClick handler alongside the new <form onSubmit>. Since the form's onSubmit already calls onSubmit(), the button's onClick is redundant and will fire the submission twice if someone clicks (once from onClick, once from the form submit event). You should remove the onClick from the button and just keep type="submit".

One a last thing make sure the frontend pnpm lint, type-check and test are passing.

Verdict: Will be merge after removing the redundant onClick={onSubmit} from the submit button and the pnpm lint, type-check and test are passed.

Thank you!!

@flyblackbox @Sakshamk17

[Sakshamk17]

Reviewer Feedback Addressed

• Removed redundant onClick={onSubmit} from the submit button — the <form onSubmit> handler covers this
• Also removed the now-redundant onKeyDown Enter handler from the email input for the same reason
• npx tsc --noEmit — ✅ clean
• npx jest — ✅ 154/156 passing (2 pre-existing upstream failures documented above)
• npx next lint — ESLint is not configured in this project, no lint script available

[motirebuma]

Hey @Sakshamk17 the correct command for lint check is npm run lint not npx next lint

use these commands locally in frontend directory:
Typecheck: npm run type-check
Test: npm run test
LintL npm run lint

Thank you!!

@flyblackbox @Sakshamk17