add e2e tests for footer component

Author: devKiratu

e2e/footer.spec.ts

@@ -0,0 +1,26 @@
+import { test, expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  page.goto('http://localhost:3000/#footer');
+});
+
+test.describe('Test Footer Navigation Links', () => {
+  test('About us link should navigate to about us section', async ({
+    page,
+  }) => {
+    await page.getByRole('link', { name: 'About us' }).click();
+    await expect(page).toHaveURL('/#about-us');
+  });
+
+  test('Events link should navigate to Events section', async ({ page }) => {
+    await page.getByRole('link', { name: 'Events' }).click();
+    await expect(page).toHaveURL('/#events');
+  });
+
+  test('Contact link should navigate to Contact Us section', async ({
+    page,
+  }) => {
+    await page.getByRole('link', { name: 'Contact' }).click();
+    await expect(page).toHaveURL('/#contact-us');
+  });
+});

src/components/Footer/Footer.tsx

@@ -20,7 +20,10 @@ export default function Footer() {
   }, []);
 
   return (
-    <footer className="bg-[#CEEDF4] w-full md:pt-12 md:pb-[25px] py-4">
+    <footer
+      id="footer"
+      className="bg-[#CEEDF4] w-full md:pt-12 md:pb-[25px] py-4"
+    >
       <div className="lg:w-1/4 md:w-[35%] sm:w-[40%] w-[65%] mx-auto flex flex-col justify-center items-center">
         {screenWidth && (
           <div>