Skip to content

Commit 9b619e1

Browse files
attarchiattarchi
committed
refactor(ContactSection): remove default values, consolidate tests, and clean up structure
- Remove CSS-based tests and consolidate into functional tests - Move ContactSectionProps interface to component file - Remove default values from component props - Update mock to align with expected test IDs - Clean up comments and imports
1 parent 9dff1ad commit 9b619e1

10 files changed

Lines changed: 224 additions & 589 deletions

‎src/components/sections/ContactSection.tsx‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,21 @@ import { useState } from "react";
44
import { motion } from "framer-motion";
55
import { Heading, Text, Badge } from "@/components/ui";
66
import { slideUpVariants, fadeVariants, staggerVariants, sectionVariants } from "@/lib";
7-
import { ContactContent } from "@/content";
87

9-
export interface ContactSectionProps extends ContactContent {}
8+
export interface ContactSectionProps {
9+
status?: string;
10+
location?: string;
11+
email?: string;
12+
linkedinUrl?: string;
13+
githubUrl?: string;
14+
responseTime?: string;
15+
availabilityType?: string;
16+
sectionTitle?: string;
17+
sectionSubtitle?: string;
18+
contactInfoTitle?: string;
19+
formTitle?: string;
20+
formDescription?: string;
21+
}
1022

