feat: 实现内容管理API及相关功能
refactor(services-section): 重构服务展示组件使用API数据 refactor(news-section): 重构新闻展示组件使用API数据 refactor(products-section): 重构产品展示组件使用API数据 test: 添加API客户端和服务钩子的单元测试 test(e2e): 添加配置验证和API响应格式的端到端测试 ci: 更新Playwright测试配置
This commit is contained in:
张翔
@@ -0,0 +1,513 @@
|
||||
import { describe, it, expect, beforeEach, afterEach, jest } from '@jest/globals';
|
||||
import { render, screen, waitFor } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom';
|
||||
import { NewsSection } from './news-section';
|
||||
|
||||
jest.mock('framer-motion', () => ({
|
||||
motion: {
|
||||
div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
|
||||
},
|
||||
useInView: () => true,
|
||||
}));
|
||||
|
||||
jest.mock('next/link', () => {
|
||||
return ({ children, href }: any) => <a href={href}>{children}</a>;
|
||||
});
|
||||
|
||||
jest.mock('@/hooks/use-news', () => ({
|
||||
useNews: jest.fn(),
|
||||
}));
|
||||
|
||||
const { useNews } = require('@/hooks/use-news');
|
||||
|
||||
describe('NewsSection Integration', () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.restoreAllMocks();
|
||||
});
|
||||
|
||||
describe('Data Loading States', () => {
|
||||
it('should show loading state when data is loading', () => {
|
||||
useNews.mockReturnValue({
|
||||
news: [],
|
||||
loading: true,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<NewsSection />);
|
||||
|
||||
expect(screen.getByText('加载中...')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render news when data is loaded successfully', async () => {
|
||||
const mockNews = [
|
||||
{
|
||||
id: '1',
|
||||
title: '测试新闻1',
|
||||
excerpt: '这是一个测试新闻',
|
||||
category: '公司新闻',
|
||||
date: '2026-01-15',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '测试新闻2',
|
||||
excerpt: '这是另一个测试新闻',
|
||||
category: '行业资讯',
|
||||
date: '2026-01-16',
|
||||
},
|
||||
];
|
||||
|
||||
useNews.mockReturnValue({
|
||||
news: mockNews,
|
||||
loading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<NewsSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('测试新闻1')).toBeInTheDocument();
|
||||
expect(screen.getByText('测试新闻2')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should show error message when data loading fails', async () => {
|
||||
useNews.mockReturnValue({
|
||||
news: [],
|
||||
loading: false,
|
||||
error: new Error('Failed to load news'),
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<NewsSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('加载新闻信息失败，请稍后重试')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should show empty state when no news are available', async () => {
|
||||
useNews.mockReturnValue({
|
||||
news: [],
|
||||
loading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<NewsSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('暂无新闻信息')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('News Display', () => {
|
||||
it('should render all news from API', async () => {
|
||||
const mockNews = [
|
||||
{
|
||||
id: '1',
|
||||
title: '新闻A',
|
||||
excerpt: '摘要A',
|
||||
category: '公司新闻',
|
||||
date: '2026-01-15',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '新闻B',
|
||||
excerpt: '摘要B',
|
||||
category: '行业资讯',
|
||||
date: '2026-01-16',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: '新闻C',
|
||||
excerpt: '摘要C',
|
||||
category: '技术分享',
|
||||
date: '2026-01-17',
|
||||
},
|
||||
];
|
||||
|
||||
useNews.mockReturnValue({
|
||||
news: mockNews,
|
||||
loading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<NewsSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('新闻A')).toBeInTheDocument();
|
||||
expect(screen.getByText('新闻B')).toBeInTheDocument();
|
||||
expect(screen.getByText('新闻C')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should display news categories correctly', async () => {
|
||||
const mockNews = [
|
||||
{
|
||||
id: '1',
|
||||
title: '新闻A',
|
||||
excerpt: '摘要A',
|
||||
category: '公司新闻',
|
||||
date: '2026-01-15',
|
||||
},
|
||||
];
|
||||
|
||||
useNews.mockReturnValue({
|
||||
news: mockNews,
|
||||
loading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<NewsSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('公司新闻')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should display news dates correctly', async () => {
|
||||
const mockNews = [
|
||||
{
|
||||
id: '1',
|
||||
title: '新闻A',
|
||||
excerpt: '摘要A',
|
||||
category: '公司新闻',
|
||||
date: '2026-01-15',
|
||||
},
|
||||
];
|
||||
|
||||
useNews.mockReturnValue({
|
||||
news: mockNews,
|
||||
loading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<NewsSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('2026-01-15')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should display news excerpts', async () => {
|
||||
const mockNews = [
|
||||
{
|
||||
id: '1',
|
||||
title: '新闻A',
|
||||
excerpt: '这是一个关于公司最新发展的新闻摘要',
|
||||
category: '公司新闻',
|
||||
date: '2026-01-15',
|
||||
},
|
||||
];
|
||||
|
||||
useNews.mockReturnValue({
|
||||
news: mockNews,
|
||||
loading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<NewsSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('这是一个关于公司最新发展的新闻摘要')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('News Filtering', () => {
|
||||
it('should filter news by categories config', async () => {
|
||||
const mockNews = [
|
||||
{
|
||||
id: '1',
|
||||
title: '新闻A',
|
||||
excerpt: '摘要A',
|
||||
category: '公司新闻',
|
||||
date: '2026-01-15',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '新闻B',
|
||||
excerpt: '摘要B',
|
||||
category: '行业资讯',
|
||||
date: '2026-01-16',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: '新闻C',
|
||||
excerpt: '摘要C',
|
||||
category: '公司新闻',
|
||||
date: '2026-01-17',
|
||||
},
|
||||
];
|
||||
|
||||
useNews.mockReturnValue({
|
||||
news: mockNews,
|
||||
loading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<NewsSection config={{ categories: ['公司新闻'] }} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('新闻A')).toBeInTheDocument();
|
||||
expect(screen.getByText('新闻C')).toBeInTheDocument();
|
||||
expect(screen.queryByText('新闻B')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should show all news when no categories config is provided', async () => {
|
||||
const mockNews = [
|
||||
{
|
||||
id: '1',
|
||||
title: '新闻A',
|
||||
excerpt: '摘要A',
|
||||
category: '公司新闻',
|
||||
date: '2026-01-15',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '新闻B',
|
||||
excerpt: '摘要B',
|
||||
category: '行业资讯',
|
||||
date: '2026-01-16',
|
||||
},
|
||||
];
|
||||
|
||||
useNews.mockReturnValue({
|
||||
news: mockNews,
|
||||
loading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<NewsSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('新闻A')).toBeInTheDocument();
|
||||
expect(screen.getByText('新闻B')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should limit news display count', async () => {
|
||||
const mockNews = [
|
||||
{
|
||||
id: '1',
|
||||
title: '新闻A',
|
||||
excerpt: '摘要A',
|
||||
category: '公司新闻',
|
||||
date: '2026-01-15',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '新闻B',
|
||||
excerpt: '摘要B',
|
||||
category: '行业资讯',
|
||||
date: '2026-01-16',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: '新闻C',
|
||||
excerpt: '摘要C',
|
||||
category: '技术分享',
|
||||
date: '2026-01-17',
|
||||
},
|
||||
];
|
||||
|
||||
useNews.mockReturnValue({
|
||||
news: mockNews,
|
||||
loading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<NewsSection config={{ displayCount: 2 }} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('新闻C')).toBeInTheDocument();
|
||||
expect(screen.getByText('新闻B')).toBeInTheDocument();
|
||||
expect(screen.queryByText('新闻A')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Sorting', () => {
|
||||
it('should sort news in descending order by default', async () => {
|
||||
const mockNews = [
|
||||
{
|
||||
id: '1',
|
||||
title: '新闻A',
|
||||
excerpt: '摘要A',
|
||||
category: '公司新闻',
|
||||
date: '2026-01-15',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '新闻B',
|
||||
excerpt: '摘要B',
|
||||
category: '行业资讯',
|
||||
date: '2026-01-17',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: '新闻C',
|
||||
excerpt: '摘要C',
|
||||
category: '技术分享',
|
||||
date: '2026-01-16',
|
||||
},
|
||||
];
|
||||
|
||||
useNews.mockReturnValue({
|
||||
news: mockNews,
|
||||
loading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<NewsSection config={{ sortOrder: 'desc' }} />);
|
||||
|
||||
await waitFor(() => {
|
||||
const newsItems = screen.getAllByText(/新闻[ABC]/);
|
||||
expect(newsItems[0]).toHaveTextContent('新闻B');
|
||||
expect(newsItems[1]).toHaveTextContent('新闻C');
|
||||
expect(newsItems[2]).toHaveTextContent('新闻A');
|
||||
});
|
||||
});
|
||||
|
||||
it('should sort news in ascending order when configured', async () => {
|
||||
const mockNews = [
|
||||
{
|
||||
id: '1',
|
||||
title: '新闻A',
|
||||
excerpt: '摘要A',
|
||||
category: '公司新闻',
|
||||
date: '2026-01-15',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '新闻B',
|
||||
excerpt: '摘要B',
|
||||
category: '行业资讯',
|
||||
date: '2026-01-17',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: '新闻C',
|
||||
excerpt: '摘要C',
|
||||
category: '技术分享',
|
||||
date: '2026-01-16',
|
||||
},
|
||||
];
|
||||
|
||||
useNews.mockReturnValue({
|
||||
news: mockNews,
|
||||
loading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<NewsSection config={{ sortOrder: 'asc' }} />);
|
||||
|
||||
await waitFor(() => {
|
||||
const newsItems = screen.getAllByText(/新闻[ABC]/);
|
||||
expect(newsItems[0]).toHaveTextContent('新闻A');
|
||||
expect(newsItems[1]).toHaveTextContent('新闻C');
|
||||
expect(newsItems[2]).toHaveTextContent('新闻B');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Navigation', () => {
|
||||
it('should link to news detail pages', async () => {
|
||||
const mockNews = [
|
||||
{
|
||||
id: '1',
|
||||
title: '新闻A',
|
||||
excerpt: '摘要A',
|
||||
category: '公司新闻',
|
||||
date: '2026-01-15',
|
||||
},
|
||||
];
|
||||
|
||||
useNews.mockReturnValue({
|
||||
news: mockNews,
|
||||
loading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<NewsSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
const newsLink = screen.getByRole('link', { name: /阅读更多/ });
|
||||
expect(newsLink).toHaveAttribute('href', '/news/1');
|
||||
});
|
||||
});
|
||||
|
||||
it('should link to all news page', async () => {
|
||||
const mockNews = [
|
||||
{
|
||||
id: '1',
|
||||
title: '新闻A',
|
||||
excerpt: '摘要A',
|
||||
category: '公司新闻',
|
||||
date: '2026-01-15',
|
||||
},
|
||||
];
|
||||
|
||||
useNews.mockReturnValue({
|
||||
news: mockNews,
|
||||
loading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<NewsSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
const allNewsLink = screen.getByRole('link', { name: /查看全部新闻/ });
|
||||
expect(allNewsLink).toHaveAttribute('href', '/news');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should maintain accessibility with dynamic data', async () => {
|
||||
const mockNews = [
|
||||
{
|
||||
id: '1',
|
||||
title: '新闻A',
|
||||
excerpt: '摘要A',
|
||||
category: '公司新闻',
|
||||
date: '2026-01-15',
|
||||
},
|
||||
];
|
||||
|
||||
useNews.mockReturnValue({
|
||||
news: mockNews,
|
||||
loading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<NewsSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
const section = screen.getByRole('region');
|
||||
expect(section).toBeInTheDocument();
|
||||
expect(section).toHaveAttribute('aria-labelledby', 'news-heading');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -6,7 +6,7 @@ import { useRef, useMemo } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { ArrowRight, Calendar } from 'lucide-react';
|
||||
import { NEWS } from '@/lib/constants';
|
||||
import { useNews } from '@/hooks/use-news';
|
||||
|
||||
interface NewsConfig {
|
||||
enabled?: boolean;
|
||||
@@ -22,12 +22,17 @@ interface NewsSectionProps {
|
||||
export function NewsSection({ config }: NewsSectionProps) {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
const { news, loading, error } = useNews();
|
||||
|
||||
const displayedNews = useMemo(() => {
|
||||
let filtered = NEWS;
|
||||
if (!news || news.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
let filtered = news;
|
||||
|
||||
if (config?.categories && config.categories.length > 0) {
|
||||
filtered = filtered.filter(news => config.categories?.includes(news.category));
|
||||
filtered = filtered.filter(newsItem => config.categories?.includes(newsItem.category));
|
||||
}
|
||||
|
||||
if (config?.sortOrder === 'asc') {
|
||||
@@ -38,7 +43,31 @@ export function NewsSection({ config }: NewsSectionProps) {
|
||||
|
||||
const count = config?.displayCount || 4;
|
||||
return filtered.slice(0, count);
|
||||
}, [config]);
|
||||
}, [news, config]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<section id="news" role="region" aria-labelledby="news-heading" className="py-24 bg-[#F5F5F5]" ref={ref}>
|
||||
<div className="container-custom">
|
||||
<div className="text-center">
|
||||
<p className="text-lg text-[#5C5C5C]">加载中...</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<section id="news" role="region" aria-labelledby="news-heading" className="py-24 bg-[#F5F5F5]" ref={ref}>
|
||||
<div className="container-custom">
|
||||
<div className="text-center">
|
||||
<p className="text-lg text-red-600">加载新闻信息失败，请稍后重试</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section id="news" role="region" aria-labelledby="news-heading" className="py-24 bg-[#F5F5F5]" ref={ref}>
|
||||
@@ -57,43 +86,49 @@ export function NewsSection({ config }: NewsSectionProps) {
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
|
||||
{displayedNews.map((news, idx) => (
|
||||
<motion.div
|
||||
key={news.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.4, delay: idx * 0.08 }}
|
||||
>
|
||||
<Card className="h-full flex flex-col group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C]">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="inline-block px-2 py-0.5 rounded-full bg-[#F5F5F5] text-[#1C1C1C] text-xs font-medium">
|
||||
{news.category}
|
||||
</span>
|
||||
<span className="text-sm text-[#5C5C5C] flex items-center gap-1">
|
||||
<Calendar className="w-3 h-3" />
|
||||
{news.date}
|
||||
</span>
|
||||
</div>
|
||||
<CardTitle className="text-xl leading-tight">{news.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-1 flex flex-col">
|
||||
<CardDescription className="text-base leading-relaxed mb-6 flex-1">
|
||||
{news.excerpt}
|
||||
</CardDescription>
|
||||
<a
|
||||
href={`/news/${news.id}`}
|
||||
className="inline-flex items-center text-sm font-medium text-[#1C1C1C] hover:text-[#C41E3A] transition-colors group/link"
|
||||
>
|
||||
阅读更多
|
||||
<ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover/link:translate-x-1" />
|
||||
</a>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
{displayedNews.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
|
||||
{displayedNews.map((newsItem, idx) => (
|
||||
<motion.div
|
||||
key={newsItem.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.4, delay: idx * 0.08 }}
|
||||
>
|
||||
<Card className="h-full flex flex-col group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C]">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="inline-block px-2 py-0.5 rounded-full bg-[#F5F5F5] text-[#1C1C1C] text-xs font-medium">
|
||||
{newsItem.category}
|
||||
</span>
|
||||
<span className="text-sm text-[#5C5C5C] flex items-center gap-1">
|
||||
<Calendar className="w-3 h-3" />
|
||||
{newsItem.date}
|
||||
</span>
|
||||
</div>
|
||||
<CardTitle className="text-xl leading-tight">{newsItem.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-1 flex flex-col">
|
||||
<CardDescription className="text-base leading-relaxed mb-6 flex-1">
|
||||
{newsItem.excerpt}
|
||||
</CardDescription>
|
||||
<a
|
||||
href={`/news/${newsItem.id}`}
|
||||
className="inline-flex items-center text-sm font-medium text-[#1C1C1C] hover:text-[#C41E3A] transition-colors group/link"
|
||||
>
|
||||
阅读更多
|
||||
<ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover/link:translate-x-1" />
|
||||
</a>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-lg text-[#5C5C5C]">暂无新闻信息</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
|
||||
@@ -0,0 +1,472 @@
|
||||
import { describe, it, expect, beforeEach, afterEach, jest } from '@jest/globals';
|
||||
import { render, screen, waitFor } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom';
|
||||
import { ProductsSection } from './products-section';
|
||||
|
||||
jest.mock('framer-motion', () => ({
|
||||
motion: {
|
||||
div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
|
||||
},
|
||||
useInView: () => true,
|
||||
}));
|
||||
|
||||
jest.mock('next/link', () => {
|
||||
return ({ children, href }: any) => <a href={href}>{children}</a>;
|
||||
});
|
||||
|
||||
jest.mock('@/hooks/use-products', () => ({
|
||||
useProducts: jest.fn(),
|
||||
}));
|
||||
|
||||
const { useProducts } = require('@/hooks/use-products');
|
||||
|
||||
describe('ProductsSection Integration', () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.restoreAllMocks();
|
||||
});
|
||||
|
||||
describe('Data Loading States', () => {
|
||||
it('should show loading state when data is loading', () => {
|
||||
useProducts.mockReturnValue({
|
||||
products: [],
|
||||
loading: true,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ProductsSection />);
|
||||
|
||||
expect(screen.getByText('加载中...')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render products when data is loaded successfully', async () => {
|
||||
const mockProducts = [
|
||||
{
|
||||
id: '1',
|
||||
title: '测试产品1',
|
||||
description: '这是一个测试产品',
|
||||
category: '软件',
|
||||
features: ['功能1', '功能2'],
|
||||
benefits: ['价值1', '价值2'],
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '测试产品2',
|
||||
description: '这是另一个测试产品',
|
||||
category: '硬件',
|
||||
features: ['功能3', '功能4'],
|
||||
benefits: ['价值3', '价值4'],
|
||||
},
|
||||
];
|
||||
|
||||
useProducts.mockReturnValue({
|
||||
products: mockProducts,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ProductsSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('测试产品1')).toBeInTheDocument();
|
||||
expect(screen.getByText('测试产品2')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should show error message when data loading fails', async () => {
|
||||
useProducts.mockReturnValue({
|
||||
products: [],
|
||||
isLoading: false,
|
||||
error: new Error('Failed to load products'),
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ProductsSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('加载产品信息失败，请稍后重试')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should show empty state when no products are available', async () => {
|
||||
useProducts.mockReturnValue({
|
||||
products: [],
|
||||
isLoading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ProductsSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('暂无产品信息')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Product Display', () => {
|
||||
it('should render all products from API', async () => {
|
||||
const mockProducts = [
|
||||
{
|
||||
id: '1',
|
||||
title: '产品A',
|
||||
description: '描述A',
|
||||
category: '类别1',
|
||||
features: ['功能A1', '功能A2'],
|
||||
benefits: ['价值A1'],
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '产品B',
|
||||
description: '描述B',
|
||||
category: '类别2',
|
||||
features: ['功能B1'],
|
||||
benefits: ['价值B1', '价值B2'],
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: '产品C',
|
||||
description: '描述C',
|
||||
category: '类别1',
|
||||
features: ['功能C1', '功能C2', '功能C3'],
|
||||
benefits: ['价值C1'],
|
||||
},
|
||||
];
|
||||
|
||||
useProducts.mockReturnValue({
|
||||
products: mockProducts,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ProductsSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('产品A')).toBeInTheDocument();
|
||||
expect(screen.getByText('产品B')).toBeInTheDocument();
|
||||
expect(screen.getByText('产品C')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should display product categories correctly', async () => {
|
||||
const mockProducts = [
|
||||
{
|
||||
id: '1',
|
||||
title: '产品A',
|
||||
description: '描述A',
|
||||
category: '企业软件',
|
||||
features: ['功能A1'],
|
||||
benefits: ['价值A1'],
|
||||
},
|
||||
];
|
||||
|
||||
useProducts.mockReturnValue({
|
||||
products: mockProducts,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ProductsSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('企业软件')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should display product features', async () => {
|
||||
const mockProducts = [
|
||||
{
|
||||
id: '1',
|
||||
title: '产品A',
|
||||
description: '描述A',
|
||||
category: '软件',
|
||||
features: ['智能分析', '实时监控', '自动化报告'],
|
||||
benefits: ['提高效率'],
|
||||
},
|
||||
];
|
||||
|
||||
useProducts.mockReturnValue({
|
||||
products: mockProducts,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ProductsSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('智能分析')).toBeInTheDocument();
|
||||
expect(screen.getByText('实时监控')).toBeInTheDocument();
|
||||
expect(screen.getByText('自动化报告')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should display product benefits', async () => {
|
||||
const mockProducts = [
|
||||
{
|
||||
id: '1',
|
||||
title: '产品A',
|
||||
description: '描述A',
|
||||
category: '软件',
|
||||
features: ['功能A1'],
|
||||
benefits: ['降低成本', '提高效率', '增强竞争力'],
|
||||
},
|
||||
];
|
||||
|
||||
useProducts.mockReturnValue({
|
||||
products: mockProducts,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ProductsSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('降低成本')).toBeInTheDocument();
|
||||
expect(screen.getByText('提高效率')).toBeInTheDocument();
|
||||
expect(screen.getByText('增强竞争力')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Product Filtering', () => {
|
||||
it('should filter products by featured products config', async () => {
|
||||
const mockProducts = [
|
||||
{
|
||||
id: '1',
|
||||
title: '产品A',
|
||||
description: '描述A',
|
||||
category: '软件',
|
||||
features: ['功能A1'],
|
||||
benefits: ['价值A1'],
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '产品B',
|
||||
description: '描述B',
|
||||
category: '硬件',
|
||||
features: ['功能B1'],
|
||||
benefits: ['价值B1'],
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: '产品C',
|
||||
description: '描述C',
|
||||
category: '服务',
|
||||
features: ['功能C1'],
|
||||
benefits: ['价值C1'],
|
||||
},
|
||||
];
|
||||
|
||||
useProducts.mockReturnValue({
|
||||
products: mockProducts,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ProductsSection config={{ featuredProducts: ['1', '3'] }} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('产品A')).toBeInTheDocument();
|
||||
expect(screen.getByText('产品C')).toBeInTheDocument();
|
||||
expect(screen.queryByText('产品B')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should show all products when no featured products config is provided', async () => {
|
||||
const mockProducts = [
|
||||
{
|
||||
id: '1',
|
||||
title: '产品A',
|
||||
description: '描述A',
|
||||
category: '软件',
|
||||
features: ['功能A1'],
|
||||
benefits: ['价值A1'],
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '产品B',
|
||||
description: '描述B',
|
||||
category: '硬件',
|
||||
features: ['功能B1'],
|
||||
benefits: ['价值B1'],
|
||||
},
|
||||
];
|
||||
|
||||
useProducts.mockReturnValue({
|
||||
products: mockProducts,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ProductsSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('产品A')).toBeInTheDocument();
|
||||
expect(screen.getByText('产品B')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Pricing Display', () => {
|
||||
it('should display pricing when showPricing is enabled', async () => {
|
||||
const mockProducts = [
|
||||
{
|
||||
id: '1',
|
||||
title: '产品A',
|
||||
description: '描述A',
|
||||
category: '软件',
|
||||
features: ['功能A1'],
|
||||
benefits: ['价值A1'],
|
||||
pricing: {
|
||||
basic: '基础版：¥999/月',
|
||||
pro: '专业版：¥1999/月',
|
||||
enterprise: '企业版：联系销售',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
useProducts.mockReturnValue({
|
||||
products: mockProducts,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ProductsSection config={{ showPricing: true }} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('价格方案')).toBeInTheDocument();
|
||||
expect(screen.getByText('基础版：¥999/月')).toBeInTheDocument();
|
||||
expect(screen.getByText('专业版：¥1999/月')).toBeInTheDocument();
|
||||
expect(screen.getByText('企业版：联系销售')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should not display pricing when showPricing is disabled', async () => {
|
||||
const mockProducts = [
|
||||
{
|
||||
id: '1',
|
||||
title: '产品A',
|
||||
description: '描述A',
|
||||
category: '软件',
|
||||
features: ['功能A1'],
|
||||
benefits: ['价值A1'],
|
||||
pricing: {
|
||||
basic: '基础版：¥999/月',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
useProducts.mockReturnValue({
|
||||
products: mockProducts,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ProductsSection config={{ showPricing: false }} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByText('价格方案')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('基础版：¥999/月')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Navigation', () => {
|
||||
it('should link to product detail pages', async () => {
|
||||
const mockProducts = [
|
||||
{
|
||||
id: '1',
|
||||
title: '产品A',
|
||||
description: '描述A',
|
||||
category: '软件',
|
||||
features: ['功能A1'],
|
||||
benefits: ['价值A1'],
|
||||
},
|
||||
];
|
||||
|
||||
useProducts.mockReturnValue({
|
||||
products: mockProducts,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ProductsSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
const productLink = screen.getByRole('link', { name: /产品A/ });
|
||||
expect(productLink).toHaveAttribute('href', '/products/1');
|
||||
});
|
||||
});
|
||||
|
||||
it('should link to contact page for custom solutions', async () => {
|
||||
const mockProducts = [
|
||||
{
|
||||
id: '1',
|
||||
title: '产品A',
|
||||
description: '描述A',
|
||||
category: '软件',
|
||||
features: ['功能A1'],
|
||||
benefits: ['价值A1'],
|
||||
},
|
||||
];
|
||||
|
||||
useProducts.mockReturnValue({
|
||||
products: mockProducts,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ProductsSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
const contactLink = screen.getByRole('link', { name: /联系我们/ });
|
||||
expect(contactLink).toHaveAttribute('href', '/contact');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should maintain accessibility with dynamic data', async () => {
|
||||
const mockProducts = [
|
||||
{
|
||||
id: '1',
|
||||
title: '产品A',
|
||||
description: '描述A',
|
||||
category: '软件',
|
||||
features: ['功能A1'],
|
||||
benefits: ['价值A1'],
|
||||
},
|
||||
];
|
||||
|
||||
useProducts.mockReturnValue({
|
||||
products: mockProducts,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ProductsSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
const section = screen.getByRole('region');
|
||||
expect(section).toBeInTheDocument();
|
||||
expect(section).toHaveAttribute('aria-labelledby', 'products-heading');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -8,7 +8,7 @@ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/com
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { ArrowRight, Check, TrendingUp } from 'lucide-react';
|
||||
import { PRODUCTS } from '@/lib/constants';
|
||||
import { useProducts } from '@/hooks/use-products';
|
||||
|
||||
interface ProductsConfig {
|
||||
enabled?: boolean;
|
||||
@@ -23,13 +23,41 @@ interface ProductsSectionProps {
|
||||
export function ProductsSection({ config }: ProductsSectionProps) {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
const { products, loading, error } = useProducts();
|
||||
|
||||
const filteredProducts = useMemo(() => {
|
||||
if (!config?.featuredProducts || config.featuredProducts.length === 0) {
|
||||
return PRODUCTS;
|
||||
if (!products || products.length === 0) {
|
||||
return [];
|
||||
}
|
||||
return PRODUCTS.filter(product => config.featuredProducts?.includes(product.id));
|
||||
}, [config]);
|
||||
if (!config?.featuredProducts || config.featuredProducts.length === 0) {
|
||||
return products;
|
||||
}
|
||||
return products.filter(product => config.featuredProducts?.includes(product.id));
|
||||
}, [products, config]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<section id="products" role="region" aria-labelledby="products-heading" className="py-24 bg-[#F5F7FA] relative overflow-hidden">
|
||||
<div className="container-wide relative z-10">
|
||||
<div className="text-center">
|
||||
<p className="text-lg text-[#5C5C5C]">加载中...</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<section id="products" role="region" aria-labelledby="products-heading" className="py-24 bg-[#F5F7FA] relative overflow-hidden">
|
||||
<div className="container-wide relative z-10">
|
||||
<div className="text-center">
|
||||
<p className="text-lg text-red-600">加载产品信息失败，请稍后重试</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section id="products" role="region" aria-labelledby="products-heading" className="py-24 bg-[#F5F7FA] relative overflow-hidden" ref={ref}>
|
||||
@@ -50,80 +78,86 @@ export function ProductsSection({ config }: ProductsSectionProps) {
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{filteredProducts.map((product, idx) => (
|
||||
<motion.div
|
||||
key={product.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.1 + idx * 0.1 }}
|
||||
>
|
||||
<Link href={`/products/${product.id}`}>
|
||||
<Card className="h-full flex flex-col group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C] transition-colors">
|
||||
<CardHeader>
|
||||
<Badge variant="secondary" className="w-fit mb-3">
|
||||
{product.category}
|
||||
</Badge>
|
||||
<CardTitle>{product.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-1 flex flex-col">
|
||||
<CardDescription className="text-base leading-relaxed mb-4 flex-1">
|
||||
{product.description}
|
||||
</CardDescription>
|
||||
|
||||
<div className="mb-4">
|
||||
<p className="text-sm font-medium text-[#1C1C1C] mb-2">核心功能</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{product.features.slice(0, 4).map((feature, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="inline-flex items-center text-xs px-2 py-1 bg-[#FAFAFA] text-[#3D3D3D] rounded border border-[#E5E5E5]"
|
||||
>
|
||||
<Check className="w-3 h-3 mr-1 text-[#C41E3A]" />
|
||||
{feature}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<p className="text-sm font-medium text-[#1C1C1C] mb-2 flex items-center">
|
||||
<TrendingUp className="w-4 h-4 mr-1 text-[#C41E3A]" />
|
||||
核心价值
|
||||
</p>
|
||||
<ul className="space-y-1">
|
||||
{product.benefits.map((benefit, idx) => (
|
||||
<li key={idx} className="text-xs text-[#5C5C5C] flex items-start">
|
||||
<span className="text-[#C41E3A] mr-1.5">•</span>
|
||||
{benefit}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{config?.showPricing && product.pricing && (
|
||||
<div className="mb-4 p-3 bg-[#F5F7FA] rounded-lg">
|
||||
<p className="text-sm font-medium text-[#1C1C1C] mb-2">价格方案</p>
|
||||
<div className="space-y-1">
|
||||
{Object.entries(product.pricing).map(([key, value]) => (
|
||||
<p key={key} className="text-xs text-[#5C5C5C]">
|
||||
{value}
|
||||
</p>
|
||||
{filteredProducts.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{filteredProducts.map((product, idx) => (
|
||||
<motion.div
|
||||
key={product.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.1 + idx * 0.1 }}
|
||||
>
|
||||
<Link href={`/products/${product.id}`}>
|
||||
<Card className="h-full flex flex-col group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C] transition-colors">
|
||||
<CardHeader>
|
||||
<Badge variant="secondary" className="w-fit mb-3">
|
||||
{product.category}
|
||||
</Badge>
|
||||
<CardTitle>{product.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-1 flex flex-col">
|
||||
<CardDescription className="text-base leading-relaxed mb-4 flex-1">
|
||||
{product.description}
|
||||
</CardDescription>
|
||||
|
||||
<div className="mb-4">
|
||||
<p className="text-sm font-medium text-[#1C1C1C] mb-2">核心功能</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{product.features.slice(0, 4).map((feature, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="inline-flex items-center text-xs px-2 py-1 bg-[#FAFAFA] text-[#3D3D3D] rounded border border-[#E5E5E5]"
|
||||
>
|
||||
<Check className="w-3 h-3 mr-1 text-[#C41E3A]" />
|
||||
{feature}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button variant="outline" className="w-full mt-auto group-hover:bg-[#A01830] group-hover:text-white group-hover:border-[#A01830] transition-colors">
|
||||
了解详情
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<p className="text-sm font-medium text-[#1C1C1C] mb-2 flex items-center">
|
||||
<TrendingUp className="w-4 h-4 mr-1 text-[#C41E3A]" />
|
||||
核心价值
|
||||
</p>
|
||||
<ul className="space-y-1">
|
||||
{product.benefits.map((benefit, idx) => (
|
||||
<li key={idx} className="text-xs text-[#5C5C5C] flex items-start">
|
||||
<span className="text-[#C41E3A] mr-1.5">•</span>
|
||||
{benefit}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{config?.showPricing && product.pricing && (
|
||||
<div className="mb-4 p-3 bg-[#F5F7FA] rounded-lg">
|
||||
<p className="text-sm font-medium text-[#1C1C1C] mb-2">价格方案</p>
|
||||
<div className="space-y-1">
|
||||
{Object.entries(product.pricing).map(([key, value]) => (
|
||||
<p key={key} className="text-xs text-[#5C5C5C]">
|
||||
{value}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button variant="outline" className="w-full mt-auto group-hover:bg-[#A01830] group-hover:text-white group-hover:border-[#A01830] transition-colors">
|
||||
了解详情
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-lg text-[#5C5C5C]">暂无产品信息</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
|
||||
@@ -0,0 +1,347 @@
|
||||
import { describe, it, expect, beforeEach, afterEach, jest } from '@jest/globals';
|
||||
import { render, screen, waitFor } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom';
|
||||
import { ServicesSection } from './services-section';
|
||||
|
||||
jest.mock('framer-motion', () => ({
|
||||
motion: {
|
||||
div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
|
||||
},
|
||||
useInView: () => true,
|
||||
}));
|
||||
|
||||
jest.mock('next/link', () => {
|
||||
return ({ children, href }: any) => <a href={href}>{children}</a>;
|
||||
});
|
||||
|
||||
jest.mock('@/hooks/use-services', () => ({
|
||||
useServices: jest.fn(),
|
||||
}));
|
||||
|
||||
const { useServices } = require('@/hooks/use-services');
|
||||
|
||||
describe('ServicesSection Integration', () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.restoreAllMocks();
|
||||
});
|
||||
|
||||
describe('Data Loading States', () => {
|
||||
it('should show loading state when data is loading', () => {
|
||||
useServices.mockReturnValue({
|
||||
services: [],
|
||||
loading: true,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ServicesSection />);
|
||||
|
||||
expect(screen.getByText('加载中...')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render services when data is loaded successfully', async () => {
|
||||
const mockServices = [
|
||||
{
|
||||
id: '1',
|
||||
title: '测试服务1',
|
||||
description: '这是一个测试服务',
|
||||
icon: 'Code',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '测试服务2',
|
||||
description: '这是另一个测试服务',
|
||||
icon: 'Cloud',
|
||||
},
|
||||
];
|
||||
|
||||
useServices.mockReturnValue({
|
||||
services: mockServices,
|
||||
loading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ServicesSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('测试服务1')).toBeInTheDocument();
|
||||
expect(screen.getByText('测试服务2')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should show error message when data loading fails', async () => {
|
||||
useServices.mockReturnValue({
|
||||
services: [],
|
||||
loading: false,
|
||||
error: new Error('Failed to load services'),
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ServicesSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('加载服务信息失败，请稍后重试')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should show empty state when no services are available', async () => {
|
||||
useServices.mockReturnValue({
|
||||
services: [],
|
||||
loading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ServicesSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('暂无服务信息')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Service Display', () => {
|
||||
it('should render all services from API', async () => {
|
||||
const mockServices = [
|
||||
{
|
||||
id: '1',
|
||||
title: '服务A',
|
||||
description: '描述A',
|
||||
icon: 'Code',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '服务B',
|
||||
description: '描述B',
|
||||
icon: 'Cloud',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: '服务C',
|
||||
description: '描述C',
|
||||
icon: 'BarChart3',
|
||||
},
|
||||
];
|
||||
|
||||
useServices.mockReturnValue({
|
||||
services: mockServices,
|
||||
loading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ServicesSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('服务A')).toBeInTheDocument();
|
||||
expect(screen.getByText('服务B')).toBeInTheDocument();
|
||||
expect(screen.getByText('服务C')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should display service descriptions', async () => {
|
||||
const mockServices = [
|
||||
{
|
||||
id: '1',
|
||||
title: '服务A',
|
||||
description: '这是一个专业的软件开发服务',
|
||||
icon: 'Code',
|
||||
},
|
||||
];
|
||||
|
||||
useServices.mockReturnValue({
|
||||
services: mockServices,
|
||||
loading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ServicesSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('这是一个专业的软件开发服务')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should display service icons', async () => {
|
||||
const mockServices = [
|
||||
{
|
||||
id: '1',
|
||||
title: '服务A',
|
||||
description: '描述A',
|
||||
icon: 'Code',
|
||||
},
|
||||
];
|
||||
|
||||
useServices.mockReturnValue({
|
||||
services: mockServices,
|
||||
loading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ServicesSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
const icons = document.querySelectorAll('svg');
|
||||
expect(icons.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Service Filtering', () => {
|
||||
it('should filter services by items config', async () => {
|
||||
const mockServices = [
|
||||
{
|
||||
id: '1',
|
||||
title: '服务A',
|
||||
description: '描述A',
|
||||
icon: 'Code',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '服务B',
|
||||
description: '描述B',
|
||||
icon: 'Cloud',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: '服务C',
|
||||
description: '描述C',
|
||||
icon: 'BarChart3',
|
||||
},
|
||||
];
|
||||
|
||||
useServices.mockReturnValue({
|
||||
services: mockServices,
|
||||
loading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ServicesSection config={{ items: ['1', '3'] }} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('服务A')).toBeInTheDocument();
|
||||
expect(screen.getByText('服务C')).toBeInTheDocument();
|
||||
expect(screen.queryByText('服务B')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should show all services when no items config is provided', async () => {
|
||||
const mockServices = [
|
||||
{
|
||||
id: '1',
|
||||
title: '服务A',
|
||||
description: '描述A',
|
||||
icon: 'Code',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '服务B',
|
||||
description: '描述B',
|
||||
icon: 'Cloud',
|
||||
},
|
||||
];
|
||||
|
||||
useServices.mockReturnValue({
|
||||
services: mockServices,
|
||||
loading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ServicesSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('服务A')).toBeInTheDocument();
|
||||
expect(screen.getByText('服务B')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Navigation', () => {
|
||||
it('should link to service detail pages', async () => {
|
||||
const mockServices = [
|
||||
{
|
||||
id: '1',
|
||||
title: '服务A',
|
||||
description: '描述A',
|
||||
icon: 'Code',
|
||||
},
|
||||
];
|
||||
|
||||
useServices.mockReturnValue({
|
||||
services: mockServices,
|
||||
loading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ServicesSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
const serviceLink = screen.getByRole('link', { name: /服务A/ });
|
||||
expect(serviceLink).toHaveAttribute('href', '/services/1');
|
||||
});
|
||||
});
|
||||
|
||||
it('should link to all services page', async () => {
|
||||
const mockServices = [
|
||||
{
|
||||
id: '1',
|
||||
title: '服务A',
|
||||
description: '描述A',
|
||||
icon: 'Code',
|
||||
},
|
||||
];
|
||||
|
||||
useServices.mockReturnValue({
|
||||
services: mockServices,
|
||||
loading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ServicesSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
const allServicesLink = screen.getByRole('link', { name: /查看全部服务/ });
|
||||
expect(allServicesLink).toHaveAttribute('href', '/services');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should maintain accessibility with dynamic data', async () => {
|
||||
const mockServices = [
|
||||
{
|
||||
id: '1',
|
||||
title: '服务A',
|
||||
description: '描述A',
|
||||
icon: 'Code',
|
||||
},
|
||||
];
|
||||
|
||||
useServices.mockReturnValue({
|
||||
services: mockServices,
|
||||
loading: false,
|
||||
error: null,
|
||||
refetch: jest.fn(),
|
||||
});
|
||||
|
||||
render(<ServicesSection />);
|
||||
|
||||
await waitFor(() => {
|
||||
const section = screen.getByRole('region');
|
||||
expect(section).toBeInTheDocument();
|
||||
expect(section).toHaveAttribute('aria-labelledby', 'services-heading');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -7,7 +7,7 @@ import Link from 'next/link';
|
||||
import { Code, Cloud, BarChart3, Shield, ArrowRight } from 'lucide-react';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { SERVICES } from '@/lib/constants';
|
||||
import { useServices } from '@/hooks/use-services';
|
||||
|
||||
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
|
||||
Code,
|
||||
@@ -28,13 +28,41 @@ interface ServicesSectionProps {
|
||||
export function ServicesSection({ config }: ServicesSectionProps) {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
const { services, loading, error } = useServices();
|
||||
|
||||
const filteredServices = useMemo(() => {
|
||||
if (!config?.items || config.items.length === 0) {
|
||||
return SERVICES;
|
||||
if (!services || services.length === 0) {
|
||||
return [];
|
||||
}
|
||||
return SERVICES.filter(service => config.items?.includes(service.id));
|
||||
}, [config]);
|
||||
if (!config?.items || config.items.length === 0) {
|
||||
return services;
|
||||
}
|
||||
return services.filter(service => config.items?.includes(service.id));
|
||||
}, [services, config]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<section id="services" aria-labelledby="services-heading" className="py-24 bg-white relative overflow-hidden" ref={ref}>
|
||||
<div className="container-wide relative z-10">
|
||||
<div className="text-center">
|
||||
<p className="text-lg text-[#5C5C5C]">加载中...</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<section id="services" aria-labelledby="services-heading" className="py-24 bg-white relative overflow-hidden" ref={ref}>
|
||||
<div className="container-wide relative z-10">
|
||||
<div className="text-center">
|
||||
<p className="text-lg text-red-600">加载服务信息失败，请稍后重试</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section id="services" aria-labelledby="services-heading" className="py-24 bg-white relative overflow-hidden" ref={ref}>
|
||||
@@ -56,36 +84,42 @@ export function ServicesSection({ config }: ServicesSectionProps) {
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{filteredServices.map((service, index) => {
|
||||
const Icon = iconMap[service.icon];
|
||||
return (
|
||||
<motion.div
|
||||
key={service.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
>
|
||||
<Link href={`/services/${service.id}`}>
|
||||
<Card className="p-6 h-full group cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A] transition-colors">
|
||||
<CardContent className="p-0">
|
||||
<div className="w-12 h-12 rounded-xl bg-[#F5F5F5] flex items-center justify-center mb-4 group-hover:bg-[#C41E3A] transition-all duration-300">
|
||||
{Icon && <Icon className="w-6 h-6 text-[#1C1C1C] group-hover:text-white transition-colors" />}
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3 group-hover:text-[#C41E3A] transition-colors">{service.title}</h3>
|
||||
<p className="text-[#5C5C5C] text-sm leading-relaxed">{service.description}</p>
|
||||
<div className="mt-4 flex items-center text-[#C41E3A] text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
了解详情
|
||||
<ArrowRight className="ml-1 w-4 h-4" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{filteredServices.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{filteredServices.map((service, index) => {
|
||||
const Icon = iconMap[service.icon];
|
||||
return (
|
||||
<motion.div
|
||||
key={service.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
>
|
||||
<Link href={`/services/${service.id}`}>
|
||||
<Card className="p-6 h-full group cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A] transition-colors">
|
||||
<CardContent className="p-0">
|
||||
<div className="w-12 h-12 rounded-xl bg-[#F5F5F5] flex items-center justify-center mb-4 group-hover:bg-[#C41E3A] transition-all duration-300">
|
||||
{Icon && <Icon className="w-6 h-6 text-[#1C1C1C] group-hover:text-white transition-colors" />}
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3 group-hover:text-[#C41E3A] transition-colors">{service.title}</h3>
|
||||
<p className="text-[#5C5C5C] text-sm leading-relaxed">{service.description}</p>
|
||||
<div className="mt-4 flex items-center text-[#C41E3A] text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
了解详情
|
||||
<ArrowRight className="ml-1 w-4 h-4" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-lg text-[#5C5C5C]">暂无服务信息</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
|
||||
Reference in New Issue
Block a user