test: E2E - hero - email and phone

krsiakdaniel · Mar 6, 2024 · 27810d5 · 27810d5
1 parent 69a8a45
commit 27810d5
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/__tests__/playwright/hero.spec.ts b/__tests__/playwright/hero.spec.ts
@@ -1,6 +1,6 @@
 import { Browser, BrowserContext, Page, chromium, expect, test } from '@playwright/test'
 
-import { LINK_GITHUB, LINK_LINKEDIN, LINK_RESUME } from '@/utils/constants'
+import { EMAIL_HREF, LINK_GITHUB, LINK_LINKEDIN, LINK_RESUME, PHONE_HREF } from '@/utils/constants'
 
 let browser: Browser
 let context: BrowserContext
@@ -58,3 +58,17 @@ test.describe('Hero - Links', () => {
     expect(resumeLink).toBe(LINK_RESUME)
   })
 })
+
+test.describe('Hero - Email & Phone', () => {
+  test('should have the correct Email link', async () => {
+    await page.goto('http://localhost:3000') // replace with your app's url
+    const emailLink = await page.getAttribute('[data-testid="hero-link-email"]', 'href')
+    expect(emailLink).toBe(EMAIL_HREF)
+  })
+
+  test('should have the correct Phone link', async () => {
+    await page.goto('http://localhost:3000') // replace with your app's url
+    const phoneLink = await page.getAttribute('[data-testid="hero-link-phone"]', 'href')
+    expect(phoneLink).toBe(PHONE_HREF)
+  })
+})
diff --git a/components/Hero.tsx b/components/Hero.tsx
@@ -64,12 +64,14 @@ const Hero = () => {
 
       <div className="mt-8 flex flex-col items-center">
         <a
+          data-testid="hero-link-email"
           href={EMAIL_HREF}
           className="mb-2 rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-neutral-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
         >
           {EMAIL_TEXT}
         </a>
         <a
+          data-testid="hero-link-phone"
           href={PHONE_HREF}
           className="rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-neutral-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
         >