1123
export function ContactSection({
1224
status,
@@ -16,12 +28,12 @@ export function ContactSection({
1628
githubUrl,
1729
responseTime,
1830
availabilityType,
19-
sectionTitle = "Let's Work Together",
20-
sectionSubtitle = "Available for exciting projects and opportunities",
21-
contactInfoTitle = "Contact Information",
22-
formTitle = "Send Message",
23-
formDescription = "Feature coming soon! This form will be available when the site goes live.",
24-
}: ContactSectionProps) {
31+
sectionTitle,
32+
sectionSubtitle,
33+
contactInfoTitle,
34+
formTitle,
35+
formDescription,
36+
}: ContactSectionProps = {}) {
2537
const [showMessage, setShowMessage] = useState(false);
2638

2739
const handleSubmit = (e: React.FormEvent) => {
@@ -70,7 +82,7 @@ export function ContactSection({
7082
</Heading>
7183
<motion.div
7284
variants={fadeVariants}
73-
transition={{ delay: 0.8 }} // Last in sequence
85+
transition={{ delay: 0.8 }}
7486
>
7587
<Badge
7688
data-testid="availability-badge"
@@ -168,7 +180,6 @@ export function ContactSection({
168180
</motion.div>
169181
</div>
170182

171-
{/* Availability Details */}
172183
<motion.div
173184
className="mt-6 p-4 bg-[#f6f8fa] dark:bg-[#0d1117] border border-[#d0d7de] dark:border-[#30363d] rounded-md"
174185
variants={fadeVariants}
@@ -201,7 +212,6 @@ export function ContactSection({
201212
</motion.div>
202213
</motion.div>
203214

204-
{/* Contact Form */}
205215
<motion.div
206216
data-testid="contact-form"
207217
className="bg-white dark:bg-[#21262d] border border-[#d0d7de] dark:border-[#30363d] rounded-lg p-6 shadow-sm"

‎src/components/sections/__mocks__/ContactSection.tsx‎

Lines changed: 94 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,103 @@
11
import React from 'react';
22

3-
interface ContactSectionProps {
4-
title?: string;
5-
description?: string;
3+
export interface ContactSectionProps {
4+
status?: string;
5+
location?: string;
6+
email?: string;
7+
linkedinUrl?: string;
8+
githubUrl?: string;
9+
responseTime?: string;
10+
availabilityType?: string;
11+
sectionTitle?: string;
12+
sectionSubtitle?: string;
13+
contactInfoTitle?: string;
14+
formTitle?: string;
15+
formDescription?: string;
616
}
717

818
export function ContactSection({
9-
title = "Get In Touch",
10-
description = "Let's work together"
11-
}: ContactSectionProps) {
19+
sectionTitle = "Let's Work Together",
20+
sectionSubtitle = "Available for exciting projects and opportunities",
21+
contactInfoTitle = "Contact Information",
22+
formTitle = "Send Message",
23+
status = "Available for new opportunities",
24+
email = "test@example.com",
25+
linkedinUrl = "https://linkedin.com/in/test",
26+
githubUrl = "https://github.com/test",
27+
location = "Test City",
28+
responseTime = "Within 24 hours",
29+
availabilityType = "Full-time",
30+
}: ContactSectionProps = {}) {
1231
return (
13-
<section data-testid="contact-section">
14-
<h2 data-testid="contact-title">{title}</h2>
15-
<p data-testid="contact-description">{description}</p>
16-
<form data-testid="contact-form">
17-
<input
18-
type="text"
19-
placeholder="Name"
20-
data-testid="contact-name-input"
21-
/>
22-
<input
23-
type="email"
24-
placeholder="Email"
25-
data-testid="contact-email-input"
26-
/>
27-
<textarea
28-
placeholder="Message"
29-
data-testid="contact-message-input"
30-
/>
31-
<button type="submit" data-testid="contact-submit-button">
32-
Send Message
33-
</button>
34-
</form>
32+
<section data-testid="contact-section" aria-label="Contact section">
33+
<h2 data-testid="contact-title">{sectionTitle}</h2>
34+
<p data-testid="contact-description">{sectionSubtitle}</p>
35+
36+
<div data-testid="contact-grid">
37+
<div data-testid="contact-info-card">
38+
<h3>{contactInfoTitle}</h3>
39+
<div data-testid="availability-badge">{status}</div>
40+
<div data-testid="email-contact">
41+
<span>Email</span>
42+
<span>{email}</span>
43+
</div>
44+
<div data-testid="linkedin-contact">
45+
<span>LinkedIn</span>
46+
<a href={linkedinUrl} target="_blank" rel="noopener noreferrer">{linkedinUrl}</a>
47+
</div>
48+
<div data-testid="github-contact">
49+
<span>GitHub</span>
50+
<a href={githubUrl} target="_blank" rel="noopener noreferrer">{githubUrl}</a>
51+
</div>
52+
<div data-testid="location-contact">
53+
<span>Location</span>
54+
<span>{location}</span>
55+
</div>
56+
<div>
57+
<span>Response Time</span>
58+
<span>{responseTime}</span>
59+
</div>
60+
<div>
61+
<span>Available for</span>
62+
<span>{availabilityType}</span>
63+
</div>
64+
</div>
65+
66+
<div data-testid="contact-form">
67+
<h3>{formTitle}</h3>
68+
<form>
69+
<label htmlFor="name">Name</label>
70+
<input
71+
type="text"
72+
id="name"
73+
name="name"
74+
placeholder="Your name"
75+
data-testid="contact-name-input"
76+
required
77+
/>
78+
<label htmlFor="email">Email</label>
79+
<input
80+
type="email"
81+
id="email"
82+
name="email"
83+
placeholder="your.email@example.com"
84+
data-testid="contact-email-input"
85+
required
86+
/>
87+
<label htmlFor="message">Message</label>
88+
<textarea
89+
id="message"
90+
name="message"
91+
placeholder="Message"
92+
data-testid="contact-message-input"
93+
required
94+
/>
95+
<button type="submit" data-testid="contact-submit-button">
96+
Send Message
97+
</button>
98+
</form>
99+
</div>
100+
</div>
35101
</section>
36102
);
37103
}

‎src/components/sections/__mocks__/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@ export { HeroSection } from './HeroSection';
44
export { FeaturedProjects } from './FeaturedProjects';
55
export { TechnicalExpertise } from './TechnicalExpertise';
66
export { ProfessionalJourney } from './ProfessionalJourney';
7-
export const ContactSection = ({ children, ...props }: any) => React.createElement('section', { ...props, 'data-testid': 'contact-section' }, children);
7+
export { ContactSection } from './ContactSection';
88
export const BlogPreviewSection = ({ children, ...props }: any) => React.createElement('section', { ...props, 'data-testid': 'blog-preview-section' }, children);

‎src/components/sections/__tests__/ContactSection.animation.test.tsx‎

Lines changed: 0 additions & 144 deletions
This file was deleted.

0 commit comments

Comments
 (0)