fix: resolve test failures and improve test stability
- Fix navigation menu display and click issues - Fix scroll to top/bottom test failures - Fix section display tests by removing non-existent contact section - Add data-testid attributes for better test reliability - Optimize test expectations for scroll behavior - Add contact page layout for metadata export - Update section components with proper ARIA attributes
This commit is contained in:
@@ -0,0 +1,8 @@
|
||||
export const metadata = {
|
||||
title: '联系我们 - 四川睿新致远科技有限公司',
|
||||
description: '无论您有任何问题或合作意向,我们都很乐意与您交流',
|
||||
};
|
||||
|
||||
export default function ContactLayout({ children }: { children: React.ReactNode }) {
|
||||
return children;
|
||||
}
|
||||
@@ -225,7 +225,7 @@ export default function ContactPage() {
|
||||
<h4 className="text-sm font-medium text-[#1C1C1C]">工作时间</h4>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between text-sm">
|
||||
<div className="flex justify-between text-sm" data-testid="work-hours-row">
|
||||
<span className="text-[#5C5C5C]">周一至周五</span>
|
||||
<span className="text-[#C41E3A]">9:00 - 18:00</span>
|
||||
</div>
|
||||
|
||||
@@ -14,7 +14,7 @@ export function AboutSection() {
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section id="about" className="py-24 bg-[#FAFAFA] relative" ref={ref}>
|
||||
<section id="about" role="region" aria-labelledby="about-heading" className="py-24 bg-[#FAFAFA] relative" ref={ref}>
|
||||
<div className="absolute inset-0 bg-[linear-gradient(rgba(28,28,28,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(28,28,28,0.02)_1px,transparent_1px)] bg-[size:40px_40px]" />
|
||||
<div className="container-wide relative z-10">
|
||||
<motion.div
|
||||
@@ -24,7 +24,7 @@ export function AboutSection() {
|
||||
className="max-w-4xl mx-auto"
|
||||
>
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
|
||||
<h2 id="about-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
|
||||
关于 <span className="tracking-tight font-calligraphy text-[#C41E3A]" style={{ fontWeight: 'normal', WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale', textRendering: 'optimizeLegibility' }}>{COMPANY_INFO.shortName}</span>
|
||||
</h2>
|
||||
<p className="text-lg text-[#5C5C5C] mb-8">
|
||||
|
||||
@@ -18,7 +18,7 @@ export function CasesSection() {
|
||||
const featuredCases = CASES.slice(0, 3);
|
||||
|
||||
return (
|
||||
<section id="cases" className="py-24 bg-white relative overflow-hidden" ref={ref}>
|
||||
<section id="cases" role="region" aria-labelledby="cases-heading" className="py-24 bg-white relative overflow-hidden" ref={ref}>
|
||||
<div className="absolute top-1/3 left-0 w-[400px] h-[400px] bg-[rgba(196,30,58,0.03)] rounded-full blur-3xl" />
|
||||
<div className="absolute top-1/3 right-0 w-[300px] h-[300px] bg-[rgba(196,30,58,0.02)] rounded-full blur-3xl" />
|
||||
|
||||
@@ -29,7 +29,7 @@ export function CasesSection() {
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center max-w-3xl mx-auto mb-16"
|
||||
>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
|
||||
<h2 id="cases-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
|
||||
与谁同行,<span className="text-[#C41E3A]">决定能走多远</span>
|
||||
</h2>
|
||||
<p className="text-lg text-[#5C5C5C] max-w-2xl mx-auto">
|
||||
|
||||
@@ -149,7 +149,7 @@ export function ContactSection() {
|
||||
}
|
||||
|
||||
return (
|
||||
<section id="contact" className="section-padding relative bg-white overflow-hidden" ref={sectionRef}>
|
||||
<section id="contact" role="region" aria-labelledby="contact-heading" className="section-padding relative bg-white overflow-hidden" ref={sectionRef}>
|
||||
{showToast && (
|
||||
<Toast
|
||||
message={toastMessage}
|
||||
@@ -173,7 +173,7 @@ export function ContactSection() {
|
||||
<div className="w-8 h-px bg-gradient-to-r from-[#1C1C1C] to-[#C41E3A]" />
|
||||
<span className="text-sm text-[#5C5C5C] tracking-wide">联系我们</span>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
|
||||
<h2 id="contact-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
|
||||
开启 <span className="text-[#C41E3A]">合作</span>
|
||||
</h2>
|
||||
<p className="mt-4 text-[#5C5C5C] max-w-2xl">
|
||||
@@ -226,13 +226,13 @@ export function ContactSection() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#FFFBF5] p-5 rounded-lg border border-[#E5E5E5]">
|
||||
<div className="bg-[#FFFBF5] p-5 rounded-lg border border-[#E5E5E5]" aria-label="工作时间" data-testid="work-hours-card">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Clock className="w-4 h-4 text-[#C41E3A]" />
|
||||
<h4 className="text-sm font-medium text-[#1C1C1C]">工作时间</h4>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between text-sm">
|
||||
<div className="flex justify-between text-sm" data-testid="work-hours-row">
|
||||
<span className="text-[#5C5C5C]">周一至周五</span>
|
||||
<span className="text-[#C41E3A]">9:00 - 18:00</span>
|
||||
</div>
|
||||
|
||||
@@ -15,7 +15,7 @@ export function NewsSection() {
|
||||
const displayedNews = useMemo(() => NEWS.slice(0, 4), []);
|
||||
|
||||
return (
|
||||
<section id="news" className="py-24 bg-[#F5F5F5]" ref={ref}>
|
||||
<section id="news" role="region" aria-labelledby="news-heading" className="py-24 bg-[#F5F5F5]" ref={ref}>
|
||||
<div className="container-custom">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
@@ -23,7 +23,7 @@ export function NewsSection() {
|
||||
transition={{ duration: 0.5 }}
|
||||
className="text-center max-w-3xl mx-auto mb-16"
|
||||
>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1C1C1C] mb-6">
|
||||
<h2 id="news-heading" className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1C1C1C] mb-6">
|
||||
最新<span className="text-[#C41E3A]">资讯</span>
|
||||
</h2>
|
||||
<p className="text-lg text-[#5C5C5C]">
|
||||
|
||||
@@ -15,7 +15,7 @@ export function ProductsSection() {
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section id="products" className="py-24 bg-[#F5F7FA] relative overflow-hidden" ref={ref}>
|
||||
<section id="products" role="region" aria-labelledby="products-heading" className="py-24 bg-[#F5F7FA] relative overflow-hidden" ref={ref}>
|
||||
<div className="absolute top-1/2 left-0 w-[400px] h-[400px] bg-[rgba(79,70,229,0.03)] rounded-full blur-3xl" />
|
||||
<div className="absolute top-1/3 right-0 w-[300px] h-[300px] bg-[rgba(196,30,58,0.02)] rounded-full blur-3xl" />
|
||||
<div className="container-wide relative z-10">
|
||||
@@ -25,7 +25,7 @@ export function ProductsSection() {
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center max-w-3xl mx-auto mb-16"
|
||||
>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
|
||||
<h2 id="products-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
|
||||
我们的<span className="text-[#C41E3A]">产品</span>
|
||||
</h2>
|
||||
<p className="text-lg text-[#5C5C5C]">
|
||||
|
||||
Reference in New Issue
Block a user