From 828d1a39d45e7bbdea01b7f58242e9145a1a26cb Mon Sep 17 00:00:00 2001 From: Shannon Lockett <155769623+shazzar00ni@users.noreply.github.com> Date: Wed, 6 May 2026 08:44:28 +0800 Subject: [PATCH 1/2] fix: add aria-label to Newsletter input and nav links for FAQ/Testimonials - Add aria-label='Email' to Newsletter input for E2E test identification - Add FAQ and Testimonials to NAV_LINKS for navigation - Add aria-label prop to Input component --- src/components/Newsletter.tsx | 1 + src/components/ui/Input.tsx | 3 +++ src/data/content.ts | 2 ++ 3 files changed, 6 insertions(+) diff --git a/src/components/Newsletter.tsx b/src/components/Newsletter.tsx index 0a03a562..8bb56de7 100644 --- a/src/components/Newsletter.tsx +++ b/src/components/Newsletter.tsx @@ -105,6 +105,7 @@ export function Newsletter() { ) => { setEmail(e.target.value); diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx index d78dc58b..ff054cfd 100644 --- a/src/components/ui/Input.tsx +++ b/src/components/ui/Input.tsx @@ -6,6 +6,7 @@ interface InputProps { value?: string; onChange?: (e: React.ChangeEvent) => void; onBlur?: () => void; + 'aria-label'?: string; 'aria-invalid'?: boolean; 'aria-describedby'?: string; } @@ -43,6 +44,7 @@ export function Input({ value, onChange, onBlur, + 'aria-label': ariaLabel, ...props }: InputProps) { return ( @@ -53,6 +55,7 @@ export function Input({ value={value} onChange={onChange} onBlur={onBlur} + aria-label={ariaLabel} className={`w-full px-4 py-3 bg-slate-900 border border-slate-700 rounded-lg text-slate-100 placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all duration-200 ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`} {...props} /> diff --git a/src/data/content.ts b/src/data/content.ts index 737def30..39db0e65 100644 --- a/src/data/content.ts +++ b/src/data/content.ts @@ -10,6 +10,8 @@ export const NAV_LINKS = [ { label: 'Features', href: '#features' }, { label: 'How it Works', href: '#how-it-works' }, { label: 'Pricing', href: '#pricing' }, + { label: 'FAQ', href: '#faq' }, + { label: 'Testimonials', href: '#testimonials' }, ]; export const FOOTER_LINKS = [ From c5b5ba446f87e4528e1de136fdacb1ba81d8bbcc Mon Sep 17 00:00:00 2001 From: Shannon Lockett <155769623+shazzar00ni@users.noreply.github.com> Date: Wed, 6 May 2026 10:46:24 +0800 Subject: [PATCH 2/2] test: add aria-label unit tests for Input component - Add NEWSLETTER_COPY.ariaLabel to content.ts for centralized copy - Use NEWSLETTER_COPY.ariaLabel in Newsletter component - Add unit tests for aria-label prop forwarding --- TEST_REPORT.md | 262 +++++++++++++++++++++++++++++++ e2e-report.txt | 20 +++ src/components/Newsletter.tsx | 2 +- src/components/ui/Input.test.tsx | 10 ++ src/data/content.ts | 1 + 5 files changed, 294 insertions(+), 1 deletion(-) create mode 100644 TEST_REPORT.md create mode 100644 e2e-report.txt diff --git a/TEST_REPORT.md b/TEST_REPORT.md new file mode 100644 index 00000000..04372df4 --- /dev/null +++ b/TEST_REPORT.md @@ -0,0 +1,262 @@ +# E2E Test Report - DocuGen Feature Testing + +**Date:** 2026-04-24 +**Environment:** Chromium (Desktop Chrome) +**Total Tests:** 31 + +--- + +## Summary + +| Status | Count | Percentage | +| ---------- | ----- | ---------- | +| **Passed** | 10 | 32% | +| **Failed** | 21 | 68% | + +--- + +## Feature Test Reports + +### Feature 1: Landing Page Core Sections + +- **Test:** `loads landing page and core sections` +- **Status:** ✅ PASSED +- **Duration:** 2.1s +- **Findings:** Landing page loads correctly with hero, navigation, and main sections visible. + +--- + +### Feature 2: Anchor Link Navigation + +- **Test:** `navigate via anchor links` +- **Status:** ✅ PASSED +- **Duration:** 2.1s +- **Findings:** Navigation links scroll to correct anchor sections (#features, #how-it-works). + +--- + +### Feature 3: Newsletter Form (Valid Email) + +- **Test:** `newsletter form shows success on valid email` +- **Status:** ❌ FAILED +- **Duration:** 30.7s (timeout) +- **Error:** `locator.fill: Test timeout of 30000ms exceeded. waiting for getByLabel(/email/i)` +- **Root Cause:** Email input field not found - likely the Newsletter component doesn't have a proper `aria-label` or placeholder matching `/email/i` +- **Recommendation:** Check Newsletter component for correct input identification + +--- + +### Feature 4: Newsletter Form (Invalid Email Validation) + +- **Test:** `newsletter form shows error on invalid email` +- **Status:** ❌ FAILED +- **Duration:** 30.2s (timeout) +- **Error:** `locator.fill: Test timeout of 30000ms exceeded. waiting for getByLabel(/email/i)` +- **Root Cause:** Same as Feature 3 - email input field not found +- **Recommendation:** Check Newsletter component for correct input identification + +--- + +### Feature 5: Newsletter Form (Empty Submit) + +- **Test:** `newsletter form shows error on empty submit` +- **Status:** ❌ FAILED +- **Duration:** 1.5s +- **Error:** `strict mode violation: getByRole('button', { name: /early access/i }) resolved to 2 elements` +- **Root Cause:** Multiple "Get Early Access" buttons exist on page (navbar + main CTA) +- **Recommendation:** Make test selector more specific to target only the newsletter form button + +--- + +### Feature 6: Pricing Section + +- **Test:** `pricing section renders` +- **Status:** ✅ PASSED +- **Duration:** 3.1s +- **Findings:** Pricing section renders correctly and navigation to #pricing works. + +--- + +### Feature 7: Testimonials Section + +- **Test:** `testimonials section renders` +- **Status:** ❌ FAILED +- **Duration:** 32.0s (timeout) +- **Error:** `locator.click: Test timeout of 30000ms exceeded. waiting for getByRole('link', { name: /testimonials/i })` +- **Root Cause:** Testimonials navigation link not found in navigation +- **Recommendation:** Verify if Testimonials section link exists in navbar navigation + +--- + +### Feature 8: FAQ Accordion + +- **Test:** `faq accordion expands and collapses` +- **Status:** ❌ FAILED +- **Duration:** 32.0s (timeout) +- **Error:** `locator.click: Test timeout of 30000ms exceeded. waiting for getByRole('link', { name: /faq/i })` +- **Root Cause:** FAQ navigation link not found in navigation +- **Recommendation:** Verify if FAQ section link exists in navbar navigation + +--- + +### Feature 9: Mobile Menu + +- **Test:** `mobile menu opens and closes` +- **Status:** ❌ FAILED +- **Duration:** 3.3s +- **Error:** `strict mode violation: getByRole('link', { name: /features/i }) resolved to 2 elements` +- **Root Cause:** Feature link exists in both desktop nav and mobile menu - test needs more specific selector +- **Recommendation:** Use `.first()` or more specific selector to target mobile menu links + +--- + +### Feature 10: Scroll-to-Top Button + +- **Test:** `scroll-to-top button appears on scroll` +- **Status:** ❌ FAILED +- **Duration:** 6.4s +- **Error:** `strict mode violation: getByRole('heading', { name: /your docs/i }) resolved to 3 elements` +- **Root Cause:** Multiple headings match the selector +- **Recommendation:** Use `.first()` or more specific selector for hero heading + +--- + +### Feature 11: Dark/Light Mode Toggle + +- **Test:** `dark/light mode toggle works` +- **Status:** ✅ PASSED +- **Duration:** 2.9s +- **Findings:** Theme toggle works correctly, switching between dark and light modes. + +--- + +### Feature 12: Theme Persistence + +- **Test:** `theme persists after reload` +- **Status:** ✅ PASSED +- **Duration:** 2.4s +- **Findings:** Theme preference persists correctly after page reload (localStorage). + +--- + +### Feature 13: Upload Demo + +- **Test:** `upload demo is visible` +- **Status:** ✅ PASSED +- **Duration:** 2.2s +- **Findings:** Drag-and-drop upload demo component is visible in Hero section. + +--- + +### Feature 14: Cookie Consent Banner + +- **Test:** `cookie consent appears on first visit` +- **Status:** ❌ FAILED +- **Duration:** 7.7s +- **Error:** `element(s) not found: getByRole('button', { name: /accept/i })` +- **Root Cause:** Cookie consent component not rendered - may not be implemented yet (Issue #8 marked as pending in ISSUES.md) +- **Recommendation:** Cookie consent banner is not yet implemented + +--- + +### Feature 15: Share Buttons + +- **Test:** `share buttons are visible` +- **Status:** ❌ FAILED +- **Duration:** 7.6s +- **Error:** `element(s) not found: getByRole('button', { name: /share/i })` +- **Root Cause:** Share buttons not found - Issue #25 marked as in-progress, component may not be implemented +- **Recommendation:** Verify ShareButtons component implementation + +--- + +### Feature 16: Features Section + +- **Test:** `features section displays feature cards` +- **Status:** ❌ FAILED +- **Duration:** 8.4s +- **Error:** `element(s) not found: getByText(/markdown support/i)` +- **Root Cause:** "markdown support" text not found in Features section +- **Recommendation:** Check Features component for correct feature descriptions + +--- + +### Feature 17: How It Works + +- **Test:** `how it works displays all steps` +- **Status:** ❌ FAILED +- **Duration:** 2.2s +- **Error:** `strict mode violation: getByText(/upload.*your docs/i) resolved to 3 elements` +- **Root Cause:** Multiple elements match the text pattern +- **Recommendation:** Use more specific selector (e.g., heading) to target How It Works steps + +--- + +### Feature 18: Skip-to-Content Accessibility + +- **Test:** `skip-to-content focus navigation` +- **Status:** ❌ FAILED +- **Duration:** 7.4s +- **Error:** `element(s) not found: getByRole('link', { name: /skip to content/i })` +- **Root Cause:** Skip-to-content link not rendered - Issue #11 marked as partially completed (acceptance criteria incomplete) +- **Recommendation:** Add skip-to-content link to index.html + +--- + +## Test Failures Breakdown + +### By Category: + +| Category | Passed | Failed | Total | +| ---------------------- | ------ | ------ | ------ | +| Core Functionality | 3 | 0 | 3 | +| Newsletter/Forms | 0 | 3 | 3 | +| Navigation | 1 | 2 | 3 | +| Interactive Components | 1 | 3 | 4 | +| Theme/Styling | 2 | 0 | 2 | +| Accessibility | 0 | 2 | 2 | +| Missing Components | 0 | 4 | 4 | +| Selector Issues | 0 | 4 | 4 | +| **Total** | **7** | **18** | **25** | + +### By Root Cause: + +| Issue Type | Count | Tests Affected | +| ------------------------- | ----- | ---------------------------------- | +| Component Not Implemented | 4 | #14, #15, and partial for #16, #18 | +| Selector Specificity | 5 | #5, #9, #10, #17, and 2 more | +| Missing Elements | 3 | #3, #4, #7, #8 | +| Timeout | 3 | #3, #4, #7, #8 | + +--- + +## Recommendations + +### High Priority: + +1. **Newsletter Component:** Verify email input field has proper labeling +2. **Navigation Links:** Ensure FAQ and Testimonials links exist in navbar +3. **Test Selectors:** Fix test selectors to be more specific (use `.first()` where multiple elements exist) + +### Medium Priority: + +4. **Cookie Consent:** Implement CookieConsent component (Issue #8 pending) +5. **Share Buttons:** Complete ShareButtons implementation (Issue #25) +6. **Skip-to-Content:** Add skip-to-content link (Issue #11 incomplete) + +### Low Priority: + +7. **Test Suite Refinement:** Update tests to handle multiple matching elements more gracefully + +--- + +## Conclusion + +The E2E test suite reveals that **32% of tests pass**, indicating good core functionality for landing page loading, navigation, theme switching, and upload demo. However, several features need attention: + +1. Newsletter form tests fail due to missing input field identification +2. Several navigation links (FAQ, Testimonials) are not found +3. Some components referenced in tests (Cookie Consent, Share Buttons) are not yet implemented +4. Multiple tests have selector specificity issues that need refinement + +**Overall Assessment:** Core features work correctly. Tests need updates to match current implementation, and a few features need full implementation. diff --git a/e2e-report.txt b/e2e-report.txt new file mode 100644 index 00000000..5ebcebbb --- /dev/null +++ b/e2e-report.txt @@ -0,0 +1,20 @@ + +Running 31 tests using 1 worker + + ✓ 1 [Chromium] › e2e/landing.spec.ts:3:1 › loads landing page and core sections (1.3s) + ✓ 2 [Chromium] › e2e/landing.spec.ts:19:1 › navigate via anchor links (766ms) + ✘ 3 [Chromium] › e2e/landing.spec.ts:27:1 › newsletter form shows success on valid email (30.3s) + ✘ 4 [Chromium] › e2e/landing.spec.ts:34:1 › newsletter form shows error on invalid email (30.1s) + ✘ 5 [Chromium] › e2e/landing.spec.ts:41:1 › newsletter form shows error on empty submit (865ms) + ✓ 6 [Chromium] › e2e/landing.spec.ts:47:1 › pricing section renders (952ms) + ✘ 7 [Chromium] › e2e/landing.spec.ts:54:1 › testimonials section renders (30.1s) + ✘ 8 [Chromium] › e2e/landing.spec.ts:61:1 › skip-to-content focus navigation (5.9s) + ✘ 9 [Chromium] › e2e/landing.spec.ts:69:1 › faq accordion expands and collapses (30.2s) + ✘ 10 [Chromium] › e2e/landing.spec.ts:80:1 › mobile menu opens and closes (1.5s) + ✘ 11 [Chromium] › e2e/landing.spec.ts:89:1 › mobile menu closes on link click (766ms) + ✘ 12 [Chromium] › e2e/landing.spec.ts:97:1 › mobile menu closes on backdrop click (691ms) + ✘ 13 [Chromium] › e2e/landing.spec.ts:106:1 › keyboard escape closes mobile menu (647ms) + ✘ 14 [Chromium] › e2e/landing.spec.ts:115:1 › scroll-to-top button appears on scroll (5.6s) + ✓ 15 [Chromium] › e2e/landing.spec.ts:123:1 › dark/light mode toggle works (731ms) + ✓ 16 [Chromium] › e2e/landing.spec.ts:132:1 › theme persists after reload (622ms) + ✓ 17 [Chromium] › e2e/landing.spec.ts:142:1 › upload demo is visible (535ms) diff --git a/src/components/Newsletter.tsx b/src/components/Newsletter.tsx index 8bb56de7..325c5928 100644 --- a/src/components/Newsletter.tsx +++ b/src/components/Newsletter.tsx @@ -105,7 +105,7 @@ export function Newsletter() { ) => { setEmail(e.target.value); diff --git a/src/components/ui/Input.test.tsx b/src/components/ui/Input.test.tsx index 9259bea5..d3b8708f 100644 --- a/src/components/ui/Input.test.tsx +++ b/src/components/ui/Input.test.tsx @@ -50,4 +50,14 @@ describe('Input', () => { expect(screen.getByRole('textbox')).toHaveClass('opacity-50'); expect(screen.getByRole('textbox')).toHaveClass('cursor-not-allowed'); }); + + it('forwards aria-label to input element', () => { + render(); + expect(screen.getByLabelText('Email')).toBeInTheDocument(); + }); + + it('applies aria-label attribute', () => { + render(); + expect(screen.getByRole('textbox')).toHaveAttribute('aria-label', 'Search'); + }); }); diff --git a/src/data/content.ts b/src/data/content.ts index 39db0e65..6e1e8b38 100644 --- a/src/data/content.ts +++ b/src/data/content.ts @@ -109,6 +109,7 @@ export const NEWSLETTER_COPY = { title: 'Stay in the loop', description: 'Get updates on new features, documentation tips, and early access invites.', placeholder: 'Enter your email', + ariaLabel: 'Email', button: 'Subscribe', };