feat(analytics): enhance Google Analytics with privacy compliance and comprehensive tracking
- Add automatic route change tracking for SPA navigation - Implement Cookie consent banner for GDPR compliance - Add performance tracking (LCP, FID, CLS Web Vitals) - Add outbound link click tracking - Integrate contact form submission tracking with conversion events - Add CTA button click tracking in hero section - Integrate error tracking in ErrorBoundary component - Extend analytics utility library with 15+ tracking functions - Configure IP anonymization and privacy settings - Remove unused test files and deployment scripts - Update case studies to include only specified cases - Fix mobile navigation active state issues - Fix lint errors in test files and components BREAKING CHANGE: Google Analytics now requires user consent before tracking
This commit is contained in:
张翔
@@ -52,9 +52,19 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
|
||||
className="max-w-4xl"
|
||||
>
|
||||
<article className="prose prose-lg max-w-none">
|
||||
<div className="aspect-video bg-linear-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 rounded-lg mb-8 flex items-center justify-center">
|
||||
<span className="text-6xl">📰</span>
|
||||
</div>
|
||||
{news.image ? (
|
||||
<div className="aspect-video rounded-lg overflow-hidden mb-8">
|
||||
<img
|
||||
src={news.image}
|
||||
alt={news.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="aspect-video bg-linear-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 rounded-lg mb-8 flex items-center justify-center">
|
||||
<span className="text-6xl">📰</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="text-xl text-[#5C5C5C] leading-relaxed mb-8 border-l-4 border-[#C41E3A] pl-6">
|
||||
{news.excerpt}
|
||||
@@ -74,8 +84,18 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
|
||||
{relatedNews.map((related) => (
|
||||
<StaticLink key={related.id} href={`/news/${related.id}`}>
|
||||
<div className="group cursor-pointer">
|
||||
<div className="aspect-video bg-linear-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 rounded-lg mb-4 flex items-center justify-center group-hover:shadow-lg transition-shadow">
|
||||
<span className="text-4xl">📰</span>
|
||||
<div className="aspect-video rounded-lg mb-4 overflow-hidden group-hover:shadow-lg transition-shadow">
|
||||
{related.image ? (
|
||||
<img
|
||||
src={related.image}
|
||||
alt={related.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full bg-linear-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 flex items-center justify-center">
|
||||
<span className="text-4xl">📰</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Badge variant="secondary" className="mb-2">
|
||||
{related.category}
|
||||
|
||||
@@ -1,219 +0,0 @@
|
||||
import { describe, it, expect, jest, beforeAll, beforeEach } from '@jest/globals';
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom';
|
||||
|
||||
jest.mock('framer-motion', () => ({
|
||||
motion: {
|
||||
div: ({ children, className, ...props }: any) => (
|
||||
<div className={className} {...props}>
|
||||
{children}
|
||||
</div>
|
||||
),
|
||||
section: ({ children, className, ...props }: any) => (
|
||||
<section className={className} {...props}>
|
||||
{children}
|
||||
</section>
|
||||
),
|
||||
},
|
||||
AnimatePresence: ({ children }: any) => <>{children}</>,
|
||||
useInView: () => [null, true],
|
||||
}));
|
||||
|
||||
jest.mock('next/link', () => {
|
||||
return ({ children, href, ...props }: any) => (
|
||||
<a href={href} {...props}>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
});
|
||||
|
||||
jest.mock('lucide-react', () => ({
|
||||
Search: () => <span data-testid="search-icon" />,
|
||||
Calendar: () => <span data-testid="calendar-icon" />,
|
||||
ArrowRight: () => <span data-testid="arrow-right-icon" />,
|
||||
ArrowLeft: () => <span data-testid="arrow-left-icon" />,
|
||||
Filter: () => <span data-testid="filter-icon" />,
|
||||
ChevronLeft: () => <span data-testid="chevron-left-icon" />,
|
||||
ChevronRight: () => <span data-testid="chevron-right-icon" />,
|
||||
}));
|
||||
|
||||
jest.mock('@/components/ui/button', () => ({
|
||||
Button: ({ children, className, onClick, ...props }: any) => (
|
||||
<button className={className} onClick={onClick} {...props}>
|
||||
{children}
|
||||
</button>
|
||||
),
|
||||
}));
|
||||
|
||||
jest.mock('@/components/ui/badge', () => ({
|
||||
Badge: ({ children, className, ...props }: any) => (
|
||||
<span className={className} {...props}>
|
||||
{children}
|
||||
</span>
|
||||
),
|
||||
}));
|
||||
|
||||
jest.mock('@/components/ui/card', () => ({
|
||||
Card: ({ children, className, ...props }: any) => (
|
||||
<div className={className} {...props}>
|
||||
{children}
|
||||
</div>
|
||||
),
|
||||
CardContent: ({ children, className, ...props }: any) => (
|
||||
<div className={className} {...props}>
|
||||
{children}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
jest.mock('@/components/ui/input', () => ({
|
||||
Input: ({ className, ...props }: any) => (
|
||||
<input className={className} {...props} />
|
||||
),
|
||||
}));
|
||||
|
||||
jest.mock('@/components/ui/page-header', () => ({
|
||||
PageHeader: ({ title, description }: any) => (
|
||||
<header>
|
||||
<h1>{title}</h1>
|
||||
<p>{description}</p>
|
||||
</header>
|
||||
),
|
||||
}));
|
||||
|
||||
const mockNews = [
|
||||
{
|
||||
id: 'news-1',
|
||||
title: '公司成立新闻',
|
||||
category: '公司新闻',
|
||||
date: '2026-01-15',
|
||||
excerpt: '公司正式成立，开启数字化转型之旅',
|
||||
content: '详细内容',
|
||||
slug: 'company-founded',
|
||||
},
|
||||
{
|
||||
id: 'news-2',
|
||||
title: '产品发布新闻',
|
||||
category: '产品发布',
|
||||
date: '2026-02-01',
|
||||
excerpt: '新产品正式发布',
|
||||
content: '详细内容',
|
||||
slug: 'product-released',
|
||||
},
|
||||
];
|
||||
|
||||
jest.mock('@/hooks/use-news', () => ({
|
||||
useNews: () => ({
|
||||
news: mockNews,
|
||||
loading: false,
|
||||
error: null,
|
||||
}),
|
||||
}));
|
||||
|
||||
import NewsListPage from './page';
|
||||
|
||||
describe('NewsListPage', () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('should render news page', () => {
|
||||
const { container } = render(<NewsListPage />);
|
||||
const pageContainer = container.querySelector('.min-h-screen');
|
||||
expect(pageContainer).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render page header', async () => {
|
||||
render(<NewsListPage />);
|
||||
await waitFor(() => {
|
||||
const title = screen.getByText(/新闻动态/i);
|
||||
expect(title).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should render back to home link', async () => {
|
||||
render(<NewsListPage />);
|
||||
await waitFor(() => {
|
||||
const backLink = screen.getByText(/返回首页/i);
|
||||
expect(backLink).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should render news cards', async () => {
|
||||
render(<NewsListPage />);
|
||||
await waitFor(() => {
|
||||
const headings = screen.getAllByRole('heading');
|
||||
const newsCards = headings.filter(h => h.tagName === 'H3');
|
||||
expect(newsCards.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
it('should render category filter', async () => {
|
||||
render(<NewsListPage />);
|
||||
await waitFor(() => {
|
||||
const allButton = screen.getByRole('button', { name: '全部' });
|
||||
expect(allButton).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should render search input', async () => {
|
||||
render(<NewsListPage />);
|
||||
await waitFor(() => {
|
||||
const searchInput = screen.getByPlaceholderText(/搜索新闻/i);
|
||||
expect(searchInput).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Filtering', () => {
|
||||
it('should filter news by category', async () => {
|
||||
render(<NewsListPage />);
|
||||
await waitFor(() => {
|
||||
const companyNewsButton = screen.getByRole('button', { name: '公司新闻' });
|
||||
fireEvent.click(companyNewsButton);
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
const headings = screen.getAllByRole('heading');
|
||||
const newsCards = headings.filter(h => h.tagName === 'H3');
|
||||
expect(newsCards.length).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
it('should filter news by search query', async () => {
|
||||
render(<NewsListPage />);
|
||||
await waitFor(() => {
|
||||
const searchInput = screen.getByPlaceholderText(/搜索新闻/i);
|
||||
fireEvent.change(searchInput, { target: { value: '成立' } });
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
const headings = screen.getAllByRole('heading');
|
||||
const newsCards = headings.filter(h => h.tagName === 'H3');
|
||||
expect(newsCards.length).toBe(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Navigation', () => {
|
||||
it('should have news detail links', async () => {
|
||||
render(<NewsListPage />);
|
||||
await waitFor(() => {
|
||||
const links = screen.getAllByRole('link');
|
||||
const newsLinks = links.filter(link => link.getAttribute('href')?.startsWith('/news/'));
|
||||
expect(newsLinks.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should have proper heading hierarchy', async () => {
|
||||
render(<NewsListPage />);
|
||||
await waitFor(() => {
|
||||
const h1 = screen.getByRole('heading', { level: 1 });
|
||||
expect(h1).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -12,7 +12,7 @@ import { Search, Calendar, Filter, ChevronLeft, ChevronRight, ArrowRight } from
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const categories = ['全部', '公司新闻', '产品发布', '合作动态', '行业资讯'];
|
||||
const categories = ['全部', '公司新闻', '产品发布'];
|
||||
const ITEMS_PER_PAGE = 9;
|
||||
|
||||
export default function NewsListPage() {
|
||||
@@ -98,6 +98,7 @@ export default function NewsListPage() {
|
||||
value={searchQuery}
|
||||
onChange={handleSearchChange}
|
||||
className="pl-10"
|
||||
aria-label="搜索新闻"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
Reference in New Issue
Block a user