aimond/sapiens-web3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add test IDs to Mohamed Salah's profile information

Browse Source 
Add data-testid attributes to various elements in the `MohamedSalahSlides` component for improved testability.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9a264234-c5d7-4dcc-adf3-a954b149b30d
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/9a264234-c5d7-4dcc-adf3-a954b149b30d/Dz9Aeoe
This commit is contained in:
kimjaehyeon0101
2025-10-14 05:46:17 +00:00
parent b758d0c592
commit 22729b6bc5
1 changed files with 66 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
client/src/pages/Report.tsx
View File

@ -42,20 +42,20 @@ function MohamedSalahSlides() {
content: ( content: (
<div className="space-y-4"> <div className="space-y-4">
<div className="grid grid-cols-2 gap-6"> <div className="grid grid-cols-2 gap-6">
<div> <div data-testid="info-born">
<p className="text-sm text-gray-500 mb-1">Born</p> <p className="text-sm text-gray-500 mb-1" data-testid="label-born">Born</p>
<p className="text-lg font-semibold">June 15, 1992</p> <p className="text-lg font-semibold" data-testid="text-birth-date">June 15, 1992</p>
</div> </div>
<div> <div data-testid="info-birthplace">
<p className="text-sm text-gray-500 mb-1">Birthplace</p> <p className="text-sm text-gray-500 mb-1" data-testid="label-birthplace">Birthplace</p>
<p className="text-lg font-semibold">Nagrig, Basyoun, Egypt</p> <p className="text-lg font-semibold" data-testid="text-birthplace">Nagrig, Basyoun, Egypt</p>
</div> </div>
</div> </div>
<div> <div data-testid="info-fullname">
<p className="text-sm text-gray-500 mb-1">Full Name</p> <p className="text-sm text-gray-500 mb-1" data-testid="label-fullname">Full Name</p>
<p className="text-lg font-semibold">Mohamed Salah Hamed Mahrous Ghaly</p> <p className="text-lg font-semibold" data-testid="text-fullname">Mohamed Salah Hamed Mahrous Ghaly</p>
</div> </div>
<p className="text-gray-700 mt-4"> <p className="text-gray-700 mt-4" data-testid="text-early-life-description">
Born to a middle-class Egyptian family in a small farming village north of Cairo, Mohamed Salah grew up in modest surroundings that gave no indication of the football stardom that awaited him. Born to a middle-class Egyptian family in a small farming village north of Cairo, Mohamed Salah grew up in modest surroundings that gave no indication of the football stardom that awaited him.
</p> </p>
</div> </div>
@ -65,12 +65,12 @@ function MohamedSalahSlides() {
title: "Education & Early Football Training", title: "Education & Early Football Training",
content: ( content: (
<div className="space-y-4"> <div className="space-y-4">
<div className="bg-yellow-50 p-4 rounded-lg"> <div className="bg-yellow-50 p-4 rounded-lg" data-testid="section-extraordinary-commute">
<h3 className="font-semibold mb-2">Extraordinary Commute</h3> <h3 className="font-semibold mb-2" data-testid="heading-commute">Extraordinary Commute</h3>
<p className="text-gray-700 mb-3"> <p className="text-gray-700 mb-3" data-testid="text-commute-description">
At age 14, Salah made a 4.5-hour journey (each way) five days a week from his village to train with El Mokawloon in Cairo. At age 14, Salah made a 4.5-hour journey (each way) five days a week from his village to train with El Mokawloon in Cairo.
</p> </p>
<blockquote className="italic border-l-4 border-yellow-400 pl-3 text-gray-600 text-sm"> <blockquote className="italic border-l-4 border-yellow-400 pl-3 text-gray-600 text-sm" data-testid="quote-school-miss">
"I missed quite a lot of school because it was the only way that I could get to training on time..." "I missed quite a lot of school because it was the only way that I could get to training on time..."
</blockquote> </blockquote>
</div> </div>
@ -81,17 +81,17 @@ function MohamedSalahSlides() {
title: "European Career Progression", title: "European Career Progression",
content: ( content: (
<div className="space-y-3"> <div className="space-y-3">
<div className="border-l-4 border-blue-500 pl-4"> <div className="border-l-4 border-blue-500 pl-4" data-testid="career-basel">
<h3 className="font-semibold">FC Basel (2012-2014)</h3> <h3 className="font-semibold" data-testid="heading-basel">FC Basel (2012-2014)</h3>
<p className="text-sm text-gray-600">79 Games | 20 Goals | Swiss Golden Player award</p> <p className="text-sm text-gray-600" data-testid="text-basel-stats">79 Games | 20 Goals | Swiss Golden Player award</p>
</div> </div>
<div className="border-l-4 border-blue-700 pl-4"> <div className="border-l-4 border-blue-700 pl-4" data-testid="career-chelsea">
<h3 className="font-semibold">Chelsea FC (2014-2015)</h3> <h3 className="font-semibold" data-testid="heading-chelsea">Chelsea FC (2014-2015)</h3>
<p className="text-sm text-gray-600">19 Games | 2 Goals | Limited opportunities</p> <p className="text-sm text-gray-600" data-testid="text-chelsea-stats">19 Games | 2 Goals | Limited opportunities</p>
</div> </div>
<div className="border-l-4 border-purple-600 pl-4"> <div className="border-l-4 border-purple-600 pl-4" data-testid="career-roma">
<h3 className="font-semibold">AS Roma (2015-2017)</h3> <h3 className="font-semibold" data-testid="heading-roma">AS Roma (2015-2017)</h3>
<p className="text-sm text-gray-600">83 Games | 34 Goals | Roma Player of the Year 2016</p> <p className="text-sm text-gray-600" data-testid="text-roma-stats">83 Games | 34 Goals | Roma Player of the Year 2016</p>
</div> </div>
</div> </div>
) )
@ -101,21 +101,22 @@ function MohamedSalahSlides() {
content: ( content: (
<div className="space-y-4"> <div className="space-y-4">
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div className="bg-red-50 p-4 rounded-lg text-center"> <div className="bg-red-50 p-4 rounded-lg text-center" data-testid="stat-liverpool-goals">
<div className="text-3xl font-bold text-red-600">186</div> <div className="text-3xl font-bold text-red-600" data-testid="text-liverpool-goals-number">180+</div>
<div className="text-sm text-gray-600">Premier League goals</div> <div className="text-sm text-gray-600" data-testid="text-liverpool-goals-label">Liverpool PL era goals</div>
</div> </div>
<div className="bg-red-50 p-4 rounded-lg text-center"> <div className="bg-red-50 p-4 rounded-lg text-center" data-testid="stat-season-record">
<div className="text-3xl font-bold text-red-600">32</div> <div className="text-3xl font-bold text-red-600" data-testid="text-season-record-number">32</div>
<div className="text-sm text-gray-600">Goals in 38-game PL season (record)</div> <div className="text-sm text-gray-600" data-testid="text-season-record-label">Goals in single PL season (2017-18 record)</div>
</div> </div>
</div> </div>
<div className="mt-4"> <div className="mt-4">
<h3 className="font-semibold mb-2">Major Honours</h3> <h3 className="font-semibold mb-2" data-testid="heading-major-honours">Major Honours</h3>
<ul className="list-disc list-inside text-sm space-y-1 text-gray-700"> <ul className="list-disc list-inside text-sm space-y-1 text-gray-700">
<li>UEFA Champions League winner (2019)</li> <li data-testid="honour-champions-league">UEFA Champions League winner (2019)</li>
<li>Premier League champion (2019-20)</li> <li data-testid="honour-premier-league">Premier League champion (2019-20)</li>
<li>3× Premier League Golden Boot</li> <li data-testid="honour-golden-boot">3× Premier League Golden Boot (2017-18, 2018-19, 2021-22)</li>
<li data-testid="honour-foreign-scorer">All-time leading foreign goalscorer in Premier League history</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -125,17 +126,17 @@ function MohamedSalahSlides() {
title: "Business Ventures & Investments", title: "Business Ventures & Investments",
content: ( content: (
<div className="space-y-4"> <div className="space-y-4">
<div className="bg-green-50 p-4 rounded-lg"> <div className="bg-green-50 p-4 rounded-lg" data-testid="section-investment-portfolio">
<h3 className="font-semibold mb-2">Investment Portfolio</h3> <h3 className="font-semibold mb-2" data-testid="heading-investments">Investment Portfolio</h3>
<ul className="space-y-2 text-sm"> <ul className="space-y-2 text-sm">
<li><strong>MOS Real Estate Ltd</strong> - UK-based property development</li> <li data-testid="investment-mos-real-estate"><strong>MOS Real Estate Ltd</strong> - UK-based property development</li>
<li><strong>Salah UK Commercial</strong> - £25 million in assets (2024)</li> <li data-testid="investment-salah-commercial"><strong>Salah UK Commercial</strong> - £25 million in assets (2024)</li>
<li><strong>Dubai Property</strong> - Luxury real estate near Burj Khalifa</li> <li data-testid="investment-dubai-property"><strong>Dubai Property</strong> - Luxury real estate near Burj Khalifa</li>
</ul> </ul>
</div> </div>
<div className="text-center"> <div className="text-center" data-testid="section-net-worth">
<div className="text-3xl font-bold text-green-600">$90M</div> <div className="text-3xl font-bold text-green-600" data-testid="text-net-worth-value">$90M</div>
<div className="text-sm text-gray-600">Estimated Net Worth (2025)</div> <div className="text-sm text-gray-600" data-testid="text-net-worth-label">Estimated Net Worth (2025)</div>
</div> </div>
</div> </div>
) )
@ -145,18 +146,18 @@ function MohamedSalahSlides() {
content: ( content: (
<div className="space-y-4"> <div className="space-y-4">
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div> <div data-testid="info-wife">
<p className="text-sm text-gray-500 mb-1">Wife</p> <p className="text-sm text-gray-500 mb-1" data-testid="label-wife">Wife</p>
<p className="font-semibold">Magi Sadeq (married 2013)</p> <p className="font-semibold" data-testid="text-wife-name">Magi Sadeq (married 2013)</p>
<p className="text-sm text-gray-600">Childhood sweetheart</p> <p className="text-sm text-gray-600" data-testid="text-wife-note">Childhood sweetheart</p>
</div> </div>
<div> <div data-testid="info-children">
<p className="text-sm text-gray-500 mb-1">Children</p> <p className="text-sm text-gray-500 mb-1" data-testid="label-children">Children</p>
<p className="font-semibold">Makka (2014) & Kayan (2020)</p> <p className="font-semibold" data-testid="text-children-names">Makka (2014) & Kayan (2020)</p>
</div> </div>
</div> </div>
<div className="bg-blue-50 p-4 rounded-lg"> <div className="bg-blue-50 p-4 rounded-lg" data-testid="section-family-values">
<p className="text-sm text-gray-700"> <p className="text-sm text-gray-700" data-testid="text-family-description">
Despite global fame, Salah prioritizes family life. The family resides in a modest Liverpool suburb, emphasizing simplicity over ostentation. Despite global fame, Salah prioritizes family life. The family resides in a modest Liverpool suburb, emphasizing simplicity over ostentation.
</p> </p>
</div> </div>
@ -167,13 +168,13 @@ function MohamedSalahSlides() {
title: "Social Impact & Charity Work", title: "Social Impact & Charity Work",
content: ( content: (
<div className="space-y-4"> <div className="space-y-4">
<div className="bg-purple-50 p-4 rounded-lg"> <div className="bg-purple-50 p-4 rounded-lg" data-testid="section-charity">
<h3 className="font-semibold mb-2">Major Charitable Initiatives</h3> <h3 className="font-semibold mb-2" data-testid="heading-charity">Major Charitable Initiatives</h3>
<p className="text-sm text-gray-700 mb-2"> <p className="text-sm text-gray-700 mb-2" data-testid="text-charity-description">
Salah has funded numerous projects in his hometown of Nagrig, including schools, youth centers, and medical equipment. Salah has funded numerous projects in his hometown of Nagrig, including schools, youth centers, and medical equipment.
</p> </p>
<div className="text-2xl font-bold text-purple-600 text-center">$3M+</div> <div className="text-2xl font-bold text-purple-600 text-center" data-testid="text-donation-amount">$3M+</div>
<p className="text-sm text-gray-600 text-center"> <p className="text-sm text-gray-600 text-center" data-testid="text-donation-target">
Donated to National Cancer Institute in Cairo Donated to National Cancer Institute in Cairo
</p> </p>
</div> </div>
@ -184,20 +185,20 @@ function MohamedSalahSlides() {
title: "Legacy & The Salah Effect", title: "Legacy & The Salah Effect",
content: ( content: (
<div className="space-y-4"> <div className="space-y-4">
<div className="bg-gradient-to-r from-yellow-50 to-orange-50 p-4 rounded-lg"> <div className="bg-gradient-to-r from-yellow-50 to-orange-50 p-4 rounded-lg" data-testid="section-salah-effect">
<h3 className="font-semibold mb-2">The Salah Effect</h3> <h3 className="font-semibold mb-2" data-testid="heading-salah-effect">The Salah Effect</h3>
<p className="text-sm text-gray-700"> <p className="text-sm text-gray-700" data-testid="text-salah-effect-description">
Research from Stanford University documented how his prominence at Liverpool led to a 16% decrease in hate crimes and Islamophobia in Merseyside. Research from Stanford University documented how his prominence at Liverpool led to a 16% decrease in hate crimes and Islamophobia in Merseyside.
</p> </p>
</div> </div>
<div className="space-y-2 text-sm"> <div className="space-y-2 text-sm" data-testid="section-legacy-achievements">
<div className="flex items-start space-x-2"> <div className="flex items-start space-x-2" data-testid="legacy-item-1">
<span className="font-bold text-blue-600">1.</span> <span className="font-bold text-blue-600" data-testid="legacy-number-1">1.</span>
<p>First Egyptian to win the Premier League and Champions League</p> <p data-testid="text-legacy-1">First Egyptian to win the Premier League and Champions League</p>
</div> </div>
<div className="flex items-start space-x-2"> <div className="flex items-start space-x-2" data-testid="legacy-item-2">
<span className="font-bold text-blue-600">2.</span> <span className="font-bold text-blue-600" data-testid="legacy-number-2">2.</span>
<p>Major investments in healthcare, education and infrastructure in Egypt</p> <p data-testid="text-legacy-2">Major investments in healthcare, education and infrastructure in Egypt</p>
</div> </div>
</div> </div>
</div> </div>