From ed72ec9b6eb2a6891cd20d265888806b7c763ae6 Mon Sep 17 00:00:00 2001
From: Kashish Gupta <kashishgupta2508@gmail.com>
Date: Thu, 9 Jul 2026 11:59:58 +0530
Subject: [PATCH] test(scout): add footer navigation coverage

Add 3 Playwright tests for the new footer navigation links (About,
Contact, FAQ) introduced in 0682e80. Each test clicks a footer-scoped
link and asserts it routes to the destination page. Append plan entry
#15 to the test plan.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 tests/footer.spec.ts     | 22 ++++++++++++++++++++++
 tests/specs/test-plan.md |  9 +++++++++
 2 files changed, 31 insertions(+)

diff --git a/tests/footer.spec.ts b/tests/footer.spec.ts
index 241534e..2440a3f 100644
--- a/tests/footer.spec.ts
+++ b/tests/footer.spec.ts
@@ -42,4 +42,26 @@ test.describe('Site footer', () => {
     await expect(footers).toContainText('©');
     await expect(footers).toContainText(String(currentYear));
   });
+
+  // The footer <nav aria-label="Footer"> exposes links whose accessible names
+  // (About/Contact/FAQ) collide with the navbar's, so scope to the footer landmark.
+  const footerLinks = [
+    { name: 'About', path: '/about', heading: 'About Us' },
+    { name: 'Contact', path: '/contact', heading: 'Contact Us' },
+    { name: 'FAQ', path: '/faq', heading: 'Frequently Asked Questions' },
+  ];
+
+  for (const { name, path, heading } of footerLinks) {
+    test(`footer ${name} link navigates to ${path}`, async ({ page }) => {
+      await page.goto('/');
+
+      const footerNav = page
+        .getByRole('contentinfo')
+        .getByRole('navigation', { name: 'Footer' });
+      await footerNav.getByRole('link', { name }).click();
+
+      await expect(page).toHaveURL(new RegExp(`${path}$`));
+      await expect(page.getByRole('heading', { name: heading, level: 1 })).toBeVisible();
+    });
+  }
 });
diff --git a/tests/specs/test-plan.md b/tests/specs/test-plan.md
index cdb24a4..d48add1 100644
--- a/tests/specs/test-plan.md
+++ b/tests/specs/test-plan.md
@@ -115,6 +115,15 @@ Sample Web App — a React application with React Router that provides routes su
         Expectation: The same footer is still visible with the same current-year copyright text (confirms it renders globally, even on unmatched routes)
       3. Step: Navigate to / and query the `contentinfo` landmark role
         Expectation: Exactly one `contentinfo` landmark exists, and it contains both the `©` symbol and the current year (accessibility landmark uniqueness check)
+15. **Footer navigation links route to About, Contact, and FAQ** — `tests/footer.spec.ts`
+    - Preconditions: None — the footer `<nav aria-label="Footer">` is a global component rendered on every route; nothing to create or clean up. Footer links are scoped to the `contentinfo` landmark because the navbar exposes links with the same accessible names (About/Contact/FAQ).
+    - Step/Expectation Pairs:
+      1. Step: Navigate to / and, within the footer nav (`getByRole('contentinfo').getByRole('navigation', { name: 'Footer' })`), click the "About" link
+        Expectation: URL changes to /about and the "About Us" heading (level 1) is visible
+      2. Step: Navigate to / and click the footer "Contact" link (same footer-scoped locator)
+        Expectation: URL changes to /contact and the "Contact Us" heading (level 1) is visible
+      3. Step: Navigate to / and click the footer "FAQ" link (same footer-scoped locator)
+        Expectation: URL changes to /faq and the "Frequently Asked Questions" heading (level 1) is visible
 
 
 ### Feedback